@imagineio/configurator-sdk 0.1.0-beta.1

package/dist/styles/globals.css

@@ -0,0 +1,442 @@
+@layer sdk-base, vendor, sdk;
+@import './variables.css';
+@import './themes.css';
+@layer sdk-base {
+/* Import CSS variables - single source of truth */
+
+/* Backend-selectable theme skins (data-theme on <html>) */
+
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html, body, #root {
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+}
+
+body {
+  font-family: var(--font-family);
+  font-size: var(--font-size-md);
+  color: var(--text-primary);
+  background-color: var(--bg-secondary);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Scrollbar styling */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--bg-secondary);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--border-color);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--text-secondary);
+}
+
+/* Button reset */
+button {
+  font-family: inherit;
+  font-size: inherit;
+  cursor: pointer;
+  border: none;
+  background: none;
+}
+
+/* Input reset */
+input, select, textarea {
+  font-family: inherit;
+  font-size: inherit;
+}
+
+/* Common utility classes */
+.flex {
+  display: flex;
+}
+
+.flex-col {
+  flex-direction: column;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
+.gap-sm {
+  gap: var(--spacing-sm);
+}
+
+.gap-md {
+  gap: var(--spacing-md);
+}
+
+/* Loading screen */
+/* Floating AI assistant for the structural theme shells (wizard/showroom/showcase).
+   The default theme docks ChatBar in the sidebar, which those shells' <Sidebar
+   embedded> strips — so here it's a round AI button pinned BOTTOM-RIGHT of the scene
+   that opens a chat popup anchored above it (desktop AND mobile). Themeable via the
+   shared brand tokens. */
+/* Scrim behind the open mobile chat sheet — none on desktop. */
+.shell-chat-backdrop { display: none; }
+
+.shell-chat-fab {
+  /* Desktop: anchored to the SCENE's bottom-right (ShellAssistants mounts inside
+     the scene <main>, which is position:relative and full-height on desktop). That
+     keeps the button clear of the side panel's footer CTA (Generate/Save). Mobile
+     switches to position:fixed + raised above the footer (see the @media block). */
+  position: absolute;
+  left: 18px;
+  /* 64, not 18: the scene's bottom-left corner is the SDK watermark's (Powered by
+     imagine.io, ~49px tall incl. offset, not configurable). At 18 the FAB sat on it in
+     Showroom (T3) + Showcase (T4), which use this base (user-reported). LiveStatus owns
+     bottom-right, MainLayout renders no FAB, and Wizard overrides this line — so raising
+     the base clears the watermark on exactly the two shells that needed it. */
+  bottom: 64px;
+  z-index: 21;
+  width: 54px;
+  height: 54px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  /* --shell-fab-bg is set by each theme shell to its accent (matches the theme's
+     CTA colour). Falls back to the global primary, then a literal. */
+  background: var(--shell-fab-bg, var(--color-primary, #e07b39));
+  color: #fff;
+  cursor: pointer;
+  box-shadow: 0 10px 26px -6px rgba(0, 0, 0, 0.35);
+  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
+}
+/* No mark, no clearance: back to the corner it was designed for. Without this the button
+   floats a mark's height above nothing on every entitled org (user-reported). */
+html[data-watermark="off"] .shell-chat-fab { bottom: 18px; }
+.shell-chat-fab:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -6px rgba(0, 0, 0, 0.42); }
+.shell-chat-fab:active { transform: translateY(0); }
+.shell-chat-fab svg { width: 24px; height: 24px; }
+.shell-chat-fab--open { background: var(--shell-fab-bg-strong, var(--shell-fab-bg, var(--color-primary-dark, #c8692c))); }
+
+/* The popup — anchored above the FAB in the bottom-right (scene-relative on
+   desktop, viewport-fixed on mobile — mirrors the FAB). */
+.shell-chat-pop {
+  position: absolute;
+  left: 18px;
+  bottom: 130px;   /* above the raised FAB (64 + 54 + gap) */
+  z-index: 21;
+  width: 360px;
+  max-width: calc(100% - 36px);
+  height: min(520px, 68vh);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: var(--bg-primary, #fff);
+  border: 1px solid var(--border-color, #e1e1e1);
+  border-radius: 14px;
+  box-shadow: 0 18px 46px -10px rgba(0, 0, 0, 0.32);
+  transform-origin: bottom left;
+  animation: shell-chat-pop-in 0.16s ease-out;
+}
+@keyframes shell-chat-pop-in {
+  from { opacity: 0; transform: translateY(8px) scale(0.96); }
+  to   { opacity: 1; transform: translateY(0) scale(1); }
+}
+.shell-chat-pop__head {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 12px 12px 12px 16px;
+  border-bottom: 1px solid var(--border-color, #ececec);
+}
+.shell-chat-pop__title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-primary, #1a1a1a);
+}
+.shell-chat-pop__title svg { width: 16px; height: 16px; color: var(--shell-fab-bg, var(--color-primary, #e07b39)); }
+.shell-chat-pop__off { font-style: normal; font-size: 11px; font-weight: 500; color: #ff6b6b; }
+.shell-chat-pop__close {
+  flex: 0 0 auto;
+  width: 30px;
+  height: 30px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--text-secondary, #6b6b6b);
+  cursor: pointer;
+}
+.shell-chat-pop__close:hover { background: rgba(0, 0, 0, 0.06); color: var(--text-primary, #1a1a1a); }
+.shell-chat-pop__close svg { width: 18px; height: 18px; }
+.shell-chat-pop__body { flex: 1 1 auto; min-height: 0; display: flex; }
+.shell-chat-pop__body .chat-bar--embedded { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; width: 100%; }
+
+/* The AI FAB owns the scene's bottom-LEFT, so the LiveStatusPanel stays bottom-RIGHT
+   (its default) — the two never share a corner. */
+.shell-live .live-status-bar { right: 16px; left: auto; }
+
+/* Mobile: the panel (with its Generate/Save footer CTA) sits at the bottom of the
+   screen, so pin the FAB to the VIEWPORT bottom-right but RAISED above that footer
+   bar so it never collides with it. The popup spans nearly full width above it. */
+@media (max-width: 768px) {
+  .shell-chat-fab {
+    position: fixed;
+    left: 14px;
+    /* Each theme sets --shell-fab-bottom-m to clear ITS footer (a pinned Generate/
+       Save bar needs more; a short/scrolling footer needs almost none). Default is
+       a small offset so it doesn't float awkwardly high. */
+    bottom: var(--shell-fab-bottom-m, 16px);
+    width: 48px;
+    height: 48px;
+  }
+  .shell-chat-fab svg { width: 22px; height: 22px; }
+  .shell-chat-backdrop {
+    display: block;
+    position: fixed;
+    inset: 0;
+    z-index: 69;                          /* under the sheet (70), over the watermark (60) */
+    background: rgba(15, 14, 12, 0.22);   /* a light tint so the blur reads on flat scenes */
+    backdrop-filter: blur(3px);
+    -webkit-backdrop-filter: blur(3px);   /* iOS Safari */
+  }
+  .shell-chat-pop {
+    /* A BOTTOM-HALF SHEET on phones (user decision 2026-08-28), same in every theme —
+       the old near-fullscreen sheet (top:12 → above the FAB) covered the whole app and
+       its bottom edge collided with the watermark / FAB corners. Half the screen keeps
+       the scene visible above the conversation, which is the point of the product. */
+    position: fixed;
+    left: 0;
+    right: 0;
+    top: auto;
+    bottom: 0;
+    width: auto;
+    max-width: none;
+    height: 50vh;
+    height: 50dvh;               /* dynamic viewport: correct under mobile URL bars */
+    border-radius: 16px 16px 0 0;
+    border-left: none;
+    border-right: none;
+    border-bottom: none;
+    z-index: 70;                 /* above the watermark (60) — the sheet is a focused task */
+  }
+}
+
+.loading-screen {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  background: var(--bg-primary);
+}
+
+/* The spinner + label live in a box so the translucent variant can float them
+   as a card over the visible scene. Transparent by default → opaque loader looks
+   unchanged. */
+.loading-screen__box {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-sm);
+}
+
+/* Overlay variant — the base loader is height:100% in normal flow (used as the
+   sole element / a Suspense fallback). This pins it over already-mounted content
+   so the App boot can render the scene canvas underneath (assets load) while the
+   loader stays on top until they're idle. */
+.loading-screen--overlay {
+  position: fixed;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 10000;
+  /* Uses the theme tokens (background/font) so the loader matches the active theme —
+     bootConfigurator applies the theme as soon as the config loads, while the loader
+     is still up, so it's themed for the whole boot. */
+}
+
+/* Translucent variant — the scene is already visible and only its products are
+   still streaming in. A light, blurred scrim lets the scene show through while a
+   floating card presents the spinner + "Loading products…". */
+.loading-screen--translucent {
+  background: rgba(20, 20, 24, 0.28); /* fallback for no color-mix support */
+  background: color-mix(in srgb, var(--bg-primary) 35%, transparent);
+  backdrop-filter: blur(2px);
+  -webkit-backdrop-filter: blur(2px);
+}
+.loading-screen--translucent .loading-screen__box {
+  padding: 18px 26px;
+  border-radius: var(--radius-lg, 12px);
+  background: var(--bg-primary);
+  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.04);
+}
+
+/* Compact variant — the in-context pill: the busy veil during engine round-trips /
+   ui.setLoading (EvaluatingOverlay renders it) and panels loading in place (the chat).
+   In flow, transparent, one row: small spinner + one line in a floating card. The SAME
+   component as the boot screen, so a registered LoadingScreen replaces this too. */
+.loading-screen--compact {
+  height: auto;
+  background: transparent;
+}
+.loading-screen--compact .loading-screen__box {
+  flex-direction: row;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 16px;
+  border-radius: 10px;
+  background: var(--bg-primary, #ffffff);
+  color: var(--text-primary, #222222);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18);
+}
+.loading-screen--compact .loading-screen__spinner {
+  width: 18px;
+  height: 18px;
+  border-width: 2px;
+  animation-duration: 0.7s;
+  flex: none;
+}
+.loading-screen--compact .loading-screen__text {
+  margin: 0;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text-primary, #222222);
+}
+.loading-screen--compact .loading-screen__detail,
+.loading-screen--compact .loading-screen__bar,
+.loading-screen--compact .loading-screen__pct {
+  display: none;
+}
+
+.loading-screen__spinner {
+  width: 48px;
+  height: 48px;
+  border: 4px solid var(--border-color);
+  border-top-color: var(--color-primary);
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+.loading-screen__text {
+  margin-top: var(--spacing-md);
+  color: var(--text-secondary);
+}
+
+/* Secondary line: WHAT is loading right now (e.g. "Loading components… 12/18"). */
+.loading-screen__detail {
+  margin: 2px 0 0;
+  font-size: 12.5px;
+  color: var(--text-tertiary, var(--text-secondary, #8a8a8a));
+  text-align: center;
+  min-height: 15px;
+}
+
+/* Determinate progress bar (shown when a numeric progress is passed). */
+.loading-screen__bar {
+  margin-top: 12px;
+  width: min(240px, 60vw);
+  height: 6px;
+  border-radius: 999px;
+  background: var(--border-color, rgba(0, 0, 0, 0.1));
+  overflow: hidden;
+}
+.loading-screen__bar-fill {
+  height: 100%;
+  border-radius: 999px;
+  background: var(--color-primary, #e07b39);
+  transition: width 0.3s ease;
+}
+.loading-screen__pct {
+  margin: 6px 0 0;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.5px;
+  color: var(--text-secondary, #8a8a8a);
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* Error screen */
+.error-screen {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  padding: var(--spacing-xl);
+  text-align: center;
+}
+
+.error-screen h1 {
+  color: var(--color-error);
+  margin-bottom: var(--spacing-md);
+}
+
+.error-screen p {
+  color: var(--text-secondary);
+  margin-bottom: var(--spacing-lg);
+}
+
+.error-screen button {
+  padding: var(--spacing-sm) var(--spacing-lg);
+  background: var(--color-primary);
+  color: var(--text-inverse);
+  border-radius: var(--border-radius);
+  font-weight: 500;
+}
+
+.error-screen button:hover {
+  background: var(--color-primary-dark);
+}
+
+/* Shared spinner for Generate Assets button */
+.generate-btn__spinner {
+  width: 14px;
+  height: 14px;
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  border-top-color: #fff;
+  border-radius: 50%;
+  animation: generate-btn-spin 0.6s linear infinite;
+  margin-right: 6px;
+}
+
+@keyframes generate-btn-spin {
+  to { transform: rotate(360deg); }
+}
+
+/* LICENCE GATE REFUSAL lives in ui/LicenceNotice.css — a FIXED look by design, so it takes
+   no theme tokens from here. */
+
+}