@lostgradient/cinder 0.3.0 → 0.4.0

package/dist/server/components/autocomplete/index.css

@@ -8,6 +8,9 @@
   }
 
   .cinder-autocomplete__label {
+    display: inline-flex;
+    align-items:  center;
+    gap: var(--cinder-space-1);
     color: var(--cinder-text);
     font-size: var(--cinder-text-sm);
     font-weight: var(--cinder-font-medium);
@@ -29,6 +32,14 @@
     box-shadow: var(--_cinder-focus-ring-shadow);
   }
 
+  @media (forced-colors: active) {
+    .cinder-autocomplete__input:focus-visible {
+      outline: var(--cinder-ring-width) solid ButtonText;
+      outline-offset: 3px;
+      box-shadow: none;
+    }
+  }
+
   .cinder-autocomplete__description, .cinder-autocomplete__error {
     font-size: var(--cinder-text-sm);
     line-height: var(--cinder-leading-normal);
@@ -77,8 +88,8 @@
     border-radius: var(--cinder-radius-sm);
     background: var(--cinder-color-warning-bg);
     color: var(--cinder-color-warning-fg);
+    font-weight: var(--cinder-font-semibold);
     padding: 0 .0625rem;
-    font-weight: 600;
   }
 
   .cinder-autocomplete__status {

package/dist/server/components/autocomplete/index.js

@@ -275,6 +275,10 @@ function restoreFocusTo(target) {
 }
 
 // src/utilities/attachments.ts
+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) => {
@@ -282,17 +286,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;
         }
       }
