@lostgradient/cinder 0.3.0 → 0.4.1

package/src/components/connection-indicator/README.md

@@ -1,41 +0,0 @@
-# ConnectionIndicator
-
-Live-status pill pairing a semantic dot with a label to communicate real-time WebSocket, SSE, or polling connection state.
-
-## Usage
-
-```svelte
-<script lang="ts">
-  import ConnectionIndicator from '@lostgradient/cinder/connection-indicator';
-</script>
-
-<ConnectionIndicator state="connected" />
-```
-
-## Props
-
-<!-- generated:props:start -->
-
-| Prop    | Type                                                             | Required | Default | Description                                                             |
-| ------- | ---------------------------------------------------------------- | -------- | ------- | ----------------------------------------------------------------------- |
-| `class` | `string`                                                         | no       | —       | Additional class names merged with `.cinder-connection-indicator`.      |
-| `label` | `string`                                                         | no       | —       | Optional override for the visible label. Defaults derived from `state`. |
-| `state` | `"connected"` \| `"connecting"` \| `"disconnected"` \| `"error"` | yes      | —       | Current connection state.                                               |
-
-<!-- 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/connection-indicator/connection-indicator.css

@@ -1,63 +0,0 @@
-@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
-@layer cinder.components {
-  /* ========================================
- * CONNECTION INDICATOR
- * Live-status pill with semantic dot + label.
- * ======================================== */
-
-  .cinder-connection-indicator {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--cinder-space-1-5);
-    padding: var(--cinder-space-0-5) var(--cinder-space-2);
-    font-size: var(--cinder-text-xs);
-    font-weight: var(--cinder-font-medium);
-    border-radius: var(--cinder-radius-full);
-    background: var(--cinder-surface-inset);
-    color: var(--cinder-text);
-  }
-
-  .cinder-connection-indicator__dot {
-    display: inline-block;
-    width: 0.5rem;
-    height: 0.5rem;
-    border-radius: var(--cinder-radius-full);
-    background: currentColor;
-  }
-
-  .cinder-connection-indicator[data-cinder-state='connected'] {
-    color: var(--cinder-success);
-  }
-
-  .cinder-connection-indicator[data-cinder-state='connecting'] {
-    color: var(--cinder-warning);
-  }
-
-  .cinder-connection-indicator[data-cinder-state='connecting'] .cinder-connection-indicator__dot {
-    animation: cinder-connection-pulse 1.4s ease-in-out infinite;
-  }
-
-  @keyframes cinder-connection-pulse {
-    0%,
-    100% {
-      opacity: 1;
-    }
-    50% {
-      opacity: 0.3;
-    }
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .cinder-connection-indicator[data-cinder-state='connecting'] .cinder-connection-indicator__dot {
-      animation: none;
-    }
-  }
-
-  .cinder-connection-indicator[data-cinder-state='disconnected'] {
-    color: var(--cinder-text-muted);
-  }
-
-  .cinder-connection-indicator[data-cinder-state='error'] {
-    color: var(--cinder-danger);
-  }
-}

package/src/components/connection-indicator/connection-indicator.svelte

@@ -1,44 +0,0 @@
-<script lang="ts" module>
-  /**
-   * @cinder
-   * @category feedback
-   * @status stable
-   * @purpose Live-status pill pairing a semantic dot with a label to communicate real-time WebSocket, SSE, or polling connection state.
-   * @tag connection
-   * @tag status
-   * @tag realtime
-   * @useWhen Surfacing whether a realtime channel is connected, connecting, disconnected, or errored on a dashboard or app chrome.
-   * @useWhen Giving operators an at-a-glance health signal for a long-lived transport.
-   * @avoidWhen Communicating generic semantic state with no realtime connection backing it — status-dot is the lower-level primitive.
-   * @related status-dot, spinner
-   */
-  export type { ConnectionIndicatorProps, ConnectionState } from './connection-indicator.types.ts';
-</script>
-
-<script lang="ts">
-  import type { ConnectionIndicatorProps, ConnectionState } from './connection-indicator.types.ts';
-  import { classNames } from '../../utilities/class-names.ts';
-
-  let { state, label, class: className, ...rest }: ConnectionIndicatorProps = $props();
-
-  const defaultLabels: Record<ConnectionState, string> = {
-    connected: 'Connected',
-    connecting: 'Connecting',
-    disconnected: 'Disconnected',
-    error: 'Error',
-  };
-
-  const visibleLabel = $derived(label ?? defaultLabels[state]);
-</script>
-
-<span
-  {...rest}
-  class={classNames('cinder-connection-indicator', className)}
-  data-cinder-state={state}
-  role="status"
-  aria-live="polite"
-  aria-atomic="true"
->
-  <span class="cinder-connection-indicator__dot" aria-hidden="true"></span>
-  <span class="cinder-connection-indicator__label">{visibleLabel}</span>
-</span>

