@lostgradient/cinder 0.6.0 → 0.7.0

package/src/components/copy-button/use-copy-state.svelte.ts

@@ -0,0 +1,76 @@
+/**
+ * Shared copy-confirmation state machine.
+ *
+ * Encapsulates the same copy/confirmation/timeout pattern that CopyButton owns,
+ * for use in contexts where CopyButton itself cannot be used directly — for
+ * example, when each item in a dropdown menu needs its own per-item confirmation
+ * indicator (ConversationExportActions, ReviewEditor ExportActions).
+ *
+ * The returned object is reactive. Read `copied` and `copiedKey` inside a
+ * template expression or `$derived` to track state. Call `trigger(key, text)`
+ * to copy text and set the confirmation for `key`. Call `reset()` to clear early.
+ *
+ * Timer cleanup is automatic: call `destroy()` (or use the returned cleanup
+ * function from `$effect`) when the containing component unmounts.
+ *
+ * @example
+ * ```ts
+ * // Construct during component initialization — the internal onDestroy hook
+ * // clears the pending timer automatically, so no manual cleanup is required.
+ * const copyState = createCopyState();
+ *
+ * // In a handler:
+ * await copyState.trigger('json', JSON.stringify(data));
+ *
+ * // In template:
+ * {#if copyState.copiedKey === 'json'}...{/if}
+ *
+ * // If you construct it conditionally or asynchronously (outside the
+ * // initialization phase where onDestroy can register), register cleanup
+ * // yourself by RETURNING the destroy function from an $effect:
+ * $effect(() => {
+ *   return () => copyState.destroy();
+ * });
+ * ```
+ */
+import { onDestroy } from 'svelte';
+import { copyToClipboard } from '../../utilities/clipboard.ts';
+/**
+ * Create a reactive per-item copy confirmation state machine.
+ *
+ * @param confirmDuration - Duration in ms to show the confirmed state. Default 2000.
+ */
+export function createCopyState(confirmDuration = 2000) {
+    let copiedKey = $state(null);
+    let resetTimer;
+    function clearTimer() {
+        if (resetTimer !== undefined) {
+            clearTimeout(resetTimer);
+            resetTimer = undefined;
+        }
+    }
+    function reset() {
+        clearTimer();
+        copiedKey = null;
+    }
+    async function trigger(key, text) {
+        const succeeded = await copyToClipboard(text);
+        if (!succeeded)
+            return false;
+        clearTimer();
+        copiedKey = key;
+        resetTimer = setTimeout(() => {
+            copiedKey = null;
+        }, confirmDuration);
+        return true;
+    }
+    onDestroy(clearTimer);
+    return {
+        get copiedKey() {
+            return copiedKey;
+        },
+        trigger,
+        reset,
+        destroy: clearTimer,
+    };
+}

package/src/components/cta-section/cta-section.schema.ts

@@ -0,0 +1,71 @@
+import type { ComponentSchema } from '../../schema-types';
+
+const schema = {
+  $schema: 'https://json-schema.org/draft/2020-12/schema',
+  type: 'object',
+  properties: {
+    as: {
+      enum: ['section', 'div'],
+      description: 'Wrapper element tag.',
+      default: 'section',
+    },
+    title: {
+      type: 'string',
+      description: 'Main CTA title.',
+    },
+    description: {
+      type: 'string',
+      description: 'Optional supporting copy.',
+    },
+    primaryActionLabel: {
+      type: 'string',
+      description: 'Label for the primary call-to-action button.',
+    },
+    secondaryActionLabel: {
+      type: 'string',
+      description: 'Optional label for a secondary action button.',
+    },
+    align: {
+      enum: ['start', 'center'],
+      description: 'Content alignment.',
+      default: 'center',
+    },
+    tone: {
+      enum: ['default', 'accent'],
+      description: 'Visual tone.',
+      default: 'default',
+    },
+    maxWidth: {
+      enum: ['prose', 'narrow', 'wide', 'full'],
+      description: 'Max width token forwarded to Container.',
+      default: 'wide',
+    },
+    class: {
+      type: 'string',
+      description: 'Custom class merged with `.cinder-cta-section`.',
+    },
+  },
+  additionalProperties: false,
+  required: ['primaryActionLabel', 'title'],
+  metadata: {
+    unsupportedProps: [
+      {
+        name: 'children',
+        reason: 'function-or-snippet',
+        description: 'Optional supplemental content below action buttons.',
+      },
+      {
+        name: 'onPrimaryClick',
+        reason: 'function-or-snippet',
+        description: 'Primary action click callback.',
+      },
+      {
+        name: 'onSecondaryClick',
+        reason: 'function-or-snippet',
+        description: 'Secondary action click callback.',
+      },
+    ],
+  },
+} satisfies ComponentSchema;
+
+export default schema as ComponentSchema;

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

