@lostgradient/cinder 0.4.1 → 0.5.0

package/src/components/toast-region/toast-region.examples.json

@@ -7,73 +7,73 @@
       "id": "action-button",
       "title": "Action button",
       "description": "Default action dismisses after firing; keepOpen: true keeps the toast visible after the action runs.",
-      "code": "<script lang=\"ts\">\n  import { useToast } from '@lostgradient/cinder';\n  import { Button } from '@lostgradient/cinder/button';\n  import { ToastRegion } from '@lostgradient/cinder/toast-region';\n  let undoCount = $state(0);\n  let pauseCount = $state(0);\n</script>\n\n<ToastRegion>\n  {#snippet children()}\n    {@const toast = useToast()}\n    <div class=\"example-preview-row\">\n      <Button\n        label=\"Dismiss-after-action\"\n        onclick={() =>\n          toast.show('Item moved to trash.', {\n            variant: 'info',\n            duration: 0,\n            action: {\n              label: 'Undo',\n              onAction: () => (undoCount += 1),\n            },\n          })}\n      />\n      <Button\n        variant=\"secondary\"\n        label=\"Keep open after action\"\n        onclick={() =>\n          toast.show('Syncing in the background…', {\n            variant: 'info',\n            duration: 0,\n            action: {\n              label: 'Pause',\n              keepOpen: true,\n              onAction: () => (pauseCount += 1),\n            },\n          })}\n      />\n    </div>\n    <p style=\"margin-top: 0.75rem; font-size: 0.875rem;\">\n      Undo fired: {undoCount} · Pause fired: {pauseCount}\n    </p>\n  {/snippet}\n</ToastRegion>\n"
+      "code": "<script lang=\"ts\">\n  import { Button } from '@lostgradient/cinder/button';\n  import { ToastRegion, useToast } from '@lostgradient/cinder/toast-region';\n  let undoCount = $state(0);\n  let pauseCount = $state(0);\n</script>\n\n<ToastRegion>\n  {#snippet children()}\n    {@const toast = useToast()}\n    <div class=\"example-preview-row\">\n      <Button\n        label=\"Dismiss-after-action\"\n        onclick={() =>\n          toast.show('Item moved to trash.', {\n            variant: 'info',\n            duration: 0,\n            action: {\n              label: 'Undo',\n              onAction: () => (undoCount += 1),\n            },\n          })}\n      />\n      <Button\n        variant=\"secondary\"\n        label=\"Keep open after action\"\n        onclick={() =>\n          toast.show('Syncing in the background…', {\n            variant: 'info',\n            duration: 0,\n            action: {\n              label: 'Pause',\n              keepOpen: true,\n              onAction: () => (pauseCount += 1),\n            },\n          })}\n      />\n    </div>\n    <p style=\"margin-top: 0.75rem; font-size: 0.875rem;\">\n      Undo fired: {undoCount} · Pause fired: {pauseCount}\n    </p>\n  {/snippet}\n</ToastRegion>\n"
     },
     {
       "id": "basic",
       "title": "Basic toast region",
       "description": "Click the trigger to dispatch a transient toast into the live region.",
-      "code": "<script lang=\"ts\">\n  import { useToast } from '@lostgradient/cinder';\n  import { Button } from '@lostgradient/cinder/button';\n  import { ToastRegion } from '@lostgradient/cinder/toast-region';\n</script>\n\n<ToastRegion>\n  {#snippet children()}\n    {@const toast = useToast()}\n    <div class=\"example-preview-row\">\n      <Button\n        label=\"Show success\"\n        onclick={() => toast.show('Saved your changes.', { variant: 'success' })}\n      />\n      <Button\n        variant=\"secondary\"\n        label=\"Show info\"\n        onclick={() => toast.show('A new version is available.', { variant: 'info' })}\n      />\n    </div>\n  {/snippet}\n</ToastRegion>\n"
+      "code": "<script lang=\"ts\">\n  import { Button } from '@lostgradient/cinder/button';\n  import { ToastRegion, useToast } from '@lostgradient/cinder/toast-region';\n</script>\n\n<ToastRegion>\n  {#snippet children()}\n    {@const toast = useToast()}\n    <div class=\"example-preview-row\">\n      <Button\n        label=\"Show success\"\n        onclick={() => toast.show('Saved your changes.', { variant: 'success' })}\n      />\n      <Button\n        variant=\"secondary\"\n        label=\"Show info\"\n        onclick={() => toast.show('A new version is available.', { variant: 'info' })}\n      />\n    </div>\n  {/snippet}\n</ToastRegion>\n"
     },
     {
       "id": "dismissible",
       "title": "Dismissible sticky toast",
       "description": "duration: 0 keeps the toast until the user dismisses it.",
-      "code": "<script lang=\"ts\">\n  import { useToast } from '@lostgradient/cinder';\n  import { Button } from '@lostgradient/cinder/button';\n  import { ToastRegion } from '@lostgradient/cinder/toast-region';\n</script>\n\n<ToastRegion>\n  {#snippet children()}\n    {@const toast = useToast()}\n    <div class=\"example-preview-row\">\n      <Button\n        label=\"Show sticky warning\"\n        variant=\"secondary\"\n        onclick={() =>\n          toast.show('Your session expires in 5 minutes.', {\n            variant: 'warning',\n            duration: 0,\n            dismissible: true,\n          })}\n      />\n    </div>\n  {/snippet}\n</ToastRegion>\n"
+      "code": "<script lang=\"ts\">\n  import { Button } from '@lostgradient/cinder/button';\n  import { ToastRegion, useToast } from '@lostgradient/cinder/toast-region';\n</script>\n\n<ToastRegion>\n  {#snippet children()}\n    {@const toast = useToast()}\n    <div class=\"example-preview-row\">\n      <Button\n        label=\"Show sticky warning\"\n        variant=\"secondary\"\n        onclick={() =>\n          toast.show('Your session expires in 5 minutes.', {\n            variant: 'warning',\n            duration: 0,\n            dismissible: true,\n          })}\n      />\n    </div>\n  {/snippet}\n</ToastRegion>\n"
     },
     {
       "id": "keyboard",
       "title": "Keyboard dismiss",
       "description": "Focus a toast control and press Escape to dismiss the active notification.",
-      "code": "<script lang=\"ts\">\n  import { useToast } from '@lostgradient/cinder';\n  import { Button } from '@lostgradient/cinder/button';\n  import { ToastRegion } from '@lostgradient/cinder/toast-region';\n</script>\n\n<ToastRegion>\n  {#snippet children()}\n    {@const toast = useToast()}\n    <Button\n      label=\"Show keyboard toast\"\n      onclick={() =>\n        toast.show('Tab to this toast, then press Escape.', {\n          duration: 0,\n          action: {\n            label: 'Action',\n            keepOpen: true,\n            onAction: () => {},\n          },\n        })}\n    />\n  {/snippet}\n</ToastRegion>\n"
+      "code": "<script lang=\"ts\">\n  import { Button } from '@lostgradient/cinder/button';\n  import { ToastRegion, useToast } from '@lostgradient/cinder/toast-region';\n</script>\n\n<ToastRegion>\n  {#snippet children()}\n    {@const toast = useToast()}\n    <Button\n      label=\"Show keyboard toast\"\n      onclick={() =>\n        toast.show('Tab to this toast, then press Escape.', {\n          duration: 0,\n          action: {\n            label: 'Action',\n            keepOpen: true,\n            onAction: () => {},\n          },\n        })}\n    />\n  {/snippet}\n</ToastRegion>\n"
     },
     {
       "id": "modal-scoped",
       "title": "Modal-scoped region",
       "description": "Nest <ToastRegion> inside a Modal to scope toasts to the modal content. When the modal body unmounts on close, the region tears down with it and pending timers are cleared.",
-      "code": "<script lang=\"ts\">\n  import { useToast } from '@lostgradient/cinder';\n  import { Button } from '@lostgradient/cinder/button';\n  import { Modal } from '@lostgradient/cinder/modal';\n  import { ToastRegion } from '@lostgradient/cinder/toast-region';\n  let open = $state(false);\n  let triggerRef: HTMLElement | null = $state(null);\n</script>\n\n<Button\n  label=\"Open modal\"\n  onclick={(event) => {\n    triggerRef = event.currentTarget;\n    open = true;\n  }}\n/>\n\n<Modal bind:open title=\"Modal-scoped toasts\" {triggerRef}>\n  <ToastRegion>\n    {#snippet children()}\n      {@const toast = useToast()}\n      <p>\n        Toasts dispatched here belong to this modal's region. When the modal closes, its region\n        unmounts and any active toasts are torn down.\n      </p>\n      <div class=\"example-preview-row\">\n        <Button\n          label=\"Show success\"\n          onclick={() => toast.show('Saved inside the modal.', { variant: 'success' })}\n        />\n        <Button\n          variant=\"danger\"\n          label=\"Show danger\"\n          onclick={() => toast.show('Something went wrong.', { variant: 'danger' })}\n        />\n      </div>\n    {/snippet}\n  </ToastRegion>\n  {#snippet footer()}\n    <div style=\"display: flex; gap: 0.5rem; justify-content: flex-end;\">\n      <Button variant=\"secondary\" label=\"Close\" onclick={() => (open = false)} />\n    </div>\n  {/snippet}\n</Modal>\n"
+      "code": "<script lang=\"ts\">\n  import { Button } from '@lostgradient/cinder/button';\n  import { Modal } from '@lostgradient/cinder/modal';\n  import { ToastRegion, useToast } from '@lostgradient/cinder/toast-region';\n  let open = $state(false);\n  let triggerRef: HTMLElement | null = $state(null);\n</script>\n\n<Button\n  label=\"Open modal\"\n  onclick={(event) => {\n    triggerRef = event.currentTarget;\n    open = true;\n  }}\n/>\n\n<Modal bind:open title=\"Modal-scoped toasts\" {triggerRef}>\n  <ToastRegion>\n    {#snippet children()}\n      {@const toast = useToast()}\n      <p>\n        Toasts dispatched here belong to this modal's region. When the modal closes, its region\n        unmounts and any active toasts are torn down.\n      </p>\n      <div class=\"example-preview-row\">\n        <Button\n          label=\"Show success\"\n          onclick={() => toast.show('Saved inside the modal.', { variant: 'success' })}\n        />\n        <Button\n          variant=\"danger\"\n          label=\"Show danger\"\n          onclick={() => toast.show('Something went wrong.', { variant: 'danger' })}\n        />\n      </div>\n    {/snippet}\n  </ToastRegion>\n  {#snippet footer()}\n    <div style=\"display: flex; gap: 0.5rem; justify-content: flex-end;\">\n      <Button variant=\"secondary\" label=\"Close\" onclick={() => (open = false)} />\n    </div>\n  {/snippet}\n</Modal>\n"
     },
     {
       "id": "pause-on-hover",
       "title": "Pause on hover",
       "description": "Pointer hover and keyboard focus pause auto-dismiss for the whole stack.",
-      "code": "<script lang=\"ts\">\n  import { useToast } from '@lostgradient/cinder';\n  import { Button } from '@lostgradient/cinder/button';\n  import { ToastRegion } from '@lostgradient/cinder/toast-region';\n</script>\n\n<ToastRegion defaultDuration={2500}>\n  {#snippet children()}\n    {@const toast = useToast()}\n    <Button\n      label=\"Show timed toast\"\n      onclick={() =>\n        toast.show('Hover or focus the stack to pause this countdown.', {\n          action: {\n            label: 'Keep',\n            keepOpen: true,\n            onAction: () => {},\n          },\n        })}\n    />\n  {/snippet}\n</ToastRegion>\n"
+      "code": "<script lang=\"ts\">\n  import { Button } from '@lostgradient/cinder/button';\n  import { ToastRegion, useToast } from '@lostgradient/cinder/toast-region';\n</script>\n\n<ToastRegion defaultDuration={2500}>\n  {#snippet children()}\n    {@const toast = useToast()}\n    <Button\n      label=\"Show timed toast\"\n      onclick={() =>\n        toast.show('Hover or focus the stack to pause this countdown.', {\n          action: {\n            label: 'Keep',\n            keepOpen: true,\n            onAction: () => {},\n          },\n        })}\n    />\n  {/snippet}\n</ToastRegion>\n"
     },
     {
       "id": "positions",
       "title": "Positions",
       "description": "Anchor the toast region to any viewport corner or horizontal center.",
-      "code": "<script lang=\"ts\">\n  import { useToast } from '@lostgradient/cinder';\n  import { Button } from '@lostgradient/cinder/button';\n  import { ToastRegion } from '@lostgradient/cinder/toast-region';\n  import type { ToastPosition } from '@lostgradient/cinder/toast-region';\n\n  const positions: ToastPosition[] = [\n    'top-left',\n    'top-center',\n    'top-right',\n    'bottom-left',\n    'bottom-center',\n    'bottom-right',\n  ];\n\n  let position: ToastPosition = $state('bottom-right');\n</script>\n\n<ToastRegion {position}>\n  {#snippet children()}\n    {@const toast = useToast()}\n    <div class=\"example-preview-row\">\n      {#each positions as nextPosition}\n        <Button\n          size=\"sm\"\n          variant={position === nextPosition ? 'primary' : 'secondary'}\n          label={nextPosition}\n          onclick={() => {\n            position = nextPosition;\n            toast.show(`Position: ${nextPosition}`, { id: 'position-demo' });\n          }}\n        />\n      {/each}\n    </div>\n  {/snippet}\n</ToastRegion>\n"
+      "code": "<script lang=\"ts\">\n  import { Button } from '@lostgradient/cinder/button';\n  import { ToastRegion, useToast } from '@lostgradient/cinder/toast-region';\n  import type { ToastPosition } from '@lostgradient/cinder/toast-region';\n\n  const positions: ToastPosition[] = [\n    'top-left',\n    'top-center',\n    'top-right',\n    'bottom-left',\n    'bottom-center',\n    'bottom-right',\n  ];\n\n  let position: ToastPosition = $state('bottom-right');\n</script>\n\n<ToastRegion {position}>\n  {#snippet children()}\n    {@const toast = useToast()}\n    <div class=\"example-preview-row\">\n      {#each positions as nextPosition}\n        <Button\n          size=\"sm\"\n          variant={position === nextPosition ? 'primary' : 'secondary'}\n          label={nextPosition}\n          onclick={() => {\n            position = nextPosition;\n            toast.show(`Position: ${nextPosition}`, { id: 'position-demo' });\n          }}\n        />\n      {/each}\n    </div>\n  {/snippet}\n</ToastRegion>\n"
     },
     {
       "id": "programmatic-dismiss",
       "title": "Programmatic dismiss",
       "description": "show() returns the toast id. Capture it to dismiss a specific toast, or call dismissAll() to clear both stacks.",
-      "code": "<script lang=\"ts\">\n  import { useToast } from '@lostgradient/cinder';\n  import { Button } from '@lostgradient/cinder/button';\n  import { ToastRegion } from '@lostgradient/cinder/toast-region';\n  let lastId: string | null = $state(null);\n</script>\n\n<ToastRegion>\n  {#snippet children()}\n    {@const toast = useToast()}\n    <div class=\"example-preview-row\">\n      <Button\n        label=\"Show sticky\"\n        onclick={() => {\n          lastId = toast.show('Sticky toast — dismiss me programmatically.', {\n            variant: 'info',\n            duration: 0,\n          });\n        }}\n      />\n      <Button\n        variant=\"secondary\"\n        label=\"Dismiss last\"\n        onclick={() => {\n          if (lastId) {\n            toast.dismiss(lastId);\n            lastId = null;\n          }\n        }}\n      />\n      <Button variant=\"secondary\" label=\"Dismiss all\" onclick={() => toast.dismissAll()} />\n    </div>\n  {/snippet}\n</ToastRegion>\n"
+      "code": "<script lang=\"ts\">\n  import { Button } from '@lostgradient/cinder/button';\n  import { ToastRegion, useToast } from '@lostgradient/cinder/toast-region';\n  let lastId: string | null = $state(null);\n</script>\n\n<ToastRegion>\n  {#snippet children()}\n    {@const toast = useToast()}\n    <div class=\"example-preview-row\">\n      <Button\n        label=\"Show sticky\"\n        onclick={() => {\n          lastId = toast.show('Sticky toast — dismiss me programmatically.', {\n            variant: 'info',\n            duration: 0,\n          });\n        }}\n      />\n      <Button\n        variant=\"secondary\"\n        label=\"Dismiss last\"\n        onclick={() => {\n          if (lastId) {\n            toast.dismiss(lastId);\n            lastId = null;\n          }\n        }}\n      />\n      <Button variant=\"secondary\" label=\"Dismiss all\" onclick={() => toast.dismissAll()} />\n    </div>\n  {/snippet}\n</ToastRegion>\n"
     },
     {
       "id": "promise",
       "title": "Promise",
       "description": "Show a sticky loading toast that resolves into success or danger output.",
-      "code": "<script lang=\"ts\">\n  import { useToast } from '@lostgradient/cinder';\n  import { Button } from '@lostgradient/cinder/button';\n  import { ToastRegion } from '@lostgradient/cinder/toast-region';\n\n  function waitThen<T>(value: T, reject = false) {\n    return new Promise<T>((resolve, rejectPromise) => {\n      setTimeout(() => {\n        if (reject) {\n          rejectPromise(new Error('Sync failed.'));\n        } else {\n          resolve(value);\n        }\n      }, 900);\n    });\n  }\n</script>\n\n<ToastRegion>\n  {#snippet children()}\n    {@const toast = useToast()}\n    <div class=\"example-preview-row\">\n      <Button\n        label=\"Resolve\"\n        onclick={() =>\n          toast.promise(waitThen('profile'), {\n            id: 'profile-sync',\n            loading: 'Saving profile...',\n            success: (value) => `Saved ${value}.`,\n            error: 'Save failed.',\n          })}\n      />\n      <Button\n        variant=\"secondary\"\n        label=\"Reject\"\n        onclick={() =>\n          toast.promise(waitThen('profile', true), {\n            id: 'profile-sync',\n            loading: 'Saving profile...',\n            success: 'Saved profile.',\n            error: (error) => (error instanceof Error ? error.message : 'Save failed.'),\n          })}\n      />\n    </div>\n  {/snippet}\n</ToastRegion>\n"
+      "code": "<script lang=\"ts\">\n  import { Button } from '@lostgradient/cinder/button';\n  import { ToastRegion, useToast } from '@lostgradient/cinder/toast-region';\n\n  function waitThen<T>(value: T, reject = false) {\n    return new Promise<T>((resolve, rejectPromise) => {\n      setTimeout(() => {\n        if (reject) {\n          rejectPromise(new Error('Sync failed.'));\n        } else {\n          resolve(value);\n        }\n      }, 900);\n    });\n  }\n</script>\n\n<ToastRegion>\n  {#snippet children()}\n    {@const toast = useToast()}\n    <div class=\"example-preview-row\">\n      <Button\n        label=\"Resolve\"\n        onclick={() =>\n          toast.promise(waitThen('profile'), {\n            id: 'profile-sync',\n            loading: 'Saving profile...',\n            success: (value) => `Saved ${value}.`,\n            error: 'Save failed.',\n          })}\n      />\n      <Button\n        variant=\"secondary\"\n        label=\"Reject\"\n        onclick={() =>\n          toast.promise(waitThen('profile', true), {\n            id: 'profile-sync',\n            loading: 'Saving profile...',\n            success: 'Saved profile.',\n            error: (error) => (error instanceof Error ? error.message : 'Save failed.'),\n          })}\n      />\n    </div>\n  {/snippet}\n</ToastRegion>\n"
     },
     {
       "id": "stacking",
       "title": "Stacking",
       "description": "Rapid notifications stack with bounded overflow and visual depth.",
-      "code": "<script lang=\"ts\">\n  import { useToast } from '@lostgradient/cinder';\n  import { Button } from '@lostgradient/cinder/button';\n  import { ToastRegion } from '@lostgradient/cinder/toast-region';\n\n  let count = $state(0);\n</script>\n\n<ToastRegion maxStack={5} defaultDuration={0}>\n  {#snippet children()}\n    {@const toast = useToast()}\n    <Button\n      label=\"Add five toasts\"\n      onclick={() => {\n        for (let index = 0; index < 5; index += 1) {\n          count += 1;\n          toast.show(`Stacked notification ${count}`, {\n            variant: index % 2 === 0 ? 'info' : 'success',\n          });\n        }\n      }}\n    />\n  {/snippet}\n</ToastRegion>\n"
+      "code": "<script lang=\"ts\">\n  import { Button } from '@lostgradient/cinder/button';\n  import { ToastRegion, useToast } from '@lostgradient/cinder/toast-region';\n\n  let count = $state(0);\n</script>\n\n<ToastRegion maxStack={5} defaultDuration={0}>\n  {#snippet children()}\n    {@const toast = useToast()}\n    <Button\n      label=\"Add five toasts\"\n      onclick={() => {\n        for (let index = 0; index < 5; index += 1) {\n          count += 1;\n          toast.show(`Stacked notification ${count}`, {\n            variant: index % 2 === 0 ? 'info' : 'success',\n          });\n        }\n      }}\n    />\n  {/snippet}\n</ToastRegion>\n"
     },
     {
       "id": "swipe-to-dismiss",
       "title": "Swipe to dismiss",
       "description": "Dismiss a toast by dragging it horizontally past the threshold.",
-      "code": "<script lang=\"ts\">\n  import { useToast } from '@lostgradient/cinder';\n  import { Button } from '@lostgradient/cinder/button';\n  import { ToastRegion } from '@lostgradient/cinder/toast-region';\n</script>\n\n<ToastRegion>\n  {#snippet children()}\n    {@const toast = useToast()}\n    <Button\n      label=\"Show swipe toast\"\n      onclick={() =>\n        toast.show('Drag this notification left or right to dismiss it.', {\n          duration: 0,\n        })}\n    />\n  {/snippet}\n</ToastRegion>\n"
+      "code": "<script lang=\"ts\">\n  import { Button } from '@lostgradient/cinder/button';\n  import { ToastRegion, useToast } from '@lostgradient/cinder/toast-region';\n</script>\n\n<ToastRegion>\n  {#snippet children()}\n    {@const toast = useToast()}\n    <Button\n      label=\"Show swipe toast\"\n      onclick={() =>\n        toast.show('Drag this notification left or right to dismiss it.', {\n          duration: 0,\n        })}\n    />\n  {/snippet}\n</ToastRegion>\n"
     },
     {
       "id": "variants",
       "title": "All four variants",
       "description": "info and success route to the polite (status) region; warning and danger route to the assertive (alert) region.",
-      "code": "<script lang=\"ts\">\n  import { useToast } from '@lostgradient/cinder';\n  import { Button } from '@lostgradient/cinder/button';\n  import { ToastRegion } from '@lostgradient/cinder/toast-region';\n</script>\n\n<ToastRegion>\n  {#snippet children()}\n    {@const toast = useToast()}\n    <div class=\"example-preview-row\">\n      <Button\n        label=\"Info\"\n        onclick={() => toast.show('A new version is available.', { variant: 'info' })}\n      />\n      <Button\n        label=\"Success\"\n        onclick={() => toast.show('Saved your changes.', { variant: 'success' })}\n      />\n      <Button\n        variant=\"secondary\"\n        label=\"Warning\"\n        onclick={() => toast.show('Your session expires in 5 minutes.', { variant: 'warning' })}\n      />\n      <Button\n        variant=\"danger\"\n        label=\"Danger\"\n        onclick={() => toast.show('Failed to save your changes.', { variant: 'danger' })}\n      />\n    </div>\n  {/snippet}\n</ToastRegion>\n"
+      "code": "<script lang=\"ts\">\n  import { Button } from '@lostgradient/cinder/button';\n  import { ToastRegion, useToast } from '@lostgradient/cinder/toast-region';\n</script>\n\n<ToastRegion>\n  {#snippet children()}\n    {@const toast = useToast()}\n    <div class=\"example-preview-row\">\n      <Button\n        label=\"Info\"\n        onclick={() => toast.show('A new version is available.', { variant: 'info' })}\n      />\n      <Button\n        label=\"Success\"\n        onclick={() => toast.show('Saved your changes.', { variant: 'success' })}\n      />\n      <Button\n        variant=\"secondary\"\n        label=\"Warning\"\n        onclick={() => toast.show('Your session expires in 5 minutes.', { variant: 'warning' })}\n      />\n      <Button\n        variant=\"danger\"\n        label=\"Danger\"\n        onclick={() => toast.show('Failed to save your changes.', { variant: 'danger' })}\n      />\n    </div>\n  {/snippet}\n</ToastRegion>\n"
     }
   ]
 }