package/src/components/connection-indicator/connection-indicator.types.ts

@@ -1,18 +0,0 @@
-import type { HTMLAttributes } from 'svelte/elements';
-
-/**
- * Live-status pill with a semantic dot and label. Use to show real-time
- * connection state (WebSocket, SSE, polling) on dashboards.
- */
-export type ConnectionState = 'connected' | 'connecting' | 'disconnected' | 'error';
-// Extends native span attributes so consumers can forward `id`, `data-*`,
-// `aria-*`, etc. onto the root. `class` and `role` are Omit-ted: `class` is
-// merged explicitly, and `role="status"` is intrinsic to the live-region purpose.
-export type ConnectionIndicatorProps = Omit<HTMLAttributes<HTMLSpanElement>, 'class' | 'role'> & {
-  /** Current connection state. */
-  state: ConnectionState;
-  /** Optional override for the visible label. Defaults derived from `state`. */
-  label?: string;
-  /** Additional class names merged with `.cinder-connection-indicator`. */
-  class?: string;
-};

package/src/components/connection-indicator/index.ts

@@ -1,6 +0,0 @@
-import './connection-indicator.css';
-import ConnectionIndicator from './connection-indicator.svelte';
-
-export default ConnectionIndicator;
-export type { ConnectionIndicatorProps, ConnectionState } from './connection-indicator.types.ts';
-export { ConnectionIndicator };

package/src/components/experimental/connection-indicator/index.ts

@@ -1,20 +0,0 @@
-// Deprecated alias — do not edit by hand.
-//
-// `@lostgradient/cinder/experimental/connection-indicator` moved to `@lostgradient/cinder/connection-indicator`
-// when the component was promoted to stable. This shim re-exports the new
-// location so existing imports keep resolving during the deprecation window,
-// and warns once (dev only) so consumers migrate before the alias is removed
-// in the next major. Generated/managed by scripts/generate-exports.ts.
-
-import { devWarn } from '../../../utilities/dev-warn.ts';
-
-devWarn(
-  "[cinder] '@lostgradient/cinder/experimental/connection-indicator' is deprecated and will be removed in the next major. " +
-    "Import from '@lostgradient/cinder/connection-indicator' instead.",
-);
-
-export { ConnectionIndicator, default } from '../../connection-indicator/index.ts';
-export type {
-  ConnectionIndicatorProps,
-  ConnectionState,
-} from '../../connection-indicator/index.ts';

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