@@ -0,0 +1,36 @@
+<script lang="ts" module>
+export {};
+</script>
+
+<script lang="ts">
+import Button from '../button/button.svelte';
+import Container from '../container/container.svelte';
+import { classNames } from '../../utilities/class-names.ts';
+let { as = 'section', title, description, primaryActionLabel, secondaryActionLabel, onPrimaryClick, onSecondaryClick, align = 'center', tone = 'default', maxWidth = 'wide', class: className, children, ...rest } = $props();
+</script>
+
+<svelte:element
+  this={as}
+  class={classNames('cinder-cta-section', className)}
+  data-cinder-align={align}
+  data-cinder-tone={tone}
+  {...rest}
+>
+  <Container {maxWidth}>
+    <div class="cinder-cta-section__inner">
+      <h2 class="cinder-cta-section__title">{title}</h2>
+      {#if description}
+        <p class="cinder-cta-section__description">{description}</p>
+      {/if}
+      <div class="cinder-cta-section__actions">
+        <Button label={primaryActionLabel} variant="primary" onclick={onPrimaryClick} />
+        {#if secondaryActionLabel}
+          <Button label={secondaryActionLabel} variant="secondary" onclick={onSecondaryClick} />
+        {/if}
+      </div>
+      {#if children}
+        <div class="cinder-cta-section__extra">{@render children()}</div>
+      {/if}
+    </div>
+  </Container>
+</svelte:element>

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

@@ -0,0 +1,55 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { ContainerMaxWidth } from '../container/container.types.ts';
+
+export type CtaSectionAlign = 'start' | 'center';
+export type CtaSectionTone = 'default' | 'accent';
+
+/** Props for the CtaSection component. */
+export type CtaSectionProps = Omit<HTMLAttributes<HTMLElement>, 'children' | 'class'> & {
+  /** Wrapper element tag. @default "section" */
+  as?: 'section' | 'div';
+  /** Main CTA title. */
+  title: string;
+  /** Optional supporting copy. */
+  description?: string;
+  /** Label for the primary call-to-action button. */
+  primaryActionLabel: string;
+  /** Optional label for a secondary action button. */
+  secondaryActionLabel?: string;
+  /** Primary action click callback. */
+  onPrimaryClick?: () => void;
+  /** Secondary action click callback. */
+  onSecondaryClick?: () => void;
+  /** Content alignment. @default "center" */
+  align?: CtaSectionAlign;
+  /** Visual tone. @default "default" */
+  tone?: CtaSectionTone;
+  /** Max width token forwarded to Container. @default "wide" */
+  maxWidth?: ContainerMaxWidth;
+  /** Optional supplemental content below action buttons. */
+  children?: Snippet;
+  /** Custom class merged with `.cinder-cta-section`. */
+  class?: string;
+};
+
+export interface CtaSectionSchemaProps {
+  /** Wrapper element tag. @default "section" */
+  as?: 'section' | 'div';
+  /** Main CTA title. */
+  title: string;
+  /** Optional supporting copy. */
+  description?: string;
+  /** Label for the primary call-to-action button. */
+  primaryActionLabel: string;
+  /** Optional label for a secondary action button. */
+  secondaryActionLabel?: string;
+  /** Content alignment. @default "center" */
+  align?: CtaSectionAlign;
+  /** Visual tone. @default "default" */
+  tone?: CtaSectionTone;
+  /** Max width token forwarded to Container. @default "wide" */
+  maxWidth?: ContainerMaxWidth;
+  /** Custom class merged with `.cinder-cta-section`. */
+  class?: string;
+}

package/src/components/cta-section/cta-section.variables.ts

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

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

@@ -0,0 +1,6 @@
+import './cta-section.css';
+import CtaSection from './cta-section.svelte';
+
+export default CtaSection;
+export type { CtaSectionAlign, CtaSectionProps, CtaSectionTone } from './cta-section.types.ts';
+export { CtaSection };

package/src/components/data-grid/_internal/column-model.svelte.ts

@@ -0,0 +1,126 @@
+export const DEFAULT_DATA_GRID_COLUMN_WIDTH = 150;
+export const DEFAULT_DATA_GRID_COLUMN_MIN_WIDTH = 60;
+export class DataGridColumnModel {
+    columns;
+    columnOrder;
+    columnSizing;
+    columnPinning;
+    constructor(options) {
+        this.columns = options.columns;
+        this.columnOrder = options.columnOrder;
+        this.columnSizing = options.columnSizing;
+        this.columnPinning = options.columnPinning;
+    }
+    orderedColumns = $derived.by(() => orderColumns(this.columns(), this.columnOrder()).map((column, index) => resolveColumn(column, index, this.columnSizing(), this.columnPinning())));
+    leftPinnedColumns = $derived.by(() => withPinOffsets(this.orderedColumns.filter((column) => column.pin === 'left'), 'left'));
+    rightPinnedColumns = $derived.by(() => withPinOffsets(this.orderedColumns.filter((column) => column.pin === 'right'), 'right'));
+    leftPinnedWidth = $derived(totalColumnWidth(this.leftPinnedColumns));
+    rightPinnedWidth = $derived(totalColumnWidth(this.rightPinnedColumns));
+    unpinnedColumns = $derived.by(() => this.orderedColumns.filter((column) => column.pin === undefined));
+    renderColumns = $derived.by(() => {
+        return withRenderColIndexes([
+            ...this.leftPinnedColumns,
+            ...this.unpinnedColumns,
+            ...this.rightPinnedColumns,
+        ]);
+    });
+}
+function orderColumns(columns, columnOrder) {
+    assertUniqueColumnKeys(columns);
+    if (!columnOrder || columnOrder.length === 0)
+        return columns;
+    const byKey = new Map(columns.map((column) => [column.key, column]));
+    const ordered = columnOrder.flatMap((key) => {
+        const column = byKey.get(key);
+        if (!column)
+            return [];
+        byKey.delete(key);
+        return [column];
+    });
+    return [...ordered, ...byKey.values()];
+}
+function assertUniqueColumnKeys(columns) {
+    const seenColumnKeys = new Set();
+    for (const column of columns) {
+        if (seenColumnKeys.has(column.key)) {
+            throw new Error(`[cinder-data-grid] DataGrid column keys must be unique. Duplicate column key: ${JSON.stringify(column.key)}.`);
+        }
+        seenColumnKeys.add(column.key);
+    }
+}
+function resolveColumn(column, index, columnSizing, columnPinning) {
+    const minWidth = Math.max(0, finiteNumberOrFallback(column.minWidth, DEFAULT_DATA_GRID_COLUMN_MIN_WIDTH));
+    const baseWidth = finiteNumberOrFallback(columnSizing?.[column.key] ?? column.width, DEFAULT_DATA_GRID_COLUMN_WIDTH);
+    const maxWidth = Math.max(minWidth, finiteNumberOrFallback(column.maxWidth, Number.POSITIVE_INFINITY));
+    const pin = resolveColumnPin(column, columnPinning);
+    const resolvedColumn = {
+        key: column.key,
+        header: column.header,
+        minWidth,
+        width: Math.min(Math.max(baseWidth, minWidth), maxWidth),
+        colIndex: index + 1,
+        renderIndex: index + 1,
+        pinOffset: 0,
+    };
+    if (column.cell !== undefined)
+        resolvedColumn.cell = column.cell;
+    if (column.maxWidth !== undefined)
+        resolvedColumn.maxWidth = column.maxWidth;
+    if (column.rowHeader !== undefined)
+        resolvedColumn.rowHeader = column.rowHeader;
+    if (column.sortable !== undefined)
+        resolvedColumn.sortable = column.sortable;
+    if (column.sortComparator !== undefined)
+        resolvedColumn.sortComparator = column.sortComparator;
+    if (column.getValue !== undefined)
+        resolvedColumn.getValue = column.getValue;
+    if (pin !== undefined)
+        return { ...resolvedColumn, pin };
+    const { pin: _pin, ...unpinnedColumn } = resolvedColumn;
+    return unpinnedColumn;
+}
+function finiteNumberOrFallback(value, fallback) {
+    return typeof value === 'number' && Number.isFinite(value) ? value : fallback;
+}
+function resolveColumnPin(column, columnPinning) {
+    if (columnPinning?.left?.includes(column.key))
+        return 'left';
+    if (columnPinning?.right?.includes(column.key))
+        return 'right';
+    return column.pin;
+}
+function withPinOffsets(columns, pin) {
+    if (pin === 'left') {
+        let offset = 0;
+        return columns.map((column) => {
+            const nextColumn = { ...column, pinOffset: offset };
+            offset += column.width;
+            return nextColumn;
+        });
+    }
+    let offset = 0;
+    const columnsWithOffsets = [];
+    for (let index = columns.length - 1; index >= 0; index -= 1) {
+        const column = columns[index];
+        if (!column)
+            continue;
+        columnsWithOffsets.unshift({ ...column, pinOffset: offset });
+        offset += column.width;
+    }
+    return columnsWithOffsets;
+}
+function withRenderColIndexes(columns) {
+    return columns.map((column, index) => ({ ...column, renderIndex: index + 1 }));
+}
+function totalColumnWidth(columns) {
+    return columns.reduce((totalWidth, column) => totalWidth + column.width, 0);
+}
+export function getDataGridColumnValue(row, column) {
+    if (column.getValue)
+        return column.getValue(row);
+    if (row !== null && typeof row === 'object' && Object.hasOwn(row, column.key)) {
+        const value = Reflect.get(row, column.key);
+        return value;
+    }
+    return undefined;
+}

package/src/components/data-grid/_internal/geometry.ts

@@ -0,0 +1,87 @@
+export type DataGridCellCoordinate = {
+  rowId: string;
+  columnKey: string;
+};
+
+export type DataGridCellRange = {
+  anchor: DataGridCellCoordinate;
+  focus: DataGridCellCoordinate;
+  rowIds: readonly string[];
+  columnKeys: readonly string[];
+  startRowIndex: number;
+  endRowIndex: number;
+  startColumnIndex: number;
+  endColumnIndex: number;
+};
+
+export function getCellCoordinateKey(cell: DataGridCellCoordinate): string {
+  return `${cell.rowId}\u0000${cell.columnKey}`;
+}
+
+export function computeCellRange(
+  anchor: DataGridCellCoordinate,
+  focus: DataGridCellCoordinate,
+  rowIds: readonly string[],
+  columnKeys: readonly string[],
+): DataGridCellRange | undefined {
+  const anchorRowIndex = rowIds.indexOf(anchor.rowId);
+  const focusRowIndex = rowIds.indexOf(focus.rowId);
+  const anchorColumnIndex = columnKeys.indexOf(anchor.columnKey);
+  const focusColumnIndex = columnKeys.indexOf(focus.columnKey);
+
+  if (anchorRowIndex < 0 || focusRowIndex < 0 || anchorColumnIndex < 0 || focusColumnIndex < 0) {
+    return undefined;
+  }
+
+  const startRowIndex = Math.min(anchorRowIndex, focusRowIndex);
+  const endRowIndex = Math.max(anchorRowIndex, focusRowIndex);
+  const startColumnIndex = Math.min(anchorColumnIndex, focusColumnIndex);
+  const endColumnIndex = Math.max(anchorColumnIndex, focusColumnIndex);
+
+  return {
+    anchor,
+    focus,
+    rowIds: rowIds.slice(startRowIndex, endRowIndex + 1),
+    columnKeys: columnKeys.slice(startColumnIndex, endColumnIndex + 1),
+    startRowIndex,
+    endRowIndex,
+    startColumnIndex,
+    endColumnIndex,
+  };
+}
+
+export function isCellInRange(
+  cell: DataGridCellCoordinate,
+  range: DataGridCellRange | undefined,
+): boolean {
+  if (!range) return false;
+  return range.rowIds.includes(cell.rowId) && range.columnKeys.includes(cell.columnKey);
+}
+
+export function getCellsInRange(range: DataGridCellRange | undefined): DataGridCellCoordinate[] {
+  if (!range) return [];
+  return range.rowIds.flatMap((rowId) =>
+    range.columnKeys.map((columnKey) => ({
+      rowId,
+      columnKey,
+    })),
+  );
+}
+
+export function clampCellCoordinate(
+  cell: DataGridCellCoordinate,
+  rowIds: readonly string[],
+  columnKeys: readonly string[],
+): DataGridCellCoordinate | undefined {
+  if (rowIds.length === 0 || columnKeys.length === 0) return undefined;
+
+  const rowIndex = rowIds.indexOf(cell.rowId);
+  const columnIndex = columnKeys.indexOf(cell.columnKey);
+  if (rowIndex < 0 || columnIndex < 0) return undefined;
+
+  return {
+    rowId: rowIds[Math.min(Math.max(rowIndex, 0), rowIds.length - 1)] ?? rowIds[0]!,
+    columnKey:
+      columnKeys[Math.min(Math.max(columnIndex, 0), columnKeys.length - 1)] ?? columnKeys[0]!,
+  };
+}

package/src/components/data-grid/_internal/keyboard-model.ts

@@ -0,0 +1,131 @@
+export type DataGridKeyboardAction =
+  | {
+      type: 'move-cell';
+      rowIndex: number;
+      columnIndex: number;
+      extend: boolean;
+    }
+  | {
+      type: 'copy-selection';
+    }
+  | {
+      type: 'select-all';
+    }
+  | {
+      type: 'collapse-selection';
+    }
+  | {
+      type: 'select-active-cell';
+    };
+
+export type DataGridKeyboardContext = {
+  activeRowIndex: number;
+  activeColumnIndex: number;
+  rowCount: number;
+  columnCount: number;
+  pageSize?: number;
+};
+
+export function dataGridKeyToAction(
+  event: KeyboardEvent,
+  context: DataGridKeyboardContext,
+): DataGridKeyboardAction | undefined {
+  const { activeRowIndex, activeColumnIndex, rowCount, columnCount, pageSize = 10 } = context;
+  if (rowCount === 0 || columnCount === 0) return undefined;
+
+  const extend = event.shiftKey;
+  const isCommand = event.ctrlKey || event.metaKey;
+
+  if (isCommand && event.key.toLowerCase() === 'a') return { type: 'select-all' };
+  if (isCommand && event.key.toLowerCase() === 'c') return { type: 'copy-selection' };
+  if (event.key === 'Escape') return { type: 'collapse-selection' };
+  if (event.key === 'Enter' || event.key === ' ') return { type: 'select-active-cell' };
+
+  if (event.key === 'ArrowRight') {
+    return {
+      type: 'move-cell',
+      rowIndex: activeRowIndex,
+      columnIndex: activeColumnIndex + 1,
+      extend,
+    };
+  }
+
+  if (event.key === 'ArrowLeft') {
+    return {
+      type: 'move-cell',
+      rowIndex: activeRowIndex,
+      columnIndex: activeColumnIndex - 1,
+      extend,
+    };
+  }
+
+  if (event.key === 'ArrowDown') {
+    return {
+      type: 'move-cell',
+      rowIndex: activeRowIndex + 1,
+      columnIndex: activeColumnIndex,
+      extend,
+    };
+  }
+
+  if (event.key === 'ArrowUp') {
+    return {
+      type: 'move-cell',
+      rowIndex: activeRowIndex - 1,
+      columnIndex: activeColumnIndex,
+      extend,
+    };
+  }
+
+  if (event.key === 'Home') {
+    return {
+      type: 'move-cell',
+      rowIndex: isCommand ? 0 : activeRowIndex,
+      columnIndex: 0,
+      extend,
+    };
+  }
+
+  if (event.key === 'End') {
+    return {
+      type: 'move-cell',
+      rowIndex: isCommand ? rowCount - 1 : activeRowIndex,
+      columnIndex: columnCount - 1,
+      extend,
+    };
+  }
+
+  if (event.key === 'PageDown') {
+    return {
+      type: 'move-cell',
+      rowIndex: activeRowIndex + pageSize,
+      columnIndex: activeColumnIndex,
+      extend,
+    };
+  }
+
+  if (event.key === 'PageUp') {
+    return {
+      type: 'move-cell',
+      rowIndex: activeRowIndex - pageSize,
+      columnIndex: activeColumnIndex,
+      extend,
+    };
+  }
+
+  if (event.key === 'Tab') {
+    const direction = event.shiftKey ? -1 : 1;
+    const nextCellIndex = activeRowIndex * columnCount + activeColumnIndex + direction;
+    const lastCellIndex = rowCount * columnCount - 1;
+    if (nextCellIndex < 0 || nextCellIndex > lastCellIndex) return undefined;
+
+    return {
+      type: 'move-cell',
+      rowIndex: Math.floor(nextCellIndex / columnCount),
+      columnIndex: nextCellIndex % columnCount,
+      extend: false,
+    };
+  }
+
+  return undefined;
+}