@lostgradient/cinder 0.1.0 → 0.2.0

package/src/components/review-editor/README.md

@@ -0,0 +1,64 @@
+# ReviewEditor
+
+Markdown editor extended with inline review threads, anchored comments, and collaborative annotation state.
+
+## Usage
+
+```svelte
+<script lang="ts">
+  import { ReviewEditor } from '@lostgradient/cinder/review-editor';
+</script>
+```
+
+## Guidance
+
+### Use When
+
+- Building a document review experience that needs both a Markdown editor and anchored comment threads in one bundled surface.
+- Threading reviewer commentary against specific selections inside a long-form document.
+
+### Avoid When
+
+- Plain authoring with no review threads — markdown-editor is the lighter primitive.
+- Reviewing diffs between two documents rather than annotating one — use diff-viewer instead.
+
+## Props
+
+<!-- generated:props:start -->
+
+| Prop              | Type                     | Required | Default | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| ----------------- | ------------------------ | -------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `class`           | `string`                 | no       | —       | Additional CSS classes.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
+| `currentUserId`   | `string`                 | no       | —       | Current user ID for permissions.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| `id`              | `string`                 | yes      | —       | Unique identifier for accessibility (required).                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| `mode`            | `"edit"` \| `"readonly"` | no       | —       | Editor mode.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| `name`            | `string`                 | no       | —       | Form field name prefix for hidden inputs (enables form participation).                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| `original`        | `string`                 | no       | —       | Original/baseline content for diff comparison.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| `placeholder`     | `string`                 | no       | —       | Placeholder text when empty.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| `snapshotMode`    | `boolean`                | no       | —       | 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`. |
+| `value`           | `string`                 | no       | —       | Current markdown content (two-way bindable).                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| `onchange`        | `(opaque)`               | no       | —       | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| `oncommentcreate` | `(opaque)`               | no       | —       | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| `oncommentdelete` | `(opaque)`               | no       | —       | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| `oncommentupdate` | `(opaque)`               | no       | —       | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| `onthreadcreate`  | `(opaque)`               | no       | —       | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| `onthreaddelete`  | `(opaque)`               | no       | —       | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| `threads`         | `(opaque)`               | no       | —       | A prop whose shape is not captured by the JSON schema; see the component types for the exact signature.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
+
+<!-- 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/review-editor/comment-composer.svelte

@@ -254,11 +254,10 @@
   }
 
   .comment-composer-textarea:focus {
-    outline: none;
     border-color: var(--cinder-accent);
-    box-shadow:
-      0 0 0 var(--cinder-ring-offset) var(--cinder-ring-offset-color),
-      0 0 0 calc(var(--cinder-ring-offset) + var(--cinder-ring-width)) var(--cinder-accent);
+    outline: var(--cinder-ring-width) solid transparent;
+    outline-offset: var(--cinder-ring-offset);
+    box-shadow: var(--_cinder-focus-ring-shadow);
   }
 
   .comment-composer-textarea:disabled {
@@ -271,10 +270,11 @@
     border-color: var(--cinder-danger);
   }
 
-  .comment-composer-textarea[data-has-error='true']:focus {
-    box-shadow:
-      0 0 0 var(--cinder-ring-offset) var(--cinder-ring-offset-color),
-      0 0 0 calc(var(--cinder-ring-offset) + var(--cinder-ring-width)) var(--cinder-danger);
+  @media (forced-colors: active) {
+    .comment-composer-textarea:focus {
+      outline: var(--cinder-ring-width) solid Highlight;
+      outline-offset: 1px;
+    }
   }
 
   .comment-composer-error {

package/src/components/review-editor/comment-list.svelte

@@ -258,8 +258,17 @@
   }
 
   .comment-edit-textarea:focus {
-    outline: none;
     border-color: var(--cinder-accent);
+    outline: var(--cinder-ring-width) solid transparent;
+    outline-offset: var(--cinder-ring-offset);
+    box-shadow: var(--_cinder-focus-ring-shadow);
+  }
+
+  @media (forced-colors: active) {
+    .comment-edit-textarea:focus {
+      outline: var(--cinder-ring-width) solid Highlight;
+      outline-offset: 1px;
+    }
   }
 
   .comment-edit-actions {

package/src/components/search-field/search-field.examples.json

@@ -0,0 +1,13 @@
+{
+  "$schema": "../../schemas/examples.schema.json",
+  "component": "search-field",
+  "import": "@lostgradient/cinder/search-field",
+  "examples": [
+    {
+      "id": "basic",
+      "title": "Clearable search field",
+      "description": "Search input with an initial value so the clear button is visible.",
+      "code": "<script lang=\"ts\">\n  import { SearchField } from '@lostgradient/cinder/search-field';\n</script>\n\n<SearchField\n  id=\"search-field-basic\"\n  aria-label=\"Search components\"\n  defaultValue=\"cinder\"\n  placeholder=\"Filter by name\"\n/>\n"
+    }
+  ]
+}

package/src/components/segment/README.md

@@ -0,0 +1,55 @@
+# Segment
+
+Individual option inside a SegmentedControl that renders the button, wires the value, and forwards leading/trailing decorations.
+
+## Usage
+
+```svelte
+<script lang="ts">
+  import { Segment } from '@lostgradient/cinder/segment';
+</script>
+```
+
+## Guidance
+
+### Use When
+
+- Authoring SegmentedControl children declaratively so consumers can compose icons, labels, and badges per segment.
+- Mixing disabled and enabled segments inside a single radiogroup/tablist where each segment carries its own metadata.
+
+### Avoid When
+
+- Building a standalone toggle button — use Button or Toggle instead.
+- Selecting one option from a long list — use Select or Combobox instead.
+
+## Props
+
+<!-- generated:props:start -->
+
+| Prop       | Type       | Required | Default | Description                                                                                                                |
+| ---------- | ---------- | -------- | ------- | -------------------------------------------------------------------------------------------------------------------------- |
+| `class`    | `string`   | no       | —       | Custom class merged with `.cinder-segmented-control-option`.                                                               |
+| `controls` | `string`   | no       | —       | ID of the panel this segment controls — only meaningful when the parent `SegmentedControl` uses `variant="tablist"`.       |
+| `disabled` | `boolean`  | no       | —       | Disable just this segment (independent of the control-level `disabled`).                                                   |
+| `children` | `(opaque)` | no       | —       | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature. |
+| `leading`  | `(opaque)` | no       | —       | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature. |
+| `trailing` | `(opaque)` | no       | —       | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature. |
+| `value`    | `(opaque)` | no       | —       | A prop whose shape is not captured by the JSON schema; see the component types for the exact signature.                    |
+
+<!-- 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/share-card/README.md

@@ -0,0 +1,58 @@
+# ShareCard
+
+Compact share card with copy-link, copy-text, and native navigator.share actions, with accessible success announcements and graceful fallback when navigator.share is unavailable.
+
+## Usage
+
+```svelte
+<script lang="ts">
+  import { ShareCard } from '@lostgradient/cinder/share-card';
+</script>
+```
+
+## Guidance
+
+### Use When
+
+- Offering a quick way to share a link or text with copy and native share options.
+- Presenting a result, invite link, or exported report link with sharing affordances.
+
+### Avoid When
+
+- Generating the share text or images — compose ShareCard with your own copy generation logic.
+- Posting directly to social media or analytics — wire those externally.
+
+## Props
+
+<!-- generated:props:start -->
+
+| Prop              | Type       | Required | Default | Description                                                                                                                |
+| ----------------- | ---------- | -------- | ------- | -------------------------------------------------------------------------------------------------------------------------- |
+| `class`           | `string`   | no       | —       | Additional class names merged with `.cinder-share-card`.                                                                   |
+| `confirmDuration` | `number`   | no       | `2000`  | Duration in ms to show the copied confirmation state.                                                                      |
+| `copiedLabel`     | `string`   | no       | —       | Label shown after a successful copy.                                                                                       |
+| `copyLinkLabel`   | `string`   | no       | —       | Label for the copy-link button.                                                                                            |
+| `description`     | `string`   | no       | —       | Additional descriptive text.                                                                                               |
+| `shareLabel`      | `string`   | no       | —       | Label for the native-share button.                                                                                         |
+| `title`           | `string`   | no       | —       | Human-readable title for the share card.                                                                                   |
+| `value`           | `string`   | yes      | —       | The URL or text to share/copy.                                                                                             |
+| `actions`         | `(opaque)` | no       | —       | A prop whose shape is not captured by the JSON schema; see the component types for the exact signature.                    |
+| `preview`         | `(opaque)` | no       | —       | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature. |
+
+<!-- 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/share-card/index.ts

@@ -0,0 +1,6 @@
+import './share-card.css';
+import ShareCard from './share-card.svelte';
+
+export default ShareCard;
+export type { ShareCardAction, ShareCardProps } from './share-card.types.ts';
+export { ShareCard };

package/src/components/share-card/share-card.css

@@ -0,0 +1,115 @@
+@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
+@layer cinder.components {
+  .cinder-share-card {
+    display: flex;
+    flex-direction: column;
+    gap: var(--cinder-space-2);
+    padding: var(--cinder-space-3);
+    border: 1px solid var(--cinder-border);
+    border-radius: var(--cinder-radius-md);
+    background-color: var(--cinder-surface);
+    color: var(--cinder-text);
+  }
+
+  .cinder-share-card__preview {
+    border-radius: var(--cinder-radius-sm);
+    overflow: hidden;
+    border: 1px solid var(--cinder-border);
+  }
+
+  .cinder-share-card__meta {
+    display: flex;
+    flex-direction: column;
+    gap: var(--cinder-space-1);
+  }
+
+  .cinder-share-card__title {
+    font-weight: 600;
+    font-size: var(--cinder-text-sm);
+    margin: 0;
+    color: var(--cinder-text);
+  }
+
+  .cinder-share-card__description {
+    font-size: var(--cinder-text-xs);
+    color: var(--cinder-text-muted);
+    margin: 0;
+  }
+
+  .cinder-share-card__value {
+    display: flex;
+    align-items: center;
+    gap: var(--cinder-space-1);
+    padding: var(--cinder-space-1) var(--cinder-space-2);
+    border: 1px solid var(--cinder-border);
+    border-radius: var(--cinder-radius-sm);
+    background-color: var(--cinder-surface-inset);
+    font-size: var(--cinder-text-xs);
+    font-family: var(--cinder-font-mono, monospace);
+    min-width: 0;
+  }
+
+  .cinder-share-card__value-text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex: 1;
+    min-width: 0;
+    color: var(--cinder-text-muted);
+    user-select: all;
+  }
+
+  .cinder-share-card__actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--cinder-space-1);
+  }
+
+  .cinder-share-card__action {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--cinder-space-1);
+    padding: var(--cinder-space-1) var(--cinder-space-2);
+    border: 1px solid var(--cinder-border);
+    border-radius: var(--cinder-radius-sm);
+    background-color: var(--cinder-surface);
+    color: var(--cinder-text);
+    cursor: pointer;
+    font-size: var(--cinder-text-sm);
+    font-weight: 500;
+    transition:
+      background-color 0.15s ease,
+      border-color 0.15s ease;
+    white-space: nowrap;
+  }
+
+  @media (hover: hover) {
+    .cinder-share-card__action:hover {
+      background-color: var(--cinder-surface-raised);
+      border-color: var(--cinder-border-strong);
+    }
+  }
+
+  .cinder-share-card__action:focus-visible {
+    outline: var(--cinder-ring-width) solid transparent;
+    box-shadow:
+      0 0 0 var(--cinder-ring-offset) var(--cinder-ring-offset-color),
+      0 0 0 calc(var(--cinder-ring-offset) + var(--cinder-ring-width)) var(--cinder-ring-color);
+  }
+
+  .cinder-share-card__action[data-cinder-copied] {
+    color: var(--cinder-color-success-fg);
+    border-color: var(--cinder-color-success-border);
+  }
+
+  .cinder-share-card__action-icon {
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+  }
+
+  .cinder-share-card__icon {
+    width: 1em;
+    height: 1em;
+  }
+}

package/src/components/share-card/share-card.examples.json

@@ -0,0 +1,19 @@
+{
+  "$schema": "../../schemas/examples.schema.json",
+  "component": "share-card",
+  "import": "@lostgradient/cinder/share-card",
+  "examples": [
+    {
+      "id": "invite-link",
+      "title": "Invite link share card",
+      "description": "A compact share card for copying and sharing an invite link.",
+      "code": "<script lang=\"ts\">\n  import { ShareCard } from '@lostgradient/cinder/share-card';\n</script>\n\n<div style=\"max-width: 22rem;\">\n  <ShareCard\n    value=\"https://app.example.com/invite/abc123xyz\"\n    title=\"Invite a teammate\"\n    description=\"Share this link to invite someone to your workspace.\"\n    copyLinkLabel=\"Copy invite link\"\n    copiedLabel=\"Copied!\"\n  />\n</div>\n"
+    },
+    {
+      "id": "result-card",
+      "title": "Export result share card",
+      "description": "A share card for a generated report link with custom actions.",
+      "code": "<script lang=\"ts\">\n  import { ShareCard } from '@lostgradient/cinder/share-card';\n</script>\n\n<div style=\"max-width: 22rem;\">\n  <ShareCard\n    value=\"https://reports.example.com/r/q4-revenue-2024\"\n    title=\"Q4 Revenue Report\"\n    description=\"This link expires in 7 days.\"\n    actions={[\n      {\n        key: 'copy-link',\n        label: 'Copy link',\n        copyValue: 'https://reports.example.com/r/q4-revenue-2024',\n      },\n      { key: 'copy-text', label: 'Copy title', copyValue: 'Q4 Revenue Report' },\n    ]}\n  />\n</div>\n"
+    }
+  ]
+}

package/src/components/share-card/share-card.schema.json

@@ -0,0 +1,53 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "type": "object",
+  "properties": {
+    "value": {
+      "type": "string",
+      "description": "The URL or text to share/copy."
+    },
+    "title": {
+      "type": "string",
+      "description": "Human-readable title for the share card."
+    },
+    "description": {
+      "type": "string",
+      "description": "Additional descriptive text."
+    },
+    "copyLinkLabel": {
+      "type": "string",
+      "description": "Label for the copy-link button."
+    },
+    "copiedLabel": {
+      "type": "string",
+      "description": "Label shown after a successful copy."
+    },
+    "shareLabel": {
+      "type": "string",
+      "description": "Label for the native-share button."
+    },
+    "confirmDuration": {
+      "type": "number",
+      "description": "Duration in ms to show the copied confirmation state.",
+      "default": 2000
+    },
+    "class": {
+      "type": "string",
+      "description": "Additional class names merged with `.cinder-share-card`."
+    }
+  },
+  "additionalProperties": false,
+  "required": ["value"],
+  "metadata": {
+    "unsupportedProps": [
+      {
+        "name": "actions",
+        "reason": "unknown-shape"
+      },
+      {
+        "name": "preview",
+        "reason": "function-or-snippet"
+      }
+    ]
+  }
+}

package/src/components/share-card/share-card.schema.ts

@@ -0,0 +1,57 @@
+import type { ComponentSchema } from '../../schema-types';
+
+const schema = {
+  $schema: 'https://json-schema.org/draft/2020-12/schema',
+  type: 'object',
+  properties: {
+    value: {
+      type: 'string',
+      description: 'The URL or text to share/copy.',
+    },
+    title: {
+      type: 'string',
+      description: 'Human-readable title for the share card.',
+    },
+    description: {
+      type: 'string',
+      description: 'Additional descriptive text.',
+    },
+    copyLinkLabel: {
+      type: 'string',
+      description: 'Label for the copy-link button.',
+    },
+    copiedLabel: {
+      type: 'string',
+      description: 'Label shown after a successful copy.',
+    },
+    shareLabel: {
+      type: 'string',
+      description: 'Label for the native-share button.',
+    },
+    confirmDuration: {
+      type: 'number',
+      description: 'Duration in ms to show the copied confirmation state.',
+      default: 2000,
+    },
+    class: {
+      type: 'string',
+      description: 'Additional class names merged with `.cinder-share-card`.',
+    },
+  },
+  additionalProperties: false,
+  required: ['value'],
+  metadata: {
+    unsupportedProps: [
+      {
+        name: 'actions',
+        reason: 'unknown-shape',
+      },
+      {
+        name: 'preview',
+        reason: 'function-or-snippet',
+      },
+    ],
+  },
+} satisfies ComponentSchema;
+
+export default schema as ComponentSchema;