@@ -1,92 +0,0 @@
-/**
- * Shared types for ReviewEditor modules (DEP-422).
- *
- * @module
- */
-
-import type {
-  CommentCreateEvent,
-  CommentDeleteEvent,
-  CommentUpdateEvent,
-  Thread,
-  ThreadCreateEvent,
-  ThreadDeleteEvent,
-} from '@lostgradient/cinder/commentary/comments';
-
-/** Review editor mode: edit allows full editing, readonly is view-only. */
-export type ReviewMode = 'edit' | 'readonly';
-
-/** Available review document views. */
-export type ReviewEditorViewType = 'editor' | 'diff' | 'summary';
-
-/** Available diff rendering modes in the review editor. */
-export type ReviewEditorDiffViewMode = 'unified' | 'final' | 'original';
-
-/** FormData structure returned by getFormData(). */
-export type ReviewFormData = {
-  /** Original/baseline content. */
-  original: string;
-  /** Current edited content. */
-  current: string;
-  /** Serialized comment threads as JSON. */
-  comments: string;
-  /** Unified diff between original and current. */
-  diff: string;
-  /** LLM-optimized summary markdown. */
-  summary: string;
-};
-
-export type ReviewEditorProps = {
-  /** Unique identifier for accessibility (required). */
-  id: string;
-  /** Original/baseline content for diff comparison. */
-  original?: string;
-  /** Current markdown content (two-way bindable). */
-  value?: string;
-  /** Comment threads (two-way bindable). */
-  threads?: Thread[];
-  /** Editor mode. */
-  mode?: ReviewMode;
-  /** Current user ID for permissions. */
-  currentUserId?: string | undefined;
-  /** Placeholder text when empty. */
-  placeholder?: string;
-  /** Form field name prefix for hidden inputs (enables form participation). */
-  name?: string;
-  /** Additional CSS classes. */
-  class?: string;
-  /** Called when content changes. */
-  onchange?: (value: string) => void;
-  /** Called when user initiates thread creation. */
-  onthreadcreate?: (event: ThreadCreateEvent) => void;
-  /** Called when a thread is deleted. */
-  onthreaddelete?: (event: ThreadDeleteEvent) => void;
-  /** Called when a comment is created in an existing thread. */
-  oncommentcreate?: (event: CommentCreateEvent) => void;
-  /** Called when a comment is updated. */
-  oncommentupdate?: (event: CommentUpdateEvent) => void;
-  /** Called when a comment is deleted. */
-  oncommentdelete?: (event: CommentDeleteEvent) => void;
-
-  /**
-   * 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.
-   * - The inner MarkdownEditor instance also receives `snapshotMode={true}`.
-   *
-   * This is a purely visual / CSS concern. It does NOT affect editability,
-   * ProseMirror state, or any prop controlled by `readonly` / `mode`.
-   */
-  snapshotMode?: boolean;
-};
-
-/** Position for fixed-position popovers (viewport-relative coordinates) */
-export interface PopoverPosition {
-  x: number;
-  y: number;
-}

package/src/components/subscription-badge/README.md

@@ -1,50 +0,0 @@
-# SubscriptionBadge
-
-Opinionated Badge variant that communicates billing subscription states with a standardized tone, icon, and human-readable label — never relying on color alone.
-
-## Usage
-
-```svelte
-<script lang="ts">
-  import { SubscriptionBadge } from '@lostgradient/cinder/subscription-badge';
-</script>
-```
-
-## Guidance
-
-### Use When
-
-- Displaying the billing state of a subscription in a dashboard, invoice list, or account settings page.
-- Annotating a plan name, customer row, or invoice line with its current payment lifecycle state.
-
-### Avoid When
-
-- The subscription state is not one of the six recognized values — use Badge directly with a custom label.
-- You need an interactive control that changes the state — use a Button or Select.
-
-## Props
-
-<!-- generated:props:start -->
-
-| Prop    | Type                                                                                      | Required | Default | Description                                                                                       |
-| ------- | ----------------------------------------------------------------------------------------- | -------- | ------- | ------------------------------------------------------------------------------------------------- |
-| `class` | `string`                                                                                  | no       | —       | Extra classes forwarded to the underlying Badge.                                                  |
-| `state` | `"active"` \| `"trialing"` \| `"past-due"` \| `"canceled"` \| `"expired"` \| `"refunded"` | yes      | —       | The billing lifecycle state to display. Determines the badge tone, icon, and label automatically. |
-
-<!-- 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/subscription-badge/index.ts

@@ -1,6 +0,0 @@
-import './subscription-badge.css';
-import SubscriptionBadge from './subscription-badge.svelte';
-
-export default SubscriptionBadge;
-export type { SubscriptionBadgeProps, SubscriptionState } from './subscription-badge.types.ts';
-export { SubscriptionBadge };

