@ciderpress/ui 1.0.0-rc.4 → 1.0.0-rc.6

package/dist/theme/components/openapi/index.ts

@@ -1,5 +1,3 @@
-export { CopyMarkdownButton } from './copy-markdown-button'
-export type { CopyMarkdownButtonProps } from './copy-markdown-button'
 export { OpenAPIOperation } from './operation'
 export type { OpenAPIOperationProps } from './operation'
 export { OpenAPIOverview } from './overview'

package/dist/theme/components/openapi/openapi.css

@@ -5,20 +5,6 @@
  * Uses BEM naming: block__element--modifier.
  */
 
-/* ── Hide Rspress default LLMs copy button on OpenAPI pages ── */
-/* OpenAPI pages use a custom CopyMarkdownButton with build-time rendered markdown */
-:has(.cp-oas-operation) > .rp-llms-container,
-:has(.cp-oas-overview) > .rp-llms-container {
-  display: none;
-}
-
-/* ── Copy markdown button ─────────────────────────────────── */
-.cp-oas-copy-markdown {
-  float: right;
-  margin-top: 8px;
-  margin-bottom: 0;
-}
-
 /* ── Two-column operation layout ───────────────────────────── */
 .cp-oas-operation {
   display: grid;

package/dist/theme/components/shared/icon.tsx

@@ -1,41 +1,125 @@
-import catppuccin from '@iconify-json/catppuccin/icons.json' with { type: 'json' }
-import devicon from '@iconify-json/devicon/icons.json' with { type: 'json' }
-import logos from '@iconify-json/logos/icons.json' with { type: 'json' }
-import materialIconTheme from '@iconify-json/material-icon-theme/icons.json' with { type: 'json' }
-import mdi from '@iconify-json/mdi/icons.json' with { type: 'json' }
-import pixelarticons from '@iconify-json/pixelarticons/icons.json' with { type: 'json' }
-import simpleIcons from '@iconify-json/simple-icons/icons.json' with { type: 'json' }
-import skillIcons from '@iconify-json/skill-icons/icons.json' with { type: 'json' }
-import vscodeIcons from '@iconify-json/vscode-icons/icons.json' with { type: 'json' }
-import { addCollection, Icon } from '@iconify/react'
-
-// Register all icon collections for offline Iconify resolution.
-// `addCollection` is called purely for its side effect of mutating
-// Iconify's internal registry. Holding the return values in a
-// throwaway `const` keeps the call list a single expression statement
-// rather than nine misleading named exports.
-// oxlint-disable-next-line no-unused-vars
-const _iconCollectionsLoaded = [
-  addCollection(cast(pixelarticons)),
-  addCollection(cast(devicon)),
-  addCollection(cast(mdi)),
-  addCollection(cast(simpleIcons)),
-  addCollection(cast(skillIcons)),
-  addCollection(cast(catppuccin)),
-  addCollection(cast(logos)),
-  addCollection(cast(vscodeIcons)),
-  addCollection(cast(materialIconTheme)),
-] as const
-
-export { Icon }
+import { addCollection, Icon as IconifyIcon } from '@iconify/react'
+import type { IconProps } from '@iconify/react'
+import type React from 'react'
+import { useEffect, useState } from 'react'
 
 /**
- * Cast an icon JSON import to the type expected by `addCollection`.
+ * Per-collection lazy loaders keyed by Iconify prefix.
+ *
+ * Each entry is a bare dynamic `import()` so the consuming site's Rsbuild
+ * build emits **one async chunk per collection** instead of folding all nine
+ * `icons.json` files into a single eager ~30MB chunk pulled on every route.
+ * Two consequences fall out of that:
+ *
+ * - **Deployability** — the largest collection (`logos`, ~8MB) stays well
+ *   under per-file host caps (Cloudflare Pages rejects files >25MB), where
+ *   the combined blob failed outright.
+ * - **Performance** — a page only downloads the collections it actually
+ *   references, not the full set on first paint.
+ *
+ * The specifiers are string literals (not computed) so the bundler can
+ * statically resolve every chunk at build time.
+ *
+ * @private
+ */
+const COLLECTION_LOADERS: Record<string, () => Promise<{ readonly default: unknown }>> = {
+  catppuccin: () => import('@iconify-json/catppuccin/icons.json'),
+  devicon: () => import('@iconify-json/devicon/icons.json'),
+  logos: () => import('@iconify-json/logos/icons.json'),
+  'material-icon-theme': () => import('@iconify-json/material-icon-theme/icons.json'),
+  mdi: () => import('@iconify-json/mdi/icons.json'),
+  pixelarticons: () => import('@iconify-json/pixelarticons/icons.json'),
+  'simple-icons': () => import('@iconify-json/simple-icons/icons.json'),
+  'skill-icons': () => import('@iconify-json/skill-icons/icons.json'),
+  'vscode-icons': () => import('@iconify-json/vscode-icons/icons.json'),
+}
+
+/**
+ * Cache of in-flight / settled collection registrations keyed by prefix.
+ * Guarantees each collection's chunk is fetched and merged into Iconify's
+ * registry exactly once, regardless of how many `<Icon>` instances on a
+ * page reference it.
+ *
+ * @private
+ */
+const collectionCache = new Map<string, Promise<void>>()
+
+/**
+ * Offline-registered Iconify icon.
+ *
+ * Renders `@iconify/react`'s `Icon` unchanged, but registers the icon's
+ * collection on demand: the first time a prefix is seen the matching
+ * `@iconify-json` chunk is dynamically imported and merged into Iconify's
+ * registry, then a re-render paints the resolved SVG. Because `IconifyIcon`
+ * reads the live registry on every render, an icon appears as soon as its
+ * collection chunk resolves.
+ *
+ * @param props - Standard `@iconify/react` icon props; `icon` is the
+ *   `prefix:name` identifier (e.g. `devicon:typescript`)
+ * @returns The Iconify icon element
+ */
+export function Icon(props: IconProps): React.ReactElement {
+  const prefix = resolvePrefix(props.icon)
+  const [, markRegistered] = useState(false)
+
+  useEffect(() => {
+    ensureCollection(prefix).then(() => markRegistered(true))
+  }, [prefix])
+
+  return <IconifyIcon {...props} />
+}
+
+/**
+ * Dynamically import and register the collection for a prefix, once.
+ *
+ * Returns the cached registration promise on repeat calls so the chunk is
+ * fetched a single time. Unknown prefixes (no bundled collection) resolve
+ * immediately — `IconifyIcon` falls back to its own resolution for those.
+ *
+ * @private
+ * @param prefix - Iconify collection prefix (e.g. `logos`)
+ * @returns Promise that settles once the collection is registered
+ */
+function ensureCollection(prefix: string): Promise<void> {
+  const cached = collectionCache.get(prefix)
+  if (cached !== undefined) {
+    return cached
+  }
+  const loader = COLLECTION_LOADERS[prefix]
+  if (loader === undefined) {
+    return Promise.resolve()
+  }
+  const registration = loader().then(registerModule)
+  collectionCache.set(prefix, registration)
+  return registration
+}
+
+/**
+ * Merge a dynamically imported `icons.json` module into Iconify's registry.
+ *
+ * @private
+ * @param mod - Module namespace whose `default` export is the collection JSON
+ */
+function registerModule(mod: { readonly default: unknown }): void {
+  addCollection(mod.default as Parameters<typeof addCollection>[0])
+}
+
+/**
+ * Extract the collection prefix from an Iconify identifier. Non-string icon
+ * inputs and identifiers without a `prefix:name` shape yield an empty string,
+ * which `ensureCollection` treats as "nothing to load".
  *
  * @private
- * @param v - Raw icon JSON import
- * @returns Value cast to the addCollection parameter type
+ * @param icon - The `icon` prop passed to `<Icon>`
+ * @returns The collection prefix, or `''` when none can be determined
  */
-function cast(v: unknown): Parameters<typeof addCollection>[0] {
-  return v as Parameters<typeof addCollection>[0]
+function resolvePrefix(icon: IconProps['icon']): string {
+  if (typeof icon !== 'string') {
+    return ''
+  }
+  const parts = icon.split(':')
+  if (parts.length < 2) {
+    return ''
+  }
+  return parts[0]
 }

package/dist/theme/index.tsx

@@ -149,8 +149,6 @@ export type { StepsProps, StepProps } from './components/shared/steps'
 export { Field, FieldGroup } from './components/shared/field'
 export type { FieldProps, FieldGroupProps } from './components/shared/field'
 
-export { CopyMarkdownButton } from './components/openapi'
-export type { CopyMarkdownButtonProps } from './components/openapi'
 export { OpenAPIOperation } from './components/openapi'
 export type { OpenAPIOperationProps } from './components/openapi'
 export { OpenAPIOverview } from './components/openapi'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ciderpress/ui",
-  "version": "1.0.0-rc.4",
+  "version": "1.0.0-rc.6",
   "description": "Rspress plugin, theme components, and styles for ciderpress",
   "keywords": [
     "ciderpress",
@@ -63,7 +63,7 @@
     "react-aria-components": "^1.19.0",
     "ts-morph": "^28.0.0",
     "unist-util-visit": "^5.1.0",
-    "@ciderpress/config": "1.0.0-rc.4",
+    "@ciderpress/config": "1.0.0-rc.5",
     "@ciderpress/theme": "1.0.0-rc.3"
   },
   "devDependencies": {

package/src/theme/components/openapi/index.ts

@@ -1,5 +1,3 @@
-export { CopyMarkdownButton } from './copy-markdown-button'
-export type { CopyMarkdownButtonProps } from './copy-markdown-button'
 export { OpenAPIOperation } from './operation'
 export type { OpenAPIOperationProps } from './operation'
 export { OpenAPIOverview } from './overview'

package/src/theme/components/openapi/openapi.css

@@ -5,20 +5,6 @@
  * Uses BEM naming: block__element--modifier.
  */
 
-/* ── Hide Rspress default LLMs copy button on OpenAPI pages ── */
-/* OpenAPI pages use a custom CopyMarkdownButton with build-time rendered markdown */
-:has(.cp-oas-operation) > .rp-llms-container,
-:has(.cp-oas-overview) > .rp-llms-container {
-  display: none;
-}
-
-/* ── Copy markdown button ─────────────────────────────────── */
-.cp-oas-copy-markdown {
-  float: right;
-  margin-top: 8px;
-  margin-bottom: 0;
-}
-
 /* ── Two-column operation layout ───────────────────────────── */
 .cp-oas-operation {
   display: grid;

package/src/theme/components/shared/icon.tsx

@@ -1,41 +1,125 @@
-import catppuccin from '@iconify-json/catppuccin/icons.json' with { type: 'json' }
-import devicon from '@iconify-json/devicon/icons.json' with { type: 'json' }
-import logos from '@iconify-json/logos/icons.json' with { type: 'json' }
-import materialIconTheme from '@iconify-json/material-icon-theme/icons.json' with { type: 'json' }
-import mdi from '@iconify-json/mdi/icons.json' with { type: 'json' }
-import pixelarticons from '@iconify-json/pixelarticons/icons.json' with { type: 'json' }
-import simpleIcons from '@iconify-json/simple-icons/icons.json' with { type: 'json' }
-import skillIcons from '@iconify-json/skill-icons/icons.json' with { type: 'json' }
-import vscodeIcons from '@iconify-json/vscode-icons/icons.json' with { type: 'json' }
-import { addCollection, Icon } from '@iconify/react'
-
-// Register all icon collections for offline Iconify resolution.
-// `addCollection` is called purely for its side effect of mutating
-// Iconify's internal registry. Holding the return values in a
-// throwaway `const` keeps the call list a single expression statement
-// rather than nine misleading named exports.
-// oxlint-disable-next-line no-unused-vars
-const _iconCollectionsLoaded = [
-  addCollection(cast(pixelarticons)),
-  addCollection(cast(devicon)),
-  addCollection(cast(mdi)),
-  addCollection(cast(simpleIcons)),
-  addCollection(cast(skillIcons)),
-  addCollection(cast(catppuccin)),
-  addCollection(cast(logos)),
-  addCollection(cast(vscodeIcons)),
-  addCollection(cast(materialIconTheme)),
-] as const
-
-export { Icon }
+import { addCollection, Icon as IconifyIcon } from '@iconify/react'
+import type { IconProps } from '@iconify/react'
+import type React from 'react'
+import { useEffect, useState } from 'react'
 
 /**
- * Cast an icon JSON import to the type expected by `addCollection`.
+ * Per-collection lazy loaders keyed by Iconify prefix.
+ *
+ * Each entry is a bare dynamic `import()` so the consuming site's Rsbuild
+ * build emits **one async chunk per collection** instead of folding all nine
+ * `icons.json` files into a single eager ~30MB chunk pulled on every route.
+ * Two consequences fall out of that:
+ *
+ * - **Deployability** — the largest collection (`logos`, ~8MB) stays well
+ *   under per-file host caps (Cloudflare Pages rejects files >25MB), where
+ *   the combined blob failed outright.
+ * - **Performance** — a page only downloads the collections it actually
+ *   references, not the full set on first paint.
+ *
+ * The specifiers are string literals (not computed) so the bundler can
+ * statically resolve every chunk at build time.
+ *
+ * @private
+ */
+const COLLECTION_LOADERS: Record<string, () => Promise<{ readonly default: unknown }>> = {
+  catppuccin: () => import('@iconify-json/catppuccin/icons.json'),
+  devicon: () => import('@iconify-json/devicon/icons.json'),
+  logos: () => import('@iconify-json/logos/icons.json'),
+  'material-icon-theme': () => import('@iconify-json/material-icon-theme/icons.json'),
+  mdi: () => import('@iconify-json/mdi/icons.json'),
+  pixelarticons: () => import('@iconify-json/pixelarticons/icons.json'),
+  'simple-icons': () => import('@iconify-json/simple-icons/icons.json'),
+  'skill-icons': () => import('@iconify-json/skill-icons/icons.json'),
+  'vscode-icons': () => import('@iconify-json/vscode-icons/icons.json'),
+}
+
+/**
+ * Cache of in-flight / settled collection registrations keyed by prefix.
+ * Guarantees each collection's chunk is fetched and merged into Iconify's
+ * registry exactly once, regardless of how many `<Icon>` instances on a
+ * page reference it.
+ *
+ * @private
+ */
+const collectionCache = new Map<string, Promise<void>>()
+
+/**
+ * Offline-registered Iconify icon.
+ *
+ * Renders `@iconify/react`'s `Icon` unchanged, but registers the icon's
+ * collection on demand: the first time a prefix is seen the matching
+ * `@iconify-json` chunk is dynamically imported and merged into Iconify's
+ * registry, then a re-render paints the resolved SVG. Because `IconifyIcon`
+ * reads the live registry on every render, an icon appears as soon as its
+ * collection chunk resolves.
+ *
+ * @param props - Standard `@iconify/react` icon props; `icon` is the
+ *   `prefix:name` identifier (e.g. `devicon:typescript`)
+ * @returns The Iconify icon element
+ */
+export function Icon(props: IconProps): React.ReactElement {
+  const prefix = resolvePrefix(props.icon)
+  const [, markRegistered] = useState(false)
+
+  useEffect(() => {
+    ensureCollection(prefix).then(() => markRegistered(true))
+  }, [prefix])
+
+  return <IconifyIcon {...props} />
+}
+
+/**
+ * Dynamically import and register the collection for a prefix, once.
+ *
+ * Returns the cached registration promise on repeat calls so the chunk is
+ * fetched a single time. Unknown prefixes (no bundled collection) resolve
+ * immediately — `IconifyIcon` falls back to its own resolution for those.
+ *
+ * @private
+ * @param prefix - Iconify collection prefix (e.g. `logos`)
+ * @returns Promise that settles once the collection is registered
+ */
+function ensureCollection(prefix: string): Promise<void> {
+  const cached = collectionCache.get(prefix)
+  if (cached !== undefined) {
+    return cached
+  }
+  const loader = COLLECTION_LOADERS[prefix]
+  if (loader === undefined) {
+    return Promise.resolve()
+  }
+  const registration = loader().then(registerModule)
+  collectionCache.set(prefix, registration)
+  return registration
+}
+
+/**
+ * Merge a dynamically imported `icons.json` module into Iconify's registry.
+ *
+ * @private
+ * @param mod - Module namespace whose `default` export is the collection JSON
+ */
+function registerModule(mod: { readonly default: unknown }): void {
+  addCollection(mod.default as Parameters<typeof addCollection>[0])
+}
+
+/**
+ * Extract the collection prefix from an Iconify identifier. Non-string icon
+ * inputs and identifiers without a `prefix:name` shape yield an empty string,
+ * which `ensureCollection` treats as "nothing to load".
  *
  * @private
- * @param v - Raw icon JSON import
- * @returns Value cast to the addCollection parameter type
+ * @param icon - The `icon` prop passed to `<Icon>`
+ * @returns The collection prefix, or `''` when none can be determined
  */
-function cast(v: unknown): Parameters<typeof addCollection>[0] {
-  return v as Parameters<typeof addCollection>[0]
+function resolvePrefix(icon: IconProps['icon']): string {
+  if (typeof icon !== 'string') {
+    return ''
+  }
+  const parts = icon.split(':')
+  if (parts.length < 2) {
+    return ''
+  }
+  return parts[0]
 }

package/src/theme/index.tsx

@@ -149,8 +149,6 @@ export type { StepsProps, StepProps } from './components/shared/steps'
 export { Field, FieldGroup } from './components/shared/field'
 export type { FieldProps, FieldGroupProps } from './components/shared/field'
 
-export { CopyMarkdownButton } from './components/openapi'
-export type { CopyMarkdownButtonProps } from './components/openapi'
 export { OpenAPIOperation } from './components/openapi'
 export type { OpenAPIOperationProps } from './components/openapi'
 export { OpenAPIOverview } from './components/openapi'

package/dist/theme/components/openapi/copy-markdown-button.tsx

@@ -1,41 +0,0 @@
-import { LlmsCopyButton } from '@rspress/core/theme'
-import type React from 'react'
-import { useCallback } from 'react'
-
-export interface CopyMarkdownButtonProps {
-  /**
-   * Markdown content to copy to the clipboard.
-   */
-  readonly markdown: string
-}
-
-/**
- * Copy Markdown button that overrides Rspress's default copy behavior.
- *
- * Uses the native Clipboard API to copy pre-generated markdown content
- * instead of the raw MDX source.
- *
- * @param props - Props with the markdown string to copy to the clipboard
- * @returns React element with the copy button
- */
-export function CopyMarkdownButton({
-  markdown,
-}: CopyMarkdownButtonProps): React.ReactElement | null {
-  if (import.meta.env.SSG_MD) {
-    return null
-  }
-
-  const handleClick = useCallback(
-    (event: React.MouseEvent<HTMLButtonElement>) => {
-      event.preventDefault()
-      return navigator.clipboard.writeText(markdown).catch(() => null)
-    },
-    [markdown]
-  )
-
-  return (
-    <div className="cp-oas-copy-markdown">
-      <LlmsCopyButton text="Copy Markdown" onClick={handleClick} />
-    </div>
-  )
-}

package/src/theme/components/openapi/copy-markdown-button.tsx

@@ -1,41 +0,0 @@
-import { LlmsCopyButton } from '@rspress/core/theme'
-import type React from 'react'
-import { useCallback } from 'react'
-
-export interface CopyMarkdownButtonProps {
-  /**
-   * Markdown content to copy to the clipboard.
-   */
-  readonly markdown: string
-}
-
-/**
- * Copy Markdown button that overrides Rspress's default copy behavior.
- *
- * Uses the native Clipboard API to copy pre-generated markdown content
- * instead of the raw MDX source.
- *
- * @param props - Props with the markdown string to copy to the clipboard
- * @returns React element with the copy button
- */
-export function CopyMarkdownButton({
-  markdown,
-}: CopyMarkdownButtonProps): React.ReactElement | null {
-  if (import.meta.env.SSG_MD) {
-    return null
-  }
-
-  const handleClick = useCallback(
-    (event: React.MouseEvent<HTMLButtonElement>) => {
-      event.preventDefault()
-      return navigator.clipboard.writeText(markdown).catch(() => null)
-    },
-    [markdown]
-  )
-
-  return (
-    <div className="cp-oas-copy-markdown">
-      <LlmsCopyButton text="Copy Markdown" onClick={handleClick} />
-    </div>
-  )
-}