@lostgradient/cinder 0.8.0 → 0.11.0

package/dist/components/connection-indicator/connection-indicator.types.d.ts

@@ -0,0 +1,46 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+/**
+ * The six connection lifecycle states ConnectionIndicator understands.
+ *
+ * Stamped directly onto the root as `data-cinder-status` and driving color
+ * exclusively through `connection-indicator.css` — there are no hard-coded
+ * color classes on the component. Each state also carries its own icon and
+ * text label so status is never communicated by color alone (WCAG 1.4.1).
+ *
+ * - `connecting` — initial handshake in progress, no data yet.
+ * - `live` — connected and actively receiving pushed updates.
+ * - `reconnecting` — a previously live connection dropped and is retrying.
+ * - `polling` — receiving updates via interval polling rather than push.
+ * - `stale` — connected but data has not refreshed within an expected window.
+ * - `closed` — the connection is intentionally or terminally closed.
+ */
+export type ConnectionIndicatorStatus = 'connecting' | 'live' | 'reconnecting' | 'polling' | 'stale' | 'closed';
+/**
+ * Props for ConnectionIndicator.
+ *
+ * The component always renders `role="status"` with a computed accessible
+ * name of the form "Connection: {label}" (overridable via `aria-label`), so
+ * assistive technology gets the same signal as sighted users regardless of
+ * which visual treatment (icon, motion, font-weight) carries the difference
+ * between states.
+ */
+export type ConnectionIndicatorProps = Omit<HTMLAttributes<HTMLDivElement>, 'class' | 'children'> & {
+    /** Current connection lifecycle state. Drives icon, text, and color via `data-cinder-status`. */
+    status: ConnectionIndicatorStatus;
+    /** Optional human label override. Replaces the default text for `status` (and the "Connection: …" accessible name). */
+    label?: string;
+    /** Attempt-count content rendered next to the label when `status` is `'reconnecting'`, e.g. "attempt 3 of 5". Ignored for other states. */
+    attempt?: Snippet;
+    /** Extra classes appended to the root element. */
+    class?: string;
+};
+/** Schema-facing mirror of {@link ConnectionIndicatorProps}, omitting the non-serializable `attempt` snippet and native HTML attribute passthrough. */
+export interface ConnectionIndicatorSchemaProps {
+    /** Current connection lifecycle state. Drives icon, text, and color via `data-cinder-status`. */
+    status: ConnectionIndicatorStatus;
+    /** Optional human label override. Replaces the default text for `status` (and the "Connection: …" accessible name). */
+    label?: string;
+    /** Extra classes appended to the root element. */
+    class?: string;
+}

package/dist/components/connection-indicator/connection-indicator.variables.d.ts

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

package/dist/components/connection-indicator/connection-indicator.variables.js

@@ -0,0 +1,61 @@
+var __create = Object.create;
+var __getProtoOf = Object.getPrototypeOf;
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+function __accessProp(key) {
+  return this[key];
+}
+var __toESMCache_node;
+var __toESMCache_esm;
+var __toESM = (mod, isNodeMode, target) => {
+  var canCache = mod != null && typeof mod === "object";
+  if (canCache) {
+    var cache = isNodeMode ? __toESMCache_node ??= new WeakMap : __toESMCache_esm ??= new WeakMap;
+    var cached = cache.get(mod);
+    if (cached)
+      return cached;
+  }
+  target = mod != null ? __create(__getProtoOf(mod)) : {};
+  const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
+  for (let key of __getOwnPropNames(mod))
+    if (!__hasOwnProp.call(to, key))
+      __defProp(to, key, {
+        get: __accessProp.bind(mod, key),
+        enumerable: true
+      });
+  if (canCache)
+    cache.set(mod, to);
+  return to;
+};
+var __commonJS = (cb, mod) => () => (mod || cb((mod = { exports: {} }).exports, mod), mod.exports);
+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/connection-indicator/connection-indicator.variables.ts
+var variables = [];
+var connection_indicator_variables_default = variables;
+export {
+  connection_indicator_variables_default as default
+};
+
+//# debugId=87811D7E55D42C3864756E2164756E21

package/dist/components/connection-indicator/index.d.ts

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

package/dist/components/connection-indicator/index.js

