@lostgradient/cinder 0.6.0 → 0.7.0

package/src/components/table/table.schema.ts

@@ -0,0 +1,49 @@
+import type { ComponentSchema } from '../../schema-types';
+
+const schema = {
+  $schema: 'https://json-schema.org/draft/2020-12/schema',
+  type: 'object',
+  properties: {
+    caption: {
+      type: 'string',
+      description: 'Visual caption rendered as a `<caption>` element.',
+    },
+    stickyHeader: {
+      type: 'boolean',
+      description: 'When true, the header sticks to the top of the scrolling container.',
+    },
+    density: {
+      enum: ['comfortable', 'condensed', 'spacious'],
+      description:
+        "Vertical padding density for header and body cells.\nDefaults to `'comfortable'`.",
+    },
+    selectable: {
+      type: 'boolean',
+      description:
+        "Enables the leading selection column on the entire table. When true:\n- The single `TableRow` inside `TableHeader` renders a leading `<th>`\n  with a select-all checkbox sourced from the header's props.\n- Every `TableRow` inside `TableBody` renders a leading selection cell.\nSelection is strictly controlled — the consumer owns all selection state.",
+    },
+    class: {
+      type: 'string',
+      description: 'Additional class names merged with `.cinder-table`.',
+    },
+  },
+  additionalProperties: false,
+  metadata: {
+    unsupportedProps: [
+      {
+        name: 'children',
+        reason: 'function-or-snippet',
+        required: true,
+        description: 'TableHeader, TableBody, etc.',
+      },
+      {
+        name: 'sort',
+        reason: 'unknown-shape',
+        description:
+          'Bound sort state. When the user activates a sortable header, this prop\nis updated to reflect the new column / direction.\n\nPass `undefined` initially when no column is sorted; the component will\nnever write back `undefined` itself (sort always toggles to a column).',
+      },
+    ],
+  },
+} satisfies ComponentSchema;
+
+export default schema as ComponentSchema;

package/src/components/table/table.svelte

