@lostgradient/cinder 0.5.0 → 0.6.0

package/src/components/markdown-editor/markdown-editor.types.ts

@@ -1,124 +0,0 @@
-import type {
-  ActiveBlockType,
-  ActiveMarks,
-  EditorHandle as EditorHandleType,
-  EditorSelection,
-  PlaceholderCompletionConfiguration,
-  PlaceholderDecorationConfiguration,
-} from '@lostgradient/cinder/editor/component-runtime';
-import type { MilkdownPlugin } from '@milkdown/ctx';
-import type { Ctx } from '@milkdown/kit/ctx';
-import type { Snippet } from 'svelte';
-import type { HTMLAttributes } from 'svelte/elements';
-
-/** Editor display mode */
-export type EditorMode = 'wysiwyg' | 'source';
-
-/** Context passed to toolbar snippets for custom rendering */
-export interface ToolbarContext {
-  /** The Milkdown editor context (null if not ready) */
-  editorContext: Ctx | null;
-  /** Currently active marks at cursor position */
-  activeMarks: ActiveMarks;
-  /** Currently active block type at cursor position */
-  activeBlockType: ActiveBlockType;
-  /** Whether undo is available */
-  canUndo: boolean;
-  /** Whether redo is available */
-  canRedo: boolean;
-  /** Whether the editor is readonly */
-  readonly: boolean;
-}
-
-export type MarkdownEditorProps = Omit<
-  HTMLAttributes<HTMLDivElement>,
-  'id' | 'class' | 'onchange' | 'onselectionchange'
-> & {
-  /** Unique identifier for accessibility (required) */
-  id: string;
-  /** Accessible label for the editor (required for screen readers) */
-  label?: string;
-  /** Current markdown content (two-way bindable) */
-  value?: string;
-  /** Editor display mode (two-way bindable) */
-  mode?: EditorMode;
-  /** Show an inline toggle for switching between WYSIWYG and raw Markdown */
-  showModeToggle?: boolean;
-  /** Accessible label for the mode toggle (visually hidden) */
-  modeLabel?: string;
-  /** Read-only mode */
-  readonly?: boolean;
-  /** Placeholder text when empty */
-  placeholder?: string;
-  /** Show formatting toolbar (DEP-37) */
-  showToolbar?: boolean;
-  /** Additional CSS classes */
-  class?: string;
-  /** Called when content changes */
-  onchange?: (value: string) => void;
-  /** Called when the editor is ready (Milkdown initialized) */
-  onready?: () => void;
-  /** Called when editor mode changes */
-  onmodechange?: (mode: EditorMode) => void;
-  /** Called when selection changes (stub for DEP-39) */
-  onselectionchange?: (selection: EditorSelection | null) => void;
-  /** Called when comment shortcut (Ctrl-Alt-c) is pressed (DEP-47) */
-  oncommentshortcut?: () => void;
-  /**
-   * Additional Milkdown plugins to load.
-   * Used for comment anchoring (DEP-39), decorations, and other extensions.
-   */
-  plugins?: MilkdownPlugin[];
-
-  /**
-   * Placeholder completion configuration (DEP-583).
-   * When provided, enables inline suggestion menu for {{…}} tokens in WYSIWYG mode.
-   */
-  placeholderCompletion?: PlaceholderCompletionConfiguration;
-
-  /**
-   * Placeholder decoration configuration (DEP-583).
-   * When provided, decorates invalid {{…}} tokens with CSS class and data attributes.
-   */
-  placeholderDecoration?: PlaceholderDecorationConfiguration;
-
-  // =========================================================================
-  // Snippet-based Extensibility
-  // =========================================================================
-
-  /**
-   * Custom toolbar content. When provided, replaces default toolbar.
-   * Receives ToolbarContext for building custom toolbar UI.
-   */
-  toolbar?: Snippet<[ToolbarContext]>;
-
-  /**
-   * Additional toolbar actions (appended to default toolbar).
-   * Use this for adding buttons without replacing the entire toolbar.
-   */
-  toolbarActions?: Snippet<[ToolbarContext]>;
-
-  /**
-   * Leading toolbar content (prepended before default toolbar items).
-   * Useful for adding undo/redo or other leading actions.
-   */
-  toolbarLeading?: Snippet<[ToolbarContext]>;
-
-  /**
-   * Snapshot mode for visual regression testing.
-   *
-   * When `true`:
-   * - Applies `caret-color: transparent` and `user-select: none` to the editor
-   *   root via a `data-snapshot-mode` attribute, producing a stable visual
-   *   state (no blinking cursor, no selection highlights).
-   * - Blurs any focused element inside the component on mount so the initial
-   *   screenshot does not capture a focused ring or active caret.
-   *
-   * This is a purely visual / CSS concern. It does NOT affect editability,
-   * ProseMirror state, or any prop controlled by `readonly` / `mode`.
-   */
-  snapshotMode?: boolean;
-};
-
-/** Re-export EditorHandle type for convenience */
-export type EditorHandle = EditorHandleType;