package/src/components/subscription-badge/subscription-badge.css

@@ -1,18 +0,0 @@
-@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
-@layer cinder.components {
-  /* ========================================
- * SUBSCRIPTION BADGE
- *
- * Thin wrapper over .cinder-badge that identifies subscription-state
- * badge instances in the DOM. All visual styling (tone, size, layout)
- * is inherited from Badge — this rule exists only to give the component
- * a stable CSS anchor for host-application overrides and for the
- * component graph invariant check that every component has a CSS entry.
- * ======================================== */
-
-  .cinder-subscription-badge {
-    /* No additional overrides needed — Badge tones cover all six states.
-     * Host applications can target .cinder-subscription-badge to further
-     * customize without touching the base Badge rules. */
-  }
-}

package/src/components/subscription-badge/subscription-badge.examples.json

@@ -1,19 +0,0 @@
-{
-  "$schema": "../../schemas/examples.schema.json",
-  "component": "subscription-badge",
-  "import": "@lostgradient/cinder/subscription-badge",
-  "examples": [
-    {
-      "id": "all-states",
-      "title": "Subscription badge states",
-      "description": "All six billing lifecycle states, each with a distinct icon, label, and tone.",
-      "code": "<script lang=\"ts\">\n  import { SubscriptionBadge } from '@lostgradient/cinder/subscription-badge';\n</script>\n\n<div class=\"example-preview-row\">\n  <SubscriptionBadge state=\"active\" />\n  <SubscriptionBadge state=\"trialing\" />\n  <SubscriptionBadge state=\"past-due\" />\n  <SubscriptionBadge state=\"canceled\" />\n  <SubscriptionBadge state=\"expired\" />\n  <SubscriptionBadge state=\"refunded\" />\n</div>\n"
-    },
-    {
-      "id": "in-context",
-      "title": "Subscription badge in context",
-      "description": "SubscriptionBadge shown alongside plan details inside a Card, representing typical dashboard usage.",
-      "code": "<script lang=\"ts\">\n  import { Card } from '@lostgradient/cinder/card';\n  import { SubscriptionBadge } from '@lostgradient/cinder/subscription-badge';\n\n  const plans = [\n    { name: 'Pro — Monthly', state: 'active' },\n    { name: 'Team — Annual', state: 'trialing' },\n    { name: 'Starter — Monthly', state: 'past-due' },\n    { name: 'Enterprise', state: 'canceled' },\n    { name: 'Starter — Legacy', state: 'expired' },\n    { name: 'Hobby — Monthly', state: 'refunded' },\n  ] as const;\n</script>\n\n<div class=\"example-preview-column\">\n  {#each plans as plan (plan.name)}\n    <Card>\n      <div style=\"display: flex; align-items: center; justify-content: space-between; gap: 1rem;\">\n        <span style=\"font-size: var(--cinder-text-sm); color: var(--cinder-text);\">{plan.name}</span\n        >\n        <SubscriptionBadge state={plan.state} />\n      </div>\n    </Card>\n  {/each}\n</div>\n"
-    }
-  ]
-}

package/src/components/subscription-badge/subscription-badge.svelte