package/src/highlighters/shiki/index.ts

@@ -47,6 +47,7 @@
 
 import type { Highlighter } from '../../utilities/highlighter.ts';
 import { createRetryingLoaderCache } from '../../utilities/retrying-loader-cache.ts';
+import { stripRootPreTabIndex } from './strip-root-pre-tab-index.ts';
 
 /**
  * Re-exported for backwards compatibility on the public
@@ -108,15 +109,6 @@ function plaintextBlock(code: string): string {
   return `<pre class="shiki shiki-plaintext"><code>${escapeHtml(code)}</code></pre>`;
 }
 
-function stripRootPreTabIndex(html: string): string {
-  const openingPre = /^<pre\b[^>]*>/i.exec(html);
-  if (openingPre === null) return html;
-  return (
-    openingPre[0].replace(/\s+tabindex=(?:"[^"]*"|'[^']*'|[^\s>]+)/i, '') +
-    html.slice(openingPre[0].length)
-  );
-}
-
 type CodeToHtmlFunction = typeof import('shiki').codeToHtml;
 type BundledLanguages = typeof import('shiki').bundledLanguages;
 
@@ -125,12 +117,17 @@ type ShikiModule = {
   bundledLanguages: BundledLanguages;
 };
 
+type ShikiModuleLoader = () => Promise<ShikiModule>;
+
 /**
  * Create a Shiki-backed {@link Highlighter} suitable for
  * `<CodeBlock highlighter={...} />`. See module-level JSDoc for the
  * full behavior contract.
  */