package/src/components/marquee/index.ts

@@ -1,6 +0,0 @@
-import './marquee.css';
-import Marquee from './marquee.svelte';
-
-export default Marquee;
-export type { MarqueeDirection, MarqueeProps } from './marquee.types.ts';
-export { Marquee };

package/src/components/marquee/marquee.svelte

@@ -1,268 +0,0 @@
-<script lang="ts" module>
-  /**
-   * @cinder
-   * @category layout
-   * @status beta
-   * @purpose Auto-scrolling horizontal or vertical ticker that loops content continuously with reduced-motion-safe behavior.
-   * @tag marquee
-   * @tag ticker
-   * @useWhen Showing repeating announcements, partner logos, or status strips in a constrained space.
-   * @useWhen You need CSS-driven, seamless loop motion that can pause on hover/focus.
-   * @avoidWhen Users need to manually scroll and inspect static overflow content. | scroll-area
-   * @avoidWhen Information should remain fixed in place without motion emphasis.
-   * @related scroll-area, banner
-   */
-  export type { MarqueeDirection, MarqueeProps } from './marquee.types.ts';
-</script>
-
-<script lang="ts">
-  import { classNames } from '../../utilities/class-names.ts';
-
-  import type { MarqueeProps } from './marquee.types.ts';
-
-  let {
-    direction = 'horizontal',
-    duration = '24s',
-    gap = '1.5rem',
-    label,
-    pauseOnHover = true,
-    pauseOnFocus = true,
-    class: customClassName,
-    children,
-    ...rest
-  }: MarqueeProps = $props();
-
-  const mergedClassName = $derived(classNames('cinder-marquee', customClassName));
-  const normalizedLabel = $derived(
-    typeof label === 'string' && label.trim().length > 0 ? label.trim() : undefined,
-  );
-  const ariaLabelledby = $derived((rest as { 'aria-labelledby'?: string })['aria-labelledby']);
-  const hasAccessibleName = $derived(
-    Boolean(normalizedLabel) ||
-      (typeof ariaLabelledby === 'string' && ariaLabelledby.trim().length > 0),
-  );
-  const role = $derived(hasAccessibleName ? 'region' : undefined);
-  let manuallyPaused = $state(false);
-  let manualResumeRequested = $state(false);
-  const pauseControlLabel = $derived(
-    manuallyPaused ? 'Resume marquee animation' : 'Pause marquee animation',
-  );
-  let primaryTrackItem: HTMLDivElement | undefined = $state();
-  let duplicateTrackItem: HTMLDivElement | undefined = $state();
-  let duplicateReady = $state(false);
-  let duplicateCloneVersion = 0;
-
-  function rewriteUrlReferences(value: string, idMap: Map<string, string>): string {
-    let nextValue = value;
-    for (const [originalId, duplicateId] of idMap) {
-      nextValue = nextValue.replaceAll(`url(#${originalId})`, `url(#${duplicateId})`);
-    }
-
-    return nextValue;
-  }
-
-  function rewriteCloneIds(root: HTMLElement): void {
-    const elementsWithIds = root.querySelectorAll<HTMLElement>('[id]');
-    if (elementsWithIds.length > 0) {
-      duplicateCloneVersion += 1;
-      const idMap = new Map<string, string>();
-      for (const element of elementsWithIds) {
-        const originalId = element.getAttribute('id');
-        if (!originalId) continue;
-        const duplicateId = `${originalId}--cinder-marquee-duplicate-${duplicateCloneVersion}`;
-        idMap.set(originalId, duplicateId);
-        element.setAttribute('id', duplicateId);
-      }
-
-      if (idMap.size > 0) {
-        const referenceAttributes = [
-          'href',
-          'xlink:href',
-          'fill',
-          'stroke',
-          'filter',
-          'mask',
-          'clip-path',
-          'marker-start',
-          'marker-mid',
-          'marker-end',
-          'aria-labelledby',
-          'aria-describedby',
-        ];
-        const urlReferenceAttributes = new Set([
-          'fill',
-          'stroke',
-          'filter',
-          'mask',
-          'clip-path',
-          'marker-start',
-          'marker-mid',
-          'marker-end',
-        ]);
-
-        root.querySelectorAll<HTMLElement>('*').forEach((element) => {
-          for (const attribute of referenceAttributes) {
-            const value = element.getAttribute(attribute);
-            if (!value) continue;
-
-            if (urlReferenceAttributes.has(attribute)) {
-              const rewrittenUrlValue = rewriteUrlReferences(value, idMap);
-              if (rewrittenUrlValue !== value) {
-                element.setAttribute(attribute, rewrittenUrlValue);
-              }
-              continue;
-            }
-
-            let nextValue = value;
-            for (const [originalId, duplicateId] of idMap) {
-              if (attribute === 'href' || attribute === 'xlink:href') {
-                if (nextValue === `#${originalId}`) {
-                  nextValue = `#${duplicateId}`;
-                }
-                continue;
-              }
-
-              if (attribute === 'aria-labelledby' || attribute === 'aria-describedby') {
-                nextValue = nextValue
-                  .split(/\s+/)
-                  .map((token) => (token === originalId ? duplicateId : token))
-                  .join(' ');
-              }
-            }
-
-            if (nextValue !== value) {
-              element.setAttribute(attribute, nextValue);
-            }
-          }
-
-          const styleValue = element.getAttribute('style');
-          if (!styleValue) return;
-          const rewrittenStyle = rewriteUrlReferences(styleValue, idMap);
-          if (rewrittenStyle !== styleValue) {
-            element.setAttribute('style', rewrittenStyle);
-          }
-        });
-      }
-    }
-
-    root
-      .querySelectorAll<
-        HTMLElement | HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement
-      >('input, select, textarea, button, fieldset, output, option, optgroup, [name]')
-      .forEach((element) => {
-        element.removeAttribute('name');
-      });
-  }
-
-  function syncDuplicateTrack() {
-    if (!primaryTrackItem || !duplicateTrackItem) return;
-    const clone = primaryTrackItem.cloneNode(true) as HTMLElement;
-    rewriteCloneIds(clone);
-    duplicateTrackItem.replaceChildren(...clone.childNodes);
-    duplicateReady = true;
-  }
-
-  function toggleManualPausedState(): void {
-    const nextPaused = !manuallyPaused;
-    manuallyPaused = nextPaused;
-    manualResumeRequested = !nextPaused;
-  }
-
-  function clearManualResumeRequest(): void {
-    manualResumeRequested = false;
-  }
-
-  function clearManualResumeRequestAfterFocusLeaves(event: FocusEvent): void {
-    const nextTarget = event.relatedTarget;
-    if (
-      event.currentTarget instanceof HTMLElement &&
-      nextTarget instanceof Node &&
-      event.currentTarget.contains(nextTarget)
-    ) {
-      return;
-    }
-
-    clearManualResumeRequest();
-  }
-
-  function clearManualResumeRequestAfterPointerLeaves(event: PointerEvent): void {
-    if (
-      event.currentTarget instanceof HTMLElement &&
-      event.currentTarget.contains(document.activeElement)
-    ) {
-      return;
-    }
-
-    clearManualResumeRequest();
-  }
-
-  $effect(() => {
-    if (!primaryTrackItem || !duplicateTrackItem) return;
-    duplicateReady = false;
-    syncDuplicateTrack();
-    const observer = new MutationObserver(() => {
-      syncDuplicateTrack();
-    });
-    observer.observe(primaryTrackItem, {
-      childList: true,
-      subtree: true,
-      characterData: true,
-      attributes: true,
-    });
-    const resizeObserver =
-      typeof ResizeObserver === 'undefined'
-        ? undefined
-        : new ResizeObserver(() => {
-            syncDuplicateTrack();
-          });
-    resizeObserver?.observe(primaryTrackItem);
-    return () => {
-      observer.disconnect();
-      resizeObserver?.disconnect();
-    };
-  });
-</script>
-
-<div
-  {...rest}
-  class={mergedClassName}
-  data-cinder-direction={direction}
-  data-cinder-pause-hover={pauseOnHover ? 'true' : 'false'}
-  data-cinder-pause-focus={pauseOnFocus ? 'true' : 'false'}
-  data-cinder-manual-paused={manuallyPaused ? 'true' : 'false'}
-  data-cinder-manual-resumed={manualResumeRequested ? 'true' : 'false'}
-  data-cinder-ready={duplicateReady ? 'true' : 'false'}
-  aria-label={normalizedLabel}
-  {role}
-  style:--cinder-marquee-duration={duration}
-  style:--cinder-marquee-gap={gap}
-  onfocusout={clearManualResumeRequestAfterFocusLeaves}
-  onpointerleave={clearManualResumeRequestAfterPointerLeaves}
->
-  <div
-    class="cinder-marquee__viewport"
-    role="group"
-    aria-label={normalizedLabel ? `${normalizedLabel} scroll area` : 'Marquee content'}
-    tabindex="0"
-  >
-    <button
-      type="button"
-      class="cinder-marquee__control"
-      aria-pressed={manuallyPaused}
-      onclick={toggleManualPausedState}
-    >
-      {pauseControlLabel}
-    </button>
-    <div class="cinder-marquee__track">
-      <div class="cinder-marquee__item" bind:this={primaryTrackItem}>
-        {@render children()}
-      </div>
-      <div
-        class="cinder-marquee__item"
-        aria-hidden="true"
-        inert
-        bind:this={duplicateTrackItem}
-      ></div>
-    </div>
-  </div>
-</div>

