@lostgradient/cinder 0.1.1 → 0.2.0

package/src/components/dropdown-item/dropdown-item.types.ts

@@ -1,10 +1,66 @@
 import type { Snippet } from 'svelte';
-import type { HTMLButtonAttributes } from 'svelte/elements';
+import type { HTMLAnchorAttributes, HTMLAttributes, HTMLButtonAttributes } from 'svelte/elements';
+
 export type DropdownItemVariant = 'default' | 'danger';
-export type DropdownItemProps = Omit<HTMLButtonAttributes, 'class'> & {
+
+// The shared base carries the common HTML attribute surface — crucially the
+// event handlers (onclick/onkeydown/onfocus/…) — typed against the generic
+// `HTMLElement`. Both render paths (`<button>` and `<a>`) satisfy that, so a
+// consumer can attach an inline handler without TypeScript forcing it to
+// "prove" which branch it is on. Element-specific NON-event attributes live in
+// the two branches so the `href` ⇄ `type` discriminant stays real.
+type DropdownItemBase = Omit<HTMLAttributes<HTMLElement>, 'class'> & {
   variant?: DropdownItemVariant;
   inset?: boolean;
   closeOnSelect?: boolean;
   class?: string;
   children?: Snippet;
+  /** When true the item is inert: click is blocked and aria-disabled is set. */
+  disabled?: boolean | undefined;
 };
+
+/**
+ * Button variant — renders a `<button>`. Forwards every button-specific
+ * attribute (`name`, `value`, `form`, `formaction`, `formmethod`,
+ * `formnovalidate`, `formtarget`, `formenctype`, …) by subtracting the shared
+ * `HTMLElement` surface — which the base already provides with `HTMLElement`-typed
+ * event handlers — so a form-submitting menu item (`type="submit"` with `name`/
+ * `value`) keeps full typing without reintroducing the inline-handler
+ * contravariance trap. `disabled` is owned by the base (a managed click guard +
+ * aria-disabled), not the native attribute.
+ */
+export type DropdownItemButtonProps = DropdownItemBase &
+  Omit<HTMLButtonAttributes, keyof HTMLAttributes<HTMLElement> | 'class' | 'disabled' | 'type'> & {
+    href?: undefined;
+    /**
+     * Button type forwarded to the `<button>` element. Defaults to `"button"`.
+     *
+     * NOTE: `type="submit"` only submits a surrounding `<form>` when the menu
+     * stays inside that form's DOM subtree. DropdownMenu portals its panel to
+     * `document.body` on the non-popover fallback path, so a submit item is then
+     * NOT a form descendant and native submission is skipped. To submit a form
+     * from a portaled menu, set `form="<form-id>"` to associate the button with
+     * the form by id, or handle submission in `onclick`.
+     */
+    type?: 'button' | 'submit' | 'reset';
+  };
+
+/**
+ * Anchor variant — renders an `<a href>`. `disabled` blocks navigation and sets
+ * aria-disabled. Forwards every anchor-specific attribute (`target`, `rel`,
+ * `download`, `ping`, `hreflang`, `referrerpolicy`, …) by subtracting the shared
+ * `HTMLElement` surface — which the base already provides with `HTMLElement`-typed
+ * event handlers — so the inline-handler contravariance trap never reappears.
+ */
+export type DropdownItemAnchorProps = DropdownItemBase &
+  Omit<HTMLAnchorAttributes, keyof HTMLAttributes<HTMLElement> | 'class' | 'href'> & {
+    /**
+     * Destination URL. Any defined value — including an empty string — selects
+     * the anchor branch and renders an `<a>`. Omit `href` entirely to render a
+     * `<button>`.
+     */
+    href: string;
+    type?: undefined;
+  };
+
+export type DropdownItemProps = DropdownItemButtonProps | DropdownItemAnchorProps;

package/src/components/dropdown-item/index.ts

@@ -1,5 +1,10 @@
 import DropdownItem from './dropdown-item.svelte';
 
 export default DropdownItem;
-export type { DropdownItemProps, DropdownItemVariant } from './dropdown-item.types.ts';
+export type {
+  DropdownItemAnchorProps,
+  DropdownItemButtonProps,
+  DropdownItemProps,
+  DropdownItemVariant,
+} from './dropdown-item.types.ts';
 export { DropdownItem };

package/src/components/floating-action-button/README.md

@@ -0,0 +1,53 @@
+# FloatingActionButton
+
+Circular button representing the single most important action on a screen.
+
+## Usage
+
+```svelte
+<script lang="ts">
+  import { FloatingActionButton } from '@lostgradient/cinder/floating-action-button';
+</script>
+```
+
+## Guidance
+
+### Use When
+
+- One action dominates the page purpose (compose, add, create).
+
+### Avoid When
+
+- Multiple equally-important actions exist — use a toolbar or button group.
+- You need it pinned to the viewport — it doesn't position itself; wrap it in your own fixed/sticky container.
+
+## Props
+
+<!-- generated:props:start -->
+
+| Prop       | Type                                        | Required | Default     | Description                                              |
+| ---------- | ------------------------------------------- | -------- | ----------- | -------------------------------------------------------- |
+| `class`    | `string`                                    | no       | —           | Custom class merged with `.cinder-fab`.                  |
+| `color`    | `"primary"` \| `"secondary"` \| `"surface"` | no       | `"primary"` | Color palette.                                           |
+| `disabled` | `boolean`                                   | no       | `false`     | When true, disables the button and prevents interaction. |
+| `href`     | `string`                                    | no       | —           | Render as an anchor `<a>` element with this href.        |
+| `size`     | `"sm"` \| `"md"` \| `"lg"`                  | no       | `"md"`      | Size of the FAB.                                         |
+| `variant`  | `"filled"` \| `"extended"`                  | no       | `"filled"`  | Visual variant. `filled` = circle, `extended` = pill.    |
+
+<!-- generated:props:end -->
+
+## CSS Variables
+
+<!-- generated:variables:start -->
+
+This component does not declare any local CSS variables.
+
+<!-- generated:variables:end -->
+
+## Subcomponents
+
+<!-- generated:subcomponents:start -->
+
+None.
+
+<!-- generated:subcomponents:end -->

package/src/components/floating-action-button/floating-action-button.css

@@ -179,9 +179,11 @@
     }
   }
 
