@lostgradient/cinder 0.4.0 → 0.5.0

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';
@@ -237,8 +268,12 @@ export type {
   DataTableColumn,
   DataTableProps,
   DataTableRow,
+  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,
@@ -307,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,
@@ -331,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';
 
@@ -365,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';
 
@@ -380,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,
@@ -456,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,
@@ -486,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';
@@ -496,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,
@@ -508,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,
@@ -554,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.
@@ -683,7 +788,7 @@ export type {
   SortableAnnouncements,
   SortableItemContext,
   SortableReorderChange,
-} from './utilities/sortable-controller.svelte.ts';
+} from './utilities/sortable-controller.types.ts';
 
 export { default as Skeleton } from './components/skeleton/index.ts';
 export type { SkeletonProps } from './components/skeleton/index.ts';
@@ -730,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';
 
@@ -743,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,
@@ -783,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';
 
@@ -792,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';
 
@@ -805,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,
@@ -823,7 +950,7 @@ export type {
 } from './components/transfer-list/index.ts';
 
 export { useAnnouncer } from './utilities/use-announcer.svelte.ts';
-export type { Announcer, AnnouncerOptions } from './utilities/use-announcer.svelte.ts';
+export type { Announcer, AnnouncerOptions } from './utilities/use-announcer.types.ts';
 
 export { useHistory } from './utilities/use-history.svelte.ts';
 export type {
@@ -832,12 +959,12 @@ export type {
   UseHistoryEntry,
   UseHistoryEntryMetadata,
   UseHistoryOptions,
-} from './utilities/use-history.svelte.ts';
+} from './utilities/use-history.types.ts';
 
 export { useIntersection } from './utilities/use-intersection.svelte.ts';
 export { useMutationObserver } from './utilities/use-mutation-observer.svelte.ts';
 export { useReducedMotion } from './utilities/use-reduced-motion.svelte.ts';
-export type { UseReducedMotion } from './utilities/use-reduced-motion.svelte.ts';
+export type { UseReducedMotion } from './utilities/use-reduced-motion.types.ts';
 export { useResizeObserver } from './utilities/use-resize-observer.svelte.ts';
 
 export { useToast } from './utilities/use-toast.ts';

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):

package/src/styles/components.css

@@ -24,14 +24,20 @@
 @import '../components/badge/badge.css';
 @import '../components/banner/banner.css';
 @import '../components/bar-chart/bar-chart.css';
+@import '../components/bento-cell/bento-cell.css';
+@import '../components/bento-grid/bento-grid.css';
+@import '../components/blog-section/blog-section.css';
 @import '../components/breadcrumbs/breadcrumbs.css';
 @import '../components/button/button.css';
 @import '../components/button-group/button-group.css';
 @import '../components/callout/callout.css';
+@import '../components/calendar/calendar.css';
 @import '../components/card/card.css';
+@import '../components/carousel/carousel.css';
 @import '../components/capability-gate/capability-gate.css';
 @import '../components/chat-conversation-header/chat-conversation-header.css';
 @import '../components/chat-conversation-list/chat-conversation-list.css';
+@import '../components/chat/chat.css';
 @import '../components/chip/chip.css';
 @import '../components/choice-grid/choice-grid.css';
 @import '../components/checkbox/checkbox.css';
@@ -48,9 +54,11 @@
 @import '../components/container/container.css';
 @import '../components/context-menu/context-menu.css';
 @import '../components/copy-button/copy-button.css';
+@import '../components/cta-section/cta-section.css';
 @import '../components/data-grid/data-grid.css';
 @import '../components/data-list/data-list.css';
 @import '../components/data-table/data-table.css';
+@import '../components/date-picker/date-picker.css';
 @import '../components/date-range-field/date-range-field.css';
 @import '../components/description-list/description-list.css';
 @import '../components/diff-statistics/diff-statistics.css';
@@ -58,19 +66,24 @@
 @import '../components/drawer/drawer.css';
 @import '../components/dropdown/dropdown.css';
 @import '../components/empty-state/empty-state.css';
+@import '../components/event-timeline/event-timeline.css';
 @import '../components/event-stream-viewer/event-stream-viewer.css';
 @import '../components/faceted-filter-bar/faceted-filter-bar.css';
+@import '../components/feature-section/feature-section.css';
 @import '../components/feed/feed.css';
 @import './components/experimental.css';
 @import '../components/file-upload/file-upload.css';
 @import '../components/floating-action-button/floating-action-button.css';
 @import '../components/form-field/form-field.css';
 @import '../components/form-section/form-section.css';
