@lostgradient/cinder 0.6.0 → 0.7.0

package/src/components/dropdown-label/dropdown-label.schema.ts

@@ -0,0 +1,23 @@
+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 the component's root class.",
+    },
+  },
+  additionalProperties: false,
+  metadata: {
+    unsupportedProps: [
+      {
+        name: 'children',
+        reason: 'function-or-snippet',
+      },
+    ],
+  },
+} satisfies ComponentSchema;
+
+export default schema as ComponentSchema;

package/src/components/dropdown-label/dropdown-label.svelte

@@ -0,0 +1,16 @@
+<script lang="ts" module>
+export {};
+</script>
+
+<script lang="ts">
+import { classNames } from '../../utilities/class-names.ts';
+let { class: customClassName, children, ...rest } = $props();
+</script>
+
+<!-- {...rest} is spread first so the intrinsic role="presentation" — DropdownLabel's
+     sole correct role inside a role="menu" — cannot be overridden by a consumer. -->
+<div {...rest} class={classNames('cinder-dropdown-label', customClassName)} role="presentation">
+  {#if children}
+    {@render children()}
+  {/if}
+</div>

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

@@ -0,0 +1,7 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+export type DropdownLabelProps = Omit<HTMLAttributes<HTMLDivElement>, 'class'> & {
+  /** Additional class names merged with the component's root class. */
+  class?: string;
+  children?: Snippet;
+};

package/src/components/dropdown-label/dropdown-label.variables.ts

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

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

@@ -0,0 +1,5 @@
+import DropdownLabel from './dropdown-label.svelte';
+
+export default DropdownLabel;
+export type { DropdownLabelProps } from './dropdown-label.types.ts';
+export { DropdownLabel };

package/src/components/dropdown-menu/dropdown-menu.schema.ts

@@ -0,0 +1,23 @@
+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 the component's root class.",
+    },
+  },
+  additionalProperties: false,
+  metadata: {
+    unsupportedProps: [
+      {
+        name: 'children',
+        reason: 'function-or-snippet',
+      },
+    ],
+  },
+} satisfies ComponentSchema;
+
+export default schema as ComponentSchema;

package/src/components/dropdown-menu/dropdown-menu.svelte

