@lostgradient/cinder 0.3.0 → 0.4.0

package/dist/components/alert/alert.css

@@ -149,7 +149,7 @@
     --_cinder-status-fg-chroma-dark: 0.14;
   }
 
-  .cinder-alert[data-cinder-variant='error'] {
+  .cinder-alert[data-cinder-variant='danger'] {
     --_cinder-alert-ring: var(--cinder-danger);
     --_cinder-status-base: var(--cinder-danger);
     --_cinder-status-fg-chroma-light: 0.18;

package/dist/components/alert/alert.schema.js

@@ -27,8 +27,8 @@ var schema = {
   type: "object",
   properties: {
     variant: {
-      enum: ["info", "success", "warning", "error", "danger"],
-      description: "Visual style. `danger` is an accepted alias for `error` — both render identically.",
+      enum: ["info", "success", "warning", "danger"],
+      description: "Visual severity variant. `danger` is the canonical failure-severity spelling, consistent with banner and callout.",
       default: "info"
     },
     dismissible: {
@@ -54,7 +54,7 @@ var schema = {
         reason: "function-or-snippet"
       },
       {
-        name: "onDismiss",
+        name: "ondismiss",
         reason: "function-or-snippet"
       }
     ]
@@ -65,4 +65,4 @@ export {
   alert_schema_default as default
 };
 
-//# debugId=CA6C863D24F57B2B64756E2164756E21
+//# debugId=3EEEB1EFA8A824E064756E2164756E21

package/dist/components/alert/alert.types.d.ts

@@ -1,7 +1,7 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-/** `danger` is an accepted alias for `error` — both render identically. */
-export type AlertVariant = 'info' | 'success' | 'warning' | 'error' | 'danger';
+/** Visual severity variants for the Alert component. `danger` is the canonical spelling shared by banner and callout. */
+export type AlertVariant = 'info' | 'success' | 'warning' | 'danger';
 /**
  * Props for the {@link Alert} component — a live-region notification card.
  *
@@ -19,7 +19,7 @@ export type AlertVariant = 'info' | 'success' | 'warning' | 'error' | 'danger';
 export type AlertProps = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'role' | 'aria-live' | 'aria-atomic' | 'aria-relevant'> & {
     variant?: AlertVariant;
     dismissible?: boolean;
-    onDismiss?: () => void;
+    ondismiss?: () => void;
     class?: string;
     children: Snippet;
     icon?: Snippet;
@@ -31,7 +31,7 @@ export type AlertProps = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'role
  */
 export interface AlertSchemaProps {
     /**
-     * Visual style. `danger` is an accepted alias for `error` — both render identically.
+     * Visual severity variant. `danger` is the canonical failure-severity spelling, consistent with banner and callout.
      * @default "info"
      */
     variant?: AlertVariant;

package/dist/components/alert/index.js

@@ -47,12 +47,12 @@ function Alert($$anchor, $$props) {
     "$$legacy",
     "variant",
     "dismissible",
-    "onDismiss",
+    "ondismiss",
     "class",
     "children",
     "icon"
   ]);
-  const resolvedVariant = $.derived(() => variant() === "danger" ? "error" : variant());
+  const resolvedVariant = $.derived(variant);
   let visible = $.state(true);
   let rootElement = $.state(undefined);
   async function handleDismiss() {
@@ -63,7 +63,7 @@ function Alert($$anchor, $$props) {
     await tick();
     if (focusTarget?.isConnected)
       focusTarget.focus();
-    $$props.onDismiss?.();
+    $$props.ondismiss?.();
   }
   function resolveFocusTarget(alertElement) {
     const alertDocument = alertElement.ownerDocument;
@@ -160,4 +160,4 @@ export {
   Alert
 };
 
-//# debugId=DEAA21F46DA9E9A464756E2164756E21
+//# debugId=9ABB4551CEA5D37364756E2164756E21

package/dist/components/alert-dialog/index.js

@@ -596,6 +596,10 @@ function createBodyScrollLock() {
     return release;
   };
 }
+function isInsideEventPath(event, element) {
+  const path = event.composedPath();
+  return path.some((entry) => entry instanceof Node && element.contains(entry));
+}
 function createClickOutside(options) {
   const { handler, enabled = true, eventType = "click", capture = true, ignoreRefs } = options;
   return (node) => {
@@ -603,17 +607,19 @@ function createClickOutside(options) {
       const isEnabled = typeof enabled === "function" ? enabled() : enabled;
       if (!isEnabled)
         return;
+      if (event.type === "touchstart" && !event.cancelable)
+        return;
       const target = event.target;
       if (!(target instanceof Node)) {
         handler();
         return;
       }
-      if (node.contains(target))
+      if (isInsideEventPath(event, node))
         return;
       if (ignoreRefs) {
         for (const ref of ignoreRefs) {
           const element = ref();
-          if (element && element.contains(target))
+          if (element && isInsideEventPath(event, element))
             return;
         }
       }
@@ -983,4 +989,4 @@ export {
   Alert_dialog as AlertDialog
 };
 
-//# debugId=E85027AD7EDF878A64756E2164756E21
+//# debugId=2EC26E190026C32D64756E2164756E21

package/dist/components/approval-card/approval-card-state.d.ts

@@ -0,0 +1,3 @@
+import type { ApprovalState } from './approval-card.types.ts';
+export declare function resolveEffectiveApprovalState(approvalState: ApprovalState, expirationTimestamp: number | undefined, currentTime: number | undefined): ApprovalState;
+export declare function isApprovalActionable(approvalState: ApprovalState, expirationTimestamp: number | undefined, currentTime: number | undefined): boolean;

package/dist/components/approval-card/approval-card.css

@@ -0,0 +1,239 @@
+@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
+/* Compound composition aggregation: ApprovalCard renders these primitives
+ * internally, so `cinder/approval-card/styles` must include their styling when
+ * consumers import the component-specific style sidecar. Sibling paths mirror
+ * between `src/` and generated `dist/`. */
+@import '../badge/badge.css';
+@import '../button/button.css';
+@import '../button-group/button-group.css';
+@import '../card/card.css';
+@import '../code-block/code-block.css';
+@import '../copy-button/copy-button.css';
+@import '../description-list/description-list.css';
+@import '../json-viewer/json-viewer.css';
+@import '../payload-inspector/payload-inspector.css';
+@import '../secret-value-field/secret-value-field.css';
+@import '../status-dot/status-dot.css';
+@import '../tabs/tabs.css';
+
+@layer cinder.components {
+  .cinder-approval-card {
+    container-type: inline-size;
+    container-name: cinder-approval-card;
+    display: block;
+  }
+
+  .cinder-approval-card__surface {
+    overflow: hidden;
+  }
+
+  .cinder-approval-card__header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: var(--cinder-space-4);
+    padding: var(--cinder-space-4);
+    border-block-end: 1px solid var(--cinder-border-muted);
+    background: var(--cinder-surface-inset);
+  }
+
+  .cinder-approval-card__title-group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--cinder-space-1);
+    min-inline-size: 0;
+  }
+
+  .cinder-approval-card__eyebrow,
+  .cinder-approval-card__description,
+  .cinder-approval-card__muted {
+    margin: 0;
+    color: var(--cinder-text-muted);
+    font-size: var(--cinder-text-sm);
+  }
+
+  .cinder-approval-card__eyebrow {
+    font-size: var(--cinder-text-xs);
+    font-weight: var(--cinder-font-semibold);
+    text-transform: uppercase;
+  }
+
+  .cinder-approval-card__title {
+    margin: 0;
+    color: var(--cinder-text);
+    font-size: var(--cinder-text-lg);
+    font-weight: var(--cinder-font-semibold);
+    line-height: var(--cinder-leading-tight);
+  }
+
+  .cinder-approval-card__badges,
+  .cinder-approval-card__section-heading,
+  .cinder-approval-card__editor-actions {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: var(--cinder-space-2);
+  }
+
+  .cinder-approval-card__badges {
+    justify-content: flex-end;
+  }
+
+  .cinder-approval-card__body {
+    display: flex;
+    flex-direction: column;
+    gap: var(--cinder-space-4);
+    padding: var(--cinder-space-4);
+  }
+
+  .cinder-approval-card__section {
+    display: flex;
+    flex-direction: column;
+    gap: var(--cinder-space-2);
+  }
+
+  .cinder-approval-card__section-title,
+  .cinder-approval-card__subsection-title {
+    margin: 0;
+    color: var(--cinder-text);
+    font-size: var(--cinder-text-sm);
+    font-weight: var(--cinder-font-semibold);
+  }
+
+  .cinder-approval-card__subsection-title {
+    font-size: var(--cinder-text-xs);
+  }
+
+  .cinder-approval-card__metadata {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
+    gap: var(--cinder-space-2);
+    margin: 0;
+  }
+
+  .cinder-approval-card__metadata--compact {
+    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
+  }
+
+  .cinder-approval-card__metadata-item {
+    min-inline-size: 0;
+  }
+
+  .cinder-approval-card__metadata-item dt {
+    color: var(--cinder-text-muted);
+    font-size: var(--cinder-text-xs);
+    font-weight: var(--cinder-font-medium);
+  }
+
+  .cinder-approval-card__metadata-item dd {
+    margin: 0;
+    overflow-wrap: anywhere;
+    color: var(--cinder-text);
+    font-family: var(--cinder-font-mono);
+    font-size: var(--cinder-text-xs);
+  }
+
+  .cinder-approval-card__files {
+    display: flex;
+    flex-direction: column;
+    gap: var(--cinder-space-2);
+  }
+
+  .cinder-approval-card__file-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--cinder-space-1);
+    max-block-size: 14rem;
+    overflow-y: auto;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .cinder-approval-card__file-list li {
+    overflow-wrap: anywhere;
+    border: 1px solid var(--cinder-border-muted);
+    border-radius: var(--cinder-radius-sm);
+    padding: var(--cinder-space-1) var(--cinder-space-2);
+    background: var(--cinder-surface-inset);
+    color: var(--cinder-text);
+    font-family: var(--cinder-font-mono);
+    font-size: var(--cinder-text-xs);
+  }
+
+  .cinder-approval-card__environment-list {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
+    gap: var(--cinder-space-2);
+  }
+
+  .cinder-approval-card__actions-section {
+    gap: var(--cinder-space-3);
+  }
+
+  .cinder-approval-card__editor {
+    display: flex;
+    flex-direction: column;
+    gap: var(--cinder-space-2);
+    border: 1px solid var(--cinder-border-muted);
+    border-radius: var(--cinder-radius-md);
+    padding: var(--cinder-space-3);
+    background: var(--cinder-surface-inset);
+  }
+
+  .cinder-approval-card__editor-label {
+    color: var(--cinder-text);
+    font-size: var(--cinder-text-sm);
+    font-weight: var(--cinder-font-semibold);
+  }
+
+  .cinder-approval-card__textarea {
+    min-block-size: 10rem;
+    resize: vertical;
+    border: 1px solid var(--cinder-border);
+    border-radius: var(--cinder-radius-md);
+    padding: var(--cinder-space-2);
+    background: var(--cinder-surface);
+    color: var(--cinder-text);
+    font-family: var(--cinder-font-mono);
+    font-size: var(--cinder-text-sm);
+  }
+
+  .cinder-approval-card__textarea:focus-visible {
+    outline: var(--cinder-ring-width) solid transparent;
+    box-shadow: var(--_cinder-focus-ring-shadow);
+  }
+
+  .cinder-approval-card__error {
+    margin: 0;
+    color: var(--cinder-danger);
+    font-size: var(--cinder-text-sm);
+  }
+
+  .cinder-approval-card__readonly-summary {
+    margin: 0;
+    border: 1px solid var(--cinder-border-muted);
+    border-radius: var(--cinder-radius-md);
+    padding: var(--cinder-space-3);
+    background: var(--cinder-surface-inset);
+    color: var(--cinder-text-muted);
+    font-size: var(--cinder-text-sm);
+  }
+
+  @container cinder-approval-card (max-width: 40rem) {
+    .cinder-approval-card__header {
+      flex-direction: column;
+    }
+
+    .cinder-approval-card__badges {
+      justify-content: flex-start;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .cinder-approval-card__textarea:focus-visible {
+      outline: var(--cinder-ring-width) solid ButtonText;
+      box-shadow: none;
+    }
+  }
+}

package/dist/components/approval-card/approval-card.schema.js

@@ -0,0 +1,236 @@
+var __defProp = Object.defineProperty;
+var __returnValue = (v) => v;
+function __exportSetter(name, newValue) {
+  this[name] = __returnValue.bind(null, newValue);
+}
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, {
+      get: all[name],
+      enumerable: true,
+      configurable: true,
+      set: __exportSetter.bind(all, name)
+    });
+};
+var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined")
+    return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+// src/components/approval-card/approval-card.schema.ts
+var schema = {
+  $schema: "https://json-schema.org/draft/2020-12/schema",
+  type: "object",
+  properties: {
+    tool: {
+      type: "object",
+      properties: {
+        name: {
+          type: "string",
+          description: "Human-readable tool name requesting approval."
+        },
+        risk: {
+          enum: ["low", "medium", "high"],
+          description: "Risk level assigned by the policy evaluator."
+        }
+      },
+      additionalProperties: false,
+      required: ["name", "risk"],
+      description: "Tool requesting approval."
+    },
+    sandbox: {
+      type: "object",
+      properties: {
+        provider: {
+          type: "string",
+          description: "Sandbox provider, such as Codex or a remote execution backend."
+        },
+        name: {
+          type: "string",
+          description: "Sandbox profile or policy name."
+        },
+        workingDir: {
+          type: "string",
+          description: "Working directory for the pending operation."
+        }
+      },
+      additionalProperties: false,
+      required: ["name", "provider", "workingDir"],
+      description: "Optional sandbox context in which the operation will run."
+    },
+    operation: {
+      anyOf: [
+        {
+          type: "object",
+          properties: {
+            kind: {
+              const: "command",
+              description: "Operation family being approved."
+            },
+            command: {
+              type: "string",
+              description: "Shell command for command approvals."
+            },
+            filesTouched: {
+              type: "array",
+              items: {
+                type: "string"
+              },
+              description: "File paths that the operation may read or write."
+            },
+            argsPreview: {
+              description: "JSON-like argument preview shown to the approver."
+            }
+          },
+          additionalProperties: false,
+          required: ["command", "kind"]
+        },
+        {
+          type: "object",
+          properties: {
+            kind: {
+              const: "file-write",
+              description: "Operation family being approved."
+            },
+            filesTouched: {
+              type: "array",
+              items: {
+                type: "string"
+              },
+              description: "File paths that the operation may read or write. File-write approvals require at least one path.",
+              minItems: 1
+            },
+            argsPreview: {
+              description: "JSON-like argument preview shown to the approver."
+            }
+          },
+          additionalProperties: false,
+          required: ["filesTouched", "kind"]
+        },
+        {
+          type: "object",
+          properties: {
+            kind: {
+              const: "patch",
+              description: "Operation family being approved."
+            },
+            filesTouched: {
+              type: "array",
+              items: {
+                type: "string"
+              },
+              description: "File paths that the operation may read or write."
+            },
+            argsPreview: {
+              description: "JSON-like argument preview shown to the approver."
+            },
+            diff: {
+              type: "string",
+              description: "Patch diff for patch approvals."
+            }
+          },
+          additionalProperties: false,
+          required: ["diff", "kind"]
+        },
+        {
+          type: "object",
+          properties: {
+            kind: {
+              const: "other",
+              description: "Operation family being approved."
+            },
+            filesTouched: {
+              type: "array",
+              items: {
+                type: "string"
+              },
+              description: "File paths that the operation may read or write."
+            },
+            argsPreview: {
+              description: "JSON-like argument preview shown to the approver."
+            }
+          },
+          additionalProperties: false,
+          required: ["kind"]
+        }
+      ],
+      description: "Operation details shown to the approver."
+    },
+    env: {
+      type: "array",
+      items: {
+        type: "string"
+      },
+      description: "Environment variable names only. Values are ignored if accidentally supplied as `NAME=value`."
+    },
+    snapshotId: {
+      type: "string",
+      description: "Snapshot identifier for the pending approval context."
+    },
+    policyVersion: {
+      type: "string",
+      description: "Policy version that produced the approval request."
+    },
+    idempotencyKey: {
+      type: "string",
+      description: "Idempotency key that makes repeated decisions durable."
+    },
+    expiresAt: {
+      type: "string",
+      description: "Optional ISO timestamp after which a pending approval is treated as expired."
+    },
+    state: {
+      enum: ["pending", "approved", "approved_with_edits", "denied", "expired", "cancelled"],
+      description: "Persisted approval state."
+    },
+    editableArgs: {
+      type: "boolean",
+      description: "Whether approving with edited JSON arguments is available. Default `false`."
+    },
+    class: {
+      type: "string",
+      description: "Additional CSS classes applied to the root element."
+    }
+  },
+  additionalProperties: false,
+  required: ["idempotencyKey", "operation", "policyVersion", "state", "tool"],
+  metadata: {
+    unsupportedProps: [
+      {
+        name: "onapprove",
+        reason: "function-or-snippet",
+        description: "Called when the approver accepts the operation as presented."
+      },
+      {
+        name: "onapprovewithedits",
+        reason: "function-or-snippet",
+        description: "Called with parsed JSON arguments when the approver accepts edited arguments."
+      },
+      {
+        name: "oncancel",
+        reason: "function-or-snippet",
+        description: "Called when the approver cancels the approval prompt."
+      },
+      {
+        name: "ondeny",
+        reason: "function-or-snippet",
+        description: "Called when the approver denies the operation."
+      },
+      {
+        name: "onremember",
+        reason: "function-or-snippet",
+        description: "Called when the approver asks the host application to remember the decision."
+      }
+    ]
+  }
+};
+var approval_card_schema_default = schema;
+export {
+  approval_card_schema_default as default
+};
+
+//# debugId=73512CF5D49E985464756E2164756E21

package/dist/components/approval-card/approval-card.svelte.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @cinder
+ * @category domain
+ * @status alpha
+ * @purpose Durable human-in-the-loop approval surface for reviewing risky tool operations before they execute.
+ * @tag approval
+ * @tag human-in-the-loop
+ * @tag tool
+ * @useWhen A tool call, command, file write, or patch needs explicit human approval before execution.
+ * @useWhen Showing policy, sandbox, idempotency, environment-name, and argument context for an approval request.
+ * @avoidWhen The action has already completed and only needs historical display — use event-stream-viewer or run-step-timeline instead.
+ * @avoidWhen Collecting arbitrary form input for a workflow — compose form controls directly instead.
+ * @related card, badge, status-dot, payload-inspector, secret-value-field, code-block
+ * @a11yNote Uses a named region and native button controls so approval actions are discoverable by assistive technology.
+ * @a11yNote Expiration changes update the visible state but do not fire approval callbacks automatically.
+ */
+export type { ApprovalCardCallbacks, ApprovalCardProps, ApprovalCardSchemaProps, ApprovalOperation, ApprovalOperationKind, ApprovalSandbox, ApprovalState, ApprovalTool, ApprovalToolRisk, } from './approval-card.types.ts';
+import type { ApprovalCardProps } from './approval-card.types.ts';
+declare const ApprovalCard: import("svelte").Component<ApprovalCardProps, {}, "">;
+type ApprovalCard = ReturnType<typeof ApprovalCard>;
+export default ApprovalCard;