@threadlabs/looma 0.1.0

package/layout/index.cjs

@@ -0,0 +1,207 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  registerLayoutPrimitives: () => registerLayoutPrimitives
+});
+module.exports = __toCommonJS(index_exports);
+var ORIENTATION_HORIZONTAL = "horizontal";
+var ORIENTATION_VERTICAL = "vertical";
+function normalizeOrientation(value) {
+  return value === ORIENTATION_VERTICAL ? ORIENTATION_VERTICAL : ORIENTATION_HORIZONTAL;
+}
+if (typeof HTMLElement !== "undefined") {
+  class UILayoutElement extends HTMLElement {
+    getPrimitiveAttribute(name) {
+      return this.getAttribute(name) ?? "";
+    }
+    setPrimitiveAttribute(name, value) {
+      const normalizedValue = value.trim();
+      if (normalizedValue.length === 0) {
+        this.removeAttribute(name);
+        return;
+      }
+      this.setAttribute(name, normalizedValue);
+    }
+  }
+  class UIStackElement extends UILayoutElement {
+    static get observedAttributes() {
+      return ["gap", "align", "justify"];
+    }
+    get gap() {
+      return this.getPrimitiveAttribute("gap");
+    }
+    set gap(value) {
+      this.setPrimitiveAttribute("gap", value);
+    }
+    get align() {
+      return this.getPrimitiveAttribute("align");
+    }
+    set align(value) {
+      this.setPrimitiveAttribute("align", value);
+    }
+    get justify() {
+      return this.getPrimitiveAttribute("justify");
+    }
+    set justify(value) {
+      this.setPrimitiveAttribute("justify", value);
+    }
+  }
+  class UIInlineElement extends UILayoutElement {
+    static get observedAttributes() {
+      return ["gap", "align", "justify", "wrap"];
+    }
+    get gap() {
+      return this.getPrimitiveAttribute("gap");
+    }
+    set gap(value) {
+      this.setPrimitiveAttribute("gap", value);
+    }
+    get align() {
+      return this.getPrimitiveAttribute("align");
+    }
+    set align(value) {
+      this.setPrimitiveAttribute("align", value);
+    }
+    get justify() {
+      return this.getPrimitiveAttribute("justify");
+    }
+    set justify(value) {
+      this.setPrimitiveAttribute("justify", value);
+    }
+    get wrap() {
+      return this.getPrimitiveAttribute("wrap");
+    }
+    set wrap(value) {
+      this.setPrimitiveAttribute("wrap", value);
+    }
+  }
+  class UIClusterElement extends UILayoutElement {
+    static get observedAttributes() {
+      return ["gap", "align", "justify"];
+    }
+    get gap() {
+      return this.getPrimitiveAttribute("gap");
+    }
+    set gap(value) {
+      this.setPrimitiveAttribute("gap", value);
+    }
+    get align() {
+      return this.getPrimitiveAttribute("align");
+    }
+    set align(value) {
+      this.setPrimitiveAttribute("align", value);
+    }
+    get justify() {
+      return this.getPrimitiveAttribute("justify");
+    }
+    set justify(value) {
+      this.setPrimitiveAttribute("justify", value);
+    }
+  }
+  class UIGridElement extends UILayoutElement {
+    static get observedAttributes() {
+      return ["gap", "min"];
+    }
+    get gap() {
+      return this.getPrimitiveAttribute("gap");
+    }
+    set gap(value) {
+      this.setPrimitiveAttribute("gap", value);
+    }
+    get min() {
+      return this.getPrimitiveAttribute("min");
+    }
+    set min(value) {
+      this.setPrimitiveAttribute("min", value);
+    }
+  }
+  class UICenterElement extends UILayoutElement {
+    static get observedAttributes() {
+      return ["measure", "gutters"];
+    }
+    get measure() {
+      return this.getPrimitiveAttribute("measure");
+    }
+    set measure(value) {
+      this.setPrimitiveAttribute("measure", value);
+    }
+    get gutters() {
+      return this.getPrimitiveAttribute("gutters");
+    }
+    set gutters(value) {
+      this.setPrimitiveAttribute("gutters", value);
+    }
+  }
+  class UISeparatorElement extends UILayoutElement {
+    static get observedAttributes() {
+      return ["orientation", "role"];
+    }
+    connectedCallback() {
+      this.ensureDefaults();
+    }
+    get orientation() {
+      return normalizeOrientation(this.getAttribute("orientation"));
+    }
+    set orientation(value) {
+      const normalizedValue = normalizeOrientation(value);
+      this.setPrimitiveAttribute("orientation", normalizedValue);
+      this.syncOrientationAria();
+    }
+    attributeChangedCallback(name) {
+      if (name === "orientation" || name === "role") {
+        this.syncOrientationAria();
+      }
+    }
+    ensureDefaults() {
+      if (!this.hasAttribute("role")) {
+        this.setAttribute("role", "separator");
+      }
+      this.syncOrientationAria();
+    }
+    syncOrientationAria() {
+      if (this.getAttribute("role") !== "separator") {
+        this.removeAttribute("aria-orientation");
+        return;
+      }
+      this.setAttribute("aria-orientation", this.orientation);
+    }
+  }
+  const definitions = [
+    ["ui-stack", UIStackElement],
+    ["ui-inline", UIInlineElement],
+    ["ui-cluster", UIClusterElement],
+    ["ui-grid", UIGridElement],
+    ["ui-center", UICenterElement],
+    ["ui-separator", UISeparatorElement]
+  ];
+  for (const [tag, constructor] of definitions) {
+    if (!customElements.get(tag)) {
+      customElements.define(tag, constructor);
+    }
+  }
+}
+function registerLayoutPrimitives() {
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  registerLayoutPrimitives
+});