package/src/components/marquee/marquee.types.ts

@@ -1,44 +0,0 @@
-import type { Snippet } from 'svelte';
-import type { HTMLAttributes } from 'svelte/elements';
-
-export type MarqueeDirection = 'horizontal' | 'vertical';
-
-/** Props for the Marquee component. */
-export type MarqueeProps = Omit<
-  HTMLAttributes<HTMLDivElement>,
-  'aria-label' | 'children' | 'class' | 'role'
-> & {
-  /** Scroll direction for the looping track. @default "horizontal" */
-  direction?: MarqueeDirection;
-  /** Animation duration for one complete loop (valid CSS time). @default "24s" */
-  duration?: string;
-  /** Gap between repeated items (valid CSS length). @default "1.5rem" */
-  gap?: string;
-  /** Accessible region label for the marquee container. */
-  label?: string;
-  /** Pause animation while hovered (pointer-capable devices). @default true */
-  pauseOnHover?: boolean;
-  /** Pause animation while any child is focused. @default true */
-  pauseOnFocus?: boolean;
-  /** Custom class merged with `.cinder-marquee`. */
-  class?: string;
-  /** Rendered marquee content. */
-  children: Snippet;
-};
-
-export interface MarqueeSchemaProps {
-  /** Scroll direction for the looping track. @default "horizontal" */
-  direction?: MarqueeDirection;
-  /** Animation duration for one complete loop (valid CSS time). @default "24s" */
-  duration?: string;
-  /** Gap between repeated items (valid CSS length). @default "1.5rem" */
-  gap?: string;
-  /** Accessible region label for the marquee container. */
-  label?: string;
-  /** Pause animation while hovered (pointer-capable devices). @default true */
-  pauseOnHover?: boolean;
-  /** Pause animation while any child is focused. @default true */
-  pauseOnFocus?: boolean;
-  /** Custom class merged with `.cinder-marquee`. */
-  class?: string;
-}

