feat: separate armors

packages/preforged/tools/embed/[embed]/host/_index.tsx

@@ -0,0 +1,54 @@
+import { Box } from '@radix-ui/themes';
+import { useMemo } from 'react';
+import { parse } from 'urlon';
+import { BlitzKitTheme } from '../../../../../../components/BlitzKitTheme';
+import {
+  embedConfigurations,
+  embedRenderers,
+  extractEmbedConfigDefaults,
+} from '../../../../../../constants/embeds';
+import {
+  EmbedState,
+  type EmbedConfig,
+  type ExtractEmbedConfigTypes,
+} from '../../../../../../stores/embedState';
+import { useEmbedStateCurry } from '../../../../../../stores/embedState/utilities';
+
+interface PageProps {
+  embed: keyof typeof embedConfigurations;
+}
+
+export function Page({ embed }: PageProps) {
+  const state = useMemo(() => {
+    const params = new URLSearchParams(window.location.search);
+    const stateRaw = params.get('state');
+    const partialState = stateRaw === null ? {} : parse(stateRaw);
+    const state = {
+      ...extractEmbedConfigDefaults(embedConfigurations[embed]),
+      ...partialState,
+    } as ExtractEmbedConfigTypes<EmbedConfig>;
+
+    return state;
+  }, [embed]);
+
+  return (
+    <EmbedState.Provider data={state}>
+      <Content embed={embed} />
+    </EmbedState.Provider>
+  );
+}
+
+function Content({ embed }: PageProps) {
+  const Renderer = embedRenderers[embed];
+  const { useEmbedState } = useEmbedStateCurry();
+  const width = useEmbedState('width');
+  const height = useEmbedState('height');
+
+  return (
+    <BlitzKitTheme style={{ background: 'transparent' }}>
+      <Box width={`${width}px`} height={`${height}px`} overflow="hidden">
+        <Renderer />
+      </Box>
+    </BlitzKitTheme>
+  );
+}

packages/preforged/tools/embed/[embed]/host/index.astro

@@ -0,0 +1,14 @@
+---
+import { capitalize } from 'lodash-es';
+import EmbedLayout from '../../../../../../layouts/EmbedLayout.astro';
+import type { getStaticPaths } from '../index.astro';
+import { Page } from './_index';
+
+export { getStaticPaths } from '../index.astro';
+---
+
+<title>BlitzKit - {capitalize(Astro.params.embed)} embed</title>
+
+<EmbedLayout>
+  <Page client:only="react" embed={Astro.params.embed} />
+</EmbedLayout>