@lostgradient/cinder 0.1.1 → 0.2.0

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

@@ -0,0 +1,285 @@
+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/capability-gate/index.ts
+import"@lostgradient/cinder/capability-gate/styles";
+
+// src/components/capability-gate/capability-gate.svelte
+import"svelte/internal/disclose-version";
+import * as $ from "svelte/internal/client";
+
+// src/utilities/class-names.ts
+function classNames(...parts) {
+  return parts.filter((part) => typeof part === "string" && part.length > 0).join(" ");
+}
+
+// ../../node_modules/esm-env/true.js
+var true_default = true;
+// src/utilities/dev-warn.ts
+function devWarn(message, ...args) {
+  if (!true_default)
+    return;
+  console.warn(message, ...args);
+}
+
+// src/components/capability-gate/capability-gate.svelte
+var DEFAULT_STATUS_TEXT = {
+  supported: "Available",
+  unsupported: "Not supported in this browser",
+  "permission-needed": "Permission required",
+  "permission-denied": "Permission was denied",
+  loading: "Checking availability…",
+  unavailable: "Not available"
+};
+var root_2 = $.from_html(`<div class="cinder-capability-gate__content"><!></div>`);
+var root_4 = $.from_html(`<button type="button" class="cinder-capability-gate__primary"> </button>`);
+var root_5 = $.from_html(`<a class="cinder-capability-gate__fallback"> </a>`);
+var root_6 = $.from_html(`<button type="button" class="cinder-capability-gate__fallback"> </button>`);
+var root_7 = $.from_html(`<button type="button" class="cinder-capability-gate__dismiss"> </button>`);
+var root_3 = $.from_html(`<div class="cinder-capability-gate__actions"><!> <!> <!></div>`);
+var root_1 = $.from_html(`<div><div class="cinder-capability-gate__status" role="status" aria-live="polite"><span class="cinder-capability-gate__feature"> </span> <span class="cinder-capability-gate__state-text"> </span></div> <!> <!></div>`);
+function Capability_gate($$anchor, $$props) {
+  $.push($$props, true);
+  const KNOWN_STATES = [
+    "supported",
+    "unsupported",
+    "permission-needed",
+    "permission-denied",
+    "loading",
+    "unavailable"
+  ];
+  let variant = $.prop($$props, "variant", 3, "inline"), rest = $.rest_props($$props, [
+    "$$slots",
+    "$$events",
+    "$$legacy",
+    "feature",
+    "state",
+    "variant",
+    "primaryAction",
+    "onPrimaryAction",
+    "fallbackAction",
+    "fallbackHref",
+    "onFallbackAction",
+    "dismissAction",
+    "onDismiss",
+    "children",
+    "class"
+  ]);
+  const availabilityState = $.derived(() => KNOWN_STATES.includes($$props.state) ? $$props.state : "unavailable");
+  $.user_effect(() => {
+    if (!KNOWN_STATES.includes($$props.state)) {
+      devWarn(`CapabilityGate: unknown state "${String($$props.state)}". Expected one of ${KNOWN_STATES.join(", ")}. Falling back to "unavailable".`);
+    }
+  });
+  let visible = $.state(true);
+  let dismissButton = $.state(undefined);
+  $.user_effect(() => {
+    $$props.feature;
+    $$props.state;
+    $.set(visible, true);
+  });
+  const statusText = $.derived(() => DEFAULT_STATUS_TEXT[$.get(availabilityState)] ?? $.get(availabilityState));
+  const isLoading = $.derived(() => $.get(availabilityState) === "loading");
+  const isError = $.derived(() => $.get(availabilityState) === "permission-denied" || $.get(availabilityState) === "unsupported");
+  const isWarning = $.derived(() => $.get(availabilityState) === "permission-needed");
+  const isSuccess = $.derived(() => $.get(availabilityState) === "supported");
+  const resolvedVariant = $.derived(() => $.get(isError) ? "error" : $.get(isWarning) ? "warning" : $.get(isSuccess) ? "success" : "info");
+  function handleDismiss() {
+    $.get(dismissButton)?.blur();
+    $.set(visible, false);
+    $$props.onDismiss?.();
+  }
+  var fragment = $.comment();
+  var node = $.first_child(fragment);
+  {
+    var consequent_6 = ($$anchor2) => {
+      var div = root_1();
+      $.attribute_effect(div, ($0) => ({
+        ...rest,
+        class: $0,
+        "data-cinder-state": $.get(availabilityState),
+        "data-cinder-variant": $.get(resolvedVariant),
+        "data-cinder-presentation": variant()
+      }), [() => classNames("cinder-capability-gate", $$props.class)]);
+      var div_1 = $.child(div);
+      var span = $.child(div_1);
+      var text = $.child(span, true);
+      $.reset(span);
+      var span_1 = $.sibling(span, 2);
+      var text_1 = $.child(span_1, true);
+      $.reset(span_1);
+      $.reset(div_1);
+      var node_1 = $.sibling(div_1, 2);
+      {
+        var consequent = ($$anchor3) => {
+          var div_2 = root_2();
+          var node_2 = $.child(div_2);
+          $.snippet(node_2, () => $$props.children);
+          $.reset(div_2);
+          $.append($$anchor3, div_2);
+        };
+        $.if(node_1, ($$render) => {
+          if ($$props.children)
+            $$render(consequent);
+        });
+      }
+      var node_3 = $.sibling(node_1, 2);
+      {
+        var consequent_5 = ($$anchor3) => {
+          var div_3 = root_3();
+          var node_4 = $.child(div_3);
+          {
+            var consequent_1 = ($$anchor4) => {
+              var button = root_4();
+              var text_2 = $.child(button, true);
+              $.reset(button);
+              $.template_effect(() => {
+                $.set_attribute(button, "aria-label", `${$$props.primaryAction ?? ""} for ${$$props.feature ?? ""}`);
+                $.set_text(text_2, $$props.primaryAction);
+              });
+              $.delegated("click", button, function(...$$args) {
+                $$props.onPrimaryAction?.apply(this, $$args);
+              });
+              $.append($$anchor4, button);
+            };
+            $.if(node_4, ($$render) => {
+              if ($$props.primaryAction)
+                $$render(consequent_1);
+            });
+          }
+          var node_5 = $.sibling(node_4, 2);
+          {
+            var consequent_2 = ($$anchor4) => {
+              var a = root_5();
+              var text_3 = $.child(a, true);
+              $.reset(a);
+              $.template_effect(() => {
+                $.set_attribute(a, "href", $$props.fallbackHref);
+                $.set_attribute(a, "aria-label", `${$$props.fallbackAction ?? "Alternative option" ?? ""} for ${$$props.feature ?? ""}`);
+                $.set_text(text_3, $$props.fallbackAction ?? "Alternative option");
+              });
+              $.append($$anchor4, a);
+            };
+            var consequent_3 = ($$anchor4) => {
+              var button_1 = root_6();
+              var text_4 = $.child(button_1, true);
+              $.reset(button_1);
+              $.template_effect(() => {
+                $.set_attribute(button_1, "aria-label", `${$$props.fallbackAction ?? ""} for ${$$props.feature ?? ""}`);
+                $.set_text(text_4, $$props.fallbackAction);
+              });
+              $.delegated("click", button_1, function(...$$args) {
+                $$props.onFallbackAction?.apply(this, $$args);
+              });
+              $.append($$anchor4, button_1);
+            };
+            $.if(node_5, ($$render) => {
+              if ($$props.fallbackHref)
+                $$render(consequent_2);
+              else if ($$props.fallbackAction)
+                $$render(consequent_3, 1);
+            });
+          }
+          var node_6 = $.sibling(node_5, 2);
+          {
+            var consequent_4 = ($$anchor4) => {
+              var button_2 = root_7();
+              var text_5 = $.child(button_2, true);
+              $.reset(button_2);
+              $.bind_this(button_2, ($$value) => $.set(dismissButton, $$value), () => $.get(dismissButton));
+              $.template_effect(() => {
+                $.set_attribute(button_2, "aria-label", $$props.dismissAction);
+                $.set_text(text_5, $$props.dismissAction);
+              });
+              $.delegated("click", button_2, handleDismiss);
+              $.append($$anchor4, button_2);
+            };
+            $.if(node_6, ($$render) => {
+              if ($$props.dismissAction)
+                $$render(consequent_4);
+            });
+          }
+          $.reset(div_3);
+          $.append($$anchor3, div_3);
+        };
+        $.if(node_3, ($$render) => {
+          if ($$props.primaryAction || $$props.fallbackAction || $$props.fallbackHref || $$props.dismissAction)
+            $$render(consequent_5);
+        });
+      }
+      $.reset(div);
+      $.template_effect(() => {
+        $.set_attribute(div_1, "aria-busy", $.get(isLoading) ? "true" : undefined);
+        $.set_text(text, $$props.feature);
+        $.set_text(text_1, $.get(statusText));
+      });
+      $.append($$anchor2, div);
+    };
+    $.if(node, ($$render) => {
+      if ($.get(visible))
+        $$render(consequent_6);
+    });
+  }
+  $.append($$anchor, fragment);
+  $.pop();
+}
+$.delegate(["click"]);
+
+// src/components/capability-gate/index.ts
+var capability_gate_default = Capability_gate;
+export {
+  capability_gate_default as default,
+  Capability_gate as CapabilityGate
+};
+
+//# debugId=C4577A17651345CF64756E2164756E21