@@ -0,0 +1,188 @@
+<script lang="ts" module>
+export {};
+</script>
+
+<script lang="ts">
+import { tick } from 'svelte';
+import { createAnchoredOverlay } from '../../_internal/anchored-overlay.svelte.ts';
+import { getLocaleContext } from '../../_internal/locale-context.ts';
+import { observeTextDirection, resolveTextDirection } from '../../_internal/text-direction.ts';
+import { classNames } from '../../utilities/class-names.ts';
+import { findTypeaheadMatch, isTypeaheadKey, TypeaheadBuffer, } from '../../utilities/typeahead.ts';
+import { getDropdownContext, getDropdownRegister, getDropdownSetOpen, } from '../dropdown/dropdown.context.ts';
+import { createPortalAttachment } from '../portal/index.ts';
+let { class: customClassName, children, dir: direction, ...rest } = $props();
+const context = getDropdownContext();
+const registerMenu = getDropdownRegister();
+const setOpen = getDropdownSetOpen();
+const localeContext = getLocaleContext();
+let directionRevision = $state(0);
+const resolvedDirection = $derived.by(() => {
+    directionRevision;
+    if (direction === 'auto') {
+        return resolveTextDirection(context.anchorElement, localeContext?.direction) ?? direction;
+    }
+    return direction ?? resolveTextDirection(context.anchorElement, localeContext?.direction);
+});
+const fallbackAnchorElement = $derived(context.fallbackAnchorElement === undefined
+    ? context.anchorElement
+    : context.fallbackAnchorElement);
+let menuElement = $state(null);
+let focusedFallbackOpen = false;
+const typeaheadBuffer = new TypeaheadBuffer();
+const preferredPlacement = $derived(context.fallbackPlacement ?? 'bottom-start');
+const anchoredFallback = createAnchoredOverlay({
+    open: () => context.isOpen && !context.supportsPopover && Boolean(fallbackAnchorElement),
+    anchor: () => fallbackAnchorElement,
+    panel: () => menuElement,
+    placement: () => preferredPlacement,
+    offset: () => 4,
+    widthMode: () => context.widthMode ?? 'menu',
+});
+const fallbackPositionStyle = $derived(context.fallbackPositionStyle ??
+    (fallbackAnchorElement ? anchoredFallback.positionStyle : undefined));
+const fallbackPositionReady = $derived(context.fallbackPositionReady ??
+    (fallbackAnchorElement ? anchoredFallback.positionReady : undefined));
+const fallbackPortalAttachment = createPortalAttachment({
+    target: () => (typeof document === 'undefined' ? null : document.body),
+    source: () => context.anchorElement,
+    inheritAttributes: true,
+    disabled: () => context.supportsPopover,
+});
+$effect(() => {
+    registerMenu(menuElement);
+    return () => registerMenu(null);
+});
+$effect(() => {
+    return () => typeaheadBuffer.reset();
+});
+$effect(() => {
+    if (!context.isOpen)
+        typeaheadBuffer.reset();
+});
+$effect(() => {
+    if (direction && direction !== 'auto')
+        return;
+    return observeTextDirection(context.anchorElement, () => {
+        directionRevision += 1;
+    });
+});
+$effect(() => {
+    if (context.supportsPopover || !context.isOpen) {
+        focusedFallbackOpen = false;
+        return;
+    }
+    if (focusedFallbackOpen)
+        return;
+    if (context.initialFocus === 'none')
+        return;
+    focusedFallbackOpen = true;
+    void tick().then(() => focusMenuItem(context.initialFocus === 'last' ? -1 : 0));
+});
+function getOwnedMenuItems() {
+    if (!menuElement)
+        return [];
+    return Array.from(menuElement.querySelectorAll([
+        '[role="menuitem"]:not([data-disabled])',
+        '[role="menuitemcheckbox"]:not([data-disabled])',
+        '[role="menuitemradio"]:not([data-disabled])',
+    ].join(', '))).filter((item) => item.closest('[role="menu"]') === menuElement);
+}
+function focusMenuItem(index) {
+    const items = getOwnedMenuItems();
+    if (!items.length) {
+        menuElement?.focus();
+        return;
+    }
+    const resolvedIndex = index < 0 ? items.length - 1 : index;
+    const item = items.at(resolvedIndex);
+    item?.focus();
+}
+function handleKeydown(event) {
+    const target = event.target instanceof HTMLElement ? event.target : null;
+    if (target?.closest('[role="menu"]') !== menuElement)
+        return;
+    if (event.key === 'Escape') {
+        event.preventDefault();
+        event.stopPropagation();
+        setOpen(false);
+        context.focusTrigger();
+        return;
+    }
+    const itemsArray = getOwnedMenuItems();
+    if (!itemsArray.length)
+        return;
+    const currentIndex = itemsArray.findIndex((item) => item === document.activeElement);
+    if (event.key === 'ArrowDown') {
+        event.preventDefault();
+        event.stopPropagation();
+        focusMenuItem(currentIndex < itemsArray.length - 1 ? currentIndex + 1 : 0);
+    }
+    else if (event.key === 'ArrowUp') {
+        event.preventDefault();
+        event.stopPropagation();
+        focusMenuItem(currentIndex > 0 ? currentIndex - 1 : itemsArray.length - 1);
+    }
+    else if (event.key === 'Home') {
+        event.preventDefault();
+        event.stopPropagation();
+        focusMenuItem(0);
+    }
+    else if (event.key === 'End') {
+        event.preventDefault();
+        event.stopPropagation();
+        focusMenuItem(itemsArray.length - 1);
+    }
+    else if (isTypeaheadKey(event)) {
+        event.preventDefault();
+        event.stopPropagation();
+        const match = findTypeaheadMatch(itemsArray.map((item, index) => ({
+            value: index,
+            label: item.textContent?.trim() ?? '',
+            disabled: item.hasAttribute('data-disabled'),
+        })), typeaheadBuffer.push(event.key), currentIndex);
+        if (match !== undefined)
+            focusMenuItem(match);
+    }
+}
+function handleToggle(event) {
+    const isOpenNow = event.newState === 'open';
+    setOpen(isOpenNow);
+    if (isOpenNow) {
+        if (context.initialFocus === 'none')
+            return;
+        void tick().then(() => focusMenuItem(context.initialFocus === 'last' ? -1 : 0));
+    }
+}
+</script>
+
+{#if context.supportsPopover || context.isOpen}
+  <div
+    bind:this={menuElement}
+    id={context.menuId}
+    popover={context.supportsPopover ? 'auto' : undefined}
+    class={classNames('cinder-_floating-surface', 'cinder-dropdown-menu', customClassName)}
+    style={context.supportsPopover
+      ? `position-anchor: --${context.menuId};`
+      : fallbackPositionStyle}
+    role="menu"
+    aria-orientation="vertical"
+    data-cinder-placement={context.supportsPopover
+      ? preferredPlacement
+      : anchoredFallback.resolvedPlacement}
+    data-cinder-position-ready={!context.supportsPopover && fallbackPositionReady !== undefined
+      ? fallbackPositionReady
+      : undefined}
+    tabindex={-1}
+    onkeydown={handleKeydown}
+    ontoggle={context.supportsPopover ? handleToggle : undefined}
+    {@attach fallbackPortalAttachment}
+    {...rest}
+    dir={resolvedDirection}
+    data-cinder-explicit-direction={resolvedDirection ? 'true' : undefined}
+  >
+    {#if children}
+      {@render children()}
+    {/if}
+  </div>
+{/if}

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

@@ -0,0 +1,7 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+export type DropdownMenuProps = Omit<HTMLAttributes<HTMLDivElement>, 'class'> & {
+  /** Additional class names merged with the component's root class. */
+  class?: string;
+  children?: Snippet;
+};

package/src/components/dropdown-menu/dropdown-menu.variables.ts

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

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

@@ -0,0 +1,5 @@
+import DropdownMenu from './dropdown-menu.svelte';
+
+export default DropdownMenu;
+export type { DropdownMenuProps } from './dropdown-menu.types.ts';
+export { DropdownMenu };

package/src/components/dropdown-separator/dropdown-separator.schema.ts

@@ -0,0 +1,15 @@
+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 the component's root class.",
+    },
+  },
+  additionalProperties: false,
+} satisfies ComponentSchema;
+
+export default schema as ComponentSchema;