+@import '../components/footer/footer.css';
 @import '../components/grid/grid.css';
 @import '../components/grid-list/grid-list.css';
+@import '../components/hero-section/hero-section.css';
 @import '../components/hover-card/hover-card.css';
 @import '../components/image/image.css';
 @import '../components/input/input.css';
+@import '../components/inline-loading/inline-loading.css';
 @import '../components/invocation-rule-builder/invocation-rule-builder.css';
 @import './components/json-highlight.css';
 @import '../components/json-schema-editor/json-schema-editor.css';
@@ -81,16 +94,23 @@
 @import '../components/label/label.css';
 @import '../components/line-chart/line-chart.css';
 @import '../components/link/link.css';
+@import '../components/logo-cloud/logo-cloud.css';
 @import '../components/matrix-chart/matrix-chart.css';
 @import '../components/masonry/masonry.css';
 @import '../components/load-more/load-more.css';
+@import '../components/marquee/marquee.css';
 @import '../components/media-controls/media-controls.css';
+@import '../components/mega-menu/mega-menu.css';
 @import '../components/menu-bar/menu-bar.css';
 @import '../components/message/message.css';
+@import '../components/meter/meter.css';
 @import '../components/modal/modal.css';
+@import '../components/multi-select/multi-select.css';
 @import '../components/navigation-bar/navigation-bar.css';
 @import '../components/navigation-item/navigation-item.css';
+@import '../components/newsletter-section/newsletter-section.css';
 @import '../components/number-input/number-input.css';
+@import '../components/page-header/page-header.css';
 @import '../components/pagination/pagination.css';
 @import '../components/payload-inspector/payload-inspector.css';
 @import '../components/permission-matrix/permission-matrix.css';
@@ -98,7 +118,9 @@
 @import '../components/pin-input/pin-input.css';
 @import '../components/popover/popover.css';
 @import '../components/pricing-card/pricing-card.css';
+@import '../components/pricing-section/pricing-section.css';
 @import '../components/progress/progress.css';
+@import '../components/qr-code/qr-code.css';
 @import '../components/_radio/radio.css';
 @import '../components/radio-group/radio-group.css';
 @import '../components/rating/rating.css';
@@ -126,9 +148,11 @@
 @import '../components/sortable-list/sortable-list.css';
 @import '../components/spinner/spinner.css';
 @import '../components/speed-dial/speed-dial.css';
+@import '../components/sparkbar/sparkbar.css';
 @import '../components/stacked-list-item/stacked-list-item.css';
 @import '../components/stat/stat.css';
 @import '../components/stat-group/stat-group.css';
+@import '../components/stats-section/stats-section.css';
 @import '../components/status-dot/status-dot.css';
 @import '../components/steps/steps.css';
 @import '../components/surface/surface.css';
@@ -136,14 +160,17 @@
 @import '../components/tab-list/tab-list.css';
 @import '../components/tab-panel/tab-panel.css';
 @import '../components/tag-input/tag-input.css';
+@import '../components/team-section/team-section.css';
 @import '../components/table/table.css';
 @import '../components/table-body/table-body.css';
 @import '../components/table-cell/table-cell.css';
 @import '../components/table-header/table-header.css';
 @import '../components/table-header-cell/table-header-cell.css';
+@import '../components/table-of-contents/table-of-contents.css';
 @import '../components/table-row/table-row.css';
 @import '../components/tabs/tabs.css';
 @import '../components/textarea/textarea.css';
+@import '../components/testimonial-section/testimonial-section.css';
 @import '../components/time-field/time-field.css';
 @import '../components/timeline/timeline.css';
 @import '../components/toast-region/toast-region.css';

package/src/utilities/change-tracker.svelte.ts

@@ -14,28 +14,6 @@ import {
   contentEqualsWithFrontMatter,
 } from '@lostgradient/cinder/markdown/pipeline';
 
-export interface ChangeTrackerOptions {
-  /** Debounce delay for semantic comparison (ms). Default: 300 */
-  debounceMs?: number;
-  /** Whether to include front matter in comparison. Default: false */
-  includeFrontMatter?: boolean;
-}
-
-export interface ChangeTracker {
-  /** Whether content has changed from baseline (fast check + verified result) */
-  readonly hasChanges: boolean;
-  /** Whether semantic verification is still pending */
-  readonly isPending: boolean;
-  /** Set the baseline value (e.g., original document) */
-  setBaseline(value: string): void;
-  /** Set the current value (e.g., edited document) */
-  setCurrent(value: string): void;
-  /** Force immediate semantic verification (useful for save operations) */
-  verifyNow(): boolean;
-  /** Cleanup resources (call on component destroy) */
-  destroy(): void;
-}
-
 /**
  * Fast non-cryptographic hash for change detection.
  * Uses djb2 algorithm - fast and good distribution.
@@ -65,7 +43,9 @@ function simpleHash(str: string): number {
  * </script>
  * ```
  */
