@ecoma-io/loom 0.1.1 → 0.3.0

package/dist/packages/primitives/window-controls/src/WindowControls.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,124 @@
+import { useLabels } from "../../../labels/src/labels.js";
+import "../../../labels/src/index.js";
+import { createCommentVNode, createElementBlock, createElementVNode, defineComponent, openBlock, unref } from "vue";
+//#region packages/primitives/window-controls/src/WindowControls.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	key: 0,
+	class: "flex h-full items-stretch",
+	style: { "-webkit-app-region": "no-drag" }
+};
+var _hoisted_2 = ["aria-label"];
+var _hoisted_3 = ["aria-label"];
+var _hoisted_4 = {
+	key: 0,
+	width: "10",
+	height: "10",
+	viewBox: "0 0 10 10",
+	"aria-hidden": "true"
+};
+var _hoisted_5 = {
+	key: 1,
+	width: "10",
+	height: "10",
+	viewBox: "0 0 10 10",
+	"aria-hidden": "true"
+};
+var _hoisted_6 = ["aria-label"];
+/**
+
+/**
+* Loom's English, co-located with the component so it tree-shakes with it, and
+* exported so a host can build a partial vocabulary against the real thing.
+*/
+var WINDOW_CONTROLS_LABELS = {
+	minimize: "Minimize",
+	maximize: "Maximize",
+	restore: "Restore",
+	close: "Close"
+};
+var WindowControls_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "WindowControls",
+	props: {
+		platform: { default: "windows" },
+		isMaximized: {
+			type: Boolean,
+			default: false
+		},
+		labels: {}
+	},
+	emits: [
+		"minimize",
+		"maximize",
+		"close"
+	],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const text = useLabels("windowControls", WINDOW_CONTROLS_LABELS, () => props.labels);
+		return (_ctx, _cache) => {
+			return __props.platform !== "macos" ? (openBlock(), createElementBlock("div", _hoisted_1, [
+				createElementVNode("button", {
+					type: "button",
+					class: "flex w-11 items-center justify-center text-muted-foreground transition-colors duration-fast ease-out hover:bg-subtle hover:text-foreground active:brightness-90 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring",
+					"aria-label": unref(text).minimize,
+					"data-testid": "win-minimize",
+					onClick: _cache[0] || (_cache[0] = ($event) => emit("minimize"))
+				}, [..._cache[3] || (_cache[3] = [createElementVNode("svg", {
+					width: "10",
+					height: "10",
+					viewBox: "0 0 10 10",
+					"aria-hidden": "true"
+				}, [createElementVNode("rect", {
+					y: "4.5",
+					width: "10",
+					height: "1",
+					fill: "currentColor"
+				})], -1)])], 8, _hoisted_2),
+				createElementVNode("button", {
+					type: "button",
+					class: "flex w-11 items-center justify-center text-muted-foreground transition-colors duration-fast ease-out hover:bg-subtle hover:text-foreground active:brightness-90 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring",
+					"aria-label": __props.isMaximized ? unref(text).restore : unref(text).maximize,
+					"data-testid": "win-maximize",
+					onClick: _cache[1] || (_cache[1] = ($event) => emit("maximize"))
+				}, [!__props.isMaximized ? (openBlock(), createElementBlock("svg", _hoisted_4, [..._cache[4] || (_cache[4] = [createElementVNode("rect", {
+					x: "0.5",
+					y: "0.5",
+					width: "9",
+					height: "9",
+					fill: "none",
+					stroke: "currentColor"
+				}, null, -1)])])) : (openBlock(), createElementBlock("svg", _hoisted_5, [..._cache[5] || (_cache[5] = [createElementVNode("rect", {
+					x: "0.5",
+					y: "2.5",
+					width: "7",
+					height: "7",
+					fill: "none",
+					stroke: "currentColor"
+				}, null, -1), createElementVNode("path", {
+					d: "M2.5 2.5 V0.5 H9.5 V7.5 H7.5",
+					fill: "none",
+					stroke: "currentColor"
+				}, null, -1)])]))], 8, _hoisted_3),
+				createElementVNode("button", {
+					type: "button",
+					class: "flex w-11 items-center justify-center text-muted-foreground transition-colors duration-fast ease-out hover:bg-destructive hover:text-destructive-foreground active:brightness-90 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring",
+					"aria-label": unref(text).close,
+					"data-testid": "win-close",
+					onClick: _cache[2] || (_cache[2] = ($event) => emit("close"))
+				}, [..._cache[6] || (_cache[6] = [createElementVNode("svg", {
+					width: "10",
+					height: "10",
+					viewBox: "0 0 10 10",
+					"aria-hidden": "true"
+				}, [createElementVNode("path", {
+					d: "M0 0 L10 10 M10 0 L0 10",
+					stroke: "currentColor"
+				})], -1)])], 8, _hoisted_6)
+			])) : createCommentVNode("", true);
+		};
+	}
+});
+//#endregion
+export { WINDOW_CONTROLS_LABELS, WindowControls_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=WindowControls.vue_vue_type_script_setup_true_lang.js.map

package/dist/packages/primitives/window-controls/src/WindowControls.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WindowControls.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../packages/primitives/window-controls/src/WindowControls.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { WindowControlsLabels } from \"@ecoma-io/loom-labels\";\n/**\n * WindowControls — the minimize / maximize / close cluster for a frameless\n * (custom-chrome) window. Presentational only: it emits intents; the host wires\n * them to the platform (the desktop shell's window bridge). Windows-style layout —\n * on macOS the OS draws native traffic-lights, so hide this there.\n *\n * `platform` tells the cluster whether to render at all: on macOS the operating\n * system owns the traffic-light buttons, so a second set drawn by Loom would be\n * redundant and confusing. The host decides which platform it is on — Loom never\n * sniffs the OS at runtime, because a Tauri or Electron host already knows its\n * platform and a PWA has no native window controls to compete with.\n *\n * The close button is the one place `destructive` is allowed without a confirm:\n * OS window-close is an expected, reversible-by-reopen affordance.\n */\n\n/** The desktop platform that owns the window chrome. */\nexport type WindowPlatform = \"windows\" | \"macos\" | \"linux\";\n\n/**\n\n/**\n * Loom's English, co-located with the component so it tree-shakes with it, and\n * exported so a host can build a partial vocabulary against the real thing.\n */\nexport const WINDOW_CONTROLS_LABELS: WindowControlsLabels = {\n  minimize: \"Minimize\",\n  maximize: \"Maximize\",\n  restore: \"Restore\",\n  close: \"Close\",\n};\n</script>\n\n<script setup lang=\"ts\">\nimport { useLabels, type LabelOverrides } from \"@ecoma-io/loom-labels\";\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * The desktop platform the window is running on. On macOS the OS draws its\n     * own traffic-light buttons, so this cluster renders nothing there. The host\n     * decides — Loom does not sniff the OS, because the host already knows its\n     * platform and a PWA has no native controls to avoid.\n     */\n    platform?: WindowPlatform;\n    /** Swaps the middle button between its Maximize and Restore glyph and label. */\n    isMaximized?: boolean;\n    /**\n     * Names for the three buttons, as any subset of `WindowControlsLabels` —\n     * the rest stay as the host's `provideLoomLabels` vocabulary left them, and\n     * then as Loom's English.\n     *\n     * This took a whole object before the seam existed, which meant a host that\n     * wanted one word in their own language had to restate the other three in\n     * English and keep them in step by hand.\n     */\n    labels?: LabelOverrides<WindowControlsLabels>;\n  }>(),\n  { platform: \"windows\", isMaximized: false },\n);\n\nconst emit = defineEmits<{\n  (e: \"minimize\"): void;\n  (e: \"maximize\"): void;\n  (e: \"close\"): void;\n}>();\n\n// `text`, not `labels`: the prop of that name is one of the three sources this\n// resolves, and a template reading the raw prop would be reading the overrides\n// rather than the answer.\nconst text = useLabels(\"windowControls\", WINDOW_CONTROLS_LABELS, () => props.labels);\n</script>\n\n<template>\n  <!-- On macOS the OS owns the traffic-light buttons; rendering a second set\n       would be redundant. The host can also choose \"linux\" if their desktop\n       environment handles window buttons natively. -->\n  <div\n    v-if=\"platform !== 'macos'\"\n    class=\"flex h-full items-stretch\"\n    style=\"-webkit-app-region: no-drag\"\n  >\n    <button\n      type=\"button\"\n      class=\"flex w-11 items-center justify-center text-muted-foreground transition-colors duration-fast ease-out hover:bg-subtle hover:text-foreground active:brightness-90 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring\"\n      :aria-label=\"text.minimize\"\n      data-testid=\"win-minimize\"\n      @click=\"emit('minimize')\"\n    >\n      <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n        <rect y=\"4.5\" width=\"10\" height=\"1\" fill=\"currentColor\" />\n      </svg>\n    </button>\n\n    <button\n      type=\"button\"\n      class=\"flex w-11 items-center justify-center text-muted-foreground transition-colors duration-fast ease-out hover:bg-subtle hover:text-foreground active:brightness-90 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring\"\n      :aria-label=\"isMaximized ? text.restore : text.maximize\"\n      data-testid=\"win-maximize\"\n      @click=\"emit('maximize')\"\n    >\n      <svg v-if=\"!isMaximized\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n        <rect x=\"0.5\" y=\"0.5\" width=\"9\" height=\"9\" fill=\"none\" stroke=\"currentColor\" />\n      </svg>\n      <svg v-else width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n        <rect x=\"0.5\" y=\"2.5\" width=\"7\" height=\"7\" fill=\"none\" stroke=\"currentColor\" />\n        <path d=\"M2.5 2.5 V0.5 H9.5 V7.5 H7.5\" fill=\"none\" stroke=\"currentColor\" />\n      </svg>\n    </button>\n\n    <button\n      type=\"button\"\n      class=\"flex w-11 items-center justify-center text-muted-foreground transition-colors duration-fast ease-out hover:bg-destructive hover:text-destructive-foreground active:brightness-90 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring\"\n      :aria-label=\"text.close\"\n      data-testid=\"win-close\"\n      @click=\"emit('close')\"\n    >\n      <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n        <path d=\"M0 0 L10 10 M10 0 L0 10\" stroke=\"currentColor\" />\n      </svg>\n    </button>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA,IAAa,yBAA+C;CAC1D,UAAU;CACV,UAAU;CACV,SAAS;CACT,OAAO;AACT;;;;;;;;;;;;;;;;;EAMA,MAAM,QAAQ;EAyBd,MAAM,OAAO;EASb,MAAM,OAAO,UAAU,kBAAkB,8BAA8B,MAAM,MAAM;;GAQzE,OAAA,QAAA,aAAQ,WADhB,UAAA,GAAA,mBA4CM,OA5CN,YA4CM;IAvCJ,mBAUS,UAAA;KATP,MAAK;KACL,OAAM;KACL,cAAY,MAAA,IAAA,CAAI,CAAC;KAClB,eAAY;KACX,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,UAAA;IAEZ,GAAA,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,mBAEM,OAAA;KAFD,OAAM;KAAK,QAAO;KAAK,SAAQ;KAAY,eAAY;IAC1D,GAAA,CAAA,mBAA0D,QAAA;KAApD,GAAE;KAAM,OAAM;KAAK,QAAO;KAAI,MAAK;;IAI7C,mBAcS,UAAA;KAbP,MAAK;KACL,OAAM;KACL,cAAY,QAAA,cAAc,MAAA,IAAA,CAAI,CAAC,UAAU,MAAA,IAAA,CAAI,CAAC;KAC/C,eAAY;KACX,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,UAAA;IAEA,GAAA,CAAA,CAAA,QAAA,eAAZ,UAAA,GAAA,mBAEM,OAFN,YAEM,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CADJ,mBAA+E,QAAA;KAAzE,GAAE;KAAM,GAAE;KAAM,OAAM;KAAI,QAAO;KAAI,MAAK;KAAO,QAAO;IAEhE,GAAA,MAAA,EAAA,CAAA,EAAA,CAAA,MAAA,UAAA,GAAA,mBAGM,OAHN,YAGM,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAFJ,mBAA+E,QAAA;KAAzE,GAAE;KAAM,GAAE;KAAM,OAAM;KAAI,QAAO;KAAI,MAAK;KAAO,QAAO;IAC9D,GAAA,MAAA,EAAA,GAAA,mBAA2E,QAAA;KAArE,GAAE;KAA+B,MAAK;KAAO,QAAO;;IAI9D,mBAUS,UAAA;KATP,MAAK;KACL,OAAM;KACL,cAAY,MAAA,IAAA,CAAI,CAAC;KAClB,eAAY;KACX,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,OAAA;IAEZ,GAAA,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,mBAEM,OAAA;KAFD,OAAM;KAAK,QAAO;KAAK,SAAQ;KAAY,eAAY;IAC1D,GAAA,CAAA,mBAA0D,QAAA;KAApD,GAAE;KAA0B,QAAO"}

