npm - @lostgradient/cinder - Versions diffs - 0.1.0 → 0.2.0 - Mend

@lostgradient/cinder 0.1.0 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1320) hide show

package/src/components/capability-gate/capability-gate.svelte ADDED Viewed

@@ -0,0 +1,186 @@
+<script lang="ts" module>
+  /**
+   * @cinder
+   * @category feedback
+   * @status alpha
+   * @purpose Present feature availability and next action for browser permission or support states, with accessible status text and focus management.
+   * @tag feedback
+   * @tag permission
+   * @tag notice
+   * @useWhen Surfacing that a feature requires a browser permission such as microphone or notifications.
+   * @useWhen Communicating that a feature is unsupported in the current browser with a clear fallback path.
+   * @avoidWhen Performing the actual feature detection or permission request — wire that in userland.
+   * @avoidWhen Storing permission state — CapabilityGate is a pure presentation component.
+   * @related alert, banner, callout, modal
+   */
+  export type {
+    CapabilityGateProps,
+    CapabilityGateState,
+    CapabilityGateVariant,
+  } from './capability-gate.types.ts';
+  /** Human-readable default status text per state. */
+  const DEFAULT_STATUS_TEXT: Record<string, string> = {
+    supported: 'Available',
+    unsupported: 'Not supported in this browser',
+    'permission-needed': 'Permission required',
+    'permission-denied': 'Permission was denied',
+    loading: 'Checking availability…',
+    unavailable: 'Not available',
+  };
+</script>
+<script lang="ts">
+  import { classNames } from '../../utilities/class-names.ts';
+  import { devWarn } from '../../utilities/dev-warn.ts';
+  import type { CapabilityGateProps } from './capability-gate.types.ts';
+  const KNOWN_STATES = [
+    'supported',
+    'unsupported',
+    'permission-needed',
+    'permission-denied',
+    'loading',
+    'unavailable',
+  ] as const;
+  let {
+    feature,
+    // Destructured off `state` to avoid svelte-check treating the bare identifier
+    // as the `$state` rune (the public prop name is still `state`).
+    state: stateProp,
+    variant = 'inline',
+    primaryAction,
+    onPrimaryAction,
+    fallbackAction,
+    fallbackHref,
+    onFallbackAction,
+    dismissAction,
+    onDismiss,
+    children,
+    class: customClassName,
+    ...rest
+  }: CapabilityGateProps = $props();
+  // Guard the runtime state: a plain-JS or malformed value falls back to
+  // `unavailable` (with a dev warning) rather than rendering an unknown
+  // data-cinder-state and the raw value as status text.
+  const availabilityState = $derived(
+    (KNOWN_STATES as readonly string[]).includes(stateProp) ? stateProp : 'unavailable',
+  );
+  $effect(() => {
+    if (!(KNOWN_STATES as readonly string[]).includes(stateProp)) {
+      devWarn(
+        `CapabilityGate: unknown state "${String(stateProp)}". Expected one of ${KNOWN_STATES.join(', ')}. Falling back to "unavailable".`,
+      );
+    }
+  });
+  let visible = $state(true);
+  let dismissButton: HTMLButtonElement | undefined = $state();
+  // Re-show the gate when the situation changes (e.g. permission-needed →
+  // permission-denied), so a previous dismissal doesn't permanently hide a new,
+  // possibly more urgent state. Reads feature + stateProp to track them.
+  $effect(() => {
+    void feature;
+    void stateProp;
+    visible = true;
+  });
+  const statusText = $derived(DEFAULT_STATUS_TEXT[availabilityState] ?? availabilityState);
+  const isLoading = $derived(availabilityState === 'loading');
+  const isError = $derived(
+    availabilityState === 'permission-denied' || availabilityState === 'unsupported',
+  );
+  const isWarning = $derived(availabilityState === 'permission-needed');
+  const isSuccess = $derived(availabilityState === 'supported');
+  const resolvedVariant = $derived(
+    isError ? 'error' : isWarning ? 'warning' : isSuccess ? 'success' : 'info',
+  );
+  function handleDismiss() {
+    // Blur the dismiss button before it unmounts so focus moves to <body>
+    // predictably rather than being stranded on a detached node. The consumer
+    // owns where focus should land next (e.g. a trigger to re-open the gate) and
+    // can set it in `onDismiss` — the component cannot know the right target.
+    dismissButton?.blur();
+    visible = false;
+    onDismiss?.();
+  }
+</script>
+{#if visible}
+  <div
+    {...rest}
+    class={classNames('cinder-capability-gate', customClassName)}
+    data-cinder-state={availabilityState}
+    data-cinder-variant={resolvedVariant}
+    data-cinder-presentation={variant}
+  >
+    <!-- Status text announced to assistive technology. aria-busy lives on the
+         live region so a loading→ready transition is announced consistently. -->
+    <div
+      class="cinder-capability-gate__status"
+      role="status"
+      aria-live="polite"
+      aria-busy={isLoading ? 'true' : undefined}
+    >
+      <span class="cinder-capability-gate__feature">{feature}</span>
+      <span class="cinder-capability-gate__state-text">{statusText}</span>
+    </div>
+    {#if children}
+      <div class="cinder-capability-gate__content">
+        {@render children()}
+      </div>
+    {/if}
+    {#if primaryAction || fallbackAction || fallbackHref || dismissAction}
+      <div class="cinder-capability-gate__actions">
+        {#if primaryAction}
+          <button
+            type="button"
+            class="cinder-capability-gate__primary"
+            onclick={onPrimaryAction}
+            aria-label="{primaryAction} for {feature}"
+          >
+            {primaryAction}
+          </button>
+        {/if}
+        {#if fallbackHref}
+          <a
+            href={fallbackHref}
+            class="cinder-capability-gate__fallback"
+            aria-label="{fallbackAction ?? 'Alternative option'} for {feature}"
+          >
+            {fallbackAction ?? 'Alternative option'}
+          </a>
+        {:else if fallbackAction}
+          <button
+            type="button"
+            class="cinder-capability-gate__fallback"
+            onclick={onFallbackAction}
+            aria-label="{fallbackAction} for {feature}"
+          >
+            {fallbackAction}
+          </button>
+        {/if}
+        {#if dismissAction}
+          <button
+            bind:this={dismissButton}
+            type="button"
+            class="cinder-capability-gate__dismiss"
+            onclick={handleDismiss}
+            aria-label={dismissAction}
+          >
+            {dismissAction}
+          </button>
+        {/if}
+      </div>
+    {/if}
+  </div>
+{/if}

package/src/components/capability-gate/capability-gate.types.ts ADDED Viewed

@@ -0,0 +1,83 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+/** Availability state for a browser feature or permission. */
+export type CapabilityGateState =
+  | 'supported'
+  | 'unsupported'
+  | 'permission-needed'
+  | 'permission-denied'
+  | 'loading'
+  | 'unavailable';
+/** Presentation style for the gate. */
+export type CapabilityGateVariant = 'inline' | 'banner' | 'callout';
+/** Props for the CapabilityGate component. */
+export type CapabilityGateProps = Omit<
+  HTMLAttributes<HTMLDivElement>,
+  'class' | 'children' | 'role'
+> & {
+  /** The feature being gated (used in accessible status text). */
+  feature: string;
+  /** Current availability state. */
+  state: CapabilityGateState;
+  /** Presentation variant. @default "inline" */
+  variant?: CapabilityGateVariant;
+  /** Label for the primary action button (e.g. "Allow access", "Enable notifications"). */
+  primaryAction?: string;
+  /** Called when the user clicks the primary action button. */
+  onPrimaryAction?: () => void;
+  /** Label for the fallback action (e.g. "Use a different method"). */
+  fallbackAction?: string;
+  /** Href for a fallback link (renders an anchor instead of a button). */
+  fallbackHref?: string;
+  /** Called when the user clicks the fallback action (only when no fallbackHref). */
+  onFallbackAction?: () => void;
+  /** Label for the dismiss action. When provided a dismiss button is rendered. */
+  dismissAction?: string;
+  /**
+   * Called when the user dismisses the gate. The gate unmounts itself on
+   * dismiss; move focus to a sensible target here (e.g. the control that
+   * re-opens the gate) — the component blurs the dismiss button first so focus
+   * is not stranded, but only the consumer knows the right next focus target.
+   */
+  onDismiss?: () => void;
+  /** Custom content rendered below the status text and before the actions. */
+  children?: Snippet;
+  /** Additional class names merged with `.cinder-capability-gate`. */
+  class?: string;
+};
+/**
+ * Cinder-specific props for CapabilityGate, used by the schema generator.
+ */
+export interface CapabilityGateSchemaProps {
+  /** The feature being gated. */
+  feature: string;
+  /** Current availability state. */
+  state: CapabilityGateState;
+  /**
+   * Presentation variant.
+   * @default "inline"
+   */
+  variant?: CapabilityGateVariant;
+  /** Label for the primary action button. */
+  primaryAction?: string;
+  /** Label for the fallback action. */
+  fallbackAction?: string;
+  /** Href for a fallback link. */
+  fallbackHref?: string;
+  /** Label for the dismiss action. */
+  dismissAction?: string;
+  /** Additional class names merged with `.cinder-capability-gate`. */
+  class?: string;
+  /** Called when the primary action button is activated. */
+  onPrimaryAction?: () => void;
+  /** Called when the fallback action button is activated. */
+  onFallbackAction?: () => void;
+  /** Called when the gate is dismissed. */
+  onDismiss?: () => void;
+  /** Custom content rendered below the status text and before the actions. */
+  children?: Snippet;
+}

package/src/components/capability-gate/capability-gate.variables.json ADDED Viewed

	@@ -0,0 +1 @@
1	+ []

package/src/components/capability-gate/capability-gate.variables.ts ADDED Viewed

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

package/src/components/capability-gate/index.ts ADDED Viewed

@@ -0,0 +1,10 @@
+import './capability-gate.css';
+import CapabilityGate from './capability-gate.svelte';
+export default CapabilityGate;
+export type {
+  CapabilityGateProps,
+  CapabilityGateState,
+  CapabilityGateVariant,
+} from './capability-gate.types.ts';
+export { CapabilityGate };

package/src/components/card/README.md CHANGED Viewed

@@ -23,6 +23,7 @@ Surface container for grouping related content and actions into a distinct visua
 | `edgeToEdgeOnMobile` | `boolean`                       | no       | —       | Remove side borders/radius and bleed to the viewport edge on narrow screens.                                                                |
 | `footerTone`         | `"default"` \| `"muted"`        | no       | —       | Footer surface treatment. `muted` renders a grey/inset footer region.                                                                       |
 | `headingLevel`       | `2` \| `3` \| `4` \| `5` \| `6` | no       | —       | Heading level for the generated title. Defaults to `3`. Set this so the card title nests correctly within the surrounding document outline. |
+| `padding`            | `"none"` \| `"default"`         | no       | —       | Body padding. `none` removes all padding for flush or full-bleed content (e.g. an image).                                                   |
 | `title`              | `string`                        | no       | —       |                                                                                                                                             |
 | `variant`            | `"card"` \| `"well"`            | no       | —       | Visual container style. `card` is raised; `well` is flatter and inset.                                                                      |
 | `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.                  |

package/src/components/card/card.css CHANGED Viewed

@@ -60,6 +60,10 @@
     background: var(--cinder-surface-inset);
   }
+  .cinder-card__body[data-cinder-padding='none'] {
+    padding: 0;
+  }
   .cinder-card[data-cinder-variant='well'] .cinder-card__body {
     background: var(--cinder-surface-inset);
   }

package/src/components/card/card.examples.json CHANGED Viewed

@@ -15,6 +15,12 @@
       "description": "A card that bleeds to the viewport edge below the mobile breakpoint.",
       "code": "<script lang=\"ts\">\n  import { Card } from '@lostgradient/cinder/card';\n</script>\n\n<Card edgeToEdgeOnMobile>\n  <div\n    style=\"min-block-size: 8rem; border: 1px dashed var(--cinder-border-muted); border-radius: var(--cinder-radius-sm); background: repeating-linear-gradient(-45deg, transparent, transparent 0.5rem, color-mix(in oklch, var(--cinder-border-muted), transparent 70%) 0.5rem, color-mix(in oklch, var(--cinder-border-muted), transparent 70%) 0.5625rem);\"\n  ></div>\n</Card>\n"
     },
+    {
+      "id": "flush-body",
+      "title": "Flush body (padding=\"none\")",
+      "description": "Pass padding=\"none\" to remove the body padding for full-bleed content such as an image or a data table.",
+      "code": "<script lang=\"ts\">\n  import { Card } from '@lostgradient/cinder/card';\n</script>\n\n<Card title=\"Full-bleed image card\" padding=\"none\">\n  <div\n    style=\"min-block-size: 8rem; background: var(--cinder-surface-inset); border-top: 1px solid var(--cinder-border-muted); display: flex; align-items: center; justify-content: center; color: var(--cinder-text-subtle); font-size: var(--cinder-text-sm);\"\n  >\n    full-bleed content area\n  </div>\n</Card>\n"
+    },
     {
       "id": "well-edge-to-edge-mobile",
       "title": "Well, edge-to-edge on mobile",

package/src/components/card/card.schema.json CHANGED Viewed

@@ -21,6 +21,10 @@
       "type": "boolean",
       "description": "Remove side borders/radius and bleed to the viewport edge on narrow screens."
     },
+    "padding": {
+      "enum": ["none", "default"],
+      "description": "Body padding. `none` removes all padding for flush or full-bleed content (e.g. an image)."
+    },
     "headingLevel": {
       "enum": [2, 3, 4, 5, 6],
       "description": "Heading level for the generated title. Defaults to `3`. Set this so the\ncard title nests correctly within the surrounding document outline."

package/src/components/card/card.schema.ts CHANGED Viewed

@@ -23,6 +23,11 @@ const schema = {
       type: 'boolean',
       description: 'Remove side borders/radius and bleed to the viewport edge on narrow screens.',
     },
+    padding: {
+      enum: ['none', 'default'],
+      description:
+        'Body padding. `none` removes all padding for flush or full-bleed content (e.g. an image).',
+    },
     headingLevel: {
       enum: [2, 3, 4, 5, 6],
       description:

package/src/components/card/card.svelte CHANGED Viewed

@@ -12,7 +12,13 @@
    * @avoidWhen Presenting a single key metric — use stat or stat-group instead.
    * @related surface, stat, stacked-list-item, section-heading
    */
-  export type { CardHeadingLevel, CardProps, CardTone, CardVariant } from './card.types.ts';
+  export type {
+    CardHeadingLevel,
+    CardPadding,
+    CardProps,
+    CardTone,
+    CardVariant,
+  } from './card.types.ts';
 </script>
 <script lang="ts">
@@ -31,6 +37,7 @@
     bodyTone = 'default',
     footerTone = 'default',
     edgeToEdgeOnMobile = false,
+    padding = 'default',
     ...rest
   }: CardProps = $props();
@@ -64,7 +71,7 @@
     </div>
   {/if}
-  <div class="cinder-card__body" data-cinder-tone={bodyTone}>
+  <div class="cinder-card__body" data-cinder-tone={bodyTone} data-cinder-padding={padding}>
     {@render children()}
   </div>

package/src/components/card/card.types.ts CHANGED Viewed

@@ -2,6 +2,8 @@ import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 export type CardVariant = 'card' | 'well';
 export type CardTone = 'default' | 'muted';
+/** Controls body padding. `none` removes all padding for flush/full-bleed content. Future values like `compact` may be added. */
+export type CardPadding = 'default' | 'none';
 /** Heading level for the generated card title, so the document outline stays correct. */
 export type CardHeadingLevel = 2 | 3 | 4 | 5 | 6;
 type CardBase = HTMLAttributes<HTMLDivElement> & {
@@ -14,6 +16,8 @@ type CardBase = HTMLAttributes<HTMLDivElement> & {
   footerTone?: CardTone;
   /** Remove side borders/radius and bleed to the viewport edge on narrow screens. */
   edgeToEdgeOnMobile?: boolean;
+  /** Body padding. `none` removes all padding for flush or full-bleed content (e.g. an image). */
+  padding?: CardPadding;
 };
 /** Basic card with no generated header. */
 type CardPlain = CardBase & {

package/src/components/card/index.ts CHANGED Viewed

@@ -2,5 +2,5 @@ import './card.css';
 import Card from './card.svelte';
 export default Card;
-export type { CardProps, CardTone, CardVariant } from './card.types.ts';
+export type { CardPadding, CardProps, CardTone, CardVariant } from './card.types.ts';
 export { Card };

package/src/components/chat/README.md ADDED Viewed

@@ -0,0 +1,81 @@
+# Chat
+Opinionated conversation surface bundling message list, composer, attachments, and scroll affordances for AI or support transcripts.
+## Usage
+```svelte
+<script lang="ts">
+  import { Chat } from '@lostgradient/cinder/chat';
+</script>
+```
+## Guidance
+### Use When
+- Shipping a full chat surface with composer, scroll-anchor, unread indicator, and attachments bundled as one heavyweight drop-in.
+- Building an AI assistant or support thread where conversation state is modeled as a transcript of role-tagged messages.
+### Avoid When
+- Rendering a one-off message list — compose lighter primitives directly instead of pulling the full suite.
+- The transcript is read-only and needs no composer — a simple list of message bubbles is a better fit.
+## Props
+<!-- generated:props:start -->
+| Prop                      | Type                           | Required | Default | Description                                                                                                                |
+| ------------------------- | ------------------------------ | -------- | ------- | -------------------------------------------------------------------------------------------------------------------------- |
+| `allowAttachments`        | `boolean`                      | no       | —       |                                                                                                                            |
+| `allowCopy`               | `boolean`                      | no       | —       |                                                                                                                            |
+| `allowEditing`            | `boolean`                      | no       | —       |                                                                                                                            |
+| `allowRetry`              | `boolean`                      | no       | —       |                                                                                                                            |
+| `allowSearch`             | `boolean`                      | no       | —       |                                                                                                                            |
+| `bottomThreshold`         | `number`                       | no       | —       |                                                                                                                            |
+| `class`                   | `string`                       | no       | —       |                                                                                                                            |
+| `emptyPrompts`            | `string`[]                     | no       | —       |                                                                                                                            |
+| `hasNewMessageIndicator`  | `boolean`                      | no       | —       |                                                                                                                            |
+| `id`                      | `string`                       | yes      | —       |                                                                                                                            |
+| `isAtBottom`              | `boolean`                      | no       | —       |                                                                                                                            |
+| `isStreaming`             | `boolean`                      | no       | —       |                                                                                                                            |
+| `jumpThreshold`           | `number`                       | no       | —       |                                                                                                                            |
+| `streamingStatus`         | `string`                       | no       | —       |                                                                                                                            |
+| `surfaceMode`             | `"default"` \| `"transparent"` | no       | —       |                                                                                                                            |
+| `unreadCount`             | `number`                       | no       | —       |                                                                                                                            |
+| `conversation`            | `(opaque)`                     | no       | —       | A prop whose shape is not captured by the JSON schema; see the component types for the exact signature.                    |
+| `empty`                   | `(opaque)`                     | no       | —       | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature. |
+| `header`                  | `(opaque)`                     | no       | —       | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature. |
+| `messageActions`          | `(opaque)`                     | no       | —       | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature. |
+| `messageStatus`           | `(opaque)`                     | no       | —       | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature. |
+| `onattachmentadd`         | `(opaque)`                     | no       | —       | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature. |
+| `onattachmentfailure`     | `(opaque)`                     | no       | —       | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature. |
+| `onattachmentremove`      | `(opaque)`                     | no       | —       | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature. |
+| `onedit`                  | `(opaque)`                     | no       | —       | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature. |
+| `onexpandedchange`        | `(opaque)`                     | no       | —       | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature. |
+| `onjumptolatest`          | `(opaque)`                     | no       | —       | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature. |
+| `onretry`                 | `(opaque)`                     | no       | —       | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature. |
+| `onscrollstatechange`     | `(opaque)`                     | no       | —       | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature. |
+| `onstopgenerating`        | `(opaque)`                     | no       | —       | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature. |
+| `onsubmit`                | `(opaque)`                     | no       | —       | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature. |
+| `onunreadindicatorchange` | `(opaque)`                     | no       | —       | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature. |
+| `viewportAttachment`      | `(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/chat/container/chat-jump-controls.svelte CHANGED Viewed

@@ -121,10 +121,8 @@
   }
   .chat-jump-button:focus-visible {
-    outline: 2px 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);
+    outline: var(--cinder-ring-width) solid transparent;
+    box-shadow: var(--_cinder-focus-ring-shadow);
   }
   /* Unread Count Badge */
@@ -180,11 +178,16 @@
   }
   .chat-new-indicator:focus-visible {
-    outline: 2px 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),
-      var(--cinder-shadow-lg);
+    outline: var(--cinder-ring-width) solid transparent;
+    box-shadow: var(--_cinder-focus-ring-shadow), var(--cinder-shadow-lg);
+  }
+  @media (forced-colors: active) {
+    .chat-jump-button:focus-visible,
+    .chat-new-indicator:focus-visible {
+      outline: var(--cinder-ring-width) solid ButtonText;
+      outline-offset: 3px;
+    }
   }
   @keyframes slide-up {

package/src/components/chat/input/chat-input.svelte CHANGED Viewed

@@ -854,10 +854,8 @@
   }
   .chat-input-send:focus-visible {
-    outline: 2px 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-accent);
+    outline: var(--cinder-ring-width) solid transparent;
+    box-shadow: var(--_cinder-focus-ring-shadow);
   }
   /* Stop button variant - danger-tinted to signal urgency during streaming */
@@ -874,10 +872,11 @@
     }
   }