-export function createChangeTracker(options: ChangeTrackerOptions = {}): ChangeTracker {
+export function createChangeTracker(
+  options: import('./change-tracker.types.ts').ChangeTrackerOptions = {},
+): import('./change-tracker.types.ts').ChangeTracker {
   const { debounceMs = 300, includeFrontMatter = false } = options;
 
   // Internal state

package/src/utilities/change-tracker.types.ts

@@ -0,0 +1,21 @@
+export type ChangeTrackerOptions = {
+  /** Debounce delay for semantic comparison (ms). Default: 300 */
+  debounceMs?: number;
+  /** Whether to include front matter in comparison. Default: false */
+  includeFrontMatter?: boolean;
+};
+
+export type ChangeTracker = {
+  /** Whether content has changed from baseline (fast check + verified result) */
+  readonly hasChanges: boolean;
+  /** Whether semantic verification is still pending */
+  readonly isPending: boolean;
+  /** Set the baseline value (e.g., original document) */
+  setBaseline(value: string): void;
+  /** Set the current value (e.g., edited document) */
+  setCurrent(value: string): void;
+  /** Force immediate semantic verification (useful for save operations) */
+  verifyNow(): boolean;
+  /** Cleanup resources (call on component destroy) */
+  destroy(): void;
+};

package/src/utilities/document-order.ts

@@ -14,12 +14,17 @@
  * practice this is unreachable during normal teardown — unregister runs
  * synchronously inside the attachment cleanup, before the node is removed.
  */
+const DOCUMENT_POSITION_PRECEDING = 0x02;
+const DOCUMENT_POSITION_FOLLOWING = 0x04;
+
 export function inDocumentOrder<T extends { node: Node }>(items: readonly T[]): T[] {
-  return items.toSorted((a, b) => {
+  const sortedItems = [...items];
+  sortedItems.sort((a, b) => {
     if (a.node === b.node) return 0;
     const position = a.node.compareDocumentPosition(b.node);
-    if (position & Node.DOCUMENT_POSITION_FOLLOWING) return -1;
-    if (position & Node.DOCUMENT_POSITION_PRECEDING) return 1;
+    if (position & DOCUMENT_POSITION_FOLLOWING) return -1;
+    if (position & DOCUMENT_POSITION_PRECEDING) return 1;
     return 0;
   });
+  return sortedItems;
 }

package/src/utilities/json-highlight.ts

@@ -41,21 +41,10 @@ function plainCode(raw: string): string {
  * Returns the literal source slice including the surrounding quotes.
  */
 function readStringLiteral(source: string, startIndex: number): string {
-  let index = startIndex + 1;
-  while (index < source.length) {
-    const character = source[index];
-    if (character === '\\') {
-      index += 2;
-      continue;
-    }
-    if (character === '"') {
-      return source.slice(startIndex, index + 1);
-    }
-    index += 1;
-  }
-  // JSON.parse already validated input, so this branch is unreachable for
-  // well-formed JSON. Return the rest of the source as a defensive fallback.
-  return source.slice(startIndex);
+  const stringPattern = /"(?:\\.|[^"\\])*"/y;
+  stringPattern.lastIndex = startIndex;
+  const match = stringPattern.exec(source);
+  return match?.[0] ?? source[startIndex] ?? '';
 }
 
 /**
@@ -88,7 +77,6 @@ function tokenize(source: string): string {
 
   while (index < source.length) {
     const character = source[index];
-
     if (character === undefined) break;
 
     if (character === ' ' || character === '\t' || character === '\n' || character === '\r') {
@@ -169,8 +157,6 @@ function tokenize(source: string): string {
       continue;
     }
 
-    // Defensive: well-formed JSON has no other tokens. Emit the character
-    // escaped so we never mis-render unexpected input.
     output += escapeHtml(character);
     index += 1;
   }
@@ -178,6 +164,8 @@ function tokenize(source: string): string {
   return `<code class="cinder-json">${output}</code>`;
 }
 
+export const jsonHighlightInternalsForTesting = { tokenize };
+
 /**
  * Highlight a JSON value as syntax-colored HTML. Non-JSON input is returned as
  * a plain `<code>` with the input HTML-escaped, so the caller can wrap either