@adea-ai/ui 0.15.3 → 0.17.0

package/dist/components/theme-toggle.js

@@ -16,5 +16,5 @@ export function ThemeToggle({ className }) {
     // light presentation for both SSR and the first client render so the
     // aria/class attributes cannot mismatch during hydration.
     const selectedTheme = mounted ? theme : 'system';
-    return (_jsxs("div", { className: cn('inline-flex items-center gap-1.5 rounded-full border border-input bg-background p-1.5', className), role: "radiogroup", "aria-label": "Theme", children: [_jsx(Button, { type: "button", role: "radio", "aria-checked": selectedTheme === 'system', "aria-label": "System theme", variant: selectedTheme === 'system' ? 'default' : 'ghost', size: "icon-sm", onClick: () => setTheme('system'), className: "rounded-full", children: _jsx(Monitor, { className: "size-4", "aria-hidden": "true" }) }), _jsx(Button, { type: "button", role: "radio", "aria-checked": selectedTheme === 'light', "aria-label": "Light theme", variant: selectedTheme === 'light' ? 'default' : 'ghost', size: "icon-sm", onClick: () => setTheme('light'), className: "rounded-full", children: _jsx(Sun, { className: "size-4", "aria-hidden": "true" }) }), _jsx(Button, { type: "button", role: "radio", "aria-checked": selectedTheme === 'dark', "aria-label": "Dark theme", variant: selectedTheme === 'dark' ? 'default' : 'ghost', size: "icon-sm", onClick: () => setTheme('dark'), className: "rounded-full", children: _jsx(Moon, { className: "size-4", "aria-hidden": "true" }) })] }));
+    return (_jsxs("div", { className: cn('inline-flex items-center gap-2 rounded-full border border-input bg-background p-2', className), role: "radiogroup", "aria-label": "Theme", children: [_jsx(Button, { type: "button", role: "radio", "aria-checked": selectedTheme === 'system', "aria-label": "System theme", variant: selectedTheme === 'system' ? 'default' : 'ghost', size: "icon-sm", onClick: () => setTheme('system'), className: "rounded-full", children: _jsx(Monitor, { className: "size-4", "aria-hidden": "true" }) }), _jsx(Button, { type: "button", role: "radio", "aria-checked": selectedTheme === 'light', "aria-label": "Light theme", variant: selectedTheme === 'light' ? 'default' : 'ghost', size: "icon-sm", onClick: () => setTheme('light'), className: "rounded-full", children: _jsx(Sun, { className: "size-4", "aria-hidden": "true" }) }), _jsx(Button, { type: "button", role: "radio", "aria-checked": selectedTheme === 'dark', "aria-label": "Dark theme", variant: selectedTheme === 'dark' ? 'default' : 'ghost', size: "icon-sm", onClick: () => setTheme('dark'), className: "rounded-full", children: _jsx(Moon, { className: "size-4", "aria-hidden": "true" }) })] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adea-ai/ui",
-  "version": "0.15.3",
+  "version": "0.17.0",
   "description": "Shared UI kit for Adea: Base UI-backed shadcn primitives, workspace shells, and theme styles.",
   "keywords": [
     "base-ui",

package/src/components/theme-toggle.tsx

@@ -26,7 +26,7 @@ export function ThemeToggle({ className }: { className?: string }) {
   return (
     <div
       className={cn(
-        'inline-flex items-center gap-1.5 rounded-full border border-input bg-background p-1.5',
+        'inline-flex items-center gap-2 rounded-full border border-input bg-background p-2',
         className
       )}
       role="radiogroup"

package/src/styles/conventional-workspace.css

@@ -336,7 +336,18 @@
   outline-offset: -2px;
 }
 .conventional-sidebar__close {
-  display: none;
+  /* Absolutely positioned so the close control never becomes a grid item:
+     the sidebar keeps its title / quick-actions / scroll row rhythm at every
+     width, exactly like the large layout. */
+  position: absolute;
+  z-index: 5;
+  top: 0.4rem;
+  right: 0.4rem;
+  display: grid;
+  width: 2.5rem;
+  height: 2.5rem;
+  place-items: center;
+  border-radius: 0.4rem;
 }
 .conventional-sidebar__title {
   padding: 0.9rem 1.25rem 0.5rem;
@@ -590,10 +601,27 @@
 .conventional-sidebar__settings {
   margin: 0.5rem 0.6rem 0.75rem;
 }
-.conventional-mobile-menu,
 .conventional-sidebar-scrim {
   display: none;
 }
+.conventional-mobile-menu {
+  position: fixed;
+  z-index: 12;
+  top: 0.65rem;
+  left: 4.65rem;
+  display: grid;
+  width: 2.75rem;
+  height: 2.75rem;
+  place-items: center;
+  border: 1px solid var(--cw-border, var(--border));
+  border-radius: 0.4rem;
+  background: var(--cw-surface, var(--card));
+  color: var(--cw-text, var(--foreground));
+  pointer-events: auto;
+}
+.conventional-workspace:has(> .conventional-sidebar--open) .conventional-mobile-menu {
+  display: none;
+}
 
 .conventional-main {
   grid-column: 2;
@@ -2738,15 +2766,6 @@
   .conventional-sidebar--open {
     transform: none;
   }
-  .conventional-sidebar__close {
-    display: grid;
-    justify-self: end;
-    width: 2.5rem;
-    height: 2.5rem;
-    margin: 0.5rem 0.5rem 0;
-    place-items: center;
-    border-radius: 0.4rem;
-  }
   .conventional-sidebar-scrim {
     position: fixed;
     z-index: 39;
@@ -2761,20 +2780,6 @@
   .conventional-conversation__header {
     padding-left: 4.2rem;
   }
-  .conventional-mobile-menu {
-    position: fixed;
-    z-index: 12;
-    top: 0.65rem;
-    left: 4.65rem;
-    display: grid;
-    width: 2.75rem;
-    height: 2.75rem;
-    place-items: center;
-    border: 1px solid var(--cw-border);
-    border-radius: 0.4rem;
-    background: var(--cw-surface);
-    color: var(--cw-text);
-  }
   .conventional-header-menu {
     display: grid !important;
   }
@@ -2844,3 +2849,13 @@
     animation-iteration-count: 1 !important;
   }
 }
+
+/* Sidebar collapse works at every width: a closed navigation aside collapses
+   its grid column instead of only sliding off-canvas on small screens. */
+.conventional-workspace:has(> .conventional-sidebar:not(.conventional-sidebar--open)) {
+  grid-template-columns: 0 minmax(0, 1fr);
+}
+.conventional-workspace:has(> .conventional-sidebar:not(.conventional-sidebar--open))
+  .conventional-topbar {
+  grid-template-columns: 0 minmax(0, 1fr) auto auto;
+}

package/src/styles/workspace-shell.css

@@ -64,60 +64,9 @@
   letter-spacing: -0.08em;
 }
 
-.virtual-room-panel {
+.virtual-view-engine {
   position: absolute;
-  top: calc(var(--workspace-topbar-offset) + 1rem);
-  left: 1rem;
-  z-index: 10;
-  width: min(20rem, calc(100vw - 2rem));
-  max-height: min(26rem, calc(100svh - var(--workspace-topbar-offset) - 6rem));
-  overflow: auto;
-  padding: 0.75rem;
-  border: 1px solid var(--border);
-  border-radius: var(--radius-lg);
-  background: color-mix(in srgb, var(--card) 90%, transparent);
-  color: var(--card-foreground);
-  box-shadow: 0 16px 40px rgb(0 0 0 / 0.2);
-  backdrop-filter: blur(18px);
-  pointer-events: auto;
-}
-
-.virtual-room-panel > header {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 0.75rem;
-  margin-bottom: 0.65rem;
-}
-
-.virtual-room-panel h2,
-.virtual-room-panel p {
-  margin: 0;
-}
-
-.virtual-room-panel header p {
-  margin-bottom: 0.15rem;
-  color: var(--muted-foreground);
-  font-size: 0.68rem;
-  font-weight: 700;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-.virtual-room-panel h2 {
-  font-size: 0.95rem;
-}
-
-.virtual-room-panel__rooms {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.25rem;
-}
-
-.virtual-room-panel__rooms > p {
-  color: var(--muted-foreground);
-  font-size: 0.8rem;
-  line-height: 1.4;
+  inset: 0;
 }
 
 /* Room Designer owns the viewport while it is open. Keep the global rail
@@ -126,20 +75,10 @@
 .workspace-scene-viewport:has([data-room-designer-active='true'])
   .workspace-ui
   :is(
-    .virtual-room-panel,
+    .conventional-mobile-menu,
     .workspace-scene-tools,
     .workspace-view-switcher,
     .workspace-scene-caption
   ) {
   display: none;
 }
-
-@media (max-width: 640px) {
-  .virtual-room-panel {
-    top: auto;
-    bottom: calc(var(--workspace-bottom-controls) + 4rem);
-    left: 0.75rem;
-    width: calc(100vw - 1.5rem);
-    max-height: 11rem;
-  }
-}