@lostgradient/cinder 0.2.0 → 0.4.0

package/dist/server/components/data-list/data-list.schema.js

@@ -1,35 +1,4 @@
 import { createRequire } from "node:module";
-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 __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
 var __require = /* @__PURE__ */ createRequire(import.meta.url);
 
@@ -43,7 +12,8 @@ var schema = {
       description: "List-level density inherited by StackedListItem rows that do not set their\nown `density` prop. Omit to let each row use its own default. A per-row\n`density` always overrides this list-level value.\n\nNote: when passing a variable that may be `undefined`, spread conditionally\nbecause `exactOptionalPropertyTypes` is enabled:\n`{...(density ? { density } : {})}`"
     },
     class: {
-      type: "string"
+      type: "string",
+      description: "Additional class merged onto the `.cinder-data-list` root element."
     }
   },
   additionalProperties: false,
@@ -51,19 +21,33 @@ var schema = {
     unsupportedProps: [
       {
         name: "children",
-        reason: "function-or-snippet"
+        reason: "function-or-snippet",
+        required: true,
+        description: 'Row renderer. MUST render an `<li>` (the list root is a `<ul role="list">`).\nStackedListItem is the recommended row — it renders an `<li>` with\nleading/title/description/meta/trailing slots.'
       },
       {
         name: "empty",
-        reason: "function-or-snippet"
+        reason: "function-or-snippet",
+        description: 'Rendered when `items` is empty. The component automatically wraps the\nsnippet output in `<li class="cinder-data-list-empty">`.\n\n**Do NOT wrap in an `<li>` yourself** — the component provides the `<li>`\nwrapper automatically. Pass only inner content (e.g. a `<p>`, a `<div>`,\nor plain text). Contrast with `children`, which must render an `<li>`.'
       },
       {
         name: "items",
-        reason: "generic-type-parameter"
+        reason: "generic-type-parameter",
+        required: true,
+        description: "The records to render. Each is passed to `children`."
       },
       {
         name: "key",
-        reason: "function-or-snippet"
+        reason: "function-or-snippet",
+        required: true,
+        description: `Key extractor for stable DOM reconciliation. Svelte uses this to identify
+each row when the list is reordered, filtered, or updated. Without a key,
+rows are matched by index and the wrong row instances may receive updated
+props, causing O(n) churn and incorrect rendering.
+
+\`\`\`svelte
+<DataList {items} key={(m) => m.id}>
+\`\`\``
       }
     ]
   }
@@ -73,4 +57,4 @@ export {
   data_list_schema_default as default
 };
 
-//# debugId=664E23A2CEF867D964756E2164756E21
+//# debugId=1444D2952031644764756E2164756E21

package/dist/server/components/data-list/data-list.variables.js

@@ -1,35 +1,4 @@
 import { createRequire } from "node:module";
-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 __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
 var __require = /* @__PURE__ */ createRequire(import.meta.url);
 
@@ -40,4 +9,4 @@ export {
   data_list_variables_default as default
 };
 
-//# debugId=68F7D6CF6AFFCFBF64756E2164756E21
+//# debugId=12BCC79CA8064B7864756E2164756E21

package/dist/server/components/data-list/index.js

@@ -1,35 +1,4 @@
 import { createRequire } from "node:module";
-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 __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
 var __require = /* @__PURE__ */ createRequire(import.meta.url);
 