package/src/components/dropdown-separator/dropdown-separator.svelte

@@ -0,0 +1,18 @@
+<script lang="ts" module>
+export {};
+</script>
+
+<script lang="ts">
+import { classNames } from '../../utilities/class-names.ts';
+let { class: customClassName, ...rest } = $props();
+</script>
+
+<!--
+  `{...rest}` is spread first so the component's own role="separator" — its sole
+  semantic purpose — wins against any role a caller passes through their spread.
+-->
+<div
+  {...rest}
+  class={classNames('cinder-dropdown-separator', customClassName)}
+  role="separator"
+></div>

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

@@ -0,0 +1,5 @@
+import type { HTMLAttributes } from 'svelte/elements';
+export type DropdownSeparatorProps = Omit<HTMLAttributes<HTMLDivElement>, 'class'> & {
+  /** Additional class names merged with the component's root class. */
+  class?: string;
+};

package/src/components/dropdown-separator/dropdown-separator.variables.ts

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

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

@@ -0,0 +1,5 @@
+import DropdownSeparator from './dropdown-separator.svelte';
+
+export default DropdownSeparator;
+export type { DropdownSeparatorProps } from './dropdown-separator.types.ts';
+export { DropdownSeparator };

package/src/components/dropdown-trigger/dropdown-trigger.schema.ts

@@ -0,0 +1,27 @@
+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 the component's root class.",
+    },
+    showCaret: {
+      type: 'boolean',
+      description: 'Render the trailing disclosure caret. Defaults to true.',
+    },
+  },
+  additionalProperties: false,
+  metadata: {
+    unsupportedProps: [
+      {
+        name: 'children',
+        reason: 'function-or-snippet',
+      },
+    ],
+  },
+} satisfies ComponentSchema;
+
+export default schema as ComponentSchema;

package/src/components/dropdown-trigger/dropdown-trigger.svelte