@@ -0,0 +1,61 @@
+<script lang="ts" module>
+export {};
+</script>
+
+<script lang="ts">
+import { setTableContext } from './table.context.ts';
+import { classNames } from '../../utilities/class-names.ts';
+import { useResizeObserver } from '../../utilities/use-resize-observer.svelte.ts';
+let { sort = $bindable(), caption, stickyHeader = false, density = 'comfortable', selectable = false, class: className, children, ...rest } = $props();
+// A native <caption> (caption-side: top) renders above the table's border box
+// but inside the same scroll container, so a sticky <thead> pinned at top: 0
+// would overlap it. The caption's height is not knowable in pure CSS — `1lh`
+// would assume a single line and break when the caption wraps (narrow
+// container, long/localized text, large text settings). Measure the caption's
+// border-box block size and expose it as a custom property the sticky `top`
+// calc consumes, so the header always pins just below the real caption.
+let captionHeight = $state(0);
+// Only the sticky-header `top` calc consumes `captionHeight`, so a non-sticky
+// captioned table has no reason to run a ResizeObserver. Gate observation on
+// `stickyHeader` to avoid the work in the common case.
+const measureCaption = useResizeObserver((entries) => {
+    const entry = entries[0];
+    if (!entry)
+        return;
+    captionHeight = entry.borderBoxSize?.[0]?.blockSize ?? entry.contentRect.height;
+}, { box: 'border-box', enabled: () => stickyHeader });
+function onsortchange(column) {
+    if (!sort || sort.column !== column) {
+        sort = { column, direction: 'ascending' };
+        return;
+    }
+    // Same column — toggle direction.
+    sort = {
+        column,
+        direction: sort.direction === 'ascending' ? 'descending' : 'ascending',
+    };
+}
+setTableContext({
+    get sort() {
+        return sort;
+    },
+    get selectionEnabled() {
+        return selectable;
+    },
+    onsortchange,
+});
+</script>
+
+<table
+  {...rest}
+  class={classNames('cinder-table', className)}
+  data-cinder-sticky-header={stickyHeader || undefined}
+  data-cinder-density={density}
+  data-cinder-selectable={selectable || undefined}
+  style:--cinder-table-caption-height={caption ? `${captionHeight}px` : undefined}
+>
+  {#if caption}
+    <caption class="cinder-table__caption" {@attach measureCaption}>{caption}</caption>
+  {/if}
+  {@render children()}
+</table>

package/src/components/table/table.types.ts

@@ -0,0 +1,82 @@
+import type { Snippet } from 'svelte';
+import type { HTMLTableAttributes } from 'svelte/elements';
+/** Sort direction. */
+export type SortDirection = 'ascending' | 'descending';
+/** Bound sort state shape. */
+export type TableSort = {
+  /** Column key currently sorted by. */
+  column: string;
+  /** Direction of the active sort. */
+  direction: SortDirection;
+};
+/** Vertical padding density for all cells in the table. */
+export type TableDensity = 'comfortable' | 'condensed' | 'spacious';
+/** Section context value — set by TableHeader and TableBody, read by TableRow. */
+export type TableSectionContext = 'header' | 'body';
+/**
+ * Context set by TableHeader with select-all state, read by the header TableRow
+ * to render the leading select-all checkbox cell.
+ */
+export type TableHeaderSelectionContext = {
+  readonly allSelected: boolean;
+  readonly someSelected: boolean;
+  readonly onselectall: (next: boolean) => void;
+  readonly selectAllLabel: string;
+  claimSelectionHeaderCell: () => void;
+};
+/**
+ * Shape of the table context provided to child components. Header cells call
+ * `onsortchange` with their column key when activated; the table propagates
+ * the new sort state to its bindable `sort` prop. Children read
+ * `selectionEnabled` to render the leading selection cell.
+ *
+ * @internal This type describes the context object produced by Table. It is
+ * not intended to be implemented or constructed by consumers — use `getContext`
+ * to read it, not `setContext` to provide it.
+ */
+export type TableContext = {
+  readonly sort: TableSort | undefined;
+  onsortchange: (column: string) => void;
+  /** Mirror of Table.selectable. Set synchronously at construction time. */
+  readonly selectionEnabled?: boolean;
+};
+/**
+ * Props for the Table component.
+ *
+ * Cinder's Table is **deliberately small**: semantic markup, controlled sort
+ * state, optional sticky header, optional density, optional row selection.
+ * It does NOT virtualize, sort, paginate, edit cells, pin columns, resize
+ * columns, or aggregate. The consumer owns data ordering and dispatches sort
+ * intents through the `sort` bindable.
+ */
+export type TableProps = Omit<HTMLTableAttributes, 'class'> & {
+  /**
+   * Bound sort state. When the user activates a sortable header, this prop
+   * is updated to reflect the new column / direction.
+   *
+   * Pass `undefined` initially when no column is sorted; the component will
+   * never write back `undefined` itself (sort always toggles to a column).
+   */
+  sort?: TableSort | undefined;
+  /** Visual caption rendered as a `<caption>` element. */
+  caption?: string;
+  /** When true, the header sticks to the top of the scrolling container. */
+  stickyHeader?: boolean;
+  /**
+   * Vertical padding density for header and body cells.
+   * Defaults to `'comfortable'`.
+   */
+  density?: TableDensity;
+  /**
+   * Enables the leading selection column on the entire table. When true:
+   * - The single `TableRow` inside `TableHeader` renders a leading `<th>`
+   *   with a select-all checkbox sourced from the header's props.
+   * - Every `TableRow` inside `TableBody` renders a leading selection cell.
+   * Selection is strictly controlled — the consumer owns all selection state.
+   */
+  selectable?: boolean;
+  /** Additional class names merged with `.cinder-table`. */
+  class?: string;
+  /** TableHeader, TableBody, etc. */
+  children: Snippet;
+};

package/src/components/table/table.variables.ts

@@ -0,0 +1,3 @@
+const variables: readonly string[] = [];
+
+export default variables;

package/src/components/table-body/index.ts

@@ -0,0 +1,6 @@
+import './table-body.css';
+import TableBody from './table-body.svelte';
+
+export default TableBody;
+export type { TableBodyProps } from './table-body.types.ts';
+export { TableBody };

package/src/components/table-body/table-body.schema.ts

@@ -0,0 +1,25 @@
+import type { ComponentSchema } from '../../schema-types';
+
+const schema = {
+  $schema: 'https://json-schema.org/draft/2020-12/schema',
+  type: 'object',
+  properties: {
+    class: {
+      type: 'string',
+      description: 'Additional class names merged with `.cinder-table__body`.',
+    },
+  },
+  additionalProperties: false,
+  metadata: {
+    unsupportedProps: [
+      {
+        name: 'children',
+        reason: 'function-or-snippet',
+        required: true,
+        description: 'Row children.',
+      },
+    ],
+  },
+} satisfies ComponentSchema;
+
+export default schema as ComponentSchema;

package/src/components/table-body/table-body.svelte

@@ -0,0 +1,14 @@
+<script lang="ts" module>
+export {};
+</script>
+
+<script lang="ts">
+import { setTableSectionContext } from '../table/table.context.ts';
+import { classNames } from '../../utilities/class-names.ts';
+let { class: className, children } = $props();
+setTableSectionContext('body');
+</script>
+
+<tbody class={classNames('cinder-table__body', className)}>
+  {@render children()}
+</tbody>

package/src/components/table-body/table-body.types.ts

@@ -0,0 +1,7 @@
+import type { Snippet } from 'svelte';
+export type TableBodyProps = {
+  /** Additional class names merged with `.cinder-table__body`. */
+  class?: string;
+  /** Row children. */
+  children: Snippet;
+};

package/src/components/table-body/table-body.variables.ts

@@ -0,0 +1,3 @@
+const variables: readonly string[] = [];
+
+export default variables;

package/src/components/table-cell/index.ts

@@ -0,0 +1,6 @@
+import './table-cell.css';
+import TableCell from './table-cell.svelte';
+
+export default TableCell;
+export type { TableCellProps } from './table-cell.types.ts';
+export { TableCell };

package/src/components/table-cell/table-cell.schema.ts

@@ -0,0 +1,34 @@
+import type { ComponentSchema } from '../../schema-types';
+
+const schema = {
+  $schema: 'https://json-schema.org/draft/2020-12/schema',
+  type: 'object',
+  properties: {
+    align: {
+      enum: ['left', 'center', 'right'],
+      description: 'Visual alignment for numeric columns.',
+    },
+    as: {
+      enum: ['td', 'th'],
+      description:
+        'When `\'th\'`, renders a `<th scope="row">` instead of `<td>`, marking this\ncell as the row-header identifier for assistive technology. The component\nsets `scope="row"` itself (so `scope` is not part of the prop surface).\nDefaults to `\'td\'` so existing consumers are unaffected.\n\nThe attribute surface is `HTMLTdAttributes` for both modes — `<td>` and\n`<th>` share `HTMLTableCellElement`, so `colspan`, `rowspan`, `headers`, and\n`abbr` are all forwarded regardless of `as`. Only `scope` is removed from the\nprop surface, because the component owns it (`scope="row"` when `as=\'th\'`).',
+    },
+    class: {
+      type: 'string',
+      description: 'Additional class names merged with `.cinder-table__cell`.',
+    },
+  },
+  additionalProperties: false,
+  metadata: {
+    unsupportedProps: [
+      {
+        name: 'children',
+        reason: 'function-or-snippet',
+        description:
+          "Cell content. Optional so that empty `<td>` cells (used in spanning\ntable layouts) are a valid, non-throwing state. When omitted the cell\nrenders empty, which is valid HTML for a `<td>`.\n\n**Note for TypeScript consumers:** the Snippet type is never called externally\nby consuming code — Svelte's compiler handles invocation internally. Making\nthis optional is therefore safe as an API change: no external caller calls\n`props.children()` on a Svelte component's props.",
+      },
+    ],
+  },
+} satisfies ComponentSchema;
+
+export default schema as ComponentSchema;

package/src/components/table-cell/table-cell.svelte

@@ -0,0 +1,18 @@
+<script lang="ts" module>
+export {};
+</script>
+
+<script lang="ts">
+import { classNames } from '../../utilities/class-names.ts';
+let { align = 'left', as = 'td', class: className, children, ...rest } = $props();
+</script>
+
+<svelte:element
+  this={as}
+  {...rest}
+  scope={as === 'th' ? 'row' : undefined}
+  class={classNames('cinder-table__cell', className)}
+  data-cinder-align={align}
+>
+  {@render children?.()}
+</svelte:element>

package/src/components/table-cell/table-cell.types.ts

@@ -0,0 +1,32 @@
+import type { Snippet } from 'svelte';
+import type { HTMLTdAttributes } from 'svelte/elements';
+
+export type TableCellProps = Omit<HTMLTdAttributes, 'class' | 'align' | 'scope'> & {
+  /** Visual alignment for numeric columns. */
+  align?: 'left' | 'center' | 'right';
+  /**
+   * When `'th'`, renders a `<th scope="row">` instead of `<td>`, marking this
+   * cell as the row-header identifier for assistive technology. The component
+   * sets `scope="row"` itself (so `scope` is not part of the prop surface).
+   * Defaults to `'td'` so existing consumers are unaffected.
+   *
+   * The attribute surface is `HTMLTdAttributes` for both modes — `<td>` and
+   * `<th>` share `HTMLTableCellElement`, so `colspan`, `rowspan`, `headers`, and
+   * `abbr` are all forwarded regardless of `as`. Only `scope` is removed from the
+   * prop surface, because the component owns it (`scope="row"` when `as='th'`).
+   */
+  as?: 'td' | 'th';
+  /** Additional class names merged with `.cinder-table__cell`. */
+  class?: string;
+  /**
+   * Cell content. Optional so that empty `<td>` cells (used in spanning
+   * table layouts) are a valid, non-throwing state. When omitted the cell
+   * renders empty, which is valid HTML for a `<td>`.
+   *
+   * **Note for TypeScript consumers:** the Snippet type is never called externally
+   * by consuming code — Svelte's compiler handles invocation internally. Making
+   * this optional is therefore safe as an API change: no external caller calls
+   * `props.children()` on a Svelte component's props.
+   */
+  children?: Snippet;
+};

package/src/components/table-cell/table-cell.variables.ts

@@ -0,0 +1,3 @@
+const variables: readonly string[] = [];
+
+export default variables;

package/src/components/table-header/index.ts

@@ -0,0 +1,6 @@
+import './table-header.css';
+import TableHeader from './table-header.svelte';
+
+export default TableHeader;
+export type { TableHeaderProps } from './table-header.types.ts';
+export { TableHeader };

package/src/components/table-header/table-header.schema.ts

@@ -0,0 +1,46 @@
+import type { ComponentSchema } from '../../schema-types';
+
+const schema = {
+  $schema: 'https://json-schema.org/draft/2020-12/schema',
+  type: 'object',
+  properties: {
+    class: {
+      type: 'string',
+      description: 'Additional class names merged with `.cinder-table__header`.',
+    },
+    allSelected: {
+      type: 'boolean',
+      description:
+        'Checked state for the select-all checkbox. Required when `Table.selectable` is true.',
+    },
+    someSelected: {
+      type: 'boolean',
+      description:
+        'When true and `allSelected` is false, the select-all checkbox renders as indeterminate.\nThe browser exposes that as `aria-checked="mixed"` to assistive tech.\nRequired (alongside `allSelected` and `onselectall`) when `Table.selectable`\nis true for accurate checkbox state.',
+    },
+    selectAllLabel: {
+      type: 'string',
+      description:
+        'Accessible name for the select-all checkbox. Defaults to "Select all rows".\nWhen the table contains rows with `selectionDisabled={true}`, pass a more\naccurate label such as "Select all selectable rows".',
+    },
+  },
+  additionalProperties: false,
+  metadata: {
+    unsupportedProps: [
+      {
+        name: 'children',
+        reason: 'function-or-snippet',
+        required: true,
+        description: 'TableRow children — typically a single header row.',
+      },
+      {
+        name: 'onselectall',
+        reason: 'function-or-snippet',
+        description:
+          'Called when the user activates the select-all checkbox. Required when `Table.selectable` is true.',
+      },
+    ],
+  },
+} satisfies ComponentSchema;
+
+export default schema as ComponentSchema;

package/src/components/table-header/table-header.svelte

@@ -0,0 +1,44 @@
+<script lang="ts" module>
+export {};
+</script>
+
+<script lang="ts">
+import { untrack } from 'svelte';
+import { setTableHeaderSelectionContext, setTableSectionContext, tryGetTableContext, } from '../table/table.context.ts';
+import { classNames } from '../../utilities/class-names.ts';
+let { class: className, children, allSelected, someSelected, onselectall, selectAllLabel = 'Select all rows', } = $props();
+const table = tryGetTableContext();
+const selectionEnabled = table?.selectionEnabled ?? false;
+// One-time mount-time guard; read the props untracked.
+if (selectionEnabled &&
+    untrack(() => allSelected === undefined || someSelected === undefined || !onselectall)) {
+    throw new Error('[Cinder] TableHeader: `allSelected`, `someSelected`, and `onselectall` are required when Table.selectable is true.');
+}
+let hasSelectionHeaderCell = false;
+function claimSelectionHeaderCell() {
+    if (hasSelectionHeaderCell) {
+        throw new Error('[Cinder] TableHeader: Table.selectable supports exactly one TableRow inside TableHeader.');
+    }
+    hasSelectionHeaderCell = true;
+}
+setTableSectionContext('header');
+setTableHeaderSelectionContext({
+    get allSelected() {
+        return allSelected ?? false;
+    },
+    get someSelected() {
+        return someSelected ?? false;
+    },
+    get onselectall() {
+        return onselectall ?? (() => { });
+    },
+    get selectAllLabel() {
+        return selectAllLabel;
+    },
+    claimSelectionHeaderCell,
+});
+</script>
+
+<thead class={classNames('cinder-table__header', className)}>
+  {@render children()}
+</thead>

package/src/components/table-header/table-header.types.ts

@@ -0,0 +1,24 @@
+import type { Snippet } from 'svelte';
+export type TableHeaderProps = {
+  /** Additional class names merged with `.cinder-table__header`. */
+  class?: string;
+  /** TableRow children — typically a single header row. */
+  children: Snippet;
+  /** Checked state for the select-all checkbox. Required when `Table.selectable` is true. */
+  allSelected?: boolean;
+  /**
+   * When true and `allSelected` is false, the select-all checkbox renders as indeterminate.
+   * The browser exposes that as `aria-checked="mixed"` to assistive tech.
+   * Required (alongside `allSelected` and `onselectall`) when `Table.selectable`
+   * is true for accurate checkbox state.
+   */
+  someSelected?: boolean;
+  /** Called when the user activates the select-all checkbox. Required when `Table.selectable` is true. */
+  onselectall?: (next: boolean) => void;
+  /**
+   * Accessible name for the select-all checkbox. Defaults to "Select all rows".
+   * When the table contains rows with `selectionDisabled={true}`, pass a more
+   * accurate label such as "Select all selectable rows".
+   */
+  selectAllLabel?: string;
+};

package/src/components/table-header/table-header.variables.ts

@@ -0,0 +1,3 @@
+const variables: readonly string[] = [];
+
+export default variables;

package/src/components/table-header-cell/index.ts

@@ -0,0 +1,6 @@
+import './table-header-cell.css';
+import TableHeaderCell from './table-header-cell.svelte';
+
+export default TableHeaderCell;
+export type { TableHeaderCellProps } from './table-header-cell.types.ts';
+export { TableHeaderCell };

package/src/components/table-header-cell/table-header-cell.schema.ts

@@ -0,0 +1,43 @@
+import type { ComponentSchema } from '../../schema-types';
+
+const schema = {
+  $schema: 'https://json-schema.org/draft/2020-12/schema',
+  type: 'object',
+  properties: {
+    column: {
+      type: 'string',
+      description:
+        'Column key. Required when `sortable=true` so the parent Table can\ntrack which column the user activated.',
+    },
+    sortable: {
+      type: 'boolean',
+      description:
+        "When true, render a button inside the `<th>` and dispatch sort intents\nto the parent Table. The cell's `aria-sort` reflects the current sort\ndirection (`ascending`, `descending`, or `none`).",
+    },
+    scope: {
+      enum: ['col', 'colgroup'],
+      description: 'When set, hint to assistive tech that the column groups multiple rows.',
+    },
+    align: {
+      enum: ['left', 'center', 'right'],
+      description: "Horizontal alignment for the header cell content. Defaults to `'left'`.",
+    },
+    class: {
+      type: 'string',
+      description: 'Additional class names merged with `.cinder-table__header-cell`.',
+    },
+  },
+  additionalProperties: false,
+  metadata: {
+    unsupportedProps: [
+      {
+        name: 'children',
+        reason: 'function-or-snippet',
+        required: true,
+        description: 'Cell content (column label).',
+      },
+    ],
+  },
+} satisfies ComponentSchema;
+
+export default schema as ComponentSchema;

package/src/components/table-header-cell/table-header-cell.svelte

@@ -0,0 +1,73 @@
+<script lang="ts" module>
+export {};
+</script>
+
+<script lang="ts">
+import { getTableContext } from '../table/table.context.ts';
+import { classNames } from '../../utilities/class-names.ts';
+let { column, sortable = false, scope = 'col', align = 'left', class: className, children, ...rest } = $props();
+const table = getTableContext();
+// A column is only actually sortable when both `sortable` is set and a `column`
+// identifier is supplied — the inner <button> renders under that same guard.
+// Without it we would advertise a sortable-but-unsorted column to assistive
+// technology (`aria-sort="none"`, `data-cinder-sortable`) with no operable
+// control behind it.
+const isSortable = $derived(sortable && !!column);
+// aria-sort lives on the <th> per WAI-ARIA. The accessible name and
+// keyboard activation live on the inner <button> when sortable.
+const ariaSort = $derived(isSortable && table.sort?.column === column
+    ? table.sort?.direction
+    : isSortable
+        ? 'none'
+        : undefined);
+const nextSortDescription = $derived(ariaSort === 'ascending' ? 'Activate to sort descending' : 'Activate to sort ascending');
+const sortButtonDescriptionAttributes = $derived({
+    'aria-description': nextSortDescription,
+});
+function handleClick() {
+    if (!sortable || !column)
+        return;
+    table.onsortchange(column);
+}
+</script>
+
+<th
+  {...rest}
+  {scope}
+  class={classNames('cinder-table__header-cell', className)}
+  data-cinder-align={align}
+  data-cinder-sortable={isSortable || undefined}
+  aria-sort={ariaSort}
+>
+  {#if isSortable}
+    <button
+      {...sortButtonDescriptionAttributes}
+      type="button"
+      class="cinder-table__sort-button"
+      onclick={handleClick}
+    >
+      {@render children()}
+      <span
+        class="cinder-table__sort-indicator"
+        aria-hidden="true"
+        data-cinder-direction={ariaSort}
+      >
+        <svg
+          viewBox="0 0 16 16"
+          width="12"
+          height="12"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <polyline class="cinder-table__sort-chevron-up" points="4 7 8 4 12 7" />
+          <polyline class="cinder-table__sort-chevron-down" points="4 9 8 12 12 9" />
+        </svg>
+      </span>
+    </button>
+  {:else}
+    {@render children()}
+  {/if}
+</th>

package/src/components/table-header-cell/table-header-cell.types.ts

@@ -0,0 +1,30 @@
+import type { Snippet } from 'svelte';
+import type { HTMLThAttributes } from 'svelte/elements';
+
+// `aria-sort` is owned by the component (computed from the parent Table's sort state
+// and emitted after the attribute spread), so it's Omit-ted — a consumer value would
+// be silently dropped at runtime.
+export type TableHeaderCellProps = Omit<
+  HTMLThAttributes,
+  'class' | 'align' | 'scope' | 'aria-sort'
+> & {
+  /**
+   * Column key. Required when `sortable=true` so the parent Table can
+   * track which column the user activated.
+   */
+  column?: string;
+  /**
+   * When true, render a button inside the `<th>` and dispatch sort intents
+   * to the parent Table. The cell's `aria-sort` reflects the current sort
+   * direction (`ascending`, `descending`, or `none`).
+   */
+  sortable?: boolean;
+  /** When set, hint to assistive tech that the column groups multiple rows. */
+  scope?: 'col' | 'colgroup';
+  /** Horizontal alignment for the header cell content. Defaults to `'left'`. */
+  align?: 'left' | 'center' | 'right';
+  /** Additional class names merged with `.cinder-table__header-cell`. */
+  class?: string;
+  /** Cell content (column label). */
+  children: Snippet;
+};

package/src/components/table-header-cell/table-header-cell.variables.ts

@@ -0,0 +1,3 @@
+const variables: readonly string[] = [];
+
+export default variables;

package/src/components/table-of-contents/index.ts

@@ -0,0 +1,6 @@
+import './table-of-contents.css';
+import TableOfContents from './table-of-contents.svelte';
+
+export default TableOfContents;
+export type { TableOfContentsItem, TableOfContentsProps } from './table-of-contents.types.ts';
+export { TableOfContents };