package/src/components/masonry/index.ts

@@ -1,6 +0,0 @@
-import './masonry.css';
-import Masonry from './masonry.svelte';
-
-export default Masonry;
-export type { MasonryProps } from './masonry.types.ts';
-export { Masonry };

package/src/components/masonry/masonry.svelte

@@ -1,39 +0,0 @@
-<script lang="ts" module>
-  /**
-   * @cinder
-   * @category layout
-   * @status beta
-   * @purpose Pure CSS waterfall layout that packs variable-height children into balanced columns.
-   * @tag layout
-   * @tag masonry
-   * @useWhen Displaying cards, images, or panels with uneven heights where CSS column order is acceptable.
-   * @avoidWhen Items have equal heights - use grid-list instead. | grid-list
-   * @avoidWhen Left-to-right row reading order matters - use grid instead. | grid
-   * @related grid, grid-list
-   */
-  export type { MasonryProps } from './masonry.types.ts';
-</script>
-
-<script lang="ts">
-  import { classNames } from '../../utilities/class-names.ts';
-  import type { MasonryProps } from './masonry.types.ts';
-
-  let {
-    columns,
-    gap,
-    as = 'div',
-    class: customClassName,
-    children,
-    ...rest
-  }: MasonryProps = $props();
-</script>
-
-<svelte:element
-  this={as}
-  {...rest}
-  class={classNames('cinder-masonry', customClassName)}
-  style:--cinder-masonry-columns={columns}
-  style:--cinder-masonry-gap={gap}
->
-  {@render children?.()}
-</svelte:element>