package/layout/index.css

@@ -0,0 +1,166 @@
+/* src/layout.css */
+:where(ui-stack, ui-inline, ui-cluster, ui-grid, ui-center, ui-separator),
+:where(ui-stack, ui-inline, ui-cluster, ui-grid, ui-center, ui-separator) *,
+:where(ui-stack, ui-inline, ui-cluster, ui-grid, ui-center, ui-separator) *::before,
+:where(ui-stack, ui-inline, ui-cluster, ui-grid, ui-center, ui-separator) *::after {
+  box-sizing: border-box;
+}
+:where(ui-stack, ui-inline, ui-cluster, ui-grid, ui-center, ui-separator) {
+  all: revert;
+  box-sizing: border-box;
+  margin: 0;
+  font-family: var(--ui-font-family-sans);
+  font-size: var(--ui-font-size-md);
+  line-height: var(--ui-line-height-md);
+  color: var(--ui-text-primary);
+}
+:where(ui-stack, ui-inline, ui-cluster, ui-grid, ui-center, ui-separator)[data-ui-inherit-typography] {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  font-weight: inherit;
+  color: inherit;
+  direction: inherit;
+  writing-mode: inherit;
+  text-orientation: inherit;
+  text-rendering: inherit;
+  font-feature-settings: inherit;
+  font-variation-settings: inherit;
+}
+@layer components {
+  ui-stack {
+    --ui-layout-gap: var(--ui-space-4, 1rem);
+    --ui-layout-align: stretch;
+    --ui-layout-justify: flex-start;
+    display: flex;
+    flex-direction: column;
+    gap: var(--ui-layout-gap);
+    align-items: var(--ui-layout-align);
+    justify-content: var(--ui-layout-justify);
+  }
+  ui-stack[gap=xs] {
+    --ui-layout-gap: var(--ui-space-2, 0.5rem);
+  }
+  ui-stack[gap=s] {
+    --ui-layout-gap: var(--ui-space-3, 0.75rem);
+  }
+  ui-stack[gap=m] {
+    --ui-layout-gap: var(--ui-space-4, 1rem);
+  }
+  ui-stack[gap=l] {
+    --ui-layout-gap: var(--ui-space-5, 1.5rem);
+  }
+  ui-stack[gap=xl] {
+    --ui-layout-gap: var(--ui-space-6, 2rem);
+  }
+  ui-stack[align=start] {
+    --ui-layout-align: flex-start;
+  }
+  ui-stack[align=center] {
+    --ui-layout-align: center;
+  }
+  ui-stack[align=end] {
+    --ui-layout-align: flex-end;
+  }
+  ui-stack[justify=center] {
+    --ui-layout-justify: center;
+  }
+  ui-stack[justify=end] {
+    --ui-layout-justify: flex-end;
+  }
+  ui-stack[justify=between] {
+    --ui-layout-justify: space-between;
+  }
+  ui-inline,
+  ui-cluster {
+    --ui-layout-gap: var(--ui-space-3, 0.75rem);
+    --ui-layout-align: center;
+    --ui-layout-justify: flex-start;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: var(--ui-layout-align);
+    justify-content: var(--ui-layout-justify);
+    gap: var(--ui-layout-gap);
+  }
+  ui-inline[wrap=nowrap] {
+    flex-wrap: nowrap;
+  }
+  ui-inline[gap=xs],
+  ui-cluster[gap=xs] {
+    --ui-layout-gap: var(--ui-space-2, 0.5rem);
+  }
+  ui-inline[gap=s],
+  ui-cluster[gap=s] {
+    --ui-layout-gap: var(--ui-space-3, 0.75rem);
+  }
+  ui-inline[gap=m],
+  ui-cluster[gap=m] {
+    --ui-layout-gap: var(--ui-space-4, 1rem);
+  }
+  ui-grid {
+    --ui-grid-gap: var(--ui-space-4, 1rem);
+    --ui-grid-min: 16rem;
+    display: grid;
+    gap: var(--ui-grid-gap);
+    grid-template-columns: repeat(auto-fit, minmax(var(--ui-grid-min), 1fr));
+  }
+  ui-grid[gap=xs] {
+    --ui-grid-gap: var(--ui-space-2, 0.5rem);
+  }
+  ui-grid[gap=s] {
+    --ui-grid-gap: var(--ui-space-3, 0.75rem);
+  }
+  ui-grid[gap=m] {
+    --ui-grid-gap: var(--ui-space-4, 1rem);
+  }
+  ui-grid[gap=l] {
+    --ui-grid-gap: var(--ui-space-5, 1.5rem);
+  }
+  ui-grid[min=sm] {
+    --ui-grid-min: 12rem;
+  }
+  ui-grid[min=md] {
+    --ui-grid-min: 16rem;
+  }
+  ui-grid[min=lg] {
+    --ui-grid-min: 20rem;
+  }
+  ui-center {
+    --ui-center-measure: 65ch;
+    --ui-center-gutters: var(--ui-space-4, 1rem);
+    display: block;
+    max-inline-size: var(--ui-center-measure);
+    margin-inline: auto;
+    padding-inline: var(--ui-center-gutters);
+  }
+  ui-center[measure=narrow] {
+    --ui-center-measure: 45ch;
+  }
+  ui-center[measure=wide] {
+    --ui-center-measure: 80ch;
+  }
+  ui-center[gutters=s] {
+    --ui-center-gutters: var(--ui-space-3, 0.75rem);
+  }
+  ui-center[gutters=m] {
+    --ui-center-gutters: var(--ui-space-4, 1rem);
+  }
+  ui-center[gutters=l] {
+    --ui-center-gutters: var(--ui-space-5, 1.5rem);
+  }
+  ui-separator {
+    --ui-separator-color: var(--ui-border-default, #d0d5dd);
+    --ui-separator-space: var(--ui-space-4, 1rem);
+    display: block;
+    margin: 0;
+    border: 0;
+    border-block-start: 1px solid var(--ui-separator-color);
+    padding: 0;
+  }
+  ui-separator[orientation=vertical] {
+    inline-size: 1px;
+    block-size: 100%;
+    border-block-start: 0;
+    border-inline-start: 1px solid var(--ui-separator-color);
+  }
+}

package/layout/index.d.cts

@@ -0,0 +1,3 @@
+declare function registerLayoutPrimitives(): void;
+
+export { registerLayoutPrimitives };

package/layout/index.d.ts

@@ -0,0 +1,3 @@
+declare function registerLayoutPrimitives(): void;
+
+export { registerLayoutPrimitives };

package/layout/index.js

@@ -0,0 +1,182 @@
+// src/index.ts
+var ORIENTATION_HORIZONTAL = "horizontal";
+var ORIENTATION_VERTICAL = "vertical";
+function normalizeOrientation(value) {
+  return value === ORIENTATION_VERTICAL ? ORIENTATION_VERTICAL : ORIENTATION_HORIZONTAL;
+}
+if (typeof HTMLElement !== "undefined") {
+  class UILayoutElement extends HTMLElement {
+    getPrimitiveAttribute(name) {
+      return this.getAttribute(name) ?? "";
+    }
+    setPrimitiveAttribute(name, value) {
+      const normalizedValue = value.trim();
+      if (normalizedValue.length === 0) {
+        this.removeAttribute(name);
+        return;
+      }
+      this.setAttribute(name, normalizedValue);
+    }
+  }
+  class UIStackElement extends UILayoutElement {
+    static get observedAttributes() {
+      return ["gap", "align", "justify"];
+    }
+    get gap() {
+      return this.getPrimitiveAttribute("gap");
+    }
+    set gap(value) {
+      this.setPrimitiveAttribute("gap", value);
+    }
+    get align() {
+      return this.getPrimitiveAttribute("align");
+    }
+    set align(value) {
+      this.setPrimitiveAttribute("align", value);
+    }
+    get justify() {
+      return this.getPrimitiveAttribute("justify");
+    }
+    set justify(value) {
+      this.setPrimitiveAttribute("justify", value);
+    }
+  }
+  class UIInlineElement extends UILayoutElement {
+    static get observedAttributes() {
+      return ["gap", "align", "justify", "wrap"];
+    }
+    get gap() {
+      return this.getPrimitiveAttribute("gap");
+    }
+    set gap(value) {
+      this.setPrimitiveAttribute("gap", value);
+    }
+    get align() {
+      return this.getPrimitiveAttribute("align");
+    }
+    set align(value) {
+      this.setPrimitiveAttribute("align", value);
+    }
+    get justify() {
+      return this.getPrimitiveAttribute("justify");
+    }
+    set justify(value) {
+      this.setPrimitiveAttribute("justify", value);
+    }
+    get wrap() {
+      return this.getPrimitiveAttribute("wrap");
+    }
+    set wrap(value) {
+      this.setPrimitiveAttribute("wrap", value);
+    }
+  }
+  class UIClusterElement extends UILayoutElement {
+    static get observedAttributes() {
+      return ["gap", "align", "justify"];
+    }
+    get gap() {
+      return this.getPrimitiveAttribute("gap");
+    }
+    set gap(value) {
+      this.setPrimitiveAttribute("gap", value);
+    }
+    get align() {
+      return this.getPrimitiveAttribute("align");
+    }
+    set align(value) {
+      this.setPrimitiveAttribute("align", value);
+    }
+    get justify() {
+      return this.getPrimitiveAttribute("justify");
+    }
+    set justify(value) {
+      this.setPrimitiveAttribute("justify", value);
+    }
+  }
+  class UIGridElement extends UILayoutElement {
+    static get observedAttributes() {
+      return ["gap", "min"];
+    }
+    get gap() {
+      return this.getPrimitiveAttribute("gap");
+    }
+    set gap(value) {
+      this.setPrimitiveAttribute("gap", value);
+    }
+    get min() {
+      return this.getPrimitiveAttribute("min");
+    }
+    set min(value) {
+      this.setPrimitiveAttribute("min", value);
+    }
+  }
+  class UICenterElement extends UILayoutElement {
+    static get observedAttributes() {
+      return ["measure", "gutters"];
+    }
+    get measure() {
+      return this.getPrimitiveAttribute("measure");
+    }
+    set measure(value) {
+      this.setPrimitiveAttribute("measure", value);
+    }
+    get gutters() {
+      return this.getPrimitiveAttribute("gutters");
+    }
+    set gutters(value) {
+      this.setPrimitiveAttribute("gutters", value);
+    }
+  }
+  class UISeparatorElement extends UILayoutElement {
+    static get observedAttributes() {
+      return ["orientation", "role"];
+    }
+    connectedCallback() {
+      this.ensureDefaults();
+    }
+    get orientation() {
+      return normalizeOrientation(this.getAttribute("orientation"));
+    }
+    set orientation(value) {
+      const normalizedValue = normalizeOrientation(value);
+      this.setPrimitiveAttribute("orientation", normalizedValue);
+      this.syncOrientationAria();
+    }
+    attributeChangedCallback(name) {
+      if (name === "orientation" || name === "role") {
+        this.syncOrientationAria();
+      }
+    }
+    ensureDefaults() {
+      if (!this.hasAttribute("role")) {
+        this.setAttribute("role", "separator");
+      }
+      this.syncOrientationAria();
+    }
+    syncOrientationAria() {
+      if (this.getAttribute("role") !== "separator") {
+        this.removeAttribute("aria-orientation");
+        return;
+      }
+      this.setAttribute("aria-orientation", this.orientation);
+    }
+  }
+  const definitions = [
+    ["ui-stack", UIStackElement],
+    ["ui-inline", UIInlineElement],
+    ["ui-cluster", UIClusterElement],
+    ["ui-grid", UIGridElement],
+    ["ui-center", UICenterElement],
+    ["ui-separator", UISeparatorElement]
+  ];
+  for (const [tag, constructor] of definitions) {
+    if (!customElements.get(tag)) {
+      customElements.define(tag, constructor);
+    }
+  }
+}
+function registerLayoutPrimitives() {
+}
+export {
+  registerLayoutPrimitives
+};

package/layout.css

@@ -0,0 +1,124 @@
+/* Unlayered: isolation contract (hard guarantees). */
+:where(ui-stack, ui-inline, ui-cluster, ui-grid, ui-center, ui-separator),
+:where(ui-stack, ui-inline, ui-cluster, ui-grid, ui-center, ui-separator) *,
+:where(ui-stack, ui-inline, ui-cluster, ui-grid, ui-center, ui-separator) *::before,
+:where(ui-stack, ui-inline, ui-cluster, ui-grid, ui-center, ui-separator) *::after {
+  box-sizing: border-box;
+}
+
+:where(ui-stack, ui-inline, ui-cluster, ui-grid, ui-center, ui-separator) {
+  all: revert;
+  box-sizing: border-box;
+  margin: 0;
+  font-family: var(--ui-font-family-sans);
+  font-size: var(--ui-font-size-md);
+  line-height: var(--ui-line-height-md);
+  color: var(--ui-text-primary);
+}
+
+:where(ui-stack, ui-inline, ui-cluster, ui-grid, ui-center, ui-separator)[data-ui-inherit-typography] {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  font-weight: inherit;
+  color: inherit;
+  direction: inherit;
+  writing-mode: inherit;
+  text-orientation: inherit;
+  text-rendering: inherit;
+  font-feature-settings: inherit;
+  font-variation-settings: inherit;
+}
+
+@layer components {
+  ui-stack {
+    --ui-layout-gap: var(--ui-space-4, 1rem);
+    --ui-layout-align: stretch;
+    --ui-layout-justify: flex-start;
+    display: flex;
+    flex-direction: column;
+    gap: var(--ui-layout-gap);
+    align-items: var(--ui-layout-align);
+    justify-content: var(--ui-layout-justify);
+  }
+
+  ui-stack[gap="xs"] { --ui-layout-gap: var(--ui-space-2, 0.5rem); }
+  ui-stack[gap="s"] { --ui-layout-gap: var(--ui-space-3, 0.75rem); }
+  ui-stack[gap="m"] { --ui-layout-gap: var(--ui-space-4, 1rem); }
+  ui-stack[gap="l"] { --ui-layout-gap: var(--ui-space-5, 1.5rem); }
+  ui-stack[gap="xl"] { --ui-layout-gap: var(--ui-space-6, 2rem); }
+  ui-stack[align="start"] { --ui-layout-align: flex-start; }
+  ui-stack[align="center"] { --ui-layout-align: center; }
+  ui-stack[align="end"] { --ui-layout-align: flex-end; }
+  ui-stack[justify="center"] { --ui-layout-justify: center; }
+  ui-stack[justify="end"] { --ui-layout-justify: flex-end; }
+  ui-stack[justify="between"] { --ui-layout-justify: space-between; }
+
+  ui-inline,
+  ui-cluster {
+    --ui-layout-gap: var(--ui-space-3, 0.75rem);
+    --ui-layout-align: center;
+    --ui-layout-justify: flex-start;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: var(--ui-layout-align);
+    justify-content: var(--ui-layout-justify);
+    gap: var(--ui-layout-gap);
+  }
+
+  ui-inline[wrap="nowrap"] { flex-wrap: nowrap; }
+  ui-inline[gap="xs"],
+  ui-cluster[gap="xs"] { --ui-layout-gap: var(--ui-space-2, 0.5rem); }
+  ui-inline[gap="s"],
+  ui-cluster[gap="s"] { --ui-layout-gap: var(--ui-space-3, 0.75rem); }
+  ui-inline[gap="m"],
+  ui-cluster[gap="m"] { --ui-layout-gap: var(--ui-space-4, 1rem); }
+
+  ui-grid {
+    --ui-grid-gap: var(--ui-space-4, 1rem);
+    --ui-grid-min: 16rem;
+    display: grid;
+    gap: var(--ui-grid-gap);
+    grid-template-columns: repeat(auto-fit, minmax(var(--ui-grid-min), 1fr));
+  }
+
+  ui-grid[gap="xs"] { --ui-grid-gap: var(--ui-space-2, 0.5rem); }
+  ui-grid[gap="s"] { --ui-grid-gap: var(--ui-space-3, 0.75rem); }
+  ui-grid[gap="m"] { --ui-grid-gap: var(--ui-space-4, 1rem); }
+  ui-grid[gap="l"] { --ui-grid-gap: var(--ui-space-5, 1.5rem); }
+  ui-grid[min="sm"] { --ui-grid-min: 12rem; }
+  ui-grid[min="md"] { --ui-grid-min: 16rem; }
+  ui-grid[min="lg"] { --ui-grid-min: 20rem; }
+
+  ui-center {
+    --ui-center-measure: 65ch;
+    --ui-center-gutters: var(--ui-space-4, 1rem);
+    display: block;
+    max-inline-size: var(--ui-center-measure);
+    margin-inline: auto;
+    padding-inline: var(--ui-center-gutters);
+  }
+
+  ui-center[measure="narrow"] { --ui-center-measure: 45ch; }
+  ui-center[measure="wide"] { --ui-center-measure: 80ch; }
+  ui-center[gutters="s"] { --ui-center-gutters: var(--ui-space-3, 0.75rem); }
+  ui-center[gutters="m"] { --ui-center-gutters: var(--ui-space-4, 1rem); }
+  ui-center[gutters="l"] { --ui-center-gutters: var(--ui-space-5, 1.5rem); }
+
+  ui-separator {
+    --ui-separator-color: var(--ui-border-default, #d0d5dd);
+    --ui-separator-space: var(--ui-space-4, 1rem);
+    display: block;
+    margin: 0;
+    border: 0;
+    border-block-start: 1px solid var(--ui-separator-color);
+    padding: 0;
+  }
+
+  ui-separator[orientation="vertical"] {
+    inline-size: 1px;
+    block-size: 100%;
+    border-block-start: 0;
+    border-inline-start: 1px solid var(--ui-separator-color);
+  }
+}

package/loader/cdn.js

@@ -0,0 +1 @@
+module.exports = require('../dist/cjs/loader.cjs.js');

package/loader/index.cjs.js

@@ -0,0 +1 @@
+module.exports = require('../dist/cjs/loader.cjs.js');