-  .chat-input-send[data-stop]:focus-visible {
-    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) {
+    .chat-input-send:focus-visible {
+      outline: var(--cinder-ring-width) solid ButtonText;
+      outline-offset: 3px;
+    }
   }
   /* Spinner */

package/src/components/chat/message/chat-message.svelte CHANGED Viewed

@@ -347,9 +347,7 @@
   .chat-message: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);
+    box-shadow: var(--_cinder-focus-ring-shadow);
   }
   /* Search match highlight — subtle accent-tinted ring */
@@ -571,9 +569,7 @@
   .chat-message-expand: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);
+    box-shadow: var(--_cinder-focus-ring-shadow);
   }
   /* Failed message styling */
@@ -622,9 +618,7 @@
   .chat-message-retry: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);
+    box-shadow: var(--_cinder-focus-ring-shadow);
   }
   /* Footer — absolutely positioned outside the bubble's flow so revealing it on
@@ -757,9 +751,7 @@
   :global(.chat-message-action-button: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);
+    box-shadow: var(--_cinder-focus-ring-shadow);
   }
   /* Touch devices: without hover discoverability, bare icons read as
@@ -818,7 +810,9 @@
   }
   .chat-message-edit-textarea:focus {
-    box-shadow: 0 0 0 2px color-mix(in oklch, var(--cinder-accent), transparent 75%);
+    outline: var(--cinder-ring-width) solid transparent;
+    outline-offset: var(--cinder-ring-offset);
+    box-shadow: var(--_cinder-focus-ring-shadow);
   }
   .chat-message-edit-actions {
@@ -848,9 +842,7 @@
   .chat-message-edit-save: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);
+    box-shadow: var(--_cinder-focus-ring-shadow);
   }
   .chat-message-edit-cancel {
@@ -877,9 +869,7 @@
   .chat-message-edit-cancel: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);
+    box-shadow: var(--_cinder-focus-ring-shadow);
   }
   /* Responsive sizing for narrow viewports */
@@ -896,9 +886,14 @@
   /* Forced-colors: box-shadow rings are suppressed in Windows High Contrast Mode,
      so repaint the reserved transparent outline channel with a system color.
-     Every selector here is button-shaped or a clickable region → ButtonText.
+     Text-entry focus uses Highlight; pressable regions use ButtonText.
      Placed after the base rules per the focus-ring policy's cascade note. */
   @media (forced-colors: active) {
+    .chat-message-edit-textarea:focus {
+      outline: var(--cinder-ring-width) solid Highlight;
+      outline-offset: 1px;
+    }
     .chat-message:focus-visible,
     .chat-message-expand:focus-visible,
     .chat-message-retry:focus-visible,