@threadlabs/looma 0.2.20 → 0.3.0

package/layout.css

@@ -1,13 +1,16 @@
-/* Unlayered: box-model guarantees that remain safe for host composition. */
-:where(ui-stack, ui-inline, ui-cluster, ui-grid, ui-center, ui-switcher, ui-sidebar, ui-reel, ui-separator),
-:where(ui-stack, ui-inline, ui-cluster, ui-grid, ui-center, ui-switcher, ui-sidebar, ui-reel, ui-separator) *,
-:where(ui-stack, ui-inline, ui-cluster, ui-grid, ui-center, ui-switcher, ui-sidebar, ui-reel, ui-separator) *::before,
-:where(ui-stack, ui-inline, ui-cluster, ui-grid, ui-center, ui-switcher, ui-sidebar, ui-reel, ui-separator) *::after {
+/*
+ * Keep the box model outside `@layer components`: these are composition
+ * guarantees for authored light-DOM children, not themeable component styles.
+ */
+:where(ui-stack, ui-cluster, ui-grid, ui-container, ui-switcher, ui-sidebar, ui-reel, ui-separator),
+:where(ui-stack, ui-cluster, ui-grid, ui-container, ui-switcher, ui-sidebar, ui-reel, ui-separator) *,
+:where(ui-stack, ui-cluster, ui-grid, ui-container, ui-switcher, ui-sidebar, ui-reel, ui-separator) *::before,
+:where(ui-stack, ui-cluster, ui-grid, ui-container, ui-switcher, ui-sidebar, ui-reel, ui-separator) *::after {
   box-sizing: border-box;
 }
 
-:where(ui-stack, ui-inline, ui-cluster, ui-grid, ui-center, ui-switcher, ui-sidebar, ui-reel, ui-separator) {
-  /* Reveal Looma's component layer instead of reverting past it. */
+:where(ui-stack, ui-cluster, ui-grid, ui-container, ui-switcher, ui-sidebar, ui-reel, ui-separator) {
+  /* `revert-layer` exposes `@layer components`; `revert` would skip the author layer entirely. */
   all: revert-layer;
   box-sizing: border-box;
   font-family: var(--ui-font-family-sans);
@@ -16,7 +19,8 @@
   color: var(--ui-text-primary);
 }
 
-:where(ui-stack, ui-inline, ui-cluster, ui-grid, ui-center, ui-switcher, ui-sidebar, ui-reel, ui-separator)[data-ui-inherit-typography] {
+:where(ui-stack, ui-cluster, ui-grid, ui-container, ui-switcher, ui-sidebar, ui-reel, ui-separator)[data-ui-inherit-typography] {
+  /* Consumers opt into surrounding prose styles; isolated component defaults remain the safe default. */
   font-family: inherit;
   font-size: inherit;
   line-height: inherit;
@@ -31,7 +35,7 @@
 }
 
 @layer components {
-  :where(ui-stack, ui-inline, ui-cluster, ui-grid, ui-center, ui-switcher, ui-sidebar, ui-reel, ui-separator) {
+  :where(ui-stack, ui-cluster, ui-grid, ui-container, ui-switcher, ui-sidebar, ui-reel, ui-separator) {
     min-inline-size: 0;
     max-inline-size: 100%;
     margin: 0;
@@ -60,29 +64,28 @@
   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-cluster[gap="l"] { --ui-layout-gap: var(--ui-space-5, 1.5rem); }
+  ui-cluster[gap="xl"] { --ui-layout-gap: var(--ui-space-6, 2rem); }
+  ui-cluster[align="start"] { --ui-layout-align: flex-start; }
+  ui-cluster[align="center"] { --ui-layout-align: center; }
+  ui-cluster[align="end"] { --ui-layout-align: flex-end; }
+  ui-cluster[align="stretch"] { --ui-layout-align: stretch; }
 
   ui-grid {
     --ui-grid-gap: var(--ui-space-4, 1rem);
-    --ui-grid-min: 16rem;
+    --ui-grid-min: 12rem;
     display: grid;
     gap: var(--ui-grid-gap);
     grid-template-columns: repeat(auto-fit, minmax(min(var(--ui-grid-min), 100%), 1fr));
@@ -96,21 +99,21 @@
   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);
+  ui-container {
+    --ui-container-measure: 65ch;
+    --ui-container-gutters: var(--ui-space-4, 1rem);
     display: block;
     inline-size: 100%;
-    max-inline-size: var(--ui-center-measure);
+    max-inline-size: var(--ui-container-measure);
     margin-inline: auto;
-    padding-inline: var(--ui-center-gutters);
+    padding-inline: var(--ui-container-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-container[measure="narrow"] { --ui-container-measure: 45ch; }
+  ui-container[measure="wide"] { --ui-container-measure: 80ch; }
+  ui-container[gutters="s"] { --ui-container-gutters: var(--ui-space-3, 0.75rem); }
+  ui-container[gutters="m"] { --ui-container-gutters: var(--ui-space-4, 1rem); }
+  ui-container[gutters="l"] { --ui-container-gutters: var(--ui-space-5, 1.5rem); }
 
   ui-switcher {
     --ui-switcher-gap: var(--ui-space-4, 1rem);
@@ -125,6 +128,7 @@
   ui-switcher > * {
     min-inline-size: 0;
     flex-grow: 1;
+    /* The large multiplier makes the basis flip as a group at the intrinsic threshold. */
     flex-basis: calc((var(--ui-switcher-threshold) - 100%) * 999);
   }
 
@@ -140,113 +144,6 @@
   ui-switcher[align="center"] { --ui-switcher-align: center; }
   ui-switcher[align="end"] { --ui-switcher-align: flex-end; }
 
-  ui-sidebar {
-    --ui-sidebar-gap: var(--ui-space-4, 1rem);
-    --ui-sidebar-width: 18rem;
-    --ui-sidebar-content-min: 50%;
-    --ui-sidebar-align: stretch;
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--ui-sidebar-gap);
-    align-items: var(--ui-sidebar-align);
-  }
-
-  ui-sidebar > :not([data-ui-sidebar-resizer]) { min-inline-size: 0; }
-  ui-sidebar > :first-child {
-    flex-basis: var(--ui-sidebar-width);
-    flex-grow: 1;
-  }
-  ui-sidebar > :last-child:not([data-ui-sidebar-resizer]),
-  ui-sidebar[resizable] > :nth-last-child(2):not([data-ui-sidebar-resizer]) {
-    flex-basis: 0;
-    flex-grow: 999;
-    min-inline-size: min(var(--ui-sidebar-content-min), 100%);
-  }
-  ui-sidebar[side="end"] > :first-child {
-    flex-basis: 0;
-    flex-grow: 999;
-    min-inline-size: min(var(--ui-sidebar-content-min), 100%);
-  }
-  ui-sidebar[side="end"] > :last-child:not([data-ui-sidebar-resizer]),
-  ui-sidebar[side="end"][resizable] > :nth-last-child(2):not([data-ui-sidebar-resizer]) {
-    flex-basis: var(--ui-sidebar-width);
-    flex-grow: 1;
-    min-inline-size: 0;
-  }
-  ui-sidebar[gap="xs"] { --ui-sidebar-gap: var(--ui-space-2, 0.5rem); }
-  ui-sidebar[gap="s"] { --ui-sidebar-gap: var(--ui-space-3, 0.75rem); }
-  ui-sidebar[gap="m"] { --ui-sidebar-gap: var(--ui-space-4, 1rem); }
-  ui-sidebar[gap="l"] { --ui-sidebar-gap: var(--ui-space-5, 1.5rem); }
-  ui-sidebar[width="narrow"] { --ui-sidebar-width: 14rem; }
-  ui-sidebar[width="wide"] { --ui-sidebar-width: 24rem; }
-  ui-sidebar[align="start"] { --ui-sidebar-align: flex-start; }
-  ui-sidebar[align="center"] { --ui-sidebar-align: center; }
-  ui-sidebar[align="end"] { --ui-sidebar-align: flex-end; }
-  ui-sidebar[resizable] {
-    position: relative;
-    flex-wrap: nowrap;
-  }
-  ui-sidebar[resizable] > :first-child:not([data-ui-sidebar-resizer]) {
-    flex: 0 0 var(--ui-sidebar-width);
-  }
-  ui-sidebar[side="end"][resizable] > :first-child:not([data-ui-sidebar-resizer]) {
-    flex: 1 1 0;
-  }
-  ui-sidebar[side="end"][resizable] > :nth-last-child(2):not([data-ui-sidebar-resizer]) {
-    flex: 0 0 var(--ui-sidebar-width);
-  }
-  ui-sidebar > [data-ui-sidebar-resizer] {
-    position: absolute;
-    z-index: 1;
-    inset-block: 0;
-    inset-inline-start: var(--ui-sidebar-width);
-    inline-size: 8px;
-    min-inline-size: 8px;
-    transform: translateX(-50%);
-    cursor: col-resize;
-    touch-action: none;
-    outline: none;
-  }
-  ui-sidebar[side="end"] > [data-ui-sidebar-resizer] {
-    inset-inline-start: auto;
-    inset-inline-end: var(--ui-sidebar-width);
-    transform: translateX(50%);
-  }
-  ui-sidebar > [data-ui-sidebar-resizer]::after {
-    content: "";
-    position: absolute;
-    inset-block: 0;
-    inset-inline-start: 3px;
-    inline-size: 2px;
-    background: color-mix(in srgb, var(--ui-affordance-guide-color, var(--ui-border-strong)) 45%, transparent);
-    opacity: var(--ui-affordance-guide-opacity, 0.42);
-    transition:
-      background-color var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease),
-      opacity var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease);
-  }
-  ui-sidebar > [data-ui-sidebar-resizer] > [data-ui-guide] {
-    position: absolute;
-    inset-block-start: 50%;
-    inset-inline-start: 50%;
-    inline-size: 6px;
-    block-size: 22px;
-    border: 1px solid var(--ui-border-strong, #c8c8c4);
-    border-radius: var(--ui-radius-round, 999px);
-    background: var(--ui-surface-elevated, #fff);
-    opacity: 0;
-    transform: translate(-50%, -50%);
-    transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease);
-    pointer-events: none;
-  }
-  ui-sidebar > [data-ui-sidebar-resizer]:hover::after,
-  ui-sidebar > [data-ui-sidebar-resizer]:focus-visible::after {
-    background: var(--ui-affordance-direct-color, var(--ui-accent-solid, var(--ui-color-focus, Highlight)));
-    opacity: 1;
-  }
-  ui-sidebar > [data-ui-sidebar-resizer]:is(:hover, :focus-visible) > [data-ui-guide] {
-    opacity: 1;
-  }
-
   ui-reel {
     --ui-reel-gap: var(--ui-space-4, 1rem);
     --ui-reel-item-width: auto;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.2.20",
+  "version": "0.3.0",
   "type": "module",
   "description": "Looma declarative components, responsive layout primitives, a complete editor, and supported Vue adapters.",
   "license": "MIT",
@@ -57,7 +57,8 @@
     },
     "./editor/ui": {
       "types": "./editor/ui.d.ts",
-      "import": "./editor/ui.js"
+      "import": "./editor/ui.js",
+      "default": "./editor/ui.js"
     },
     "./editor/extensions": {
       "types": "./editor/extensions/index.d.ts",
@@ -71,23 +72,29 @@
       "types": "./vue/editor/index.d.ts",
       "import": "./vue/editor/index.js"
     },
+    "./react": {
+      "types": "./react/index.d.ts",
+      "import": "./react/index.js"
+    },
+    "./svelte": {
+      "types": "./svelte/index.d.ts",
+      "import": "./svelte/index.js"
+    },
     "./tokens.css": "./tokens.css",
     "./theme-light.css": "./theme-light.css",
     "./theme-dark.css": "./theme-dark.css",
     "./theme-high-contrast.css": "./theme-high-contrast.css",
     "./layout.css": "./layout.css",
     "./styles.css": "./styles.css",
-    "./editor.css": "./editor.css",
-    "./valibot": {
-      "types": "./dist/valibot.d.ts",
-      "import": "./dist/valibot.js"
-    }
+    "./editor.css": "./editor.css"
   },
   "files": [
     "dist/",
     "layout/",
     "editor/",
     "vue/",
+    "react/",
+    "svelte/",
     "tokens.css",
     "theme-light.css",
     "theme-dark.css",
@@ -104,6 +111,8 @@
     "./editor/*.js",
     "./vue/index.js",
     "./vue/editor/*.js",
+    "./react/index.js",
+    "./svelte/index.js",
     "./*.css"
   ],
   "dependencies": {
@@ -114,8 +123,9 @@
     "@tiptap/core": ">=2 <3",
     "@tiptap/pm": ">=2 <3",
     "@tiptap/vue-3": ">=2 <3",
-    "vue": "^3.5.0",
-    "valibot": "^1.1.0"
+    "react": "^19.0.0",
+    "svelte": "^5.0.0",
+    "vue": "^3.5.0"
   },
   "peerDependenciesMeta": {
     "@tiptap/core": {
@@ -127,10 +137,13 @@
     "@tiptap/vue-3": {
       "optional": true
     },
-    "vue": {
+    "react": {
       "optional": true
     },
-    "valibot": {
+    "svelte": {
+      "optional": true
+    },
+    "vue": {
       "optional": true
     }
   },