package/dist/components/card/card.css

@@ -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/dist/components/card/card.schema.js

@@ -75,6 +75,10 @@ var 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: "Heading level for the generated title. Defaults to `3`. Set this so the\ncard title nests correctly within the surrounding document outline."
@@ -110,4 +114,4 @@ export {
   card_schema_default as default
 };
 
-//# debugId=1E191E1546627C3664756E2164756E21
+//# debugId=605EFDE5D074E75F64756E2164756E21

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

@@ -11,7 +11,7 @@
  * @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';
 import type { CardProps } from './card.types.ts';
 declare const Card: import("svelte").Component<CardProps, {}, "">;
 type Card = ReturnType<typeof Card>;

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

@@ -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/dist/components/card/index.d.ts

@@ -1,5 +1,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/dist/components/card/index.js

@@ -71,7 +71,7 @@ var root_5 = $.from_html(`<div class="cinder-card__footer"><!></div>`);
 var root = $.from_html(`<div><!> <div class="cinder-card__body"><!></div> <!></div>`);
 function Card($$anchor, $$props) {
   $.push($$props, true);
-  let headingLevel = $.prop($$props, "headingLevel", 3, 3), variant = $.prop($$props, "variant", 3, "card"), bodyTone = $.prop($$props, "bodyTone", 3, "default"), footerTone = $.prop($$props, "footerTone", 3, "default"), edgeToEdgeOnMobile = $.prop($$props, "edgeToEdgeOnMobile", 3, false), rest = $.rest_props($$props, [
+  let headingLevel = $.prop($$props, "headingLevel", 3, 3), variant = $.prop($$props, "variant", 3, "card"), bodyTone = $.prop($$props, "bodyTone", 3, "default"), footerTone = $.prop($$props, "footerTone", 3, "default"), edgeToEdgeOnMobile = $.prop($$props, "edgeToEdgeOnMobile", 3, false), padding = $.prop($$props, "padding", 3, "default"), rest = $.rest_props($$props, [
     "$$slots",
     "$$events",
     "$$legacy",
@@ -85,7 +85,8 @@ function Card($$anchor, $$props) {
     "variant",
     "bodyTone",
     "footerTone",
-    "edgeToEdgeOnMobile"
+    "edgeToEdgeOnMobile",
+    "padding"
   ]);
   const resolvedHeadingLevel = $.derived(() => Number.isFinite(Math.trunc(Number(headingLevel()))) ? Math.min(6, Math.max(1, Math.trunc(Number(headingLevel())))) : 3);
   const titleTag = $.derived(() => `h${$.get(resolvedHeadingLevel)}`);
@@ -158,7 +159,10 @@ function Card($$anchor, $$props) {
     });
   }
   $.reset(div);
-  $.template_effect(() => $.set_attribute(div_3, "data-cinder-tone", bodyTone()));
+  $.template_effect(() => {
+    $.set_attribute(div_3, "data-cinder-tone", bodyTone());
+    $.set_attribute(div_3, "data-cinder-padding", padding());
+  });
   $.append($$anchor, div);
   $.pop();
 }
@@ -170,4 +174,4 @@ export {
   Card
 };
 
-//# debugId=3B564D220E4A1C0364756E2164756E21
+//# debugId=3543CC48E5A87AF464756E2164756E21

package/dist/components/chat/index.css

@@ -38,7 +38,7 @@
   }
 
   .ProseMirror-selectednode {
-    outline: 2px solid #8cf;
+    outline: 2px solid var(--cinder-accent);
   }
 
   li.ProseMirror-selectednode {
@@ -48,8 +48,8 @@
   li.ProseMirror-selectednode:after {
     content: "";
     position: absolute;
+    border: 2px solid var(--cinder-accent);
     pointer-events: none;
-    border: 2px solid #8cf;
     inset: -2px -2px -2px -32px;
   }