-  /* :active placed after hover media so press feedback fires on tap as well */
+  /* :active placed after hover media so press feedback fires on tap as well.
+     Uses the gentler on-fill pressed token so the --cinder-accent-contrast label stays
+     AA-legible on the pressed fill (see --cinder-accent-active-on-fill in tokens-base.css). */
   .cinder-fab[data-cinder-color='primary']:active:not(:disabled):not([aria-disabled='true']) {
-    background: var(--cinder-accent-active);
+    background: var(--cinder-accent-active-on-fill);
   }
 
   .cinder-fab[data-cinder-color='secondary']:active:not(:disabled):not([aria-disabled='true']) {

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

@@ -3,6 +3,12 @@
   "component": "form-section",
   "import": "@lostgradient/cinder/form-section",
   "examples": [
+    {
+      "id": "account-settings",
+      "title": "Account settings panel",
+      "description": "FormSection groups related account and privacy controls under a headed section. Text fields use FormField + Input; on/off settings use Toggle standalone (it renders its own label).",
+      "code": "<script lang=\"ts\">\n  import { FormField } from '@lostgradient/cinder/form-field';\n  import { FormSection } from '@lostgradient/cinder/form-section';\n  import { Input } from '@lostgradient/cinder/input';\n  import { Toggle } from '@lostgradient/cinder/toggle';\n\n  let displayName = $state('');\n  let email = $state('');\n  let publicProfile = $state(true);\n  let marketingEmails = $state(false);\n</script>\n\n<div style=\"display: flex; flex-direction: column; gap: 2rem;\">\n  <FormSection\n    heading=\"Account\"\n    headingLevel={2}\n    description=\"Update your display name and email address.\"\n    columns={2}\n  >\n    <FormField id=\"display-name\" label=\"Display name\">\n      <Input id=\"display-name\" bind:value={displayName} placeholder=\"Jane Smith\" />\n    </FormField>\n    <FormField id=\"account-email\" label=\"Email address\">\n      <Input id=\"account-email\" bind:value={email} type=\"email\" placeholder=\"jane@example.com\" />\n    </FormField>\n  </FormSection>\n\n  <FormSection\n    heading=\"Privacy\"\n    headingLevel={2}\n    description=\"Control who can see your profile and what communications you receive.\"\n  >\n    <Toggle id=\"public-profile\" bind:checked={publicProfile} label=\"Public profile\" />\n    <Toggle id=\"marketing-emails\" bind:checked={marketingEmails} label=\"Marketing emails\" />\n  </FormSection>\n</div>\n"
+    },
     {
       "id": "fieldset-legend",
       "title": "Fieldset with legend",

package/src/components/hover-card/README.md

@@ -0,0 +1,60 @@
+# HoverCard
+
+Hover-and-focus triggered rich preview card for non-interactive contextual content.
+
+## Usage
+
+```svelte
+<script lang="ts">
+  import { HoverCard } from '@lostgradient/cinder/hover-card';
+</script>
+```
+
+## Guidance
+
+### Use When
+
+- Showing a profile, issue, or metadata preview that is richer than a tooltip but still read-only.
+- Revealing supplementary preview content on pointer hover or keyboard focus without moving focus.
+
+### Avoid When
+
+- The floating content contains focusable controls — use popover.
+- The trigger needs a short accessible description — use tooltip.
+
+## Props
+
+<!-- generated:props:start -->
+
+| Prop           | Type                                                                                                                                                                                       | Required | Default | Description                                                                                                                |
+| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------- | ------- | -------------------------------------------------------------------------------------------------------------------------- |
+| `class`        | `string`                                                                                                                                                                                   | no       | —       |                                                                                                                            |
+| `closeDelay`   | `number`                                                                                                                                                                                   | no       | —       |                                                                                                                            |
+| `description`  | `string`                                                                                                                                                                                   | no       | —       |                                                                                                                            |
+| `offset`       | `number`                                                                                                                                                                                   | no       | —       |                                                                                                                            |
+| `open`         | `boolean`                                                                                                                                                                                  | no       | —       |                                                                                                                            |
+| `openDelay`    | `number`                                                                                                                                                                                   | no       | —       |                                                                                                                            |
+| `placement`    | `"top"` \| `"top-start"` \| `"top-end"` \| `"right"` \| `"right-start"` \| `"right-end"` \| `"bottom"` \| `"bottom-start"` \| `"bottom-end"` \| `"left"` \| `"left-start"` \| `"left-end"` | no       | —       |                                                                                                                            |
+| `showArrow`    | `boolean`                                                                                                                                                                                  | no       | —       |                                                                                                                            |
+| `children`     | `(opaque)`                                                                                                                                                                                 | no       | —       | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature. |
+| `onopenchange` | `(opaque)`                                                                                                                                                                                 | no       | —       | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature. |
+| `trigger`      | `(opaque)`                                                                                                                                                                                 | no       | —       | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature. |
+| `triggerRef`   | `(opaque)`                                                                                                                                                                                 | no       | —       | A prop whose shape is not captured by the JSON schema; see the component types for the exact signature.                    |
+
+<!-- generated:props:end -->
+
+## CSS Variables
+
+<!-- generated:variables:start -->
+
+This component does not declare any local CSS variables.
+
+<!-- generated:variables:end -->
+
+## Subcomponents
+
+<!-- generated:subcomponents:start -->
+
+None.
+
+<!-- generated:subcomponents:end -->

package/src/components/json-schema-editor/README.md

@@ -0,0 +1,59 @@
+# JsonSchemaEditor
+
+Multi-view editor for authoring JSON Schema documents with form, raw JSON, and diff modes plus undo history and validation.
+
+## Usage
+
+```svelte
+<script lang="ts">
+  import { JsonSchemaEditor } from '@lostgradient/cinder/json-schema-editor';
+</script>
+```
+
+## Guidance
+
+### Use When
+
+- Letting users edit a JSON Schema with a guided form alongside the raw source.
+- Reviewing schema changes against a baseline via the built-in diff view.
+
+### Avoid When
+
+- Editing arbitrary free-form JSON with no schema semantics — use a plain code editor instead.
+
+## Props
+
+<!-- generated:props:start -->
+
+| Prop            | Type                                       | Required | Default | Description                                                                                                                |
+| --------------- | ------------------------------------------ | -------- | ------- | -------------------------------------------------------------------------------------------------------------------------- |
+| `class`         | `string`                                   | no       | —       |                                                                                                                            |
+| `draftOverride` | `"2020-12"` \| `"2019-09"` \| `"draft-07"` | no       | —       | Force a draft override regardless of $schema.                                                                              |
+| `id`            | `string`                                   | yes      | —       | Required for ARIA wiring.                                                                                                  |
+| `maxHistory`    | `number`                                   | no       | —       | Maximum history entries (default 100).                                                                                     |
+| `readonly`      | `boolean`                                  | no       | —       | Read-only mode disables all mutations.                                                                                     |
+| `schemaKey`     | `string`                                   | no       | —       | Changing this triggers a full reset (history clears).                                                                      |
+| `view`          | `"form"` \| `"json"` \| `"diff"`           | no       | —       | Active view: form / json / diff. Bindable.                                                                                 |
+| `onchange`      | `(opaque)`                                 | no       | —       | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature. |
+| `onrevert`      | `(opaque)`                                 | no       | —       | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature. |
+| `onvalidate`    | `(opaque)`                                 | no       | —       | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature. |
+| `original`      | `(opaque)`                                 | no       | —       | A prop whose shape is not captured by the JSON schema; see the component types for the exact signature.                    |
+| `schema`        | `(opaque)`                                 | no       | —       | A prop whose shape is not captured by the JSON schema; see the component types for the exact signature.                    |
+
+<!-- generated:props:end -->
+
+## CSS Variables
+
+<!-- generated:variables:start -->
+
+This component does not declare any local CSS variables.
+
+<!-- generated:variables:end -->
+
+## Subcomponents
+
+<!-- generated:subcomponents:start -->
+
+None.
+
+<!-- generated:subcomponents:end -->

package/src/components/kanban-board/README.md

@@ -0,0 +1,62 @@
+# KanbanBoard
+
+Controlled multi-column board for reordering cards within and across workflow columns with keyboard, pointer, and live-region feedback.
+
+## Usage
+
+```svelte
+<script lang="ts">
+  import { KanbanBoard } from '@lostgradient/cinder/kanban-board';
+</script>
+```
+
+## Guidance
+
+### Use When
+
+- Presenting a workflow board where users move cards between ordered columns.
+- Consumers own card rendering and need cinder to manage reorder affordances and change metadata.
+
+### Avoid When
+
+- Showing a single ordered list — use sortable-list instead.
+- Sorting by computed fields rather than direct manual placement.
+
+## Props
+
+<!-- generated:props:start -->
+
+| Prop             | Type       | Required | Default | Description                                                                                                                |
+| ---------------- | ---------- | -------- | ------- | -------------------------------------------------------------------------------------------------------------------------- |
+| `class`          | `string`   | no       | —       |                                                                                                                            |
+| `collapsible`    | `boolean`  | no       | —       |                                                                                                                            |
+| `label`          | `string`   | no       | —       |                                                                                                                            |
+| `reorderColumns` | `boolean`  | no       | —       |                                                                                                                            |
+| `card`           | `(opaque)` | no       | —       | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature. |
+| `columnActions`  | `(opaque)` | no       | —       | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature. |
+| `columnHeader`   | `(opaque)` | no       | —       | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature. |
+| `columns`        | `(opaque)` | no       | —       | A prop whose shape is not captured by the JSON schema; see the component types for the exact signature.                    |
+| `emptyColumn`    | `(opaque)` | no       | —       | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature. |
+| `getCardKey`     | `(opaque)` | no       | —       | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature. |
+| `getCardLabel`   | `(opaque)` | no       | —       | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature. |
+| `onchange`       | `(opaque)` | no       | —       | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature. |
+
+<!-- generated:props:end -->
+
+## CSS Variables
+
+<!-- generated:variables:start -->
+
+- `--cinder-kanban-card-background`
+- `--cinder-kanban-column-background`
+- `--cinder-kanban-column-gap`
+- `--cinder-kanban-column-width`
+<!-- generated:variables:end -->
+
+## Subcomponents
+
+<!-- generated:subcomponents:start -->
+
+None.
+
+<!-- generated:subcomponents:end -->

package/src/components/keyboard-shortcuts/README.md

@@ -0,0 +1,51 @@
+# KeyboardShortcuts
+
+Grouped keyboard-shortcut reference that renders key combos via Kbd with accessible labels not reliant only on visual keycaps.
+
+## Usage
+
+```svelte
+<script lang="ts">
+  import { KeyboardShortcuts } from '@lostgradient/cinder/keyboard-shortcuts';
+</script>
+```
+
+## Guidance
+
+### Use When
+
+- Displaying a reference panel of keyboard shortcuts grouped by feature area.
+- Embedding a shortcut table inside a modal, sheet, popover, or help page.
+
+### Avoid When
+
+- Showing a single inline shortcut hint — use shortcut-hint instead.
+
+## Props
+
+<!-- generated:props:start -->
+
+| Prop       | Type       | Required | Default | Description                                                                                                                |
+| ---------- | ---------- | -------- | ------- | -------------------------------------------------------------------------------------------------------------------------- |
+| `class`    | `string`   | no       | —       | Additional class names merged with `.cinder-keyboard-shortcuts`.                                                           |
+| `heading`  | `string`   | no       | —       | Optional heading for the entire shortcuts panel.                                                                           |
+| `children` | `(opaque)` | no       | —       | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature. |
+| `groups`   | `(opaque)` | no       | —       | A prop whose shape is not captured by the JSON schema; see the component types for the exact signature.                    |
+
+<!-- generated:props:end -->
+
+## CSS Variables
+
+<!-- generated:variables:start -->
+
+This component does not declare any local CSS variables.
+
+<!-- generated:variables:end -->
+
+## Subcomponents
+
+<!-- generated:subcomponents:start -->
+
+None.
+
+<!-- generated:subcomponents:end -->

package/src/components/keyboard-shortcuts/index.ts

@@ -0,0 +1,10 @@
+import './keyboard-shortcuts.css';
+import KeyboardShortcuts from './keyboard-shortcuts.svelte';
+
+export default KeyboardShortcuts;
+export type {
+  KeyboardShortcutEntry,
+  KeyboardShortcutGroup,
+  KeyboardShortcutsProps,
+} from './keyboard-shortcuts.types.ts';
+export { KeyboardShortcuts };

package/src/components/keyboard-shortcuts/keyboard-shortcuts.css

@@ -0,0 +1,84 @@
+@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
+@layer cinder.components {
+  .cinder-keyboard-shortcuts {
+    display: flex;
+    flex-direction: column;
+    gap: var(--cinder-space-4);
+  }
+
+  .cinder-keyboard-shortcuts__heading {
+    font-size: var(--cinder-text-lg);
+    font-weight: 600;
+    color: var(--cinder-text);
+    margin: 0;
+  }
+
+  .cinder-keyboard-shortcuts__intro {
+    font-size: var(--cinder-text-sm);
+    color: var(--cinder-text-muted);
+  }
+
+  .cinder-keyboard-shortcuts__group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--cinder-space-2);
+  }
+
+  .cinder-keyboard-shortcuts__group-label {
+    font-size: var(--cinder-text-xs);
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--cinder-text-muted);
+    margin: 0;
+  }
+
+  .cinder-keyboard-shortcuts__list {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+    margin: 0;
+    padding: 0;
+    border: 1px solid var(--cinder-border);
+    border-radius: var(--cinder-radius-md);
+    overflow: hidden;
+  }
+
+  .cinder-keyboard-shortcuts__row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--cinder-space-1) var(--cinder-space-2);
+    gap: var(--cinder-space-3);
+  }
+
+  .cinder-keyboard-shortcuts__row + .cinder-keyboard-shortcuts__row {
+    border-top: 1px solid var(--cinder-border);
+  }
+
+  .cinder-keyboard-shortcuts__action {
+    font-size: var(--cinder-text-sm);
+    color: var(--cinder-text);
+    flex: 1;
+  }
+
+  .cinder-keyboard-shortcuts__keys {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    margin: 0;
+  }
+
+  .cinder-keyboard-shortcuts__keys-visual {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--cinder-space-1);
+  }
+
+  .cinder-keyboard-shortcuts__separator {
+    font-size: var(--cinder-text-xs);
+    color: var(--cinder-text-muted);
+    line-height: 1;
+    user-select: none;
+  }
+}

