@vireo-ai/trellis-ui 0.1.53 → 0.1.55

package/README.md

@@ -1 +1,23 @@
-# Trellis UI
+# Trellis UI
+
+## Sortable programmatic API
+
+Sortable state belongs to the Alpine runtime that registered the capability. In Alpine expressions, use
+`$ui.sortable`. Application modules can use the same registered service through `ui.sortable` after the Sortable
+capability has loaded:
+
+```ts
+import {ui} from "@vireo-ai/trellis-ui";
+
+ui.sortable.moveBefore({
+    scope: "board",
+    sourceId: "a",
+    anchorId: "c",
+    destinationGroupId: "doing",
+});
+```
+
+The former named `sortable` export has been removed. Replace calls on that shared singleton with `$ui.sortable` or
+`ui.sortable`. If you manually register the directive, capture the registry returned by
+`registerSortableDirective(Alpine)`. `createSortableRegistry()` creates a standalone registry; it does not control
+groups registered by the directive.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vireo-ai/trellis-ui",
-  "version": "0.1.53",
+  "version": "0.1.55",
   "type": "module",
   "description": "Django-native UI toolkit for building realtime and interactive web apps.",
   "license": "MIT",
@@ -74,32 +74,32 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@atlaskit/pragmatic-drag-and-drop": "^2.0.1",
-    "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^3.0.0",
-    "@atlaskit/pragmatic-drag-and-drop-live-region": "^2.0.0",
-    "@floating-ui/dom": "^1.6.13",
+    "@atlaskit/pragmatic-drag-and-drop": "^2.0.2",
+    "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^3.2.0",
+    "@atlaskit/pragmatic-drag-and-drop-live-region": "^2.1.0",
+    "@floating-ui/dom": "^1.8.0",
     "@types/alpinejs": "^3.13.11",
     "cally": "^0.9.2",
     "clsx": "^2.1.1",