@@ -548,7 +554,7 @@ function Autocomplete($$renderer, $$props) {
     let composing = false;
     let inputFocused = false;
     let suggestions = [];
-    let activeIndex = null;
+    let rawActiveIndex = null;
     let suppressNextQuery = false;
     let ignoreSyntheticInput = false;
     let completionPointerIndex = null;
@@ -558,7 +564,14 @@ function Autocomplete($$renderer, $$props) {
     let requestVersion = 0;
     const renderedSuggestions = $6.derived(() => suggestions.slice(0, resolvedMaxVisibleSuggestions()));
     const enabledIndexes = $6.derived(() => getEnabledIndexes(renderedSuggestions()));
-    const activeDescendant = $6.derived(() => activeIndex === null ? undefined : `${resolvedId()}-option-${activeIndex}`);
+    const activeIndex = $6.derived(() => {
+      if (enabledIndexes().length === 0)
+        return null;
+      if (rawActiveIndex !== null && enabledIndexes().includes(rawActiveIndex))
+        return rawActiveIndex;
+      return enabledIndexes()[0] ?? null;
+    });
+    const activeDescendant = $6.derived(() => activeIndex() === null ? undefined : `${resolvedId()}-option-${activeIndex()}`);
     const statusMessage = $6.derived(() => loading ? loadingMessage : open && renderedSuggestions().length === 0 ? emptyMessage : "");
     function isEligibleQuery(query) {
       return !field().disabled && !readonly && !!suggestionSource && query.length >= resolvedMinQueryLength();
@@ -576,16 +589,6 @@ function Autocomplete($$renderer, $$props) {
       });
       return indexes;
     }
-    function clampActiveIndex(list) {
-      const availableEnabledIndexes = list === renderedSuggestions() ? enabledIndexes() : getEnabledIndexes(list);
-      if (availableEnabledIndexes.length === 0) {
-        activeIndex = null;
-        return;
-      }
-      if (activeIndex !== null && availableEnabledIndexes.includes(activeIndex))
-        return;
-      activeIndex = availableEnabledIndexes[0] ?? null;
-    }
     function closePopup() {
       pendingRequestController?.abort();
       pendingRequestController = null;
@@ -593,7 +596,7 @@ function Autocomplete($$renderer, $$props) {
       autocompleteDismissed = true;
       open = false;
       loading = false;
-      activeIndex = null;
+      rawActiveIndex = null;
       suggestions = [];
     }
     function highlightParts(text, query) {
@@ -614,20 +617,20 @@ function Autocomplete($$renderer, $$props) {
       if (enabledIndexes().length === 0)
         return;
       open = true;
-      if (activeIndex === null) {
-        activeIndex = direction === 1 ? enabledIndexes()[0] ?? null : enabledIndexes().at(-1) ?? null;
+      if (activeIndex() === null) {
+        rawActiveIndex = direction === 1 ? enabledIndexes()[0] ?? null : enabledIndexes().at(-1) ?? null;
         return;
       }
-      const currentPosition = enabledIndexes().indexOf(activeIndex);
+      const currentPosition = enabledIndexes().indexOf(activeIndex());
       const nextPosition = currentPosition < 0 ? 0 : (currentPosition + direction + enabledIndexes().length) % enabledIndexes().length;
-      activeIndex = enabledIndexes()[nextPosition] ?? null;
+      rawActiveIndex = enabledIndexes()[nextPosition] ?? null;
     }
     function moveToBoundary(direction) {
       if (!open)
         return;
       if (enabledIndexes().length === 0)
         return;
-      activeIndex = direction === "start" ? enabledIndexes()[0] ?? null : enabledIndexes().at(-1) ?? null;
+      rawActiveIndex = direction === "start" ? enabledIndexes()[0] ?? null : enabledIndexes().at(-1) ?? null;
     }
     function dispatchCompletionInputEvent() {
       if (!inputElement)
@@ -704,7 +707,7 @@ function Autocomplete($$renderer, $$props) {
         return;
       }
       if (event.key === "Enter" && open && !composing) {
-        const suggestion = activeIndex === null ? undefined : renderedSuggestions()[activeIndex];
+        const suggestion = activeIndex() === null ? undefined : renderedSuggestions()[activeIndex()];
         if (suggestion && !suggestion.disabled) {
           event.preventDefault();
           completeSuggestion(suggestion);
@@ -734,7 +737,14 @@ function Autocomplete($$renderer, $$props) {
       $$renderer3.push(`<div${$6.attr_class($6.clsx(classNames("cinder-autocomplete", className)))}${$6.attr("data-disabled", field().disabled ? "" : undefined)}${$6.attr("data-invalid", field().ariaInvalid === "true" ? "" : undefined)}>`);
       if (label) {
         $$renderer3.push("<!--[0-->");
-        $$renderer3.push(`<label${$6.attr("for", resolvedId())} class="cinder-autocomplete__label"${$6.attr("data-disabled", field().disabled || undefined)}>${$6.escape(label)}</label>`);
+        $$renderer3.push(`<label${$6.attr("for", resolvedId())} class="cinder-autocomplete__label"${$6.attr("data-disabled", field().disabled || undefined)}>${$6.escape(label)} `);
+        if (field().required) {
+          $$renderer3.push("<!--[0-->");
+          $$renderer3.push(`<span class="cinder-_required-marker" aria-hidden="true">*</span>`);
+        } else {
+          $$renderer3.push("<!--[-1-->");
+        }
+        $$renderer3.push(`<!--]--></label>`);
       } else {
         $$renderer3.push("<!--[-1-->");
       }
@@ -804,7 +814,7 @@ function Autocomplete($$renderer, $$props) {
               let suggestion = each_array[index];
               const suggestionLabel = suggestion.label ?? suggestion.value;
               const parts = highlightParts(suggestionLabel, value);
-              $$renderer4.push(`<div${$6.attr("id", `${resolvedId()}-option-${index}`)} role="option" tabindex="-1" class="cinder-_option-row cinder-autocomplete__option"${$6.attr("aria-selected", index === activeIndex)}${$6.attr("aria-disabled", suggestion.disabled || undefined)}${$6.attr("data-cinder-active", index === activeIndex || undefined)}${$6.attr("data-cinder-disabled", suggestion.disabled || undefined)}><span class="cinder-autocomplete__option-text"><span class="cinder-autocomplete__option-label">`);
+              $$renderer4.push(`<div${$6.attr("id", `${resolvedId()}-option-${index}`)} role="option" tabindex="-1" class="cinder-_option-row cinder-autocomplete__option"${$6.attr("aria-selected", index === activeIndex())}${$6.attr("aria-disabled", suggestion.disabled || undefined)}${$6.attr("data-cinder-active", index === activeIndex() || undefined)}${$6.attr("data-cinder-disabled", suggestion.disabled || undefined)}><span class="cinder-autocomplete__option-text"><span class="cinder-autocomplete__option-label">`);
               if (parts) {
                 $$renderer4.push("<!--[0-->");
                 $$renderer4.push(`${$6.escape(parts[0])}<mark class="cinder-autocomplete__match">${$6.escape(parts[1])}</mark>${$6.escape(parts[2])}`);
@@ -845,4 +855,4 @@ export {
   autocomplete_default as default
 };
 
-//# debugId=CDCA95D5C1BA378064756E2164756E21
+//# debugId=C938EF7D180DBA1564756E2164756E21

package/dist/server/components/badge/badge.schema.js

@@ -22,6 +22,10 @@ var schema = {
       description: "Render the badge label in a monospace font. Useful for version strings, error codes, or other technical labels.",
       default: false
     },
+    subscriptionState: {
+      enum: ["active", "trialing", "past-due", "canceled", "expired", "refunded"],
+      description: "Render a standardized subscription lifecycle badge without hand-wiring tone, icon, and label."
+    },
     class: {
       type: "string",
       description: "Custom class merged with `.cinder-badge`."
@@ -33,8 +37,7 @@ var schema = {
       {
         name: "children",
         reason: "function-or-snippet",
-        required: true,
-        description: "Badge content — intentionally required. A badge without content is\nsemantically meaningless. The render site uses optional chaining\n(`children?.()`) as a runtime safety net for JS consumers."
+        description: "Required badge content unless subscriptionState is provided; optional content override for the subscription preset label."
       }
     ]
   }
@@ -44,4 +47,4 @@ export {
   badge_schema_default as default
 };
 
-//# debugId=7135A2368C33972264756E2164756E21
+//# debugId=79763D42B940349664756E2164756E21

package/dist/server/components/badge/index.js

@@ -13,25 +13,92 @@ function classNames(...parts) {
 // src/components/badge/badge.svelte
 function Badge($$renderer, $$props) {
   $$renderer.component(($$renderer2) => {
+    const subscriptionStateConfigurations = {
+      active: { variant: "success", label: "Active" },
+      trialing: { variant: "info", label: "Trialing" },
+      "past-due": { variant: "warning", label: "Past due" },
+      canceled: { variant: "neutral", label: "Canceled" },
+      expired: { variant: "danger", label: "Expired" },
+      refunded: { variant: "neutral", label: "Refunded" }
+    };
+    const subscriptionStateIconPaths = {
+      active: ["M21.801 10A10 10 0 1 1 17 3.335", "m9 11 3 3L22 4"],
+      trialing: ["M12 6v6l4 2", "M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"],
+      "past-due": [
+        "m21.73 18-8-14a2 2 0 0 0-3.46 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z",
+        "M12 9v4",
+        "M12 17h.01"
+      ],
+      canceled: [
+        "M15 9 9 15",
+        "M9 9l6 6",
+        "M22 12A10 10 0 1 1 12 2a10 10 0 0 1 10 10Z"
+      ],
+      expired: [
+        "M8 2v4",
+        "M16 2v4",
+        "M21 13V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h8",
+        "M3 10h18",
+        "m17 14-5-5",
+        "m12 14 5 5"
+      ],
+      refunded: [
+        "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8",
+        "M3 3v5h5"
+      ]
+    };
     let {
       variant = "neutral",
       size = "md",
       mono = false,
+      subscriptionState,
       class: customClassName,
       children,
       $$slots,
       $$events,
       ...rest
     } = $$props;
+    const subscriptionStateConfiguration = $.derived(() => subscriptionState === undefined ? undefined : subscriptionStateConfigurations[subscriptionState]);
+    const resolvedVariant = $.derived(() => subscriptionStateConfiguration()?.variant ?? variant);
+    const resolvedSubscriptionIconPaths = $.derived(() => subscriptionState === undefined ? undefined : subscriptionStateIconPaths[subscriptionState]);
     $$renderer2.push(`<span${$.attributes({
       class: $.clsx(classNames("cinder-badge", customClassName)),
-      "data-cinder-variant": variant,
+      "data-cinder-variant": resolvedVariant(),
       "data-cinder-size": size,
       "data-cinder-mono": mono ? "" : undefined,
+      "data-cinder-subscription-state": subscriptionState,
       ...rest
     })}>`);
-    children?.($$renderer2);
-    $$renderer2.push(`<!----></span>`);
+    if (subscriptionStateConfiguration()) {
+      $$renderer2.push("<!--[0-->");
+      if (resolvedSubscriptionIconPaths()) {
+        $$renderer2.push("<!--[0-->");
+        $$renderer2.push(`<svg class="icon-sm" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><!--[-->`);
+        const each_array = $.ensure_array_like(resolvedSubscriptionIconPaths());
+        for (let $$index = 0, $$length = each_array.length;$$index < $$length; $$index++) {
+          let iconPath = each_array[$$index];
+          $$renderer2.push(`<path${$.attr("d", iconPath)}></path>`);
+        }
+        $$renderer2.push(`<!--]--></svg>`);
+      } else {
+        $$renderer2.push("<!--[-1-->");
+      }
+      $$renderer2.push(`<!--]--> `);
+      if (children) {
+        $$renderer2.push("<!--[0-->");
+        children($$renderer2);
+        $$renderer2.push(`<!---->`);
+      } else {
+        $$renderer2.push("<!--[-1-->");
+        $$renderer2.push(`${$.escape(subscriptionStateConfiguration().label)}`);
+      }
+      $$renderer2.push(`<!--]-->`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+      children?.($$renderer2);
+      $$renderer2.push(`<!---->`);
+    }
+    $$renderer2.push(`<!--]--></span>`);
   });
 }
 
@@ -42,4 +109,4 @@ export {
   Badge
 };
 
-//# debugId=1787F60AE75F269264756E2164756E21
+//# debugId=66093454263C672664756E2164756E21

package/dist/server/components/banner/banner.schema.js

@@ -35,7 +35,7 @@ var schema = {
         description: "Banner body content."
       },
       {
-        name: "onDismiss",
+        name: "ondismiss",
         reason: "function-or-snippet",
         description: "Called after the dismiss button is clicked. Use to persist state."
       }
@@ -47,4 +47,4 @@ export {
   banner_schema_default as default
 };
 
-//# debugId=0829A67C78E845F864756E2164756E21
+//# debugId=B5FBE5E67B02E8C364756E2164756E21

package/dist/server/components/banner/index.js

@@ -24,7 +24,7 @@ function Banner($$renderer, $$props) {
     let {
       variant = "info",
       dismissible = true,
-      onDismiss,
+      ondismiss,
       class: className,
       children,
       actions,
@@ -42,7 +42,7 @@ function Banner($$renderer, $$props) {
       await tick();
       if (focusTarget?.isConnected)
         focusTarget.focus();
-      onDismiss?.();
+      ondismiss?.();
     }
     function resolveFocusTarget(bannerElement) {
       const bannerDocument = bannerElement.ownerDocument;
@@ -109,4 +109,4 @@ export {
   Banner
 };
 
-//# debugId=ED8301D5FBBEDF9764756E2164756E21
+//# debugId=6A8B3E5BDCE8D13D64756E2164756E21

package/dist/server/components/button/index.css

@@ -48,7 +48,7 @@
     content: "";
     display: inline-block;
     border: 2px solid;
-    animation: cinder-button-spin .6s linear infinite;
+    animation: cinder-button-spin var(--cinder-duration-spin) linear infinite;
     border-inline-end-color: #0000;
     border-radius: 50%;
     width: .75em;

package/dist/server/components/capability-gate/capability-gate.schema.js

@@ -58,17 +58,17 @@ var schema = {
         description: "Custom content rendered below the status text and before the actions."
       },
       {
-        name: "onDismiss",
+        name: "ondismiss",
         reason: "function-or-snippet",
         description: "Called when the gate is dismissed."
       },
       {
-        name: "onFallbackAction",
+        name: "onfallbackaction",
         reason: "function-or-snippet",
         description: "Called when the fallback action button is activated."
       },
       {
-        name: "onPrimaryAction",
+        name: "onprimaryaction",
         reason: "function-or-snippet",
         description: "Called when the primary action button is activated."
       }
@@ -80,4 +80,4 @@ export {
   capability_gate_schema_default as default
 };
 
-//# debugId=00D3AEF2D203EA3B64756E2164756E21
+//# debugId=FE854C49EBBADDC364756E2164756E21

package/dist/server/components/capability-gate/index.css

@@ -47,7 +47,7 @@
   }
 
   .cinder-capability-gate__feature {
-    font-weight: 600;
+    font-weight: var(--cinder-font-semibold);
     font-size: var(--cinder-text-sm);
   }
 
@@ -72,11 +72,11 @@
     padding: var(--cinder-space-1) var(--cinder-space-2);
     border-radius: var(--cinder-radius-sm);
     font-size: var(--cinder-text-sm);
+    font-weight: var(--cinder-font-medium);
     cursor: pointer;
     text-decoration: none;
     border: 1px solid #0000;
     align-items:  center;
-    font-weight: 500;
   }
 
   .cinder-capability-gate__primary {
@@ -97,6 +97,14 @@
     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);
   }
 
+  @media (forced-colors: active) {
+    .cinder-capability-gate__primary:focus-visible, .cinder-capability-gate__fallback:focus-visible, .cinder-capability-gate__dismiss:focus-visible {
+      outline: var(--cinder-ring-width) solid ButtonText;
+      outline-offset: 3px;
+      box-shadow: none;
+    }
+  }
+
   .cinder-capability-gate__fallback {
     color: var(--cinder-text);
     border-color: var(--cinder-border);

package/dist/server/components/capability-gate/index.js

@@ -45,12 +45,12 @@ function Capability_gate($$renderer, $$props) {
       state: stateProp,
       variant = "inline",
       primaryAction,
-      onPrimaryAction,
+      onprimaryaction,
       fallbackAction,
       fallbackHref,
-      onFallbackAction,
+      onfallbackaction,
       dismissAction,
-      onDismiss,
+      ondismiss,
       children,
       class: customClassName,
       $$slots,
@@ -69,7 +69,7 @@ function Capability_gate($$renderer, $$props) {
     function handleDismiss() {
       dismissButton?.blur();
       visible = false;
-      onDismiss?.();
+      ondismiss?.();
     }
     if (visible) {
       $$renderer2.push("<!--[0-->");
@@ -134,4 +134,4 @@ export {
   Capability_gate as CapabilityGate
 };
 
-//# debugId=7C6998BDE25F7E4764756E2164756E21
+//# debugId=8CD4AF7D7E8AF69064756E2164756E21

package/dist/server/components/chat/chat.schema.js

@@ -11,7 +11,7 @@ var schema = {
       type: "string",
       description: "Unique identifier used to scope accessibility attributes across the chat surface."
     },
-    isAtBottom: {
+    atBottom: {
       type: "boolean",
       description: "Whether the message viewport is scrolled to the bottom. Bindable; updated automatically as the user scrolls. Default `true`."
     },
@@ -19,7 +19,7 @@ var schema = {
       type: "number",
       description: "Number of messages received while the viewport was scrolled away from the bottom. Bindable; resets to `0` when the user scrolls to the bottom. Default `0`."
     },
-    hasNewMessageIndicator: {
+    newMessageIndicatorVisible: {
       type: "boolean",
       description: 'Whether the "new messages" indicator is currently visible above the composer. Bindable; cleared automatically when the viewport reaches the bottom. Default `false`.'
     },
@@ -47,21 +47,13 @@ var schema = {
       type: "number",
       description: "Distance in pixels scrolled up from the bottom required before the jump-to-latest button appears. Must be greater than `bottomThreshold` to prevent button flickering. Default `200`."
     },
-    isStreaming: {
+    streaming: {
       type: "boolean",
       description: "Whether a streaming response is currently in progress. When `true`, the composer is disabled and a stop-generating button is shown. Default `false`."
     },
     streamingStatus: {
       type: "string",
-      description: 'Optional status label displayed in the typing indicator while `isStreaming` is `true` and no streaming content has arrived yet (e.g. `"Thinking…"` or `"Analyzing file…"`). When omitted, three animated dots are shown.'
-    },
-    allowAttachments: {
-      type: "boolean",
-      description: "Whether file attachments are enabled in the composer. When `false`, the attachment button is hidden and drag-and-drop onto the chat surface is suppressed. Default `true`."
-    },
-    allowSearch: {
-      type: "boolean",
-      description: "Whether in-conversation search is enabled. When `true`, pressing Ctrl+F / Cmd+F opens a search bar that highlights matching messages. Default `true`."
+      description: 'Optional status label displayed in the typing indicator while `streaming` is `true` and no streaming content has arrived yet (e.g. `"Thinking…"` or `"Analyzing file…"`). When omitted, three animated dots are shown.'
     },
     virtualized: {
       type: "boolean",
@@ -79,7 +71,7 @@ var schema = {
       type: "number",
       description: "Initial virtualized viewport height used before measurement. Default `640`."
     },
-    hasMoreHistory: {
+    moreHistoryAvailable: {
       type: "boolean",
       description: 'Whether the explicit "Load earlier messages" trigger is shown when a load handler exists. Default `true`.'
     },
@@ -91,18 +83,6 @@ var schema = {
       type: "string",
       description: 'Status text while older messages are loading. Default `"Loading earlier messages"`.'
     },
-    allowCopy: {
-      type: "boolean",
-      description: "Whether per-message copy buttons are shown in the message action bar. Default `true`."
-    },
-    allowEditing: {
-      type: "boolean",
-      description: "Whether user messages can be edited inline. Default `true`."
-    },
-    allowRetry: {
-      type: "boolean",
-      description: "Whether failed assistant messages show a retry button. Default `true`."
-    },
     emptyPrompts: {
       type: "array",
       items: {
@@ -120,6 +100,11 @@ var schema = {
         reason: "unknown-shape",
         description: "Optional command/transport boundary around `conversation`. Its methods take\nprecedence over the matching callback props (e.g. `sendMessage` over\n`onsubmit`); omit it and Chat behaves exactly as with plain callbacks."
       },
+      {
+        name: "capabilities",
+        reason: "unknown-shape",
+        description: "Feature-capability flags. Pass a `ChatCapabilities` object to enable or disable\nindividual Chat features (attachments, search, copy, editing, retry) as a group\nrather than as five separate boolean props."
+      },
       {
         name: "conversation",
         reason: "unknown-shape",
@@ -282,4 +267,4 @@ export {
   chat_schema_default as default
 };
 
-//# debugId=39CF2305090C6B0B64756E2164756E21
+//# debugId=91DB18E8159F0E9C64756E2164756E21