package/src/components/keyboard-shortcuts/keyboard-shortcuts.examples.json

@@ -0,0 +1,13 @@
+{
+  "$schema": "../../schemas/examples.schema.json",
+  "component": "keyboard-shortcuts",
+  "import": "@lostgradient/cinder/keyboard-shortcuts",
+  "examples": [
+    {
+      "id": "command-palette",
+      "title": "Command palette shortcuts reference",
+      "description": "A grouped shortcut reference panel suitable for embedding in a modal or sheet.",
+      "code": "<script lang=\"ts\">\n  import { KeyboardShortcuts } from '@lostgradient/cinder/keyboard-shortcuts';\n</script>\n\n<div style=\"max-width: 28rem;\">\n  <KeyboardShortcuts\n    heading=\"Keyboard Shortcuts\"\n    groups={[\n      {\n        label: 'General',\n        shortcuts: [\n          { action: 'Open command palette', keys: ['Ctrl', 'K'], keysLabel: 'Control plus K' },\n          { action: 'Search', keys: ['Ctrl', 'F'], keysLabel: 'Control plus F' },\n          { action: 'Go back', keys: ['Alt', '←'], keysLabel: 'Alt plus Left arrow' },\n        ],\n      },\n      {\n        label: 'Editing',\n        shortcuts: [\n          { action: 'Save', keys: ['Ctrl', 'S'], keysLabel: 'Control plus S' },\n          { action: 'Undo', keys: ['Ctrl', 'Z'], keysLabel: 'Control plus Z' },\n          { action: 'Redo', keys: ['Ctrl', 'Shift', 'Z'], keysLabel: 'Control plus Shift plus Z' },\n        ],\n      },\n    ]}\n  />\n</div>\n"
+    }
+  ]
+}