-    "motion": "^12.42.0"
+    "motion": "^12.43.0"
   },
   "peerDependencies": {
     "alpinejs": "^3.14.8"
   },
   "devDependencies": {
-    "@axe-core/playwright": "^4.11.3",
-    "@microsoft/api-extractor": "^7.58.9",
-    "@microsoft/api-extractor-model": "^7.33.8",
-    "@playwright/test": "^1.61.0",
-    "@tailwindcss/cli": "^4.0.0",
-    "@tailwindcss/vite": "^4.3.2",
-    "alpinejs": "^3.14.8",
-    "@types/node": "^25.9.3",
+    "@axe-core/playwright": "^4.13.0",
+    "@microsoft/api-extractor": "^7.59.1",
+    "@microsoft/api-extractor-model": "^7.33.12",
+    "@playwright/test": "^1.63.0",
+    "@tailwindcss/cli": "^4.3.3",
+    "@tailwindcss/vite": "^4.3.3",
+    "@types/node": "^25.9.8",
+    "alpinejs": "^3.17.4",
     "jsdom": "^29.1.1",
-    "tailwindcss": "^4.0.0",
+    "tailwindcss": "^4.3.3",
     "typescript": "^6.0.3",
-    "vite": "^8.0.16",
-    "vitest": "^4.1.9"
+    "vite": "^8.3.0",
+    "vitest": "^4.1.11"
   },
   "scripts": {
     "generate:component-entries": "node scripts/generate_component_entries.mjs",
@@ -107,28 +107,28 @@
     "check:runtime-boundary": "node scripts/generate_asset_registry.mjs --check && node scripts/check_runtime_boundary.mjs",
     "verify:packed-consumer": "node scripts/verify_packed_consumer.mjs",
     "typecheck": "pnpm run generate:component-entries && tsc --noEmit",
-    "test:unit": "pnpm run generate:component-entries && vitest run --no-file-parallelism",
+    "test:unit": "pnpm run generate:component-entries && vitest run --configLoader runner --no-file-parallelism",
     "test:python": "uv run pytest tests/server",
     "test:browser": "playwright test",
     "test": "pnpm run test:unit && pnpm run test:python && pnpm run test:browser",
-    "test:watch": "pnpm run generate:component-entries && vitest",
+    "test:watch": "pnpm run generate:component-entries && vitest --configLoader runner",
     "trellis": "node packages/theme-engine/dist/cli.js",
     "prek": "uv run prek",
     "clean:types": "node -e \"require('node:fs').rmSync('packages/client/types', { recursive: true, force: true })\"",
     "build:theme": "pnpm --filter @vireo-ai/trellis-theme-engine run build && node packages/theme-engine/scripts/generate-default-css.mjs && node packages/theme-engine/scripts/generate-theme-knobs.mjs",
     "build:docs-theme": "pnpm trellis theme build docs/trellis/themes/default/theme.json",
     "build:sources": "pnpm run build:theme && pnpm run build:manifests",
-    "build:manifests": "vite build --config vite.manifests.config.ts && python3 scripts/generate_ui_events.py",
+    "build:manifests": "vite build --config vite.manifests.config.ts --configLoader runner && python3 scripts/generate_ui_events.py",
     "build:runtime-docs": "pnpm run build:manifests && pnpm run build:types && pnpm run generate:runtime-docs",
-    "generate:runtime-docs": "vite build --config vite.runtime-docs.config.ts && api-extractor run --local && node scripts/generate_component_runtime_docs.mjs",
+    "generate:runtime-docs": "vite build --config vite.runtime-docs.config.ts --configLoader runner && api-extractor run --local && node scripts/generate_component_runtime_docs.mjs",
     "build:types": "pnpm run generate:component-entries && pnpm run clean:types && tsc -p tsconfig.build.json && node scripts/rewrite_declaration_aliases.mjs",
-    "build:js": "pnpm run generate:component-entries && vite build && node scripts/copy_minified_js_alias.mjs && vite build --config vite.esm.config.ts && node scripts/generate_asset_registry.mjs && pnpm run analyze:runtime && pnpm run build:types",
+    "build:js": "pnpm run generate:component-entries && vite build --configLoader runner && node scripts/copy_minified_js_alias.mjs && vite build --config vite.esm.config.ts --configLoader runner && node scripts/generate_asset_registry.mjs && pnpm run analyze:runtime && pnpm run build:types",
     "build:css": "pnpm run build:sources && tailwindcss -i ./packages/client/src/styles/static.css -o ./packages/server/trellis_ui/static/trellis_ui/assets/css/trellis.css && tailwindcss -i ./packages/client/src/styles/static.css -o ./packages/server/trellis_ui/static/trellis_ui/assets/css/trellis.min.css --minify",
     "build:package": "pnpm run build:css && pnpm run build:js",
     "build:docs": "pnpm --dir docs run build",
     "build": "pnpm run build:package && pnpm run build:docs",
     "check": "pnpm run build:package && pnpm run generate:runtime-docs && pnpm run typecheck && pnpm test",
-    "check:packages": "pnpm run check:runtime-boundary && pnpm run verify:packed-consumer && uv build --sdist --wheel",
+    "check:packages": "pnpm --filter @vireo-ai/trellis-theme-engine run verify:package && pnpm run check:runtime-boundary && pnpm run verify:packed-consumer && uv build --sdist --wheel",
     "check:release": "pnpm run check && pnpm run check:packages",
     "release": "node scripts/release.mjs",
     "publish:npm": "pnpm run check:release && pnpm publish dist/trellis-ui.tgz --access public --ignore-scripts",

package/packages/client/src/components/keybinding/styles.css

@@ -1,14 +1,30 @@
 @layer components {
   [data-ui-keybinding-key] {
+    font: inherit;
+  }
+
+  [data-ui-keybinding]:not([data-presentation="plain"]) > [data-ui-keybinding-key] {
+    height: var(--spacing-keybinding-key);
+    min-width: var(--spacing-keybinding-key);
+    padding-inline: var(--spacing-1);
+    border-radius: var(--radius-control-md);
+    line-height: 1;
     box-shadow:
       inset 0 0 0 var(--border-width-edge-control)
-      color-mix(in oklab, currentColor var(--label-ink-emphasis), transparent);
+      var(--ui-keybinding-edge, color-mix(in oklab, currentColor var(--label-ink-emphasis), transparent));
+  }
+
+  [data-ui-keybinding]:not([data-presentation="plain"]) > [data-ui-keybinding-separator] {
+    opacity: 0.7;
   }
 
   [data-ui-keybinding-key][data-pressed] {
     background-color: var(--color-interaction-pressed);
+  }
+
+  [data-ui-keybinding]:not([data-presentation="plain"]) > [data-ui-keybinding-key][data-pressed] {
     box-shadow:
       inset 0 0 0 var(--border-width-edge-control)
-      currentColor;
+      var(--ui-keybinding-edge-pressed, currentColor);
   }
 }

package/packages/client/src/components/link/styles.css

@@ -0,0 +1,42 @@
+@layer components {
+  [data-ui-link] {
+    --ui-link-text-muted: var(--ui-surface-ink-muted);
+
+    color: var(--ui-intent-text);
+    text-decoration: none;
+  }
+
+  [data-ui-link][data-color="accent"] {
+    --ui-link-text-muted: var(--ui-intent-soft-ink-muted);
+  }
+
+  [data-ui-link]:hover {
+    color: var(--ui-intent-text-hover);
+  }
+
+  [data-ui-link][data-variant="subtle"] {
+    color: var(--ui-link-text-muted);
+  }
+
+  [data-ui-link][data-variant="subtle"]:is(:hover, :focus-visible) {
+    color: var(--ui-intent-text-hover);
+  }
+
+  [data-ui-link][data-variant="default"] [data-ui-link-label] {
+    text-decoration-line: underline;
+    text-decoration-color: color-mix(in oklab, currentColor 20%, transparent);
+    text-decoration-thickness: from-font;
+    text-underline-offset: 0.2em;
+  }
+
+  [data-ui-link][data-variant="default"]:is(:hover, :focus-visible) [data-ui-link-label] {
+    text-decoration-color: currentColor;
+  }
+
+  [data-ui-link][data-variant="ghost"]:is(:hover, :focus-visible) [data-ui-link-label] {
+    text-decoration-line: underline;
+    text-decoration-color: currentColor;
+    text-decoration-thickness: from-font;
+    text-underline-offset: 0.2em;
+  }
+}

package/packages/client/src/components/tooltip/styles.css

@@ -7,17 +7,12 @@
     );
   }
 