@@ -1,69 +0,0 @@
-<script lang="ts" module>
-  /**
-   * @cinder
-   * @category data-display
-   * @status alpha
-   * @purpose Opinionated Badge variant that communicates billing subscription states with a standardized tone, icon, and human-readable label.
-   * @tag billing
-   * @tag subscription
-   * @tag status
-   * @useWhen Displaying the billing state of a subscription in a dashboard, invoice list, or account settings page.
-   * @useWhen Annotating a plan name, customer row, or invoice line with its current payment lifecycle state.
-   * @avoidWhen The subscription state is not one of the six recognized values — use Badge directly with a custom label instead.
-   * @avoidWhen You need an interactive control that lets users change the state — use a Button or Select.
-   * @related badge, status-dot, chip
-   */
-  export type { SubscriptionBadgeProps, SubscriptionState } from './subscription-badge.types.ts';
-</script>
-
-<script lang="ts">
-  import CircleCheck from 'lucide-svelte/icons/circle-check';
-  import Clock from 'lucide-svelte/icons/clock';
-  import TriangleAlert from 'lucide-svelte/icons/triangle-alert';
-  import CircleX from 'lucide-svelte/icons/circle-x';
-  import CalendarX from 'lucide-svelte/icons/calendar-x';
-  import RotateCcw from 'lucide-svelte/icons/rotate-ccw';
-
-  import Badge from '../badge/badge.svelte';
-  import type { BadgeVariant } from '../badge/badge.types.ts';
-  import { classNames } from '../../utilities/class-names.ts';
-  import type { SubscriptionBadgeProps, SubscriptionState } from './subscription-badge.types.ts';
-
-  // lucide-svelte ships its icons as Svelte component classes. Every lucide icon
-  // shares one signature, so the config types its icon field as the type of a
-  // single concrete icon rather than the Svelte 5 `Component` functional type,
-  // which does not structurally match the class export under svelte-check.
-  type IconComponent = typeof CircleCheck;
-
-  interface StateConfig {
-    tone: BadgeVariant;
-    icon: IconComponent;
-    label: string;
-  }
-
-  const STATE_CONFIG: Record<SubscriptionState, StateConfig> = {
-    active: { tone: 'success', icon: CircleCheck, label: 'Active' },
-    trialing: { tone: 'info', icon: Clock, label: 'Trialing' },
-    'past-due': { tone: 'warning', icon: TriangleAlert, label: 'Past due' },
-    canceled: { tone: 'neutral', icon: CircleX, label: 'Canceled' },
-    expired: { tone: 'danger', icon: CalendarX, label: 'Expired' },
-    refunded: { tone: 'neutral', icon: RotateCcw, label: 'Refunded' },
-  };
-
-  let { state, class: customClassName, ...rest }: SubscriptionBadgeProps = $props();
-
-  const config = $derived(STATE_CONFIG[state]);
-  const Icon = $derived(config.icon);
-  const label = $derived(config.label);
-  const tone = $derived(config.tone);
-</script>
-
-<Badge
-  variant={tone}
-  class={classNames('cinder-subscription-badge', customClassName)}
-  data-cinder-state={state}
-  {...rest}
->
-  <Icon class="icon-sm" aria-hidden="true" />
-  {label}
-</Badge>

package/src/components/subscription-badge/subscription-badge.types.ts

@@ -1,37 +0,0 @@
-import type { HTMLAttributes } from 'svelte/elements';
-
-/**
- * Billing lifecycle states for a subscription.
- *
- * Each value is stamped onto the root element as `data-cinder-state` and
- * maps to a Badge tone and an icon in `subscription-badge.svelte`. Color is
- * NOT the only differentiator — every state also carries a visible text label
- * and an icon so the state is conveyed even to users who cannot distinguish
- * colors (WCAG 1.4.1).
- */
-export type SubscriptionState =
-  | 'active'
-  | 'trialing'
-  | 'past-due'
-  | 'canceled'
-  | 'expired'
-  | 'refunded';
-
-/** Props for the SubscriptionBadge component. */
-export type SubscriptionBadgeProps = Omit<HTMLAttributes<HTMLSpanElement>, 'children'> & {
-  /** The billing lifecycle state to display. */
-  state: SubscriptionState;
-  /** Extra classes forwarded to the underlying Badge. */
-  class?: string;
-};
-
-/** Cinder-specific props for the SubscriptionBadge component, used by the schema generator. */
-export interface SubscriptionBadgeSchemaProps {
-  /**
-   * The billing lifecycle state to display.
-   * Determines the badge tone, icon, and label automatically.
-   */
-  state: SubscriptionState;
-  /** Extra classes forwarded to the underlying Badge. */
-  class?: string;
-}