@@ -88,26 +57,12 @@ function Data_list($$renderer, $$props) {
     })}>`);
     if (items.length > 0) {
       $$renderer2.push("<!--[0-->");
-      if (key) {
-        $$renderer2.push("<!--[0-->");
-        $$renderer2.push(`<!--[-->`);
-        const each_array = $.ensure_array_like(items);
-        for (let $$index = 0, $$length = each_array.length;$$index < $$length; $$index++) {
-          let entry = each_array[$$index];
-          children($$renderer2, entry);
-          $$renderer2.push(`<!---->`);
-        }
-        $$renderer2.push(`<!--]-->`);
-      } else {
-        $$renderer2.push("<!--[-1-->");
-        $$renderer2.push(`<!--[-->`);
-        const each_array_1 = $.ensure_array_like(items);
-        for (let $$index_1 = 0, $$length = each_array_1.length;$$index_1 < $$length; $$index_1++) {
-          let entry = each_array_1[$$index_1];
-          children($$renderer2, entry);
-          $$renderer2.push(`<!---->`);
-        }
-        $$renderer2.push(`<!--]-->`);
+      $$renderer2.push(`<!--[-->`);
+      const each_array = $.ensure_array_like(items);
+      for (let $$index = 0, $$length = each_array.length;$$index < $$length; $$index++) {
+        let entry = each_array[$$index];
+        children($$renderer2, entry);
+        $$renderer2.push(`<!---->`);
       }
       $$renderer2.push(`<!--]-->`);
     } else if (empty) {
@@ -129,4 +84,4 @@ export {
   Data_list as DataList
 };
 
-//# debugId=3DE8312DCBD2402864756E2164756E21
+//# debugId=F15EBEC269BD9B7964756E2164756E21

package/dist/server/components/data-table/data-table.schema.js

@@ -1,35 +1,4 @@
 import { createRequire } from "node:module";
-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 __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
 var __require = /* @__PURE__ */ createRequire(import.meta.url);
 
@@ -54,6 +23,32 @@ var schema = {
       type: "boolean",
       description: "When true, wraps the table in a `.cinder-table-scroll` container that\nenables horizontal overflow scrolling on small viewports."
     },
+    virtualized: {
+      type: "boolean",
+      description: "When true, renders only the visible `<tbody>` row window plus spacer rows.\nRequires a fixed row height. This is intended for large, append-only tables\nsuch as live logs or event streams."
+    },
+    rowHeight: {
+      type: "number",
+      description: `Fixed body row height in pixels for virtualized mode.
+This must match the actual rendered body row height, including density
+padding and any wrapping introduced by the table content.
+Defaults to 44.`
+    },
+    overscan: {
+      type: "number",
+      description: `Extra body rows rendered before and after the visible virtualized window.
+Defaults to 5.`
+    },
+    height: {
+      type: "string",
+      description: 'CSS block-size for the virtualized native scroll container.\nDefaults to `"24rem"` when `virtualized` is true.'
+    },
+    stickToBottom: {
+      type: "boolean",
+      description: `When true in virtualized mode, appending rows while scrolled to the bottom
+keeps the newest row pinned in view. Appending while scrolled up does not
+change the viewport.`
+    },
     class: {
       type: "string",
       description: 'Additional class names merged onto DataTable\'s root wrapper element (the\n`<div class="cinder-data-table">` that contains the table). To style the\n`<table>` itself, target `.cinder-data-table table` from this class.'
@@ -64,15 +59,20 @@ var schema = {
     unsupportedProps: [
       {
         name: "columns",
-        reason: "unknown-shape"
+        reason: "unknown-shape",
+        required: true,
+        description: "Column descriptors defining the headers and cell rendering for each column."
       },
       {
         name: "rows",
-        reason: "generic-type-parameter"
+        reason: "generic-type-parameter",
+        required: true,
+        description: "Row data. Each entry is read via `column.key` for each column."
       },
       {
         name: "sort",
-        reason: "unknown-shape"
+        reason: "unknown-shape",
+        description: "Bound sort state. When the user activates a sortable header cell, this prop\nis updated with the new `{ column, direction }`. The consumer is responsible\nfor reordering `rows` in response — DataTable does not sort internally.\n\nPass `undefined` initially when no column is sorted; the component will never\nwrite back `undefined` itself (sort always toggles to a column)."
       }
     ]
   }
@@ -82,4 +82,4 @@ export {
   data_table_schema_default as default
 };
 
-//# debugId=EB2487DAED6A414964756E2164756E21
+//# debugId=A7E4284BE69A46ED64756E2164756E21

package/dist/server/components/data-table/data-table.variables.js

@@ -1,43 +1,12 @@
 import { createRequire } from "node:module";
-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 __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
 var __require = /* @__PURE__ */ createRequire(import.meta.url);
 
 // src/components/data-table/data-table.variables.ts
-var variables = [];
+var variables = ["--cinder-data-table-height"];
 var data_table_variables_default = variables;
 export {
   data_table_variables_default as default
 };
 
-//# debugId=5AFB951AE1CC032D64756E2164756E21
+//# debugId=EA6C6410D76BF0C664756E2164756E21

package/dist/server/components/data-table/index.css

@@ -33,7 +33,7 @@
     max-inline-size: 100%;
   }
 
-  .cinder-table-scroll > .cinder-table {
+  .cinder-table-scroll .cinder-table {
     min-inline-size: max-content;
   }
 
@@ -56,13 +56,17 @@
     top: 0;
   }
 
+  .cinder-table[data-cinder-sticky-header]:has(caption) .cinder-table__header {
+    top: var(--cinder-table-caption-height, 0px);
+  }
+
   .cinder-table__header-cell {
     padding-block: var(--cinder-space-2);
     padding-inline: var(--cinder-space-3);
     text-align: left;
     font-weight: var(--cinder-font-medium);
     color: var(--cinder-text-muted);
-    border-bottom: 1px solid var(--cinder-border-muted);
+    border-bottom: 1px solid var(--cinder-border);
     text-wrap: balance;
   }
 
@@ -121,6 +125,20 @@
     z-index: 2;
   }
 
+  @media (forced-colors: active) {
+    .cinder-table__sort-button:focus-visible {
+      outline: var(--cinder-ring-width) solid ButtonText;
+      outline-offset: 2px;
+      box-shadow: none;
+    }
+  }
+
+  @media (hover: hover) {
+    .cinder-table__sort-button:hover {
+      background: var(--cinder-surface-hover);
+    }
+  }
+
   .cinder-table__sort-indicator {
     display: inline-flex;
     color: var(--cinder-text-subtle);
@@ -131,7 +149,7 @@
   }
 
   .cinder-table__sort-indicator[data-cinder-direction="ascending"] .cinder-table__sort-chevron-down, .cinder-table__sort-indicator[data-cinder-direction="descending"] .cinder-table__sort-chevron-up {
-    opacity: .3;
+    opacity: .15;
   }
 
   .cinder-table__row {
@@ -147,7 +165,7 @@
   .cinder-table__cell {
     padding-block: var(--cinder-space-2);
     padding-inline: var(--cinder-space-3);
-    border-bottom: 1px solid var(--cinder-border-muted);
+    border-bottom: 1px solid var(--cinder-border);
   }
 
   .cinder-table__cell[data-cinder-align="center"] {
@@ -179,4 +197,39 @@
   .cinder-data-table.cinder-table-scroll {
     display: block;
   }
+
+  .cinder-data-table[data-cinder-virtualized] {
+    --cinder-data-table-height: 24rem;
+    block-size: var(--cinder-data-table-height, 24rem);
+    overflow: auto;
+    overscroll-behavior: contain;
+    -webkit-overflow-scrolling: touch;
+    contain: layout paint;
+  }
+
+  .cinder-data-table[data-cinder-virtualized] .cinder-table__row[data-cinder-virtual-row] {
+    block-size: var(--_cinder-data-table-row-height, 44px);
+  }
+
+  .cinder-data-table tbody .cinder-table__row:focus-within {
+    background: var(--cinder-surface-hover);
+  }
+
+  .cinder-data-table[data-cinder-virtualized] .cinder-table__row[data-cinder-virtual-row]:focus-visible {
+    outline: var(--cinder-ring-width) solid transparent;
+    box-shadow: var(--_cinder-focus-ring-shadow);
+  }
+
+  @media (forced-colors: active) {
+    .cinder-data-table[data-cinder-virtualized] .cinder-table__row[data-cinder-virtual-row]:focus-visible {
+      outline: var(--cinder-ring-width) solid ButtonText;
+      outline-offset: calc(-1 * var(--cinder-ring-width));
+      box-shadow: none;
+    }
+  }
+
+  .cinder-data-table__virtual-spacer-cell {
+    border: 0;
+    padding: 0;
+  }
 }