-  [data-ui-tooltip-content] [data-ui-keybinding-key] {
-    box-shadow:
-      inset 0 0 0 var(--border-width-edge-control)
-      var(--ui-surface-edge);
+  [data-ui-tooltip-content] [data-ui-keybinding] {
+    --ui-keybinding-edge: var(--ui-surface-edge);
+    --ui-keybinding-edge-pressed: var(--ui-surface-edge-strong);
   }
 
   [data-ui-tooltip-content] [data-ui-keybinding-key][data-pressed] {
     color: var(--ui-semantic-surface-ink);
-    background-color: var(--color-interaction-pressed);
-    box-shadow:
-      inset 0 0 0 var(--border-width-edge-control)
-      var(--ui-surface-edge-strong);
   }
 }

package/packages/client/src/styles/components.css

@@ -6,6 +6,7 @@
   ::part(...), :has(...), native quirks, or child-order selectors.
 */
 
+@import "./layout-participation.css";
 @import "../components/brand/styles.css";
 @import "../components/app/styles.css";
 @import "../components/scroll-area/styles.css";
@@ -15,6 +16,7 @@
 @import "../components/checkbox/styles.css";
 @import "../components/date-picker/styles.css";
 @import "../components/button/styles.css";
+@import "../components/link/styles.css";
 @import "../components/accordion/styles.css";
 @import "../components/input/styles.css";
 @import "../components/sidebar/styles.css";

package/packages/client/src/styles/generated/theme-fonts.css

@@ -1,5 +1,5 @@
 /* Generated by packages/theme-engine/scripts/generate-default-css.mjs. */
-/* Theme 5ae1b8bd284cb4e9; CSS 9bd56c40eb5861dd. */
+/* Theme fc84066faf886ebd; CSS 9bd56c40eb5861dd. */
 @import url("https://fonts.bunny.net/css?family=inter:400,500,600,700&display=swap");
 
 @import url("https://fonts.bunny.net/css?family=fira-code:400,500,600,700&display=swap");

package/packages/client/src/styles/generated/theme-palette.css

@@ -1,5 +1,5 @@
 /* Generated by packages/theme-engine/scripts/generate-default-css.mjs. */
-/* Theme 5ae1b8bd284cb4e9; CSS 5842c409a9e15f9e. */
+/* Theme fc84066faf886ebd; CSS ad17be1dd92e79eb. */
 @theme {
   --color-canvas: transparent;
   --color-accent-1: transparent;
@@ -648,6 +648,8 @@
   --spacing-slider-thumb-xlg: 20px;
   --spacing-scrollbar: 6px;
   --spacing-scrollbar-inset: 2px;
+  --spacing-keybinding-key: clamp(18px, calc(17.8571px + 0.0446vw), 18.5px);
+  --spacing-menu-min-width: 192px;
   --spacing-menu-item: var(--spacing-control-lg);
   --spacing-select-listbox: 256px;
   --spacing-panel-collapsed: 48px;
@@ -659,6 +661,8 @@
   --spacing-sidebar-max-width: 448px;
   --spacing-sidebar-min-height: 48px;
   --spacing-sidebar-max-height: 288px;
+  --container-3xs: 256px;
+  --container-2xs: 288px;
   --container-xs: 320px;
   --container-sm: 384px;
   --container-md: 448px;