package/dist/packages/primitives/window-controls/src/index.d.ts

@@ -0,0 +1,4 @@
+export { default, WINDOW_CONTROLS_LABELS } from "./WindowControls.vue";
+export type { WindowPlatform } from "./WindowControls.vue";
+export type { WindowControlsLabels } from "@ecoma-io/loom-labels";
+//# sourceMappingURL=index.d.ts.map

package/dist/packages/primitives/window-controls/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../packages/primitives/window-controls/src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AACvE,YAAY,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAC3D,YAAY,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC"}

package/dist/packages/primitives/window-controls/src/index.js

@@ -0,0 +1,3 @@
+import { WINDOW_CONTROLS_LABELS } from "./WindowControls.vue_vue_type_script_setup_true_lang.js";
+import WindowControls_default from "./WindowControls.js";
+export { WINDOW_CONTROLS_LABELS, WindowControls_default as default };

package/dist/styles/global.css

@@ -38,6 +38,7 @@
   }
 
   html {
+    color-scheme: light dark;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     text-rendering: optimizeLegibility;
@@ -69,6 +70,56 @@
   font-family: var(--font-mono);
 }
 
+/* ---- Vendor corrections ----------------------------------------------------
+ * Rules that exist only because a dependency renders something Loom cannot
+ * reach from its own markup. Each one is coupled to that dependency's DOM, so
+ * each names what it couples to and is pinned by an end-to-end test.
+ *
+ * `StepperRoot` renders its own position announcement — "Step 3 of 5" — as a
+ * text node inside its render function. There is no prop, no slot and no
+ * attribute for it, so it is the one string in this library that a binding on
+ * Loom's side cannot replace, and it is English however the host is localised.
+ * `Stepper.vue` renders a translatable one beside it and this takes Reka's out
+ * of the accessibility tree, leaving exactly one region to announce a step
+ * change instead of two saying it in two languages.
+ *
+ * `display: none` rather than `aria-hidden="true"`, and the difference is not
+ * stylistic. `aria-hidden` on an element that is *already* a live region is not
+ * something the ARIA specification settles — implementations differ on whether
+ * a region that was live at announcement time is silenced by it — and a fix
+ * whose correctness cannot be checked without a screen reader on every platform
+ * is not a fix. Removal from the box tree is unambiguous: an element that
+ * generates no box is in no accessibility tree, so nothing announces it.
+ *
+ * Scoped to `[data-loom-stepper]`, so a host mounting Reka's Stepper directly
+ * keeps its own behaviour. `:not([data-loom-live])` is what spares Loom's — the
+ * two are told apart by what Loom marked, not by which came first, so neither
+ * a change in Reka's render order nor one in Loom's can silence the wrong one. */
+[data-loom-stepper] > [role="status"]:not([data-loom-live]) {
+  display: none;
+}
+
+/* ---- PWA window controls overlay ------------------------------------------
+ * When a PWA is installed and the `window-controls-overlay` feature is visible,
+ * the browser draws native minimize/maximize/close buttons over the app's title
+ * bar. The app must leave space for them. This is a PWA concern (not Electron
+ * or Tauri, which handle their own chrome), and it is CSS-only — no JavaScript
+ * runtime dependency.
+ *
+ * The overlay region is exposed through `env(titlebar-area-x)` and friends.
+ * The `[data-loom-titlebar]` attribute is set by TitleBar, which knows its own
+ * layout. When the overlay is active, the brand cluster's left padding expands
+ * to clear the native controls on the left edge (same corner as macOS), and
+ * the drag region continues to work over the full bar width. */
+@supports (window-controls-overlay: visible) {
+  [data-loom-titlebar] {
+    /* Narrow the drag spacer so the title text is not pushed too far right.
+     * The brand cluster already handles its own left offset via the platform
+     * prop; this rule is for PWA installs where the host did not set macOS. */
+    padding-left: env(titlebar-area-x, 0px);
+  }
+}
+
 /* ---- The motion keyframe library ------------------------------------------
  * Named and reusable; `theme.css` maps each to an `animate-*` utility. All of
  * them are short and purposeful, and nothing loops for decoration except the
@@ -109,36 +160,84 @@
   }
 }
 
-@keyframes shimmer {
+/* ---- The exits. Each mirrors the entrance above it, and the pairing is the
+ * point: a surface that rose 4px on the way in falls 4px on the way out rather
+ * than dissolving in place, so the eye reads one gesture reversed instead of
+ * two unrelated ones. `theme.css` carries the timing argument for why they are
+ * not simply the entrances run backwards. */
+
+@keyframes fade-out {
   from {
-    background-position: -180% 0;
+    opacity: 1;
   }
   to {
-    background-position: 180% 0;
+    opacity: 0;
+  }
+}
+
+@keyframes fade-fall {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+}
+
+@keyframes scale-out {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.97);
+  }
+}
+
+/* An edge-anchored panel leaving along its own axis.
+ *
+ * These animate `translate`, not `transform`, and the distinction is the whole
+ * reason they are usable: Reka writes a live swipe onto a drawer as `transform`
+ * and leaves the rendering to the component, so a keyframe on `transform` would
+ * overwrite a gesture mid-drag. On `translate` the two properties compose, the
+ * same way the entry `@starting-style` transition already does.
+ *
+ * Only the `to` frame is declared. The implicit `from` is the element's own
+ * computed value, so a panel that is already part-way out under a finger leaves
+ * from where it actually sits rather than snapping back to the origin first. */
+@keyframes slide-out-to-left {
+  to {
+    translate: -100% 0;
   }
 }
 
-/* Conduct — "an agent is working": the weft's shuttle beat, a pulse keeping
- * time while the thread is carried across. This is Force 2's motion voice. */
-@keyframes conduct {
-  0%,
-  100% {
-    box-shadow: 0 0 0 0 transparent;
+@keyframes slide-out-to-right {
+  to {
+    translate: 100% 0;
   }
-  50% {
-    box-shadow: 0 0 0 4px color-mix(in oklab, var(--color-agent) 18%, transparent);
+}
+
+@keyframes slide-out-to-top {
+  to {
+    translate: 0 -100%;
   }
 }
 
-/* Seam-flow — a live seam: the warp↔weft boundary drifts while a human↔agent
- * collaboration is running. Apply to a `bg-seam` element with
- * `background-size: 200% 100%`, and stop it once the work settles. */
-@keyframes seam-flow {
+@keyframes slide-out-to-bottom {
+  to {
+    translate: 0 100%;
+  }
+}
+
+@keyframes shimmer {
   from {
-    background-position: 0% 0;
+    background-position: -180% 0;
   }
   to {
-    background-position: -200% 0;
+    background-position: 180% 0;
   }
 }