package/src/components/keyboard-shortcuts/keyboard-shortcuts.schema.json

@@ -0,0 +1,27 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "type": "object",
+  "properties": {
+    "heading": {
+      "type": "string",
+      "description": "Optional heading for the entire shortcuts panel."
+    },
+    "class": {
+      "type": "string",
+      "description": "Additional class names merged with `.cinder-keyboard-shortcuts`."
+    }
+  },
+  "additionalProperties": false,
+  "metadata": {
+    "unsupportedProps": [
+      {
+        "name": "children",
+        "reason": "function-or-snippet"
+      },
+      {
+        "name": "groups",
+        "reason": "unknown-shape"
+      }
+    ]
+  }
+}

package/src/components/keyboard-shortcuts/keyboard-shortcuts.schema.ts

@@ -0,0 +1,31 @@
+import type { ComponentSchema } from '../../schema-types';
+
+const schema = {
+  $schema: 'https://json-schema.org/draft/2020-12/schema',
+  type: 'object',
+  properties: {
+    heading: {
+      type: 'string',
+      description: 'Optional heading for the entire shortcuts panel.',
+    },
+    class: {
+      type: 'string',
+      description: 'Additional class names merged with `.cinder-keyboard-shortcuts`.',
+    },
+  },
+  additionalProperties: false,
+  metadata: {
+    unsupportedProps: [
+      {
+        name: 'children',
+        reason: 'function-or-snippet',
+      },
+      {
+        name: 'groups',
+        reason: 'unknown-shape',
+      },
+    ],
+  },
+} satisfies ComponentSchema;
+
+export default schema as ComponentSchema;