@lostgradient/cinder 0.4.0 → 0.5.0

package/src/components/hero-section/hero-section.css

@@ -0,0 +1,83 @@
+@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
+@layer cinder.components {
+  .cinder-hero-section {
+    container-type: inline-size;
+    padding-block: var(--cinder-space-10);
+  }
+
+  .cinder-hero-section__inner {
+    display: grid;
+    gap: var(--cinder-space-8);
+    align-items: center;
+  }
+
+  .cinder-hero-section__content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--cinder-space-4);
+    align-items: flex-start;
+  }
+
+  .cinder-hero-section[data-cinder-align='center'] .cinder-hero-section__content {
+    align-items: center;
+    text-align: center;
+  }
+
+  .cinder-hero-section__eyebrow {
+    margin: 0;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: var(--cinder-accent-text);
+    font-size: var(--cinder-text-xs);
+    font-weight: var(--cinder-font-semibold);
+  }
+
+  .cinder-hero-section__title {
+    margin: 0;
+    font-size: clamp(var(--cinder-text-3xl), 4vw, var(--cinder-text-5xl));
+    line-height: var(--cinder-leading-tight);
+    max-inline-size: 24ch;
+  }
+
+  .cinder-hero-section__description {
+    margin: 0;
+    color: var(--cinder-text-muted);
+    font-size: var(--cinder-text-lg);
+    max-inline-size: 60ch;
+  }
+
+  .cinder-hero-section__actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--cinder-space-3);
+  }
+
+  .cinder-hero-section__extra {
+    margin-top: var(--cinder-space-1);
+  }
+
+  .cinder-hero-section__media {
+    border: 1px solid var(--cinder-border-muted);
+    background: var(--cinder-surface-raised);
+    border-radius: var(--cinder-radius-lg);
+    padding: var(--cinder-space-4);
+  }
+
+  @container (min-width: 64rem) {
+    .cinder-hero-section[data-cinder-has-media] .cinder-hero-section__inner {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    .cinder-hero-section[data-cinder-has-media][data-cinder-media-position='start']
+      .cinder-hero-section__content {
+      grid-column: 2;
+      grid-row: 1;
+    }
+
+    .cinder-hero-section[data-cinder-has-media][data-cinder-media-position='start']
+      .cinder-hero-section__media {
+      grid-column: 1;
+      grid-row: 1;
+    }
+  }
+}

package/src/components/hero-section/hero-section.examples.json

@@ -0,0 +1,13 @@
+{
+  "$schema": "../../schemas/examples.schema.json",
+  "component": "hero-section",
+  "import": "@lostgradient/cinder/hero-section",
+  "examples": [
+    {
+      "id": "basic",
+      "title": "HeroSection",
+      "description": "HeroSection with eyebrow copy, dual actions, trust note, and a media panel.",
+      "code": "<script lang=\"ts\">\n  import { Button } from '@lostgradient/cinder/button';\n  import { HeroSection } from '@lostgradient/cinder/hero-section';\n</script>\n\n<HeroSection\n  eyebrow=\"Now in public beta\"\n  title=\"Build polished product interfaces in days, not months.\"\n  description=\"Cinder gives your team accessible UI foundations and high-level patterns so you can focus on shipping user value.\"\n  align=\"start\"\n>\n  {#snippet actions()}\n    <Button label=\"Start free trial\" variant=\"primary\" />\n    <Button label=\"View docs\" variant=\"secondary\" />\n  {/snippet}\n\n  {#snippet media()}\n    <img\n      src=\"https://placehold.co/640x420?text=Dashboard+Preview\"\n      alt=\"Product dashboard preview\"\n    />\n  {/snippet}\n\n  <p>Trusted by 2,000+ product teams worldwide.</p>\n</HeroSection>\n"
+    }
+  ]
+}

package/src/components/hero-section/hero-section.svelte

