@adea-ai/ui 0.10.8

package/src/styles/globals.css

@@ -0,0 +1,93 @@
+@import "tailwindcss";
+@import "shadcn/tailwind.css";
+
+/* Include shared components when this stylesheet is consumed by an app. */
+@source "../";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+
+:root {
+  --radius: 0.75rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    border-color: var(--border);
+  }
+
+  html,
+  body {
+    min-height: 100%;
+  }
+
+  body {
+    position: relative;
+    margin: 0;
+    background: var(--background);
+    color: var(--foreground);
+  }
+}

package/src/styles/theme.css

@@ -0,0 +1,94 @@
+/* Shared tokens and component styling. Consumers provide the Tailwind and
+   shadcn imports from their own app stylesheet. */
+
+@source "../";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+
+:root {
+  --radius: 0.75rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  *,
+  *::before,
+  *::after {
+    border-color: var(--border);
+  }
+
+  html,
+  body {
+    min-height: 100%;
+  }
+
+  body {
+    position: relative;
+    margin: 0;
+    background: var(--background);
+    color: var(--foreground);
+  }
+}

package/src/styles/workspace-shell.css

@@ -0,0 +1,145 @@
+:root {
+  --hq-shell-background: #fafafa;
+  --hq-shell-surface: #ffffff;
+  --hq-shell-surface-strong: #f5f5f5;
+  --hq-shell-surface-stronger: #e5e5e5;
+  --hq-shell-border: #e5e5e5;
+  --hq-shell-border-subtle: #f5f5f5;
+  --hq-shell-foreground: #171717;
+  --hq-shell-muted: #737373;
+  --hq-shell-accent: #171717;
+  --hq-shell-accent-strong: #262626;
+  --hq-shell-accent-foreground: #fafafa;
+  --hq-shell-focus: #a3a3a3;
+  --hq-shell-active: #525252;
+}
+
+.dark {
+  --hq-shell-background: #0a0a0a;
+  --hq-shell-surface: #171717;
+  --hq-shell-surface-strong: #262626;
+  --hq-shell-surface-stronger: #404040;
+  --hq-shell-border: #404040;
+  --hq-shell-border-subtle: #262626;
+  --hq-shell-foreground: #fafafa;
+  --hq-shell-muted: #a3a3a3;
+  --hq-shell-accent: #e5e5e5;
+  --hq-shell-accent-strong: #f5f5f5;
+  --hq-shell-accent-foreground: #171717;
+  --hq-shell-focus: #737373;
+  --hq-shell-active: #d4d4d4;
+}
+
+.workspace-shell {
+  --background: var(--hq-shell-background);
+  --foreground: var(--hq-shell-foreground);
+  --card: var(--hq-shell-surface);
+  --card-foreground: var(--hq-shell-foreground);
+  --popover: var(--hq-shell-surface);
+  --popover-foreground: var(--hq-shell-foreground);
+  --secondary: var(--hq-shell-surface-strong);
+  --secondary-foreground: var(--hq-shell-foreground);
+  --muted: var(--hq-shell-surface-stronger);
+  --muted-foreground: var(--hq-shell-muted);
+  --primary: var(--hq-shell-accent);
+  --primary-foreground: var(--hq-shell-accent-foreground);
+  --border: var(--hq-shell-border);
+  --input: var(--hq-shell-border);
+  --ring: var(--hq-shell-focus);
+}
+
+.workspace-brand__mark {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  width: 2.1rem;
+  height: 2.1rem;
+  border-radius: 0.55rem;
+  color: var(--hq-shell-accent-foreground);
+  background: var(--hq-shell-accent);
+  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
+  font-size: 0.75rem;
+  font-weight: 800;
+  letter-spacing: -0.08em;
+}
+
+.virtual-room-panel {
+  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;
+}
+
+/* Room Designer owns the viewport while it is open. Keep the global rail
+ * available for workspace, scene, and plugin navigation, but remove controls
+ * that would compete with the editor canvas. */
+.workspace-scene-viewport:has([data-room-designer-active="true"])
+  .workspace-ui
+  :is(
+    .virtual-room-panel,
+    .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;
+  }
+}

package/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "rootDir": "src",
+    "outDir": "dist",
+    "declaration": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["src"]
+}