@object-ui/components 4.0.5 → 4.0.7

package/CHANGELOG.md

@@ -1,5 +1,75 @@
 # @object-ui/components
 
+## 4.0.7
+
+### Patch Changes
+
+- 7c9b85c: Fix compatibility with the framework's normalized Expression envelope format.
+
+  `@objectstack/spec` now emits predicate (`visible` / `enabled`) and template
+  (`titleFormat`) fields as `{ dialect, source }` envelopes instead of bare
+  strings. The previous implementation assumed strings and crashed the record
+  detail view (`TypeError: titleFormat.replace is not a function`) and printed
+  `Failed to evaluate expression: ${[object Object]}` for every action visibility
+  predicate.
+  - `@object-ui/core`: `ExpressionEvaluator.evaluate` / `evaluateCondition` now
+    unwrap Expression envelopes transparently.
+  - `@object-ui/react`: new `toPredicateInput()` helper to safely normalize
+    `boolean | string | Expression` predicate inputs into the `${expr}` form
+    expected by `useCondition`.
+  - `@object-ui/components`: `action-bar`, `action-button`, `action-group`,
+    `action-icon`, `action-menu` renderers use `toPredicateInput()` instead of
+    template-literal interpolation that produced `${[object Object]}`.
+  - `@object-ui/plugin-detail`, `@object-ui/plugin-kanban`,
+    `@object-ui/plugin-calendar`, `@object-ui/app-shell`,
+    `@object-ui/console`: title-format helpers accept both legacy strings and
+    the new `{ source }` envelope.
+
+  All changes are backward-compatible — legacy bare strings continue to work.
+
+- Updated dependencies [7c9b85c]
+- Updated dependencies [fd15918]
+  - @object-ui/core@4.0.7
+  - @object-ui/react@4.0.7
+  - @object-ui/i18n@4.0.7
+  - @object-ui/types@4.0.7
+
+## 4.0.6
+
+### Patch Changes
+
+- 925051d: fix: convert Tailwind v3 `[--var]` arbitrary value syntax to v4 `(--var)`
+
+  Shadcn `Sidebar`, `Calendar`, `Chart`, `Popover`, `Tooltip`, `HoverCard`,
+  `Menubar`, `Select`, `Dropdown`, `Context-Menu`, and `AppSidebar` used the
+  Tailwind v3 syntax `w-[--sidebar-width]`, `origin-[--radix-...]`, etc.
+  Tailwind v4 no longer interprets the bare `--xxx` inside arbitrary values
+  as `var(--xxx)`, so the rule emits empty CSS — the sidebar collapses to
+  0 width and overlays the main content, dropdown/popover positions fall
+  back to the wrong origin, and the calendar cells lose their fixed size.
+
+  Replaced all such occurrences with the v4 CSS-variable shorthand
+  `w-(--sidebar-width)`, `origin-(--radix-...)`, etc. Existing
+  `[calc(var(--xxx)*-1)]` arbitrary expressions are unaffected.
+
+- 1b6dc64: fix: complete Tailwind v3→v4 migration cleanup
+  - Rename deprecated `flex-shrink-0` → `shrink-0` and `flex-grow-N` →
+    `grow-N` (Tailwind v4 dropped the long-form aliases). Affects
+    data-table, fields/index, FileField, ChatbotEnhanced,
+    FloatingChatbotPanel, ProcessDesigner, HistoryPanel, KanbanEnhanced,
+    KanbanImpl, plugin-timeline index, FlowDesigner, LayoutRenderer.
+  - Replace `theme(spacing.4)` inside arbitrary-value `[calc(...)]` with
+    literal `1rem` in sidebar.tsx — `theme()` is deprecated in v4.
+  - Remove obsolete v3-escape CSS overrides from index.css and
+    sidebar-fixes.css. The component source now uses native v4 stacked
+    data variants (`group-data-[state=collapsed]:group-data-[collapsible=icon]:w-(--sidebar-width-icon)`)
+    which Tailwind v4 emits correctly without the manual overrides.
+    Only the bespoke `.sidebar-menu-button-icon-mode*` rules are kept.
+  - @object-ui/types@4.0.6
+  - @object-ui/core@4.0.6
+  - @object-ui/i18n@4.0.6
+  - @object-ui/react@4.0.6
+
 ## 4.0.5
 
 ### Patch Changes

package/dist/index.css

@@ -642,6 +642,10 @@
   .aspect-video {
     aspect-ratio: var(--aspect-video);
   }