@@ -0,0 +1,81 @@
+<script lang="ts" module>
+  /**
+   * @cinder
+   * @category domain
+   * @status stable
+   * @purpose Landing-page hero scaffold with eyebrow, heading, supporting copy, CTA row, and optional media panel.
+   * @tag marketing
+   * @tag hero
+   * @tag layout
+   * @useWhen Building the first section of a marketing page where a primary message and call-to-action must stand out.
+   * @useWhen Pairing conversion copy with a visual demo, screenshot, or illustration in a split layout.
+   * @avoidWhen Presenting only a compact call-to-action strip between content sections. | cta-section
+   * @avoidWhen Listing repeatable product benefits or cards — use a dedicated features grid instead. | feature-section
+   * @related cta-section, feature-section, section-heading, container, button
+   */
+  export type {
+    HeroSectionAlign,
+    HeroSectionMediaPosition,
+    HeroSectionProps,
+  } from './hero-section.types.ts';
+</script>
+
+<script lang="ts">
+  import Container from '../container/container.svelte';
+  import { classNames } from '../../utilities/class-names.ts';
+
+  import type { HeroSectionProps } from './hero-section.types.ts';
+
+  let {
+    as = 'section',
+    eyebrow,
+    title,
+    description,
+    align = 'start',
+    mediaPosition = 'end',
+    maxWidth = 'wide',
+    actions,
+    media,
+    class: className,
+    children,
+    ...rest
+  }: HeroSectionProps = $props();
+</script>
+
+<svelte:element
+  this={as}
+  class={classNames('cinder-hero-section', className)}
+  data-cinder-align={align}
+  data-cinder-media-position={mediaPosition}
+  data-cinder-has-media={media ? '' : undefined}
+  {...rest}
+>
+  <Container {maxWidth}>
+    <div class="cinder-hero-section__inner">
+      <div class="cinder-hero-section__content">
+        {#if eyebrow}
+          <p class="cinder-hero-section__eyebrow">{eyebrow}</p>
+        {/if}
+        <h2 class="cinder-hero-section__title">{title}</h2>
+        {#if description}
+          <p class="cinder-hero-section__description">{description}</p>
+        {/if}
+        {#if actions}
+          <div class="cinder-hero-section__actions">
+            {@render actions()}
+          </div>
+        {/if}
+        {#if children}
+          <div class="cinder-hero-section__extra">
+            {@render children()}
+          </div>
+        {/if}
+      </div>
+      {#if media}
+        <div class="cinder-hero-section__media">
+          {@render media()}
+        </div>
+      {/if}
+    </div>
+  </Container>
+</svelte:element>

package/src/components/hero-section/hero-section.types.ts

@@ -0,0 +1,51 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { ContainerMaxWidth } from '../container/container.types.ts';
+
+export type HeroSectionAlign = 'start' | 'center';
+export type HeroSectionMediaPosition = 'start' | 'end';
+
+/** Props for the HeroSection component. */
+export type HeroSectionProps = Omit<HTMLAttributes<HTMLElement>, 'children' | 'class'> & {
+  /** Wrapper element tag. @default "section" */
+  as?: 'section' | 'div';
+  /** Small uppercase intro label rendered above the title. */
+  eyebrow?: string;
+  /** Main marketing headline. */
+  title: string;
+  /** Supporting copy shown below the title. */
+  description?: string;
+  /** Text alignment for heading and body copy. @default "start" */
+  align?: HeroSectionAlign;
+  /** Position of the optional media panel on wide layouts. @default "end" */
+  mediaPosition?: HeroSectionMediaPosition;
+  /** Max width token forwarded to Container. @default "wide" */
+  maxWidth?: ContainerMaxWidth;
+  /** Optional CTA row, usually one or two Button components. */
+  actions?: Snippet;
+  /** Optional visual/media block (image, demo, illustration). */
+  media?: Snippet;
+  /** Optional extra content rendered below description/actions. */
+  children?: Snippet;
+  /** Custom class merged with `.cinder-hero-section`. */
+  class?: string;
+};
+
+export interface HeroSectionSchemaProps {
+  /** Wrapper element tag. @default "section" */
+  as?: 'section' | 'div';
+  /** Small uppercase intro label rendered above the title. */
+  eyebrow?: string;
+  /** Main marketing headline. */
+  title: string;
+  /** Supporting copy shown below the title. */
+  description?: string;
+  /** Text alignment for heading and body copy. @default "start" */
+  align?: HeroSectionAlign;
+  /** Position of the optional media panel on wide layouts. @default "end" */
+  mediaPosition?: HeroSectionMediaPosition;
+  /** Max width token forwarded to Container. @default "wide" */
+  maxWidth?: ContainerMaxWidth;
+  /** Custom class merged with `.cinder-hero-section`. */
+  class?: string;
+}

package/src/components/hero-section/index.ts

@@ -0,0 +1,10 @@
+import './hero-section.css';
+import HeroSection from './hero-section.svelte';
+
+export default HeroSection;
+export type {
+  HeroSectionAlign,
+  HeroSectionMediaPosition,
+  HeroSectionProps,
+} from './hero-section.types.ts';
+export { HeroSection };

package/src/components/hover-card/hover-card.svelte

@@ -21,6 +21,7 @@
   import { devWarn } from '../../utilities/dev-warn.ts';
   import type { Placement } from '@floating-ui/dom';
   import { createAnchoredOverlay } from '../../_internal/anchored-overlay.svelte.ts';
+  import { pushEscapeHandler } from '../../_internal/overlay.ts';
   import { classNames } from '../../utilities/class-names.ts';
   import { createPortalAttachment } from '../portal/index.ts';
 
@@ -180,11 +181,10 @@
     if (!focusInsideCard) scheduleClose();
   }
 
-  function handleKeydown(event: KeyboardEvent) {
-    if (event.key === 'Escape' && open) {
-      event.preventDefault();
-      setOpen(false);
-    }
+  function handleEscape(event: KeyboardEvent | undefined = undefined) {
+    if (!open) return;
+    event?.preventDefault();
+    setOpen(false);
   }
 
   onDestroy(clearTimers);
@@ -195,8 +195,7 @@
 
   $effect(() => {
     if (!open) return;
-    document.addEventListener('keydown', handleKeydown);
-    return () => document.removeEventListener('keydown', handleKeydown);
+    return pushEscapeHandler(handleEscape);
   });
 
   $effect(() => {

package/src/components/inline-loading/index.ts

@@ -0,0 +1,6 @@
+import './inline-loading.css';
+import InlineLoading from './inline-loading.svelte';
+
+export default InlineLoading;
+export type { InlineLoadingProps, InlineLoadingStatus } from './inline-loading.types.ts';
+export { InlineLoading };

package/src/components/inline-loading/inline-loading.css

@@ -0,0 +1,50 @@
+@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
+@import '../spinner/spinner.css';
+
+@layer cinder.components {
+  .cinder-inline-loading {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--cinder-space-2);
+    min-block-size: 1em;
+    color: var(--cinder-text-muted);
+    vertical-align: middle;
+  }
+
+  .cinder-inline-loading[data-cinder-status='inactive'] {
+    display: none;
+  }
+
+  .cinder-inline-loading[data-cinder-status='active'] {
+    color: var(--cinder-text-muted);
+  }
+
+  .cinder-inline-loading[data-cinder-status='finished'] {
+    color: var(--cinder-success);
+  }
+
+  .cinder-inline-loading[data-cinder-status='error'] {
+    color: var(--cinder-danger);
+  }
+
+  .cinder-inline-loading__indicator {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: 0.875rem;
+    block-size: 0.875rem;
+    flex-shrink: 0;
+  }
+
+  .cinder-inline-loading__indicator .cinder-spinner {
+    inline-size: 0.875rem;
+    block-size: 0.875rem;
+    border-width: 1.5px;
+  }
+
+  .cinder-inline-loading__label {
+    font-size: var(--cinder-text-sm);
+    line-height: 1.25;
+    color: inherit;
+  }
+}

package/src/components/inline-loading/inline-loading.examples.json

@@ -0,0 +1,13 @@
+{
+  "$schema": "../../schemas/examples.schema.json",
+  "component": "inline-loading",
+  "import": "@lostgradient/cinder/inline-loading",
+  "examples": [
+    {
+      "id": "lifecycle",
+      "title": "Inline loading lifecycle",
+      "description": "Inline async action states: active, finished, and error.",
+      "code": "<script lang=\"ts\">\n  import { onDestroy } from 'svelte';\n  import { Button, InlineLoading } from '@lostgradient/cinder';\n\n  let status = $state<'inactive' | 'active' | 'finished' | 'error'>('inactive');\n  let message = $state('Saved');\n  let pendingTimeout: ReturnType<typeof setTimeout> | null = null;\n\n  function cancelPending(): void {\n    if (pendingTimeout !== null) {\n      clearTimeout(pendingTimeout);\n      pendingTimeout = null;\n    }\n  }\n\n  onDestroy(cancelPending);\n\n  function startSuccess(): void {\n    cancelPending();\n    status = 'active';\n    message = 'Saving changes';\n    pendingTimeout = setTimeout(() => {\n      status = 'finished';\n      message = 'Saved';\n      pendingTimeout = null;\n    }, 900);\n  }\n\n  function startError(): void {\n    cancelPending();\n    status = 'active';\n    message = 'Saving changes';\n    pendingTimeout = setTimeout(() => {\n      status = 'error';\n      message = 'Save failed';\n      pendingTimeout = null;\n    }, 900);\n  }\n</script>\n\n<div class=\"example-preview-column\" style=\"align-items: flex-start; gap: 0.75rem;\">\n  <div class=\"example-preview-row\" style=\"align-items: center; gap: 0.75rem;\">\n    <Button type=\"button\" onclick={startSuccess}>Save (success)</Button>\n    <Button type=\"button\" variant=\"secondary\" onclick={startError}>Save (error)</Button>\n    <InlineLoading bind:status description={message} />\n  </div>\n</div>\n"
+    }
+  ]
+}

package/src/components/inline-loading/inline-loading.svelte

@@ -0,0 +1,139 @@
+<script lang="ts" module>
+  /**
+   * @cinder
+   * @category feedback
+   * @status alpha
+   * @purpose Inline async-action status indicator that transitions from loading to success or error with accessible announcements.
+   * @tag async
+   * @tag feedback
+   * @tag loading
+   * @tag status
+   * @useWhen Showing a compact Submit -> loading -> success/error lifecycle beside a button or form row.
+   * @useWhen Communicating short-lived async state transitions without reserving large layout space.
+   * @avoidWhen Showing indeterminate work without success/error transitions — use spinner.
+   * @avoidWhen Reporting static non-loading status in dense lists — use status-dot.
+   * @related spinner, status-dot
+   */
+  export type { InlineLoadingProps, InlineLoadingStatus } from './inline-loading.types.ts';
+</script>
+
+<script lang="ts">
+  import { untrack } from 'svelte';
+  import Check from 'lucide-svelte/icons/check';
+  import X from 'lucide-svelte/icons/x';
+  import { classNames } from '../../utilities/class-names.ts';
+  import Spinner from '../spinner/spinner.svelte';
+  import VisuallyHiddenLiveRegion from '../_visually-hidden-live-region.svelte';
+  import type { InlineLoadingProps, InlineLoadingStatus } from './inline-loading.types.ts';
+
+  const fallbackStatusLabel: Record<Exclude<InlineLoadingStatus, 'inactive'>, string> = {
+    active: 'Loading',
+    finished: 'Success',
+    error: 'Error',
+  };
+
+  let {
+    // $bindable so the component can write `status = 'inactive'` when the
+    // successDelay timer fires. Without this, if the parent re-assigns
+    // `status = 'finished'` while it is already 'finished' (after the
+    // visual auto-reset), Svelte does not re-run the effect because the
+    // value did not change, so the success indicator stays hidden.
+    status = $bindable<InlineLoadingStatus>('inactive'),
+    description,
+    iconDescription,
+    successDelay = 1500,
+    class: className,
+    ...rest
+  }: InlineLoadingProps = $props();
+
+  let visualStatus = $state<InlineLoadingStatus>(status);
+  let successTimer: ReturnType<typeof setTimeout> | null = null;
+
+  const normalizedDescription = $derived(description?.trim() ? description.trim() : undefined);
+  const normalizedIconDescription = $derived(
+    iconDescription?.trim() ? iconDescription.trim() : undefined,
+  );
+  const fallbackText = $derived(
+    visualStatus === 'inactive' ? '' : fallbackStatusLabel[visualStatus],
+  );
+  const visibleDescription = $derived(
+    visualStatus === 'inactive' ? '' : (normalizedDescription ?? fallbackText),
+  );
+  const spokenDescription = $derived(
+    visualStatus === 'inactive'
+      ? ''
+      : (normalizedDescription ?? normalizedIconDescription ?? fallbackText),
+  );
+  const announcementMessage = $derived(
+    visualStatus === 'inactive'
+      ? ''
+      : spokenDescription === fallbackText
+        ? spokenDescription
+        : `${fallbackText}. ${spokenDescription}`,
+  );
+
+  function clearSuccessTimer(): void {
+    if (successTimer !== null) {
+      clearTimeout(successTimer);
+      successTimer = null;
+    }
+  }
+
+  $effect(() => {
+    return () => {
+      clearSuccessTimer();
+    };
+  });
+
+  $effect(() => {
+    clearSuccessTimer();
+
+    if (status !== 'finished') {
+      visualStatus = status;
+      return;
+    }
+
+    // Read successDelay without registering it as a reactive dependency so that
+    // a prop change to successDelay while status is still "finished" (e.g. after
+    // the auto-reset timer already fired) does not re-show the success indicator.
+    const delay = untrack(() => successDelay);
+
+    if (!Number.isFinite(delay) || delay <= 0) {
+      visualStatus = 'inactive';
+      status = 'inactive';
+      return;
+    }
+
+    visualStatus = 'finished';
+    successTimer = setTimeout(() => {
+      visualStatus = 'inactive';
+      // Reset the bindable prop so a subsequent `status = 'finished'` from the
+      // parent is a real value change ('inactive' -> 'finished'), allowing the
+      // effect to re-run and show the success indicator again.
+      status = 'inactive';
+      successTimer = null;
+    }, delay);
+  });
+</script>
+
+<span
+  {...rest}
+  class={classNames('cinder-inline-loading', className)}
+  data-cinder-status={visualStatus}
+  aria-hidden={visualStatus === 'inactive' ? 'true' : undefined}
+>
+  {#if visualStatus !== 'inactive'}
+    <span class="cinder-inline-loading__indicator" aria-hidden="true">
+      {#if visualStatus === 'active'}
+        <Spinner size="sm" label={spokenDescription} />
+      {:else if visualStatus === 'finished'}
+        <Check size={14} strokeWidth={2.25} />
+      {:else}
+        <X size={14} strokeWidth={2.25} />
+      {/if}
+    </span>
+    <span class="cinder-inline-loading__label">{visibleDescription}</span>
+  {/if}
+</span>
+
+<VisuallyHiddenLiveRegion message={announcementMessage} />

package/src/components/inline-loading/inline-loading.types.ts

@@ -0,0 +1,41 @@
+import type { HTMLAttributes } from 'svelte/elements';
+
+export type InlineLoadingStatus = 'inactive' | 'active' | 'finished' | 'error';
+
+export type InlineLoadingProps = Omit<HTMLAttributes<HTMLSpanElement>, 'class'> & {
+  /**
+   * Lifecycle state for the inline async action indicator. Bindable: the
+   * component resets this to `"inactive"` after the `successDelay` timer fires
+   * so a subsequent `status = "finished"` from the parent is always a real
+   * value transition that re-shows the success indicator.
+   * @default "inactive"
+   */
+  status?: InlineLoadingStatus;
+  /** Visible status label rendered next to the indicator. */
+  description?: string;
+  /** Accessible status wording used by announcements when no visible description is provided. */
+  iconDescription?: string;
+  /** Delay in milliseconds before auto-resetting `finished` back to `inactive`. @default 1500 */
+  successDelay?: number;
+  /** Extra classes appended to the root element. */
+  class?: string;
+};
+
+export interface InlineLoadingSchemaProps {
+  /**
+   * Lifecycle state for the inline async action indicator. Bindable: the
+   * component resets this to `"inactive"` after the `successDelay` timer fires
+   * so a subsequent `status = "finished"` from the parent is always a real
+   * value transition that re-shows the success indicator.
+   * @default "inactive"
+   */
+  status?: InlineLoadingStatus;
+  /** Visible status label rendered next to the indicator. */
+  description?: string;
+  /** Accessible status wording used by announcements when no visible description is provided. */
+  iconDescription?: string;
+  /** Delay in milliseconds before auto-resetting `finished` back to `inactive`. @default 1500 */
+  successDelay?: number;
+  /** Extra classes appended to the root element. */
+  class?: string;
+}

package/src/components/input/input.examples.json

@@ -9,6 +9,12 @@
       "description": "Text input with label and bound value.",
       "code": "<script lang=\"ts\">\n  import { Input } from '@lostgradient/cinder/input';\n\n  let name = $state('');\n</script>\n\n<Input id=\"field\" bind:value={name} label=\"Full name\" placeholder=\"Jane Smith\" />\n{#if name}\n  <p style=\"margin-top: 0.5rem; color: var(--cinder-text-muted);\">Hello, {name}!</p>\n{/if}\n"
     },
+    {
+      "id": "compact-hidden-label",
+      "title": "Compact field with hidden label",
+      "description": "Keep the accessible name from label while visually hiding it for compact auth/token layouts.",
+      "code": "<script lang=\"ts\">\n  import { Input } from '@lostgradient/cinder/input';\n\n  let token = $state('');\n</script>\n\n<Input\n  id=\"demo-token\"\n  bind:value={token}\n  label=\"Demo token\"\n  hideLabel\n  autocomplete=\"off\"\n  placeholder=\"Enter demo token\"\n/>\n"
+    },
     {
       "id": "sign-in",
       "title": "Sign-in composition",

package/src/components/input/input.svelte

@@ -29,6 +29,7 @@
     value = $bindable(''),
     onValueChange,
     label,
+    hideLabel = false,
     description,
     error,
     disabled,
@@ -155,7 +156,11 @@
 
 <div class="cinder-input-field">
   {#if label}
-    <label for={id} class="cinder-input-field__label" data-disabled={resolvedDisabled || undefined}>
+    <label
+      for={id}
+      class={classNames('cinder-input-field__label', hideLabel && 'cinder-sr-only')}
+      data-disabled={resolvedDisabled || undefined}
+    >
       {label}
       {#if resolvedRequired}
         <span class="cinder-_required-marker" aria-hidden="true">*</span>

package/src/components/input/input.types.ts

@@ -46,6 +46,8 @@ export type InputProps = HTMLInputAttributes &
     onValueChange?: (next: string) => string | void;
     /** Visible label text rendered above the input and linked via `for`/`id`. */
     label?: string;
+    /** Visually hide the rendered `label` while keeping it programmatically associated. */
+    hideLabel?: boolean;
     /** Helper text rendered below the input and associated via `aria-describedby`. */
     description?: string;
     /** Error message rendered below the input; also sets `aria-invalid` on the input. */

package/src/components/json-schema-editor/diff-view.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" module>
-  import type { EditorState } from './json-schema-editor-state.svelte.ts';
+  import type { EditorState } from './json-schema-editor-state.types.ts';
 
   export type DiffViewProps = {
     state: EditorState;

package/src/components/json-schema-editor/form-view.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" module>
-  import type { EditorState } from './json-schema-editor-state.svelte.ts';
+  import type { EditorState } from './json-schema-editor-state.types.ts';
 
   export type FormViewProps = {
     state: EditorState;

package/src/components/json-schema-editor/json-schema-editor-state.svelte.ts

@@ -13,16 +13,12 @@
  * schema (meta-schema) and compile (debounced).
  */
 
-import {
-  stableSerialise,
-  useHistory,
-  type UseHistory,
-} from '../../utilities/use-history.svelte.ts';
+import { stableSerialise, useHistory } from '../../utilities/use-history.svelte.ts';
+import type { UseHistory } from '../../utilities/use-history.types.ts';
 
+import type { CreateEditorStateOptions } from './json-schema-editor-state.types.ts';
 import type {
   JsonSchemaDraft,
-  JsonSchemaEditorChangeEvent,
-  JsonSchemaEditorRevertEvent,
   JsonSchemaEditorView,
   JsonSchemaKnownDraft,
   JsonSchemaValidationError,
@@ -51,17 +47,6 @@ const COMPILE_DEBOUNCE_MS = 500;
  */
 const COMPILE_DEFER_BYTES = 100_000;
 
-export interface CreateEditorStateOptions {
-  schema: JsonSchemaValue | string;
-  original?: JsonSchemaValue | string;
-  draftOverride?: JsonSchemaKnownDraft;
-  readonly?: boolean;
-  maxHistory?: number;
-  onchange?: (event: JsonSchemaEditorChangeEvent) => void;
-  onrevert?: (event: JsonSchemaEditorRevertEvent) => void;
-  onvalidate?: (result: JsonSchemaValidationResult) => void;
-}
-
 function serialise(value: JsonSchemaValue): string {
   return JSON.stringify(value, null, PRETTY_INDENT);
 }
@@ -508,5 +493,3 @@ export function createEditorState(options: CreateEditorStateOptions) {
     },
   };
 }
-
-export type EditorState = ReturnType<typeof createEditorState>;

package/src/components/json-schema-editor/json-schema-editor-state.types.ts

@@ -0,0 +1,21 @@
+import type { createEditorState } from './json-schema-editor-state.svelte.ts';
+import type {
+  JsonSchemaEditorChangeEvent,
+  JsonSchemaEditorRevertEvent,
+  JsonSchemaKnownDraft,
+  JsonSchemaValidationResult,
+  JsonSchemaValue,
+} from './json-schema-editor-types.ts';
+
+export interface CreateEditorStateOptions {
+  schema: JsonSchemaValue | string;
+  original?: JsonSchemaValue | string;
+  draftOverride?: JsonSchemaKnownDraft;
+  readonly?: boolean;
+  maxHistory?: number;
+  onchange?: (event: JsonSchemaEditorChangeEvent) => void;
+  onrevert?: (event: JsonSchemaEditorRevertEvent) => void;
+  onvalidate?: (result: JsonSchemaValidationResult) => void;
+}
+
+export type EditorState = ReturnType<typeof createEditorState>;

package/src/components/json-schema-editor/json-schema-toolbar.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" module>
-  import type { EditorState } from './json-schema-editor-state.svelte.ts';
+  import type { EditorState } from './json-schema-editor-state.types.ts';
 
   export type JsonSchemaToolbarProps = {
     state: EditorState;