@@ -0,0 +1,409 @@
+var __create = Object.create;
+var __getProtoOf = Object.getPrototypeOf;
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+function __accessProp(key) {
+  return this[key];
+}
+var __toESMCache_node;
+var __toESMCache_esm;
+var __toESM = (mod, isNodeMode, target) => {
+  var canCache = mod != null && typeof mod === "object";
+  if (canCache) {
+    var cache = isNodeMode ? __toESMCache_node ??= new WeakMap : __toESMCache_esm ??= new WeakMap;
+    var cached = cache.get(mod);
+    if (cached)
+      return cached;
+  }
+  target = mod != null ? __create(__getProtoOf(mod)) : {};
+  const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
+  for (let key of __getOwnPropNames(mod))
+    if (!__hasOwnProp.call(to, key))
+      __defProp(to, key, {
+        get: __accessProp.bind(mod, key),
+        enumerable: true
+      });
+  if (canCache)
+    cache.set(mod, to);
+  return to;
+};
+var __commonJS = (cb, mod) => () => (mod || cb((mod = { exports: {} }).exports, mod), mod.exports);
+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/connection-indicator/index.ts
+import"@lostgradient/cinder/connection-indicator/styles";
+
+// src/components/connection-indicator/connection-indicator.svelte
+import"svelte/internal/disclose-version";
+import * as $8 from "svelte/internal/client";
+
+// ../../node_modules/lucide-svelte/dist/icons/loader.svelte
+import"svelte/internal/disclose-version";
+import"svelte/internal/flags/legacy";
+import * as $2 from "svelte/internal/client";
+
+// ../../node_modules/lucide-svelte/dist/Icon.svelte
+import"svelte/internal/disclose-version";
+import"svelte/internal/flags/legacy";
+import * as $ from "svelte/internal/client";
+
+// ../../node_modules/lucide-svelte/dist/defaultAttributes.js
+var defaultAttributes = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: 24,
+  height: 24,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-width": 2,
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round"
+};
+var defaultAttributes_default = defaultAttributes;
+
+// ../../node_modules/lucide-svelte/dist/Icon.svelte
+var root = $.from_svg(`<svg><!><!></svg>`);
+function Icon($$anchor, $$props) {
+  const $$sanitized_props = $.legacy_rest_props($$props, ["children", "$$slots", "$$events", "$$legacy"]);
+  const $$restProps = $.legacy_rest_props($$sanitized_props, [
+    "name",
+    "color",
+    "size",
+    "strokeWidth",
+    "absoluteStrokeWidth",
+    "iconNode"
+  ]);
+  $.push($$props, false);
+  let name = $.prop($$props, "name", 8, undefined);
+  let color = $.prop($$props, "color", 8, "currentColor");
+  let size = $.prop($$props, "size", 8, 24);
+  let strokeWidth = $.prop($$props, "strokeWidth", 8, 2);
+  let absoluteStrokeWidth = $.prop($$props, "absoluteStrokeWidth", 8, false);
+  let iconNode = $.prop($$props, "iconNode", 24, () => []);
+  const mergeClasses = (...classes) => classes.filter((className, index2, array) => {
+    return Boolean(className) && array.indexOf(className) === index2;
+  }).join(" ");
+  $.init();
+  var svg = root();
+  $.attribute_effect(svg, ($0, $1) => ({
+    ...defaultAttributes_default,
+    ...$$restProps,
+    width: size(),
+    height: size(),
+    stroke: color(),
+    "stroke-width": $0,
+    class: $1
+  }), [
+    () => ($.deep_read_state(absoluteStrokeWidth()), $.deep_read_state(strokeWidth()), $.deep_read_state(size()), $.untrack(() => absoluteStrokeWidth() ? Number(strokeWidth()) * 24 / Number(size()) : strokeWidth())),
+    () => ($.deep_read_state(name()), $.deep_read_state($$sanitized_props), $.untrack(() => mergeClasses("lucide-icon", "lucide", name() ? `lucide-${name()}` : "", $$sanitized_props.class)))
+  ]);
+  var node = $.child(svg);
+  $.each(node, 1, iconNode, $.index, ($$anchor2, $$item) => {
+    var $$array = $.derived(() => $.to_array($.get($$item), 2));
+    let tag = () => $.get($$array)[0];
+    let attrs = () => $.get($$array)[1];
+    var fragment = $.comment();
+    var node_1 = $.first_child(fragment);
+    $.element(node_1, tag, true, ($$element, $$anchor3) => {
+      $.attribute_effect($$element, () => ({ ...attrs() }));
+    });
+    $.append($$anchor2, fragment);
+  });
+  var node_2 = $.sibling(node);
+  $.slot(node_2, $$props, "default", {}, null);
+  $.reset(svg);
+  $.append($$anchor, svg);
+  $.pop();
+}
+
+// ../../node_modules/lucide-svelte/dist/icons/loader.svelte
+function Loader($$anchor, $$props) {
+  const $$sanitized_props = $2.legacy_rest_props($$props, ["children", "$$slots", "$$events", "$$legacy"]);
+  const iconNode = [
+    ["path", { d: "M12 2v4" }],
+    ["path", { d: "m16.2 7.8 2.9-2.9" }],
+    ["path", { d: "M18 12h4" }],
+    ["path", { d: "m16.2 16.2 2.9 2.9" }],
+    ["path", { d: "M12 18v4" }],
+    ["path", { d: "m4.9 19.1 2.9-2.9" }],
+    ["path", { d: "M2 12h4" }],
+    ["path", { d: "m4.9 4.9 2.9 2.9" }]
+  ];
+  Icon($$anchor, $2.spread_props({ name: "loader" }, () => $$sanitized_props, {
+    get iconNode() {
+      return iconNode;
+    },
+    children: ($$anchor2, $$slotProps) => {
+      var fragment_1 = $2.comment();
+      var node = $2.first_child(fragment_1);
+      $2.slot(node, $$props, "default", {}, null);
+      $2.append($$anchor2, fragment_1);
+    },
+    $$slots: { default: true }
+  }));
+}
+// ../../node_modules/lucide-svelte/dist/icons/refresh-ccw-dot.svelte
+import"svelte/internal/disclose-version";
+import"svelte/internal/flags/legacy";
+import * as $3 from "svelte/internal/client";
+function Refresh_ccw_dot($$anchor, $$props) {
+  const $$sanitized_props = $3.legacy_rest_props($$props, ["children", "$$slots", "$$events", "$$legacy"]);
+  const iconNode = [
+    ["path", { d: "M3 2v6h6" }],
+    ["path", { d: "M21 12A9 9 0 0 0 6 5.3L3 8" }],
+    ["path", { d: "M21 22v-6h-6" }],
+    ["path", { d: "M3 12a9 9 0 0 0 15 6.7l3-2.7" }],
+    ["circle", { cx: "12", cy: "12", r: "1" }]
+  ];
+  Icon($$anchor, $3.spread_props({ name: "refresh-ccw-dot" }, () => $$sanitized_props, {
+    get iconNode() {
+      return iconNode;
+    },
+    children: ($$anchor2, $$slotProps) => {
+      var fragment_1 = $3.comment();
+      var node = $3.first_child(fragment_1);
+      $3.slot(node, $$props, "default", {}, null);
+      $3.append($$anchor2, fragment_1);
+    },
+    $$slots: { default: true }
+  }));
+}
+// ../../node_modules/lucide-svelte/dist/icons/refresh-cw.svelte
+import"svelte/internal/disclose-version";
+import"svelte/internal/flags/legacy";
+import * as $4 from "svelte/internal/client";
+function Refresh_cw($$anchor, $$props) {
+  const $$sanitized_props = $4.legacy_rest_props($$props, ["children", "$$slots", "$$events", "$$legacy"]);
+  const iconNode = [
+    [
+      "path",
+      { d: "M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" }
+    ],
+    ["path", { d: "M21 3v5h-5" }],
+    [
+      "path",
+      { d: "M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" }
+    ],
+    ["path", { d: "M8 16H3v5" }]
+  ];
+  Icon($$anchor, $4.spread_props({ name: "refresh-cw" }, () => $$sanitized_props, {
+    get iconNode() {
+      return iconNode;
+    },
+    children: ($$anchor2, $$slotProps) => {
+      var fragment_1 = $4.comment();
+      var node = $4.first_child(fragment_1);
+      $4.slot(node, $$props, "default", {}, null);
+      $4.append($$anchor2, fragment_1);
+    },
+    $$slots: { default: true }
+  }));
+}
+// ../../node_modules/lucide-svelte/dist/icons/triangle-alert.svelte
+import"svelte/internal/disclose-version";
+import"svelte/internal/flags/legacy";
+import * as $5 from "svelte/internal/client";
+function Triangle_alert($$anchor, $$props) {
+  const $$sanitized_props = $5.legacy_rest_props($$props, ["children", "$$slots", "$$events", "$$legacy"]);
+  const iconNode = [
+    [
+      "path",
+      {
+        d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"
+      }
+    ],
+    ["path", { d: "M12 9v4" }],
+    ["path", { d: "M12 17h.01" }]
+  ];
+  Icon($$anchor, $5.spread_props({ name: "triangle-alert" }, () => $$sanitized_props, {
+    get iconNode() {
+      return iconNode;
+    },
+    children: ($$anchor2, $$slotProps) => {
+      var fragment_1 = $5.comment();
+      var node = $5.first_child(fragment_1);
+      $5.slot(node, $$props, "default", {}, null);
+      $5.append($$anchor2, fragment_1);
+    },
+    $$slots: { default: true }
+  }));
+}
+// ../../node_modules/lucide-svelte/dist/icons/wifi.svelte
+import"svelte/internal/disclose-version";
+import"svelte/internal/flags/legacy";
+import * as $6 from "svelte/internal/client";
+function Wifi($$anchor, $$props) {
+  const $$sanitized_props = $6.legacy_rest_props($$props, ["children", "$$slots", "$$events", "$$legacy"]);
+  const iconNode = [
+    ["path", { d: "M12 20h.01" }],
+    ["path", { d: "M2 8.82a15 15 0 0 1 20 0" }],
+    ["path", { d: "M5 12.859a10 10 0 0 1 14 0" }],
+    ["path", { d: "M8.5 16.429a5 5 0 0 1 7 0" }]
+  ];
+  Icon($$anchor, $6.spread_props({ name: "wifi" }, () => $$sanitized_props, {
+    get iconNode() {
+      return iconNode;
+    },
+    children: ($$anchor2, $$slotProps) => {
+      var fragment_1 = $6.comment();
+      var node = $6.first_child(fragment_1);
+      $6.slot(node, $$props, "default", {}, null);
+      $6.append($$anchor2, fragment_1);
+    },
+    $$slots: { default: true }
+  }));
+}
+// ../../node_modules/lucide-svelte/dist/icons/wifi-off.svelte
+import"svelte/internal/disclose-version";
+import"svelte/internal/flags/legacy";
+import * as $7 from "svelte/internal/client";
+function Wifi_off($$anchor, $$props) {
+  const $$sanitized_props = $7.legacy_rest_props($$props, ["children", "$$slots", "$$events", "$$legacy"]);
+  const iconNode = [
+    ["path", { d: "M12 20h.01" }],
+    ["path", { d: "M8.5 16.429a5 5 0 0 1 7 0" }],
+    ["path", { d: "M5 12.859a10 10 0 0 1 5.17-2.69" }],
+    ["path", { d: "M19 12.859a10 10 0 0 0-2.007-1.523" }],
+    ["path", { d: "M2 8.82a15 15 0 0 1 4.177-2.643" }],
+    ["path", { d: "M22 8.82a15 15 0 0 0-11.288-3.764" }],
+    ["path", { d: "m2 2 20 20" }]
+  ];
+  Icon($$anchor, $7.spread_props({ name: "wifi-off" }, () => $$sanitized_props, {
+    get iconNode() {
+      return iconNode;
+    },
+    children: ($$anchor2, $$slotProps) => {
+      var fragment_1 = $7.comment();
+      var node = $7.first_child(fragment_1);
+      $7.slot(node, $$props, "default", {}, null);
+      $7.append($$anchor2, fragment_1);
+    },
+    $$slots: { default: true }
+  }));
+}
+// src/utilities/class-names.ts
+function classNames(...parts) {
+  return parts.filter((part) => typeof part === "string" && part.length > 0).join(" ");
+}
+
+// src/components/connection-indicator/connection-indicator.svelte
+var rest_excludes = new Set([
+  "$$slots",
+  "$$events",
+  "$$legacy",
+  "status",
+  "label",
+  "attempt",
+  "class",
+  "aria-label",
+  "aria-labelledby"
+]);
+var root2 = $8.from_html(`<span class="cinder-connection-indicator__dot" aria-hidden="true"></span>`);
+var root_1 = $8.from_html(`<span class="cinder-connection-indicator__attempt"><!></span>`);
+var root_2 = $8.from_html(`<div><!> <span class="cinder-connection-indicator__icon" aria-hidden="true"><!></span> <span class="cinder-connection-indicator__label"> </span> <!></div>`);
+function Connection_indicator($$anchor, $$props) {
+  $8.push($$props, true);
+  const statusLabels = {
+    connecting: "Connecting",
+    live: "Live",
+    reconnecting: "Reconnecting",
+    polling: "Polling",
+    stale: "Stale",
+    closed: "Closed"
+  };
+  const statusIcons = {
+    connecting: Loader,
+    live: Wifi,
+    reconnecting: Refresh_cw,
+    polling: Refresh_ccw_dot,
+    stale: Triangle_alert,
+    closed: Wifi_off
+  };
+  let rest = $8.rest_props($$props, rest_excludes);
+  const normalizedAriaLabel = $8.derived(() => $$props["aria-label"]?.trim() ? $$props["aria-label"].trim() : undefined);
+  const normalizedAriaLabelledby = $8.derived(() => $$props["aria-labelledby"]?.trim() ? $$props["aria-labelledby"].trim() : undefined);
+  const resolvedLabel = $8.derived(() => $$props.label?.trim() ? $$props.label.trim() : statusLabels[$$props.status]);
+  const resolvedAriaLabel = $8.derived(() => $8.get(normalizedAriaLabelledby) !== undefined ? undefined : $8.get(normalizedAriaLabel) ?? `Connection: ${$8.get(resolvedLabel)}`);
+  const Icon2 = $8.derived(() => statusIcons[$$props.status]);
+  var div = root_2();
+  $8.attribute_effect(div, ($0) => ({
+    ...rest,
+    class: $0,
+    "data-cinder-status": $$props.status,
+    role: "status",
+    "aria-live": "polite",
+    "aria-atomic": "true",
+    "aria-label": $8.get(resolvedAriaLabel),
+    "aria-labelledby": $8.get(normalizedAriaLabelledby)
+  }), [
+    () => classNames("cinder-connection-indicator", $$props.class)
+  ]);
+  var node = $8.child(div);
+  {
+    var consequent = ($$anchor2) => {
+      var span = root2();
+      $8.append($$anchor2, span);
+    };
+    $8.if(node, ($$render) => {
+      if ($$props.status === "live")
+        $$render(consequent);
+    });
+  }
+  var span_1 = $8.sibling(node, 2);
+  var node_1 = $8.child(span_1);
+  $8.component(node_1, () => $8.get(Icon2), ($$anchor2, Icon_1) => {
+    Icon_1($$anchor2, { size: 13, strokeWidth: 2.25 });
+  });
+  $8.reset(span_1);
+  var span_2 = $8.sibling(span_1, 2);
+  var text = $8.child(span_2, true);
+  $8.reset(span_2);
+  var node_2 = $8.sibling(span_2, 2);
+  {
+    var consequent_1 = ($$anchor2) => {
+      var span_3 = root_1();
+      var node_3 = $8.child(span_3);
+      $8.snippet(node_3, () => $$props.attempt);
+      $8.reset(span_3);
+      $8.append($$anchor2, span_3);
+    };
+    $8.if(node_2, ($$render) => {
+      if ($$props.status === "reconnecting" && $$props.attempt)
+        $$render(consequent_1);
+    });
+  }
+  $8.reset(div);
+  $8.template_effect(() => $8.set_text(text, $8.get(resolvedLabel)));
+  $8.append($$anchor, div);
+  $8.pop();
+}
+
+// src/components/connection-indicator/index.ts
+var connection_indicator_default = Connection_indicator;
+export {
+  connection_indicator_default as default,
+  Connection_indicator as ConnectionIndicator
+};
+
+//# debugId=517A5B4D59D61C2864756E2164756E21

package/dist/components/container/container.schema.js

@@ -73,6 +73,9 @@ var schema = {
     as: {
       enum: [
         "object",
+        "slot",
+        "style",
+        "title",
         "a",
         "abbr",
         "address",
@@ -148,11 +151,9 @@ var schema = {
         "search",
         "section",
         "select",
-        "slot",
         "small",
         "span",
         "strong",
-        "style",
         "sub",
         "summary",
         "sup",
@@ -165,7 +166,6 @@ var schema = {
         "th",
         "thead",
         "time",
-        "title",
         "tr",
         "u",
         "ul",
@@ -197,4 +197,4 @@ export {
   container_schema_default as default
 };
 
-//# debugId=B740E00C869B762764756E2164756E21
+//# debugId=94CA2B4BEDD9A8B164756E2164756E21