-export function shikiHighlighter(options: ShikiHighlighterOptions = {}): Highlighter {
+export function shikiHighlighter(
+  options: ShikiHighlighterOptions = {},
+  moduleLoader?: ShikiModuleLoader,
+): Highlighter {
   const { theme = DEFAULT_THEME, langs } = options;
   const warnedLanguages = new Set<string>();
 
@@ -138,27 +135,30 @@ export function shikiHighlighter(options: ShikiHighlighterOptions = {}): Highlig
   // de-duplicates concurrent loads and evicts rejected promises so a
   // transient import failure does not lock the adapter into the plaintext
   // fallback for the lifetime of this `shikiHighlighter()` instance.
-  const loadShiki = createRetryingLoaderCache(async (): Promise<ShikiModule> => {
-    const module_ = await import('shiki');
-    // Optional preload — if the consumer named specific languages,
-    // force them through `codeToHtml` once so Shiki resolves and
-    // caches them before the first real call. Failures here are
-    // non-fatal; per-call language lookup will still try (and fall
-    // back to plaintext on its own miss).
-    if (langs !== undefined) {
-      for (const lang of langs) {
-        try {
-          await module_.codeToHtml('', { lang, ...buildThemeOption(theme) });
-        } catch {
-          // Swallow — the per-call path below logs and falls back.
+  const loadShiki = createRetryingLoaderCache(
+    moduleLoader ??
+      (async (): Promise<ShikiModule> => {
+        const module_ = await import('shiki');
+        // Optional preload — if the consumer named specific languages,
+        // force them through `codeToHtml` once so Shiki resolves and
+        // caches them before the first real call. Failures here are
+        // non-fatal; per-call language lookup will still try (and fall
+        // back to plaintext on its own miss).
+        if (langs !== undefined) {
+          for (const lang of langs) {
+            try {
+              await module_.codeToHtml('', { lang, ...buildThemeOption(theme) });
+            } catch {
+              // Swallow — the per-call path below logs and falls back.
+            }
+          }
         }
-      }
-    }
-    return {
-      codeToHtml: module_.codeToHtml,
-      bundledLanguages: module_.bundledLanguages,
-    };
-  });
+        return {
+          codeToHtml: module_.codeToHtml,
+          bundledLanguages: module_.bundledLanguages,
+        };
+      }),
+  );
 
   return async function highlight(code: string, lang: string): Promise<string> {
     // Normalize defensively: the documented contract is "empty or missing

package/src/highlighters/shiki/strip-root-pre-tab-index.ts

@@ -0,0 +1,8 @@
+export function stripRootPreTabIndex(html: string): string {
+  const openingPre = /^<pre\b[^>]*>/i.exec(html);
+  if (openingPre === null) return html;
+  return (
+    openingPre[0].replace(/\s+tabindex=(?:"[^"]*"|'[^']*'|[^\s>]+)/i, '') +
+    html.slice(openingPre[0].length)
+  );
+}

package/src/index.ts

@@ -97,6 +97,19 @@ export type {
   ChartXValue,
 } from './components/chart.types.ts';
 
+export { default as BentoCell } from './components/bento-cell/index.ts';
+export type { BentoCellProps } from './components/bento-cell/index.ts';
+
+export { default as BentoGrid } from './components/bento-grid/index.ts';
+export type {
+  BentoCellProps as BentoGridCellProps,
+  BentoGridColumns,
+  BentoGridProps,
+} from './components/bento-grid/index.ts';
+
+export { default as BlogSection } from './components/blog-section/index.ts';
+export type { BlogSectionPost, BlogSectionProps } from './components/blog-section/index.ts';
+
 export { default as Breadcrumbs } from './components/breadcrumbs/index.ts';
 export type { BreadcrumbItem, BreadcrumbsProps } from './components/breadcrumbs/index.ts';
 
@@ -109,9 +122,20 @@ export type { ButtonGroupOrientation, ButtonGroupProps } from './components/butt
 export { default as Callout } from './components/callout/index.ts';
 export type { CalloutProps, CalloutVariant } from './components/callout/index.ts';
 
+export { default as Calendar } from './components/calendar/index.ts';
+export type { CalendarProps } from './components/calendar/index.ts';
+
 export { default as Card } from './components/card/index.ts';
 export type { CardPadding, CardProps, CardTone, CardVariant } from './components/card/index.ts';
 
+export { default as Carousel } from './components/carousel/index.ts';
+export type {
+  CarouselControlLabel,
+  CarouselProps,
+  CarouselSlide,
+  CarouselSlideContent,
+} from './components/carousel/index.ts';
+
 export { default as Chat } from './components/chat/index.ts';
 export type { ChatProps } from './components/chat/index.ts';
 
@@ -216,6 +240,13 @@ export type { ContextMenuTriggerProps } from './components/context-menu-trigger/
 export { default as CopyButton } from './components/copy-button/index.ts';
 export type { CopyButtonProps } from './components/copy-button/index.ts';
 
+export { default as CtaSection } from './components/cta-section/index.ts';
+export type {
+  CtaSectionAlign,
+  CtaSectionProps,
+  CtaSectionTone,
+} from './components/cta-section/index.ts';
+
 export { copyToClipboard } from './utilities/clipboard.ts';
 
 export { default as DataList } from './components/data-list/index.ts';
@@ -240,6 +271,9 @@ export type {
   DataTableSelectionMode,
 } from './components/data-table/index.ts';
 
+export { default as DatePicker } from './components/date-picker/index.ts';
+export type { DatePickerGranularity, DatePickerProps } from './components/date-picker/index.ts';
+
 export { default as DateRangeField } from './components/date-range-field/index.ts';
 export type {
   DateRangeDatePreset,
@@ -308,6 +342,15 @@ export type { DropdownTriggerProps } from './components/dropdown-trigger/index.t
 export { default as EmptyState } from './components/empty-state/index.ts';
 export type { EmptyStateProps } from './components/empty-state/index.ts';
 
+export { default as EventTimeline } from './components/event-timeline/index.ts';
+export type {
+  EventTimelineDate,
+  EventTimelineItem,
+  EventTimelineProps,
+  EventTimelineSize,
+  EventTimelineState,
+} from './components/event-timeline/index.ts';
+
 export { default as EventStreamViewer } from './components/event-stream-viewer/index.ts';
 export type {
   EventSeverity,
@@ -332,6 +375,14 @@ export type {
   SelectFacet,
 } from './components/faceted-filter-bar/index.ts';
 
+export { default as FeatureSection } from './components/feature-section/index.ts';
+export type {
+  FeatureSectionItem,
+  FeatureSectionLayout,
+  FeatureSectionMediaPosition,
+  FeatureSectionProps,
+} from './components/feature-section/index.ts';
+
 export { default as FeedEvent } from './components/feed-event/index.ts';
 export type { FeedEventProps, FeedEventVariant } from './components/feed-event/index.ts';
 
@@ -366,6 +417,9 @@ export type { FormSectionHeadingLevel, FormSectionProps } from './components/for
 
 export type { FormFieldContext } from './_internal/form-field-context.ts';
 
+export { default as Footer } from './components/footer/index.ts';
+export type { FooterGroup, FooterLink, FooterProps } from './components/footer/index.ts';
+
 export { default as Grid } from './components/grid/index.ts';
 export type { GridColumns, GridProps } from './components/grid/index.ts';
 
@@ -381,12 +435,22 @@ export type { GridListItemProps } from './components/grid-list-item/index.ts';
 export { default as HoverCard } from './components/hover-card/index.ts';
 export type { HoverCardPlacement, HoverCardProps } from './components/hover-card/index.ts';
 
+export { default as HeroSection } from './components/hero-section/index.ts';
+export type {
+  HeroSectionAlign,
+  HeroSectionMediaPosition,
+  HeroSectionProps,
+} from './components/hero-section/index.ts';
+
 export { default as Image } from './components/image/index.ts';
 export type { ImageProps } from './components/image/index.ts';
 
 export { default as Input } from './components/input/index.ts';
 export type { InputProps, InputType } from './components/input/index.ts';
 
+export { default as InlineLoading } from './components/inline-loading/index.ts';
+export type { InlineLoadingProps, InlineLoadingStatus } from './components/inline-loading/index.ts';
+
 export { default as JsonSchemaEditor } from './components/json-schema-editor/index.ts';
 export type {
   JsonSchemaDraft,
@@ -457,12 +521,26 @@ export type { LineChartProps, LineChartSchemaProps } from './components/line-cha
 export { default as LocaleProvider } from './components/locale-provider/index.ts';
 export type { LocaleProviderProps, TextDirection } from './components/locale-provider/index.ts';
 
+export { default as LogoCloud } from './components/logo-cloud/index.ts';
+export type { LogoCloudItem, LogoCloudProps } from './components/logo-cloud/index.ts';
+
 export { default as LoadMore } from './components/load-more/index.ts';
 export type { LoadMoreProps } from './components/load-more/index.ts';
 
+export { default as Marquee } from './components/marquee/index.ts';
+export type { MarqueeDirection, MarqueeProps } from './components/marquee/index.ts';
+
 export { default as MediaControls } from './components/media-controls/index.ts';
 export type { MediaControlsLayout, MediaControlsProps } from './components/media-controls/index.ts';
 
+export { default as MegaMenu } from './components/mega-menu/index.ts';
+export type {
+  MegaMenuItem,
+  MegaMenuLink,
+  MegaMenuProps,
+  MegaMenuSection,
+} from './components/mega-menu/index.ts';
+
 export { default as MarkdownEditor } from './components/markdown-editor/index.ts';
 export type {
   EditorHandle,
@@ -487,6 +565,9 @@ export type {
 export { default as Message } from './components/message/index.ts';
 export type { MessageProps, MessageRole } from './components/message/index.ts';
 
+export { default as Meter } from './components/meter/index.ts';
+export type { MeterProps, MeterSize, MeterState } from './components/meter/index.ts';
+
 export { default as MatrixChart } from './components/matrix-chart/index.ts';
 export type { MatrixChartProps, MatrixChartSchemaProps } from './components/matrix-chart/index.ts';
 export type { MatrixColorScale } from './components/matrix-chart/matrix-chart.types.ts';
@@ -497,6 +578,14 @@ export type { MasonryProps } from './components/masonry/index.ts';
 export { default as Modal } from './components/modal/index.ts';
 export type { ModalProps } from './components/modal/index.ts';
 
+export { default as MultiSelect } from './components/multi-select/index.ts';
+export type {
+  MultiSelectDirection,
+  MultiSelectItem,
+  MultiSelectProps,
+  MultiSelectSelectionFeedback,
+} from './components/multi-select/index.ts';
+
 export { default as NavigationBar } from './components/navigation-bar/index.ts';
 export type {
   NavigationBarItemsContext,
@@ -509,15 +598,27 @@ export type {
 export { default as Portal, createPortalAttachment } from './components/portal/index.ts';
 export type { PortalAttachmentOptions, PortalProps } from './components/portal/index.ts';
 
+export { default as PricingSection } from './components/pricing-section/index.ts';
+export type {
+  PricingSectionPlan,
+  PricingSectionProps,
+} from './components/pricing-section/index.ts';
+
 export { default as NavigationItem } from './components/navigation-item/index.ts';
 export type { NavigationItemProps } from './components/navigation-item/index.ts';
 
+export { default as NewsletterSection } from './components/newsletter-section/index.ts';
+export type { NewsletterSectionProps } from './components/newsletter-section/index.ts';
+
 export { default as NumberInput } from './components/number-input/index.ts';
 export type { NumberInputProps } from './components/number-input/index.ts';
 
 export { default as Pagination } from './components/pagination/index.ts';
 export type { PaginationProps } from './components/pagination/index.ts';
 
+export { default as PageHeader } from './components/page-header/index.ts';
+export type { PageHeaderProps } from './components/page-header/index.ts';
+
 export { default as PayloadInspector } from './components/payload-inspector/index.ts';
 export type {
   PayloadInspectorMeta,
@@ -555,6 +656,9 @@ export type { PricingCardProps } from './components/pricing-card/index.ts';
 export { default as Progress } from './components/progress/index.ts';
 export type { ProgressProps, ProgressSize, ProgressVariant } from './components/progress/index.ts';
 
+export { default as QrCode } from './components/qr-code/index.ts';
+export type { QrCodeErrorCorrectionLevel, QrCodeProps } from './components/qr-code/index.ts';
+
 export { default as RadioGroup } from './components/radio-group/index.ts';
 // RadioProps is re-exported here (from radio-group) so root-barrel consumers keep
 // access to the type after the standalone Radio/cinder/radio subpath was removed.
@@ -731,6 +835,9 @@ export type {
   SpeedDialActionProps,
 } from './components/speed-dial-action/index.ts';
 
+export { default as Sparkbar } from './components/sparkbar/index.ts';
+export type { SparkbarProps, SparkbarSize, SparkbarVariant } from './components/sparkbar/index.ts';
+
 export { default as Steps } from './components/steps/index.ts';
 export type { StepItem, StepsOrientation, StepsProps } from './components/steps/index.ts';
 
@@ -744,6 +851,9 @@ export type {
   StatGroupVariant,
 } from './components/stat-group/index.ts';
 
+export { default as StatsSection } from './components/stats-section/index.ts';
+export type { StatsSectionItem, StatsSectionProps } from './components/stats-section/index.ts';
+
 export { default as StatusDot } from './components/status-dot/index.ts';
 export type {
   StatusDotConnectionState,
@@ -784,6 +894,9 @@ export type { TableCellProps } from './components/table-cell/index.ts';
 export { default as TagInput } from './components/tag-input/index.ts';
 export type { TagInputProps } from './components/tag-input/index.ts';
 
+export { default as TeamSection } from './components/team-section/index.ts';
+export type { TeamSectionMember, TeamSectionProps } from './components/team-section/index.ts';
+
 export { default as TableHeader } from './components/table-header/index.ts';
 export type { TableHeaderProps } from './components/table-header/index.ts';
 
@@ -793,6 +906,12 @@ export type { TableHeaderCellProps } from './components/table-header-cell/index.
 export { default as TableRow } from './components/table-row/index.ts';
 export type { TableRowProps, TableRowSelectionProps } from './components/table-row/index.ts';
 
+export { default as TableOfContents } from './components/table-of-contents/index.ts';
+export type {
+  TableOfContentsItem,
+  TableOfContentsProps,
+} from './components/table-of-contents/index.ts';
+
 export { default as Tabs } from './components/tabs/index.ts';
 export type { TabsContext, TabsOrientation, TabsProps } from './components/tabs/index.ts';
 
@@ -806,6 +925,13 @@ export type {
   TimeFieldProps,
 } from './components/time-field/index.ts';
 
+export { default as TestimonialSection } from './components/testimonial-section/index.ts';
+export type {
+  TestimonialSectionItem,
+  TestimonialSectionLayout,
+  TestimonialSectionProps,
+} from './components/testimonial-section/index.ts';
+
 export { default as ToastRegion } from './components/toast-region/index.ts';
 export type {
   ToastApi,

package/src/styles/base-guard.ts

@@ -75,7 +75,7 @@ export const MISSING_BASE_WARNING =
 //   - In production (`DEV === false`): the entire block is dead code, tree-shaken.
 //   - On the server (`BROWSER === false`): `getComputedStyle` is unavailable; skip.
 //   - In the browser during development: check once at module evaluation time.
-if (DEV && BROWSER) {
+export function runBaseLoadedGuard(): void {
   // `requestAnimationFrame` defers the check one tick so any same-module-chunk
   // CSS that was co-imported with this guard has a chance to be applied before
   // we read computed styles. Without the deferral, the check races the
@@ -93,3 +93,5 @@ if (DEV && BROWSER) {
     }
   });
 }
+
+if (DEV && BROWSER) runBaseLoadedGuard();

package/src/styles/components/_status-surface.css

@@ -17,13 +17,11 @@
  * with the triples is separate, screenshot-gated visual work.
  *
  * COMPOSITION — decomposed by emitted responsibility so each component opts into
- * only what it needs (Alert keeps a neutral border by design; only Callout draws
- * the stripe):
+ * only what it needs (only Callout draws the directional stripe):
  *   - `.cinder-_status-surface`        → background-color + color (bg + fg)
  *   - `.cinder-_status-surface-border` → border-color (soft border)
  *   - `.cinder-_status-surface-stripe` → border-inline-start-color (saturated)
- * Alert composes surface only; Banner composes surface + border; Callout composes
- * all three.
+ * Alert and Banner both compose surface + border; Callout composes all three.
  *
  * INPUTS — each composing element sets these per variant, on the SAME element as
  * the class (so they resolve with no inheritance distance):