package/src/components/masonry/masonry.types.ts

@@ -1,38 +0,0 @@
-import type { Snippet } from 'svelte';
-import type { HTMLAttributes } from 'svelte/elements';
-
-/**
- * Layout-safe HTML element names for use as the Masonry container tag.
- * Void elements (`img`, `input`, `br`, `hr`, etc.) cannot contain children
- * and are excluded; inline elements that do not accept block children are also
- * excluded.
- */
-export type MasonryElement =
-  | 'article'
-  | 'aside'
-  | 'div'
-  | 'footer'
-  | 'header'
-  | 'main'
-  | 'nav'
-  | 'section'
-  | 'ul'
-  | 'ol';
-
-/** Props for the Masonry component. */
-export type MasonryProps = Omit<HTMLAttributes<HTMLElement>, 'class'> & {
-  /** CSS column count value. */
-  columns?: string;
-  /** Gap between columns and between direct children. */
-  gap?: string;
-  /**
-   * Rendered HTML tag. Constrained to layout-safe container elements;
-   * void elements such as `img`, `input`, `br`, and `hr` are excluded.
-   * @default "div"
-   */
-  as?: MasonryElement;
-  /** Custom class merged with `.cinder-masonry`. */
-  class?: string;
-  /** Masonry contents. */
-  children: Snippet;
-};

package/src/components/matrix-chart/index.ts

@@ -1,10 +0,0 @@
-import './matrix-chart.css';
-import MatrixChart from './matrix-chart.svelte';
-
-export default MatrixChart;
-export type {
-  MatrixChartProps,
-  MatrixChartSchemaProps,
-  MatrixColorScale,
-} from './matrix-chart.types.ts';
-export { MatrixChart };