+  .size-\(--cell-size\) {
+    width: var(--cell-size);
+    height: var(--cell-size);
+  }
   .size-3\.5 {
     width: calc(var(--spacing) * 3.5);
     height: calc(var(--spacing) * 3.5);
@@ -670,9 +674,8 @@
     width: calc(var(--spacing) * 10);
     height: calc(var(--spacing) * 10);
   }
-  .size-\[--cell-size\] {
-    width: --cell-size;
-    height: --cell-size;
+  .h-\(--cell-size\) {
+    height: var(--cell-size);
   }
   .h-1 {
     height: calc(var(--spacing) * 1);
@@ -749,9 +752,6 @@
   .h-48 {
     height: calc(var(--spacing) * 48);
   }
-  .h-\[--cell-size\] {
-    height: --cell-size;
-  }
   .h-\[1px\] {
     height: 1px;
   }
@@ -800,14 +800,17 @@
   .h-svh {
     height: 100svh;
   }
+  .max-h-\(--radix-context-menu-content-available-height\) {
+    max-height: var(--radix-context-menu-content-available-height);
+  }
+  .max-h-\(--radix-select-content-available-height\) {
+    max-height: var(--radix-select-content-available-height);
+  }
   .max-h-40 {
     max-height: calc(var(--spacing) * 40);
   }
-  .max-h-\[--radix-context-menu-content-available-height\] {
-    max-height: --radix-context-menu-content-available-height;
-  }
-  .max-h-\[--radix-select-content-available-height\] {
-    max-height: --radix-select-content-available-height;
+  .max-h-64 {
+    max-height: calc(var(--spacing) * 64);
   }
   .max-h-\[50vh\] {
     max-height: 50vh;
@@ -875,6 +878,12 @@
   .min-h-svh {
     min-height: 100svh;
   }
+  .w-\(--cell-size\) {
+    width: var(--cell-size);
+  }
+  .w-\(--sidebar-width\) {
+    width: var(--sidebar-width);
+  }
   .w-0 {
     width: calc(var(--spacing) * 0);
   }
@@ -962,9 +971,6 @@
   .w-96 {
     width: calc(var(--spacing) * 96);
   }
-  .w-\[--cell-size\] {
-    width: --cell-size;
-  }
   .w-\[--sidebar-width\] {
     width: --sidebar-width;
   }
@@ -1016,6 +1022,9 @@
   .w-px {
     width: 1px;
   }
+  .max-w-\(--skeleton-width\) {
+    max-width: var(--skeleton-width);
+  }
   .max-w-2xl {
     max-width: var(--container-2xl);
   }
@@ -1034,9 +1043,6 @@
   .max-w-7xl {
     max-width: var(--container-7xl);
   }
-  .max-w-\[--skeleton-width\] {
-    max-width: --skeleton-width;
-  }
   .max-w-\[40\%\] {
     max-width: 40%;
   }
@@ -1085,6 +1091,9 @@
   .max-w-xs {
     max-width: var(--container-xs);
   }
+  .min-w-\(--cell-size\) {
+    min-width: var(--cell-size);
+  }
   .min-w-0 {
     min-width: calc(var(--spacing) * 0);
   }
@@ -1103,9 +1112,6 @@
   .min-w-11 {
     min-width: calc(var(--spacing) * 11);
   }
-  .min-w-\[--cell-size\] {
-    min-width: --cell-size;
-  }
   .min-w-\[8rem\] {
     min-width: 8rem;
   }
@@ -1148,26 +1154,29 @@
   .border-collapse {
     border-collapse: collapse;
   }
-  .origin-\[--radix-context-menu-content-transform-origin\] {
-    transform-origin: --radix-context-menu-content-transform-origin;
+  .origin-\(--radix-context-menu-content-transform-origin\) {
+    transform-origin: var(--radix-context-menu-content-transform-origin);
+  }
+  .origin-\(--radix-dropdown-menu-content-transform-origin\) {
+    transform-origin: var(--radix-dropdown-menu-content-transform-origin);
   }
-  .origin-\[--radix-dropdown-menu-content-transform-origin\] {
-    transform-origin: --radix-dropdown-menu-content-transform-origin;
+  .origin-\(--radix-hover-card-content-transform-origin\) {
+    transform-origin: var(--radix-hover-card-content-transform-origin);
   }
-  .origin-\[--radix-hover-card-content-transform-origin\] {
-    transform-origin: --radix-hover-card-content-transform-origin;
+  .origin-\(--radix-menubar-content-transform-origin\) {
+    transform-origin: var(--radix-menubar-content-transform-origin);
   }
-  .origin-\[--radix-menubar-content-transform-origin\] {
-    transform-origin: --radix-menubar-content-transform-origin;
+  .origin-\(--radix-popover-content-transform-origin\) {
+    transform-origin: var(--radix-popover-content-transform-origin);
   }
-  .origin-\[--radix-popover-content-transform-origin\] {
-    transform-origin: --radix-popover-content-transform-origin;
+  .origin-\(--radix-select-content-transform-origin\) {
+    transform-origin: var(--radix-select-content-transform-origin);
   }
-  .origin-\[--radix-select-content-transform-origin\] {
-    transform-origin: --radix-select-content-transform-origin;
+  .origin-\(--radix-tooltip-content-transform-origin\) {
+    transform-origin: var(--radix-tooltip-content-transform-origin);
   }
-  .origin-\[--radix-tooltip-content-transform-origin\] {
-    transform-origin: --radix-tooltip-content-transform-origin;
+  .origin-\[--radix-\.\.\.\] {
+    transform-origin: --radix-...;
   }
   .-translate-x-1\/2 {
     --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
@@ -1604,8 +1613,8 @@
     --tw-border-style: dashed;
     border-style: dashed;
   }
-  .border-\[--color-border\] {
-    border-color: --color-border;
+  .border-\(--color-border\) {
+    border-color: var(--color-border);
   }
   .border-blue-300 {
     border-color: var(--color-blue-300);
@@ -1670,8 +1679,8 @@
   .border-l-transparent {
     border-left-color: transparent;
   }
-  .bg-\[--color-bg\] {
-    background-color: --color-bg;
+  .bg-\(--color-bg\) {
+    background-color: var(--color-bg);
   }
   .bg-accent {
     background-color: var(--color-accent);
@@ -1939,6 +1948,9 @@
   .p-\[1px\] {
     padding: 1px;
   }
+  .px-\(--cell-size\) {
+    padding-inline: var(--cell-size);
+  }
   .px-1 {
     padding-inline: calc(var(--spacing) * 1);
   }
@@ -1963,9 +1975,6 @@
   .px-8 {
     padding-inline: calc(var(--spacing) * 8);
   }
-  .px-\[--cell-size\] {
-    padding-inline: --cell-size;
-  }
   .px-\[0\.3rem\] {
     padding-inline: 0.3rem;
   }
@@ -2717,41 +2726,6 @@
       align-self: flex-start;
     }
   }
-  .group-data-\[collapsible\=icon\]\:-mt-8 {
-    &:is(:where(.group)[data-collapsible="icon"] *) {
-      margin-top: calc(var(--spacing) * -8);
-    }
-  }
-  .group-data-\[collapsible\=icon\]\:hidden {
-    &:is(:where(.group)[data-collapsible="icon"] *) {
-      display: none;
-    }
-  }
-  .group-data-\[collapsible\=icon\]\:w-\[--sidebar-width-icon\] {
-    &:is(:where(.group)[data-collapsible="icon"] *) {
-      width: --sidebar-width-icon;
-    }
-  }
-  .group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)_\+_theme\(spacing\.4\)\)\] {
-    &:is(:where(.group)[data-collapsible="icon"] *) {
-      width: calc(var(--sidebar-width-icon) + 1rem);
-    }
-  }
-  .group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)_\+_theme\(spacing\.4\)_\+2px\)\] {
-    &:is(:where(.group)[data-collapsible="icon"] *) {
-      width: calc(var(--sidebar-width-icon) + 1rem + 2px);
-    }
-  }
-  .group-data-\[collapsible\=icon\]\:overflow-hidden {
-    &:is(:where(.group)[data-collapsible="icon"] *) {
-      overflow: hidden;
-    }
-  }
-  .group-data-\[collapsible\=icon\]\:opacity-0 {
-    &:is(:where(.group)[data-collapsible="icon"] *) {
-      opacity: 0%;
-    }
-  }
   .group-data-\[collapsible\=offcanvas\]\:right-\[calc\(var\(--sidebar-width\)\*-1\)\] {
     &:is(:where(.group)[data-collapsible="offcanvas"] *) {
       right: calc(var(--sidebar-width) * -1);
@@ -2829,6 +2803,55 @@
       border-left-width: 1px;
     }
   }
+  .group-data-\[state\=collapsed\]\:group-data-\[collapsible\=icon\]\:-mt-8 {
+    &:is(:where(.group)[data-state="collapsed"] *) {
+      &:is(:where(.group)[data-collapsible="icon"] *) {
+        margin-top: calc(var(--spacing) * -8);
+      }
+    }
+  }
+  .group-data-\[state\=collapsed\]\:group-data-\[collapsible\=icon\]\:hidden {
+    &:is(:where(.group)[data-state="collapsed"] *) {
+      &:is(:where(.group)[data-collapsible="icon"] *) {
+        display: none;
+      }
+    }
+  }
+  .group-data-\[state\=collapsed\]\:group-data-\[collapsible\=icon\]\:w-\(--sidebar-width-icon\) {
+    &:is(:where(.group)[data-state="collapsed"] *) {
+      &:is(:where(.group)[data-collapsible="icon"] *) {
+        width: var(--sidebar-width-icon);
+      }
+    }
+  }
+  .group-data-\[state\=collapsed\]\:group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)_\+_1rem\)\] {
+    &:is(:where(.group)[data-state="collapsed"] *) {
+      &:is(:where(.group)[data-collapsible="icon"] *) {
+        width: calc(var(--sidebar-width-icon) + 1rem);
+      }
+    }
+  }
+  .group-data-\[state\=collapsed\]\:group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)_\+_1rem_\+_2px\)\] {
+    &:is(:where(.group)[data-state="collapsed"] *) {
+      &:is(:where(.group)[data-collapsible="icon"] *) {
+        width: calc(var(--sidebar-width-icon) + 1rem + 2px);
+      }
+    }
+  }
+  .group-data-\[state\=collapsed\]\:group-data-\[collapsible\=icon\]\:overflow-hidden {
+    &:is(:where(.group)[data-state="collapsed"] *) {
+      &:is(:where(.group)[data-collapsible="icon"] *) {
+        overflow: hidden;
+      }
+    }
+  }
+  .group-data-\[state\=collapsed\]\:group-data-\[collapsible\=icon\]\:opacity-0 {
+    &:is(:where(.group)[data-state="collapsed"] *) {
+      &:is(:where(.group)[data-collapsible="icon"] *) {
+        opacity: 0%;
+      }
+    }
+  }
   .group-data-\[state\=open\]\:rotate-180 {
     &:is(:where(.group)[data-state="open"] *) {
       rotate: 180deg;
@@ -3459,6 +3482,12 @@
       --tw-ring-color: var(--color-ring);
     }
   }
+  .focus\:ring-offset-1 {
+    &:focus {
+      --tw-ring-offset-width: 1px;
+      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+    }
+  }
   .focus\:ring-offset-2 {
     &:focus {
       --tw-ring-offset-width: 2px;
@@ -5961,48 +5990,6 @@ body {
 .dark [data-sidebar="menu-button"][data-active="true"]:hover {
   background-color: hsl(var(--primary) / 0.24);
 }
-.group[data-collapsible="icon"][data-state="collapsed"] .group-data-\[collapsible\=icon\]\:w-\[--sidebar-width-icon\] {
-  width: var(--sidebar-width-icon);
-}
-.group[data-collapsible="icon"][data-state="expanded"] .group-data-\[collapsible\=icon\]\:w-\[--sidebar-width-icon\] {
-  width: var(--sidebar-width);
-}
-.group[data-collapsible="icon"][data-state="collapsed"] .group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)_\+_theme\(spacing\.4\)\)\] {
-  width: calc(var(--sidebar-width-icon) + 1rem);
-}
-.group[data-collapsible="icon"][data-state="expanded"] .group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)_\+_theme\(spacing\.4\)\)\] {
-  width: var(--sidebar-width);
-}
-.group[data-collapsible="icon"][data-state="collapsed"] .group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)_\+_theme\(spacing\.4\)_\+2px\)\] {
-  width: calc(var(--sidebar-width-icon) + 1rem + 2px);
-}
-.group[data-collapsible="icon"][data-state="expanded"] .group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)_\+_theme\(spacing\.4\)_\+2px\)\] {
-  width: var(--sidebar-width);
-}
-.group[data-collapsible="icon"][data-state="collapsed"] .group-data-\[collapsible\=icon\]\:opacity-0 {
-  opacity: 0;
-}
-.group[data-collapsible="icon"][data-state="expanded"] .group-data-\[collapsible\=icon\]\:opacity-0 {
-  opacity: 1;
-}
-.group[data-collapsible="icon"][data-state="collapsed"] .group-data-\[collapsible\=icon\]\:-mt-8 {
-  margin-top: -2rem;
-}
-.group[data-collapsible="icon"][data-state="expanded"] .group-data-\[collapsible\=icon\]\:-mt-8 {
-  margin-top: 0;
-}
-.group[data-collapsible="icon"][data-state="collapsed"] .group-data-\[collapsible\=icon\]\:hidden {
-  display: none;
-}
-.group[data-collapsible="icon"][data-state="expanded"] .group-data-\[collapsible\=icon\]\:hidden {
-  display: block;
-}
-.group[data-collapsible="icon"][data-state="collapsed"] .group-data-\[collapsible\=icon\]\:overflow-hidden {
-  overflow: hidden;
-}
-.group[data-collapsible="icon"][data-state="expanded"] .group-data-\[collapsible\=icon\]\:overflow-hidden {
-  overflow: auto;
-}
 .group[data-collapsible="icon"][data-state="collapsed"] .sidebar-menu-button-icon-mode {
   width: 2rem !important;
   height: 2rem !important;
@@ -6019,9 +6006,6 @@ body {
 .group[data-collapsible="icon"][data-state="expanded"] .sidebar-menu-button-icon-mode-lg {
   padding: 0.5rem;
 }
-.group[data-collapsible="offcanvas"] .group-data-\[collapsible\=offcanvas\]\:w-0 {
-  width: 0;
-}
 @keyframes enter {
   from {
     opacity: var(--tw-enter-opacity, 1);
@@ -6445,5 +6429,5 @@ body {
 
 
 /* === sidebar-fixes.css (extracted by Vite) === */
-.group[data-collapsible=icon][data-state=collapsed] .group-data-\[collapsible\=icon\]\:w-\[--sidebar-width-icon\]{width:var(--sidebar-width-icon)}.group[data-collapsible=icon][data-state=expanded] .group-data-\[collapsible\=icon\]\:w-\[--sidebar-width-icon\]{width:var(--sidebar-width)}.group[data-collapsible=icon][data-state=collapsed] .group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)_\+_theme\(spacing\.4\)\)\]{width:calc(var(--sidebar-width-icon) + 1rem)}.group[data-collapsible=icon][data-state=expanded] .group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)_\+_theme\(spacing\.4\)\)\]{width:var(--sidebar-width)}.group[data-collapsible=icon][data-state=collapsed] .group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)_\+_theme\(spacing\.4\)_\+2px\)\]{width:calc(var(--sidebar-width-icon) + 1rem + 2px)}.group[data-collapsible=icon][data-state=expanded] .group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)_\+_theme\(spacing\.4\)_\+2px\)\]{width:var(--sidebar-width)}.group[data-collapsible=icon][data-state=collapsed] .group-data-\[collapsible\=icon\]\:opacity-0{opacity:0}.group[data-collapsible=icon][data-state=expanded] .group-data-\[collapsible\=icon\]\:opacity-0{opacity:1}.group[data-collapsible=icon][data-state=collapsed] .group-data-\[collapsible\=icon\]\:-mt-8{margin-top:-2rem}.group[data-collapsible=icon][data-state=expanded] .group-data-\[collapsible\=icon\]\:-mt-8{margin-top:0}.group[data-collapsible=icon][data-state=collapsed] .group-data-\[collapsible\=icon\]\:hidden{display:none}.group[data-collapsible=icon][data-state=expanded] .group-data-\[collapsible\=icon\]\:hidden{display:block}.group[data-collapsible=icon][data-state=collapsed] .group-data-\[collapsible\=icon\]\:overflow-hidden{overflow:hidden}.group[data-collapsible=icon][data-state=expanded] .group-data-\[collapsible\=icon\]\:overflow-hidden{overflow:auto}.group[data-collapsible=icon][data-state=collapsed] .sidebar-menu-button-icon-mode{width:2rem!important;height:2rem!important;padding:.5rem!important}.group[data-collapsible=icon][data-state=expanded] .sidebar-menu-button-icon-mode{width:100%;height:auto;padding:.5rem}.group[data-collapsible=icon][data-state=collapsed] .sidebar-menu-button-icon-mode-lg{padding:0!important}.group[data-collapsible=icon][data-state=expanded] .sidebar-menu-button-icon-mode-lg{padding:.5rem}.group[data-collapsible=offcanvas] .group-data-\[collapsible\=offcanvas\]\:w-0{width:0}
+.group[data-collapsible=icon][data-state=collapsed] .sidebar-menu-button-icon-mode{width:2rem!important;height:2rem!important;padding:.5rem!important}.group[data-collapsible=icon][data-state=expanded] .sidebar-menu-button-icon-mode{width:100%;height:auto;padding:.5rem}.group[data-collapsible=icon][data-state=collapsed] .sidebar-menu-button-icon-mode-lg{padding:0!important}.group[data-collapsible=icon][data-state=expanded] .sidebar-menu-button-icon-mode-lg{padding:.5rem}
 /*$vite$:1*/