@jant/core 0.3.43 → 0.3.44

package/src/db/migrations/pg/meta/_journal.json

@@ -120,6 +120,13 @@
       "when": 1776685653392,
       "tag": "0016_familiar_lionheart",
       "breakpoints": true
+    },
+    {
+      "idx": 17,
+      "version": "7",
+      "when": 1776712494794,
+      "tag": "0017_bright_beyonder",
+      "breakpoints": true
     }
   ]
 }

package/src/db/pg/schema.ts

@@ -70,11 +70,15 @@ export const sites = pgTable(
     })
       .notNull()
       .default("active"),
+    provisioningIdempotencyKey: text("provisioning_idempotency_key"),
     createdAt: integer("created_at").notNull(),
     updatedAt: integer("updated_at").notNull(),
   },
   (table) => [
     uniqueIndex("uq_site_key").on(table.key),
+    uniqueIndex("uq_site_provisioning_idempotency_key")
+      .on(table.provisioningIdempotencyKey)
+      .where(sql`${table.provisioningIdempotencyKey} IS NOT NULL`),
     check(
       "chk_site_status",
       sql`${table.status} IN (${sqlTextEnum(SITE_STATUSES)})`,

package/src/db/schema.ts

@@ -60,11 +60,15 @@ export const sites = sqliteTable(
     })
       .notNull()
       .default("active"),
+    provisioningIdempotencyKey: text("provisioning_idempotency_key"),
     createdAt: integer("created_at").notNull(),
     updatedAt: integer("updated_at").notNull(),
   },
   (table) => [
     uniqueIndex("uq_site_key").on(table.key),
+    uniqueIndex("uq_site_provisioning_idempotency_key")
+      .on(table.provisioningIdempotencyKey)
+      .where(sql`${table.provisioningIdempotencyKey} IS NOT NULL`),
     check(
       "chk_site_status",
       sql`${table.status} IN (${sqlTextEnum(SITE_STATUSES)})`,

package/src/lib/icons.ts

@@ -36,3 +36,40 @@ export function getIconSvg(name: string): string | null {
   const svg = (lucideIcons as Record<string, string>)[pascalName];
   return typeof svg === "string" ? svg : null;
 }
+
+/**
+ * Get the inner SVG contents for a Lucide icon (the path children only,
+ * without the outer <svg> wrapper). Used by the icon sprite to build
+ * <symbol> definitions.
+ *
+ * @param name - Kebab-case icon name
+ * @returns Inner SVG markup (e.g. "<path ... />"), or null when unknown
+ *
+ * @example
+ * ```ts
+ * getIconInnerSvg("book-open");
+ * // -> "<path d=\"...\"/><path d=\"...\"/>"
+ * ```
+ */
+export function getIconInnerSvg(name: string): string | null {
+  const svg = getIconSvg(name);
+  if (!svg) return null;
+  // lucide-static output looks like:
+  //   <svg ... viewBox="0 0 24 24" ...><path .../>...<line .../></svg>
+  // Strip the outer <svg ...> and </svg>.
+  const openTagEnd = svg.indexOf(">");
+  const closeTagStart = svg.lastIndexOf("</svg>");
+  if (openTagEnd < 0 || closeTagStart < 0) return null;
+  return svg.slice(openTagEnd + 1, closeTagStart);
+}
+
+/**
+ * Default stroke/fill attributes inherited by <symbol> children when a
+ * lucide icon is referenced via <use>. These mirror the attributes lucide
+ * normally sets on the outer <svg> so the currentColor-based theming keeps
+ * working through <use>.
+ */
+export const LUCIDE_SYMBOL_ATTRS =
+  'fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"';
+
+export const LUCIDE_VIEWBOX = "0 0 24 24";

package/src/routes/api/internal/sites.ts

@@ -33,6 +33,7 @@ const CreateManagedSiteSchema = z.object({
   siteName: z.string().trim().min(1).max(120),
   siteLanguage: z.string().trim().max(35).optional(),
   timeZone: z.string().trim().max(100).optional(),
+  idempotencyKey: z.string().trim().min(1).max(128).optional(),
 });
 
 const ManagedSiteDomainSchema = z.object({

package/src/services/__tests__/site-admin.test.ts

@@ -45,4 +45,89 @@ describe("SiteAdminService", () => {
 
     expect(siteRows).toEqual([{ key: "demo-cloud" }]);
   });
+
+  it("returns the existing site when replayed with the same idempotency key", async () => {
+    const { db } = createTestDatabase();
+    const service = createSiteAdminService(db, sqliteSchemaBundle, "sqlite", {
+      siteResolutionMode: "host-based",
+    });
+
+    const first = await service.createManagedSite({
+      key: "idem-site",
+      primaryHost: "idem-site.example.com",
+      siteName: "Idempotent Site",
+      idempotencyKey: "job_abc",
+    });
+
+    const second = await service.createManagedSite({
+      key: "idem-site",
+      primaryHost: "idem-site.example.com",
+      siteName: "Idempotent Site",
+      idempotencyKey: "job_abc",
+    });
+
+    expect(second.site.id).toBe(first.site.id);
+    expect(second.domain.id).toBe(first.domain.id);
+  });
+
+  it("rejects reuse of an idempotency key with different key or primary host", async () => {
+    const { db } = createTestDatabase();
+    const service = createSiteAdminService(db, sqliteSchemaBundle, "sqlite", {
+      siteResolutionMode: "host-based",
+    });
+
+    await service.createManagedSite({
+      key: "idem-site",
+      primaryHost: "idem-site.example.com",
+      siteName: "Idempotent Site",
+      idempotencyKey: "job_xyz",
+    });
+
+    await expect(
+      service.createManagedSite({
+        key: "other-site",
+        primaryHost: "idem-site.example.com",
+        siteName: "Other Site",
+        idempotencyKey: "job_xyz",
+      }),
+    ).rejects.toEqual(
+      new ConflictError(
+        "Idempotency key was reused with a different site key or primary host.",
+      ),
+    );
+
+    await expect(
+      service.createManagedSite({
+        key: "idem-site",
+        primaryHost: "different-host.example.com",
+        siteName: "Idempotent Site",
+        idempotencyKey: "job_xyz",
+      }),
+    ).rejects.toEqual(
+      new ConflictError(
+        "Idempotency key was reused with a different site key or primary host.",
+      ),
+    );
+  });
+
+  it("treats requests without an idempotency key as independent creations", async () => {
+    const { db } = createTestDatabase();
+    const service = createSiteAdminService(db, sqliteSchemaBundle, "sqlite", {
+      siteResolutionMode: "host-based",
+    });
+
+    await service.createManagedSite({
+      key: "no-idem-site",
+      primaryHost: "no-idem-site.example.com",
+      siteName: "No Idem Site",
+    });
+
+    await expect(
+      service.createManagedSite({
+        key: "no-idem-site",
+        primaryHost: "no-idem-site-2.example.com",
+        siteName: "No Idem Site",
+      }),
+    ).rejects.toEqual(new ConflictError("Site key is already in use."));
+  });
 });

package/src/services/site-admin.ts

@@ -1,4 +1,4 @@
-import { eq, sql } from "drizzle-orm";
+import { and, eq, sql } from "drizzle-orm";
 import {
   executeStatement,
   type Database,
@@ -45,6 +45,13 @@ export interface CreateManagedSiteInput {
   siteName: string;
   siteLanguage?: string | null;
   timeZone?: string | null;
+  /**
+   * Optional caller-supplied idempotency key. When provided, retrying the same
+   * request returns the previously created site instead of a 409 conflict.
+   * Reusing the key with a different `key` or `primaryHost` is rejected as a
+   * client bug.
+   */
+  idempotencyKey?: string | null;
 }
 
 export interface ManagedSiteResult {
@@ -194,6 +201,47 @@ export function createSiteAdminService(
     return `${protocol}//${domain.host}${pathPrefix}`;
   }
 
+  async function loadByIdempotencyKey(
+    targetDb: Database,
+    idempotencyKey: string,
+  ): Promise<ManagedSiteResult | null> {
+    const siteRow = (
+      await targetDb
+        .select()
+        .from(sites)
+        .where(eq(sites.provisioningIdempotencyKey, idempotencyKey))
+        .limit(1)
+    )[0];
+    if (!siteRow) {
+      return null;
+    }
+
+    const domainRow = (
+      await targetDb
+        .select()
+        .from(siteDomains)
+        .where(
+          and(
+            eq(siteDomains.siteId, siteRow.id),
+            eq(siteDomains.kind, "primary"),
+          ),
+        )
+        .limit(1)
+    )[0];
+    if (!domainRow) {
+      // A site row without a primary domain means the original creation aborted
+      // mid-transaction on a dialect without real transactions. Treat as not
+      // found so the caller can retry; the partial unique index will surface a
+      // genuine duplicate.
+      return null;
+    }
+
+    return {
+      site: toSite(siteRow),
+      domain: toSiteDomain(domainRow),
+    };
+  }
+
   async function createWithDatabase(
     targetDb: Database,
     input: CreateManagedSiteInput,
@@ -201,6 +249,22 @@ export function createSiteAdminService(
     const siteKey = input.key.trim();
     const primaryHost = input.primaryHost.trim().toLowerCase();
     const siteName = input.siteName.trim();
+    const idempotencyKey = input.idempotencyKey?.trim() || null;
+
+    if (idempotencyKey) {
+      const existing = await loadByIdempotencyKey(targetDb, idempotencyKey);
+      if (existing) {
+        if (
+          existing.site.key !== siteKey ||
+          existing.domain.host !== primaryHost
+        ) {
+          throw new ConflictError(
+            "Idempotency key was reused with a different site key or primary host.",
+          );
+        }
+        return existing;
+      }
+    }
 
     const existingSite = await targetDb
       .select({ id: sites.id })
@@ -231,6 +295,7 @@ export function createSiteAdminService(
           id: siteId,
           key: siteKey,
           status: "active",
+          provisioningIdempotencyKey: idempotencyKey,
           createdAt: timestamp,
           updatedAt: timestamp,
         })

package/src/styles/ui.css

@@ -2100,6 +2100,10 @@
     width: 30px;
     height: 9px;
     margin: 4rem 0;
+    /* Center over the post-body column. On desktop the body column is
+       `var(--layout-content-width)` (55%). Between 760-1024px it switches
+       to `min(100%, 35rem)` via preset.css, so the hr must track that
+       same rule — otherwise the glyph drifts left of the content center. */
     margin-left: calc(var(--layout-content-width) / 2 - 15px);
     color: var(--site-feed-divider-color);
     background-color: currentColor;
@@ -2113,6 +2117,14 @@
     mask-size: contain;
   }
 
+  @media (max-width: 1024px) {
+    .site-content hr.feed-divider {
+      /* Match preset.css `min(100%, 35rem)` body-column width so the hr
+         stays visually aligned with the post column at this breakpoint. */
+      margin-left: calc(min(100%, 35rem) / 2 - 15px);
+    }
+  }
+
   .feed-card {
     position: relative;
     padding: 1rem 1.1rem 0.95rem;

package/src/ui/feed/LinkCard.tsx

@@ -14,6 +14,7 @@ import { PostStatusBadges } from "./PostStatusBadges.js";
 import { sanitizeUrl, extractDisplayDomain } from "../../lib/url.js";
 import { MediaGallery } from "../shared/MediaGallery.js";
 import { LinkPreview } from "./LinkPreview.js";
+import { Icon } from "../shared/Icon.js";
 
 export const LinkCard: FC<TimelineCardProps> = ({
   post,
@@ -39,30 +40,12 @@ export const LinkCard: FC<TimelineCardProps> = ({
         target="_blank"
         rel="noopener noreferrer"
       >
-        <svg
-          class="feed-link-domain-icon"
-          xmlns="http://www.w3.org/2000/svg"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke-width="2"
-          stroke="currentColor"
-        >
-          <path d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
-        </svg>
+        <Icon name="link-domain" class="feed-link-domain-icon" />
         <span>{domain}</span>
       </a>
     ) : (
       <div class="feed-link-domain">
-        <svg
-          class="feed-link-domain-icon"
-          xmlns="http://www.w3.org/2000/svg"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke-width="2"
-          stroke="currentColor"
-        >
-          <path d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
-        </svg>
+        <Icon name="link-domain" class="feed-link-domain-icon" />
         <span>{domain}</span>
       </div>
     ));

package/src/ui/feed/LinkPreview.tsx

@@ -6,6 +6,7 @@
  */
 
 import type { FC } from "hono/jsx";
+import { Icon } from "../shared/Icon.js";
 
 interface LinkPreviewProps {
   imageUrl: string;
@@ -41,31 +42,16 @@ export const LinkPreview: FC<LinkPreviewProps> = ({
       <img src={imageUrl} alt="" class="link-preview-image" loading="lazy" />
       {isVideo && (
         <div class="link-preview-play" aria-hidden="true">
-          <svg
-            class="link-preview-play-icon"
-            viewBox="0 0 68 48"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              class="link-preview-play-bg"
-              d="M66.52 7.74c-.78-2.93-2.49-5.41-5.42-6.19C55.79.13 34 0 34 0S12.21.13 6.9 1.55C3.97 2.33 2.27 4.81 1.48 7.74.06 13.05 0 24 0 24s.06 10.95 1.48 16.26c.78 2.93 2.49 5.41 5.42 6.19C12.21 47.87 34 48 34 48s21.79-.13 27.1-1.55c2.93-.78 4.64-3.26 5.42-6.19C67.94 34.95 68 24 68 24s-.06-10.95-1.48-16.26z"
-              fill="rgba(0,0,0,.65)"
-            />
-            <path d="M45 24L27 14v20" fill="#fff" />
-          </svg>
+          <Icon name="link-preview-play" class="link-preview-play-icon" />
         </div>
       )}
       {providerLabel && (
         <span class="link-preview-badge" aria-hidden="true">
           {isVideo && (
-            <svg
+            <Icon
+              name="link-preview-badge-play"
               class="link-preview-badge-icon"
-              viewBox="0 0 16 16"
-              xmlns="http://www.w3.org/2000/svg"
-              fill="currentColor"
-            >
-              <path d="M5.5 3.5v9l7-4.5z" />
-            </svg>
+            />
           )}
           {providerLabel}
         </span>

package/src/ui/feed/PostStatusBadges.tsx

@@ -9,55 +9,21 @@
  */
 
 import type { FC } from "hono/jsx";
+import { Icon } from "../shared/Icon.js";
 
 export const PostStatusBadges: FC = () => {
   return (
     <div class="post-status-badges">
       <span class="post-status-badge post-status-pinned">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="1.75"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        >
-          <line x1="12" x2="12" y1="17" y2="22" />
-          <path d="M5 17h14v-1.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V6h1a2 2 0 0 0 0-4H8a2 2 0 0 0 0 4h1v4.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24Z" />
-        </svg>
+        <Icon name="post-status-pin" />
         Pinned
       </span>
       <span class="post-status-badge post-status-pinned-in-collection">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="1.75"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        >
-          <line x1="12" x2="12" y1="17" y2="22" />
-          <path d="M5 17h14v-1.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V6h1a2 2 0 0 0 0-4H8a2 2 0 0 0 0 4h1v4.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24Z" />
-        </svg>
+        <Icon name="post-status-pin" />
         Pinned
       </span>
       <span class="post-status-badge post-status-private">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="1.75"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        >
-          <path d="M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49" />
-          <path d="M14.084 14.158a3 3 0 0 1-4.242-4.242" />
-          <path d="M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143" />
-          <path d="m2 2 20 20" />
-        </svg>
+        <Icon name="post-status-private" />
         Private
       </span>
     </div>

package/src/ui/layouts/BaseLayout.tsx

@@ -32,6 +32,9 @@ import {
   IS_VITE_DEV,
 } from "../../lib/version.js";
 import { I18nProvider } from "../../i18n/index.js";
+import { resetIconCollector } from "../shared/icon-collector.js";
+import { Icon } from "../shared/Icon.js";
+import { IconSprite } from "../shared/IconSprite.js";
 
 export interface ToastProps {
   message: string;
@@ -78,6 +81,11 @@ export const BaseLayout: FC<PropsWithChildren<BaseLayoutProps>> = ({
   clientBundle,
   children,
 }) => {
+  // Start a fresh icon collection scope for this request. <Icon> usages in
+  // children register names here; <IconSprite> at the end of <body> reads
+  // the collected set and emits the <symbol> definitions once.
+  resetIconCollector();
+
   // Read lang from Hono context if available, otherwise use prop or default
   const resolvedLang = lang ?? (c ? c.get("lang") : "en");
 
@@ -343,47 +351,24 @@ export const BaseLayout: FC<PropsWithChildren<BaseLayoutProps>> = ({
                 data-init="el.closest('[popover]').showPopover(); history.replaceState({}, '', location.pathname); setTimeout(() => { el.classList.add('toast-out'); el.addEventListener('animationend', () => el.remove()) }, 3000)"
               >
                 {toast.type === "error" ? (
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke-width="2"
-                    stroke="currentColor"
-                  >
-                    <circle cx="12" cy="12" r="10" />
-                    <path d="m15 9-6 6M9 9l6 6" />
-                  </svg>
+                  <Icon name="toast-error" />
                 ) : (
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke-width="2"
-                    stroke="currentColor"
-                  >
-                    <circle cx="12" cy="12" r="10" />
-                    <path d="m9 12 2 2 4-4" />
-                  </svg>
+                  <Icon name="toast-success" />
                 )}
                 <span>{toast.message}</span>
                 <button
                   class="toast-close"
                   data-on:click="el.closest('.toast').classList.add('toast-out'); el.closest('.toast').addEventListener('animationend', () => el.closest('.toast').remove())"
                 >
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke-width="2"
-                    stroke="currentColor"
-                  >
-                    <path d="M18 6 6 18M6 6l12 12" />
-                  </svg>
+                  <Icon name="toast-close" />
                 </button>
               </div>
             )}
           </div>
           {customBodyEndHtml && raw(customBodyEndHtml)}
+          {/* Icon sprite: must come after all <Icon> usages so the
+              request-scoped collector has seen every name. */}
+          <IconSprite />
         </body>
       </html>
     </>

package/src/ui/shared/DecorativeQuoteMark.tsx

@@ -1,8 +1,5 @@
 import type { FC } from "hono/jsx";
-import {
-  DECORATIVE_QUOTE_MARK_PATHS,
-  DECORATIVE_QUOTE_MARK_VIEWBOX,
-} from "../../lib/decorative-quote-mark.js";
+import { Icon } from "./Icon.js";
 
 interface DecorativeQuoteMarkProps {
   class?: string;
@@ -22,14 +19,6 @@ export const DecorativeQuoteMark: FC<DecorativeQuoteMarkProps> = ({
     data-direction={direction}
     aria-hidden="true"
   >
-    <svg
-      viewBox={DECORATIVE_QUOTE_MARK_VIEWBOX}
-      role="presentation"
-      focusable="false"
-    >
-      {DECORATIVE_QUOTE_MARK_PATHS.map((path) => (
-        <path fill="currentColor" d={path} />
-      ))}
-    </svg>
+    <Icon name="decorative-quote" />
   </span>
 );

package/src/ui/shared/Icon.tsx

@@ -0,0 +1,60 @@
+/**
+ * <Icon> — sprite-based SVG icon for SSR pages.
+ *
+ * Renders a lightweight <svg><use href="#icon-${name}"/></svg> stub and
+ * registers the icon name with the request-scoped collector so the final
+ * sprite (rendered by <IconSprite>) contains exactly the icons used on
+ * this page.
+ *
+ * Name can refer to any lucide-static icon (kebab-case) or one of the
+ * custom symbols defined in `custom-icons.ts`. Unknown names render an
+ * empty <svg> — the same failure mode as the previous getIconSvg() path.
+ *
+ * Size: outer <svg> width/height in pixels. Defaults to 24 (lucide default).
+ * Pass `class` to add CSS classes, e.g. for sizing via stylesheet instead
+ * of inline width/height.
+ */
+
+import type { FC } from "hono/jsx";
+import { collectIcon } from "./icon-collector.js";
+import { getIconViewBox } from "./custom-icons.js";
+
+export interface IconProps {
+  /** Kebab-case icon name (lucide or custom). */
+  name: string;
+  /** Width/height in px. Omit to size via CSS. */
+  size?: number;
+  /** CSS class for the outer <svg>. */
+  class?: string;
+  /** Accessible label. If set, the icon is not aria-hidden. */
+  "aria-label"?: string;
+  /**
+   * Whether this icon is decorative. Defaults to true (aria-hidden) when
+   * no aria-label is provided.
+   */
+  "aria-hidden"?: boolean | "true" | "false";
+}
+
+export const Icon: FC<IconProps> = ({
+  name,
+  size,
+  class: cls,
+  "aria-label": ariaLabel,
+  "aria-hidden": ariaHidden,
+}) => {
+  collectIcon(name);
+
+  const hidden = ariaHidden ?? (ariaLabel ? undefined : true);
+
+  return (
+    <svg
+      viewBox={getIconViewBox(name)}
+      {...(size !== undefined ? { width: size, height: size } : {})}
+      {...(cls ? { class: cls } : {})}
+      {...(ariaLabel ? { "aria-label": ariaLabel, role: "img" } : {})}
+      {...(hidden ? { "aria-hidden": "true" } : {})}
+    >
+      <use href={`#icon-${name}`} />
+    </svg>
+  );
+};

package/src/ui/shared/IconSprite.tsx

@@ -0,0 +1,57 @@
+/**
+ * <IconSprite> — emits the SVG symbol definitions used by this render.
+ *
+ * Must be rendered AFTER all <Icon> usages in the document (e.g. at the
+ * end of <body>) so the collector has the full set of icon names. Hono
+ * JSX stringifies synchronously in document order, so children declared
+ * earlier in the tree are evaluated before this component.
+ *
+ * <use href="#icon-x"> anywhere in the document resolves correctly even
+ * when the <symbol> definition comes after the reference, since browsers
+ * wire up the references after the full document is parsed.
+ */
+
+import type { FC } from "hono/jsx";
+import { raw } from "hono/html";
+import {
+  getIconInnerSvg,
+  LUCIDE_SYMBOL_ATTRS,
+  LUCIDE_VIEWBOX,
+} from "../../lib/icons.js";
+import { getCollectedIcons } from "./icon-collector.js";
+import { getCustomSymbol } from "./custom-icons.js";
+
+function buildSymbol(name: string): string | null {
+  const custom = getCustomSymbol(name);
+  if (custom) {
+    return `<symbol id="icon-${name}" viewBox="${custom.viewBox}">${custom.inner}</symbol>`;
+  }
+  const inner = getIconInnerSvg(name);
+  if (inner === null) return null;
+  return `<symbol id="icon-${name}" viewBox="${LUCIDE_VIEWBOX}" ${LUCIDE_SYMBOL_ATTRS}>${inner}</symbol>`;
+}
+
+export const IconSprite: FC = () => {
+  const names = Array.from(getCollectedIcons()).sort();
+  const symbols = names
+    .map(buildSymbol)
+    .filter((s): s is string => s !== null)
+    .join("");
+
+  if (!symbols) return null;
+
+  // Hidden from layout and AT; provides the <symbol> definitions only.
+  // Use raw() as a child instead of dangerouslySetInnerHTML because Hono
+  // wraps <svg> with an internal nameSpaceContext child, which makes
+  // dangerouslySetInnerHTML conflict with children and throw.
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      style="display:none"
+      aria-hidden="true"
+      data-icon-sprite
+    >
+      {raw(symbols)}
+    </svg>
+  );
+};