@@ -0,0 +1,56 @@
+<script lang="ts" module>
+export {};
+</script>
+
+<script lang="ts">
+import { classNames } from '../../utilities/class-names.ts';
+import { getDropdownContext, getDropdownRegisterTrigger, getDropdownSetOpen, } from '../dropdown/dropdown.context.ts';
+let { class: customClassName, showCaret = true, children, onclick, ...rest } = $props();
+const context = getDropdownContext();
+const registerTrigger = getDropdownRegisterTrigger();
+const setOpen = getDropdownSetOpen();
+function attachTrigger(node) {
+    registerTrigger(node);
+    return () => registerTrigger(null);
+}
+function handleClick(event) {
+    if (typeof onclick === 'function') {
+        onclick(event);
+    }
+    if (!event.defaultPrevented && !context.supportsPopover) {
+        setOpen(!context.isOpen);
+    }
+}
+</script>
+
+<button
+  {@attach attachTrigger}
+  type="button"
+  class={classNames('cinder-dropdown-trigger', customClassName)}
+  style={`anchor-name: --${context.menuId};`}
+  aria-haspopup="menu"
+  aria-expanded={context.isOpen}
+  aria-controls={context.menuId}
+  popovertarget={context.supportsPopover ? context.menuId : undefined}
+  onclick={handleClick}
+  {...rest}
+>
+  {#if children}
+    {@render children()}
+  {/if}
+  {#if showCaret}
+    <svg
+      class="cinder-dropdown-trigger__caret"
+      aria-hidden="true"
+      focusable="false"
+      viewBox="0 0 20 20"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <path d="M6 8l4 4 4-4" />
+    </svg>
+  {/if}
+</button>

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

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+export type DropdownTriggerProps = Omit<HTMLButtonAttributes, 'class'> & {
+  /** Additional class names merged with the component's root class. */
+  class?: string;
+  /** Render the trailing disclosure caret. Defaults to true. */
+  showCaret?: boolean;
+  children?: Snippet;
+};

package/src/components/dropdown-trigger/dropdown-trigger.variables.ts

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

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

@@ -0,0 +1,5 @@
+import DropdownTrigger from './dropdown-trigger.svelte';
+
+export default DropdownTrigger;
+export type { DropdownTriggerProps } from './dropdown-trigger.types.ts';
+export { DropdownTrigger };

package/src/components/empty-state/empty-state.schema.ts

@@ -0,0 +1,42 @@
+import type { ComponentSchema } from '../../schema-types';
+
+const schema = {
+  $schema: 'https://json-schema.org/draft/2020-12/schema',
+  type: 'object',
+  properties: {
+    title: {
+      type: 'string',
+      description:
+        'Primary heading text rendered as a heading element at the configured `headingLevel`.',
+    },
+    description: {
+      type: 'string',
+      description: 'Secondary descriptive text rendered as a paragraph below the title.',
+    },
+    class: {
+      type: 'string',
+      description: 'Additional class merged onto the `.cinder-empty-state` root element.',
+    },
+    headingLevel: {
+      enum: [1, 2, 3, 4, 5, 6],
+      description: 'Heading level for the title element.',
+      default: 3,
+    },
+  },
+  additionalProperties: false,
+  required: ['title'],
+  metadata: {
+    unsupportedProps: [
+      {
+        name: 'action',
+        reason: 'function-or-snippet',
+      },
+      {
+        name: 'icon',
+        reason: 'function-or-snippet',
+      },
+    ],
+  },
+} satisfies ComponentSchema;
+
+export default schema as ComponentSchema;

package/src/components/empty-state/empty-state.svelte

@@ -0,0 +1,41 @@
+<script lang="ts" module>
+export {};
+</script>
+
+<script lang="ts">
+import { classNames } from '../../utilities/class-names.ts';
+let { title, description, class: className, headingLevel = 3, icon, action, ...rest } = $props();
+// SSR-safe, per-instance id so the container can name itself from its title,
+// giving the heading a programmatic relationship to the region it labels.
+const titleId = $props.id();
+// Coerce + clamp at runtime: a consumer can pass 0, 7, NaN, or a non-numeric
+// value despite the TS literal union, and <h0>/<hNaN> is invalid markup.
+const safeLevel = $derived(Number.isFinite(Math.trunc(Number(headingLevel)))
+    ? Math.min(6, Math.max(1, Math.trunc(Number(headingLevel))))
+    : 3);
+const tag = $derived(`h${safeLevel}`);
+</script>
+
+<div
+  {...rest}
+  class={classNames('cinder-empty-state', className)}
+  role="group"
+  aria-labelledby={titleId}
+>
+  {#if icon}
+    <div class="cinder-empty-state-icon" aria-hidden="true">
+      {@render icon()}
+    </div>
+  {/if}
+  <svelte:element this={tag} id={titleId} class="cinder-empty-state-title">
+    {title}
+  </svelte:element>
+  {#if description}
+    <p class="cinder-empty-state-description">{description}</p>
+  {/if}
+  {#if action}
+    <div class="cinder-empty-state-action">
+      {@render action()}
+    </div>
+  {/if}
+</div>

package/src/components/empty-state/empty-state.types.ts

@@ -0,0 +1,18 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+
+export type EmptyStateProps = Omit<HTMLAttributes<HTMLDivElement>, 'class'> & {
+  /** Primary heading text rendered as a heading element at the configured `headingLevel`. */
+  title: string;
+  /** Secondary descriptive text rendered as a paragraph below the title. */
+  description?: string;
+  /** Additional class merged onto the `.cinder-empty-state` root element. */
+  class?: string;
+  /**
+   * Heading level for the title element.
+   * @default 3
+   */
+  headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
+  icon?: Snippet;
+  action?: Snippet;
+};

package/src/components/empty-state/empty-state.variables.ts

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

package/src/components/empty-state/index.ts

@@ -0,0 +1,6 @@
+import './empty-state.css';
+import EmptyState from './empty-state.svelte';
+
+export default EmptyState;
+export type { EmptyStateProps } from './empty-state.types.ts';
+export { EmptyState };

package/src/components/event-stream-viewer/event-stream-viewer-keys.ts

@@ -0,0 +1,74 @@
+import type { StreamEvent, StreamReconnectedBoundary } from './event-stream-viewer.types.ts';
+
+export function streamEventKey(event: StreamEvent): string {
+  const parts = [keyType('event'), keyField('id', event.id)];
+  if (typeof event.sequence === 'number') parts.push(keyField('sequence', event.sequence));
+  return parts.join('|');
+}
+
+export function reconnectedBoundaryKey(boundary: StreamReconnectedBoundary): string {
+  return [keyType('reconnected'), keyField('id', boundary.id)].join('|');
+}
+
+export function sequenceGapKey(
+  previousEventId: string | undefined,
+  event: StreamEvent,
+  expectedSequence: number,
+  actualSequence: number,
+): string {
+  return [
+    keyType('sequence-gap'),
+    previousEventId === undefined
+      ? keyField('previous-missing', true)
+      : keyField('previous', previousEventId),
+    keyField('next', event.id),
+    keyField('expected', expectedSequence),
+    keyField('actual', actualSequence),
+  ].join('|');
+}
+
+export function uniqueRenderedKey(baseKey: string, occurrences: Map<string, number>): string {
+  const occurrence = occurrences.get(baseKey) ?? 0;
+  occurrences.set(baseKey, occurrence + 1);
+  return occurrence === 0 ? baseKey : `${baseKey}|occurrence=${occurrence + 1}`;
+}
+
+export function detailsIdForKey(instanceId: string, key: string): string {
+  return `${escapeDomIdPart(instanceId)}-details-${hashString(key)}-${hashString(reverseString(key))}-${key.length}`;
+}
+
+function keyType(type: string): string {
+  return keyField('type', type);
+}
+
+function keyField(name: string, value: string | number | boolean): string {
+  const stringValue = String(value);
+  return `${name.length}:${name}:${stringValue.length}:${stringValue}`;
+}
+
+function escapeDomIdPart(value: string): string {
+  let result = '';
+  for (const character of value) {
+    result += /^[A-Za-z0-9_-]$/.test(character)
+      ? character
+      : `_${character.codePointAt(0)?.toString(16) ?? '0'}_`;
+  }
+  return result === '' ? 'empty' : result;
+}
+
+function reverseString(value: string): string {
+  let result = '';
+  for (const character of value) {
+    result = character + result;
+  }
+  return result;
+}
+
+function hashString(value: string): string {
+  let hash = 0;
+  for (let index = 0; index < value.length; index += 1) {
+    hash = Math.imul(31, hash) + value.charCodeAt(index);
+    hash |= 0;
+  }
+  return (hash >>> 0).toString(36);
+}