@snowcone-app/canvas 0.22.0 → 0.26.0

package/STYLING_CONTRACT.md

@@ -25,9 +25,14 @@ stable hooks; `sc:`-prefixed utility classes are internal and NOT contract.
 | `history` | Editor.History |
 | `layers` | Editor.Layers |
 | `layers-item` | Editor.Layers |
+| `loading-overlay` | Editor.LoadingOverlay |
 | `menu` | Editor.Menu |
+| `placements` | Editor.Placements |
+| `placements-item` | Editor.Placements |
 | `preview` | Editor.Preview |
 | `preview-error` | Editor.Preview |
+| `preview-image` | Editor.Preview |
+| `preview-loading` | Editor.Preview |
 | `root` | Editor.Root |
 | `snowcone-editor` | SnowconeEditor |
 | `snowcone-editor-header` | SnowconeEditor |
@@ -174,6 +179,15 @@ stable hooks; `sc:`-prefixed utility classes are internal and NOT contract.
   <span>
 ```
 
+### `loading-overlay` — Editor.LoadingOverlay — standalone render-in-flight rainbow for host-owned preview surfaces (fills its positioned parent)
+
+```html
+<div class="sc-loading-overlay-host" data-sc-part="loading-overlay">
+  <div class="sc-prism-overlay sc-prism-fade-in" data-sc-part="preview-loading">
+    <div class="sc-prism-band"> ×6
+    <div class="sc-prism-particle"> ×10
+```
+
 ### `menu` — Editor.Menu
 
 ```html
@@ -184,29 +198,66 @@ stable hooks; `sc:`-prefixed utility classes are internal and NOT contract.
   <input type="file">
 ```
 
+### `placements` — Editor.Placements — two-placement design
+
+```html
+<div data-sc-part="placements">
+  <button aria-pressed="true" data-sc-active="true" data-sc-part="placements-item" type="button">
+  <button aria-pressed="false" data-sc-active="false" data-sc-part="placements-item" type="button">
+```
+
+### `placements-item` — Editor.Placements — one tab (active state in data-sc-active)
+
+```html
+<button aria-pressed="true" data-sc-active="true" data-sc-part="placements-item" type="button">
+```
+
 ### `preview` — Editor.Preview — awaiting the first mockup
 
 ```html
-<div aria-busy="true" data-sc-part="preview" data-sc-preview-state="rendering">
+<div aria-busy="true" class="sc-preview-frame" data-sc-part="preview" data-sc-preview-state="rendering">
 ```
 
 ### `preview` — Editor.Preview — with a rendered mockup
 
 ```html
-<img alt=<alt> data-sc-part="preview" data-sc-preview-state="ready" src=<url>>
+<div class="sc-preview-frame" data-sc-part="preview" data-sc-preview-state="ready">
+  <img alt=<alt> data-sc-part="preview-image" src=<url>>
+```
+
+### `preview` — Editor.Preview — loadingOverlay frame (the part becomes the stage)
+
+```html
+<div class="sc-preview-frame" data-sc-part="preview" data-sc-preview-state="ready">
+  <img alt=<alt> data-sc-part="preview-image" src=<url>>
 ```
 
 ### `preview-error` — Editor.Preview — render/grant failure before any mockup
 
 ```html
-<div data-sc-error=<message> data-sc-part="preview-error" data-sc-preview-state="error" role="alert">
+<div data-sc-error=<message> data-sc-part="preview-error" role="alert">
+```
+
+### `preview-image` — Editor.Preview — loadingOverlay image
+
+```html
+<img alt=<alt> data-sc-part="preview-image" src=<url>>
+```
+
+### `preview-loading` — Editor.Preview — loadingOverlay render-in-flight rainbow
+
+```html
+<div class="sc-prism-overlay sc-prism-fade-in" data-sc-part="preview-loading">
+  <div class="sc-prism-band"> ×6
+  <div class="sc-prism-particle"> ×10
 ```
 
 ### `root` — Editor.Root
 
 ```html
 <div class="sc-root" data-sc-part="root">
-  <img alt=<alt> data-sc-part="preview" data-sc-preview-state="ready" src=<url>>
+  <div class="sc-preview-frame" data-sc-part="preview" data-sc-preview-state="ready">
+    <img alt=<alt> data-sc-part="preview-image" src=<url>>
   <input aria-label=<label> data-sc-layer=<layer-name> data-sc-part="textfield" placeholder=<placeholder> type="text">
   <button data-sc-buy-missing=<reason-codes> data-sc-buy-state="incomplete" data-sc-part="buy" disabled type="button">
 ```
@@ -230,7 +281,7 @@ stable hooks; `sc:`-prefixed utility classes are internal and NOT contract.
         <div>
           …
     <button aria-label=<label> data-sc-part="snowcone-editor-pip" type="button">
-      <div aria-busy="true" data-sc-part="preview" data-sc-preview-state="rendering">
+      <div aria-busy="true" class="sc-preview-frame" data-sc-part="preview" data-sc-preview-state="rendering">
         <span aria-busy="true">
   <div data-sc-part="snowcone-editor-zone" data-sc-zone-state="idle">
     <div>
@@ -303,7 +354,7 @@ stable hooks; `sc:`-prefixed utility classes are internal and NOT contract.
 
 ```html
 <button aria-label=<label> data-sc-part="snowcone-editor-pip" type="button">
-  <div aria-busy="true" data-sc-part="preview" data-sc-preview-state="rendering">
+  <div aria-busy="true" class="sc-preview-frame" data-sc-part="preview" data-sc-preview-state="rendering">
     <span aria-busy="true">
 ```
 
@@ -317,7 +368,7 @@ stable hooks; `sc:`-prefixed utility classes are internal and NOT contract.
         <div>
           …
   <button aria-label=<label> data-sc-part="snowcone-editor-pip" type="button">
-    <div aria-busy="true" data-sc-part="preview" data-sc-preview-state="rendering">
+    <div aria-busy="true" class="sc-preview-frame" data-sc-part="preview" data-sc-preview-state="rendering">
       <span aria-busy="true">
 ```
 
@@ -331,7 +382,7 @@ stable hooks; `sc:`-prefixed utility classes are internal and NOT contract.
 
 ```html
 <div data-sc-part="snowcone-editor-swap-stage">
-  <div aria-busy="true" data-sc-part="preview" data-sc-preview-state="rendering">
+  <div aria-busy="true" class="sc-preview-frame" data-sc-part="preview" data-sc-preview-state="rendering">
     <div aria-busy="true">
   <button aria-label=<label> data-sc-part="snowcone-editor-swap-back" type="button">
 ```
@@ -364,88 +415,117 @@ stable hooks; `sc:`-prefixed utility classes are internal and NOT contract.
 <input aria-label=<label> data-sc-layer=<layer-name> data-sc-part="textfield" placeholder=<placeholder> type="text">
 ```
 
-## `.sc-root` theming tokens
-
-Declared on `.sc-root` (applied once by `Editor.Root`); override any of
-them on your own wrapper around the Root to retheme every part. Portaled
-UI (the floating toolbar) carries its own `.sc-root` wrapper, so overrides
-on `:root` or above the widget apply there too.
-
-| group | token | default |
-|---|---|---|
-| Semantic Colors | `--color-primary` | `#000000` |
-| Semantic Colors | `--color-primary-foreground` | `#ffffff` |
-| Semantic Colors | `--color-secondary` | `#f4f4f5` |
-| Semantic Colors | `--color-secondary-foreground` | `#18181b` |
-| Semantic Colors | `--color-default` | `#f0f0f1` |
-| Semantic Colors | `--color-default-foreground` | `#18181b` |
-| Semantic Colors | `--color-danger` | `#ef4444` |
-| Semantic Colors | `--color-danger-foreground` | `#ffffff` |
-| Semantic Colors | `--color-success` | `#22c55e` |
-| Semantic Colors | `--color-success-foreground` | `#ffffff` |
-| Semantic Colors | `--color-warning` | `#f59e0b` |
-| Semantic Colors | `--color-warning-foreground` | `#000000` |
-| Layout Colors | `--color-background` | `#f8f8f8` |
-| Layout Colors | `--color-foreground` | `#0a0a0a` |
-| Layout Colors | `--color-surface` | `#ffffff` |
-| Layout Colors | `--color-surface-foreground` | `#0a0a0a` |
-| Layout Colors | `--color-muted` | `#f4f4f5` |
-| Layout Colors | `--color-muted-foreground` | `#71717a` |
-| Layout Colors | `--color-divider` | `#e4e4e7` |
-| Layout Colors | `--color-focus` | `#000000` |
-| Field/Input Colors | `--color-field` | `#ffffff` |
-| Field/Input Colors | `--color-field-foreground` | `#0a0a0a` |
-| Field/Input Colors | `--color-field-placeholder` | `#71717a` |
-| Field/Input Colors | `--color-field-border` | `transparent` |
-| Accent (backward compat) | `--color-accent` | `#000000` |
-| Accent (backward compat) | `--color-accent-foreground` | `#ffffff` |
-| Shadcn compatibility aliases | `--color-card` | `#ffffff` |
-| Shadcn compatibility aliases | `--color-card-foreground` | `#0a0a0a` |
-| Shadcn compatibility aliases | `--color-popover` | `#ffffff` |
-| Shadcn compatibility aliases | `--color-popover-foreground` | `#0a0a0a` |
-| Shadcn compatibility aliases | `--color-border` | `#e4e4e7` |
-| Shadcn compatibility aliases | `--color-destructive` | `#ef4444` |
-| Shadcn compatibility aliases | `--color-destructive-foreground` | `#ffffff` |
-| Shadcn compatibility aliases | `--color-ring` | `#000000` |
-| Shadcn compatibility aliases | `--color-input` | `transparent` |
-| Overlay/Surface | `--color-overlay` | `#ffffff` |
-| Overlay/Surface | `--color-overlay-foreground` | `#0a0a0a` |
-| Overlay/Surface | `--shadow-overlay` | `0 8px 30px rgb(0 0 0 / 0.12)` |
-| Overlay/Surface | `--shadow-surface` | `0 1px 3px rgb(0 0 0 / 0.1)` |
-| Overlay/Surface | `--shadow-soft` | `0 1px 2px rgb(0 0 0 / 0.06), 0 2px 4px rgb(0 0 0 / 0.04)` |
-| Semantic Font Families | `--font-family-heading` | `ui-sans-serif, system-ui, sans-serif` |
-| Semantic Font Families | `--font-family-body` | `ui-sans-serif, system-ui, sans-serif` |
-| Semantic Font Families | `--font-family-label` | `ui-sans-serif, system-ui, sans-serif` |
-| Semantic Font Families | `--font-family-button` | `ui-sans-serif, system-ui, sans-serif` |
-| Semantic Font Families | `--font-family-caption` | `ui-sans-serif, system-ui, sans-serif` |
-| Semantic Font Families | `--font-family-display` | `ui-sans-serif, system-ui, sans-serif` |
-| Semantic Font Families | `--font-family-accent` | `ui-sans-serif, system-ui, sans-serif` |
-| Semantic Radius | `--radius-button` | `4px` |
-| Semantic Radius | `--radius-input` | `4px` |
-| Semantic Radius | `--radius-card` | `6px` |
-| Semantic Radius | `--radius-modal` | `8px` |
-| Semantic Radius | `--radius-badge` | `9999px` |
-| Semantic Radius | `--radius-avatar` | `9999px` |
-| Semantic Radius | `--radius-tooltip` | `6px` |
-| Semantic Radius | `--radius-image` | `4px` |
-| Z-index scale | `--z-base` | `1` |
-| Z-index scale | `--z-sticky` | `1000` |
-| Z-index scale | `--z-dropdown` | `1001` |
-| Z-index scale | `--z-drawer` | `10002` |
-| Z-index scale | `--z-overlay` | `10001` |
-| Z-index scale | `--z-modal` | `10000` |
-| Z-index scale | `--z-tooltip` | `2147483647` |
-| Z-index scale | `--spacing-xs` | `4px` |
-| Z-index scale | `--spacing-sm` | `6px` |
-| Z-index scale | `--spacing-md` | `8px` |
-| Z-index scale | `--spacing-lg` | `10px` |
-| Z-index scale | `--spacing-xl` | `12px` |
-| Z-index scale | `--spacing-2xl` | `16px` |
-| Z-index scale | `--spacing-3xl` | `20px` |
-| Z-index scale | `--spacing-4xl` | `24px` |
-| Z-index scale | `--color-text-primary` | `#0a0a0a` |
-| Z-index scale | `--color-text-secondary` | `#71717a` |
-| Z-index scale | `--color-text-muted` | `#a1a1aa` |
-| Z-index scale | `--color-border-primary` | `#e4e4e7` |
-| Z-index scale | `--color-border-secondary` | `#f0f0f1` |
-| Z-index scale | `--color-border-dark` | `#d4d4d8` |
+## `.sc-root` theming tokens (the host theming API)
+
+The override surface is the UNPREFIXED primitives below (`--foreground`,
+`--surface`, `--accent`, …), declared on `.sc-root` — the element
+`Editor.Root` itself renders as the composition's OUTERMOST wrapper.
+Working recipes:
+
+- **Dark host:** put the `dark` class on `<html>` (or any ancestor of the
+  Root). The package ships a complete `.dark .sc-root` theme — the `dark`
+  column below. Blank = inherits the light value (brand/status colors,
+  fonts, radius, spacing are mode-independent). `<html>`-level classes
+  also reach body-portaled package UI.
+- **Custom theme:** scope overrides as `.my-brand .sc-root { --foreground: …; }`
+  with `class="my-brand"` on an element ABOVE `<Editor.Root/>` (page shell
+  or `<html>`). A class on DOM you render INSIDE the Root cannot work —
+  the Root's own `.sc-root` wraps your markup, so `.my-brand .sc-root`
+  matches nothing there.
+- **Portal caveat:** package UI portaled to `<body>` (the floating
+  toolbar) carries its own `.sc-root` outside any page-shell wrapper —
+  `<html>`-level classes reach it; a page-shell wrapper does not.
+
+NOT the API: `--color-*` (Tailwind `@theme` utility-generation defaults)
+and `--sc-color-*` (emitted plumbing that `.sc-root` re-points at the
+primitives). Overriding those does nothing. Earlier versions of this
+document listed the `@theme` defaults here in error.
+
+| group | token | default | dark |
+|---|---|---|---|
+| Primitive colors | `--white` | `oklch(100% 0 0)` |  |
+| Primitive colors | `--black` | `oklch(0% 0 0)` |  |
+| Primitive colors | `--snow` | `oklch(0.9911 0 0)` |  |
+| Primitive colors | `--eclipse` | `oklch(0.2103 0.0059 285.89)` |  |
+| Primary / Accent — HeroUI default blue | `--accent` | `oklch(0.6204 0.195 253.83)` |  |
+| Primary / Accent — HeroUI default blue | `--accent-foreground` | `var(--snow)` |  |
+| Primary / Accent — HeroUI default blue | `--primary` | `var(--accent)` |  |
+| Primary / Accent — HeroUI default blue | `--primary-foreground` | `var(--accent-foreground)` |  |
+| Secondary | `--secondary` | `oklch(0.45 0.0 0)` |  |
+| Secondary | `--secondary-foreground` | `var(--eclipse)` |  |
+| Default — Neutral elements | `--default` | `oklch(94% 0.001 286.375)` | `oklch(27.4% 0.006 286.033)` |
+| Default — Neutral elements | `--default-foreground` | `var(--eclipse)` | `var(--snow)` |
+| Default — Neutral elements | `--color-default-on-surface` | `oklch(90% 0.006 265)` | `oklch(30% 0.006 265)` |
+| Status colors | `--success` | `oklch(0.7329 0.1935 150.81)` |  |
+| Status colors | `--success-foreground` | `var(--eclipse)` |  |
+| Status colors | `--warning` | `oklch(0.7819 0.1585 72.33)` |  |
+| Status colors | `--warning-foreground` | `var(--eclipse)` |  |
+| Status colors | `--danger` | `oklch(0.6532 0.2328 25.74)` |  |
+| Status colors | `--danger-foreground` | `var(--snow)` |  |
+| Layout colors | `--background` | `oklch(0.9607 0 0)` | `oklch(0.07 0.002 270)` |
+| Layout colors | `--foreground` | `var(--eclipse)` | `var(--snow)` |
+| Layout colors | `--muted` | `oklch(0.5517 0.0138 285.94)` | `oklch(70.5% 0.015 286.067)` |
+| Layout colors | `--muted-foreground` | `oklch(from var(--foreground) l c h / 0.6)` | `oklch(from var(--foreground) l c h / 0.6)` |
+| Layout colors | `--divider` | `oklch(92% 0.004 286.32)` | `oklch(32% 0.006 286.033)` |
+| Layout colors | `--focus` | `var(--accent)` |  |
+| Surface | `--surface` | `var(--white)` | `oklch(0.2103 0.0059 285.89)` |
+| Surface | `--surface-foreground` | `var(--foreground)` | `var(--foreground)` |
+| Surface | `--surface-shadow` | `0 2px 4px 0 rgba(0, 0, 0, 0.04), 0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 0 1px 0 rgba(0, 0, 0, 0.06)` | `0 0 0 0 transparent inset` |
+| Overlay | `--overlay` | `var(--white)` | `oklch(0.22 0.0059 285.89)` |
+| Overlay | `--overlay-foreground` | `var(--foreground)` | `var(--foreground)` |
+| Overlay | `--overlay-shadow` | `0 4px 16px 0 rgba(24, 24, 27, 0.08), 0 8px 24px 0 rgba(24, 24, 27, 0.09)` | `0 0 0 0 transparent inset` |
+| Fields/Inputs | `--field` | `var(--white)` | `var(--default)` |
+| Fields/Inputs | `--field-foreground` | `var(--eclipse)` | `var(--foreground)` |
+| Fields/Inputs | `--field-placeholder` | `var(--muted)` |  |
+| Fields/Inputs | `--field-border` | `transparent` | `transparent` |
+| Fields/Inputs | `--color-field-on-surface` | `oklch(96% 0.006 265)` | `oklch(25% 0.006 265)` |
+| Shadows | `--shadow-color-sm` | `rgba(0, 0, 0, 0.06)` | `rgba(0, 0, 0, 0.2)` |
+| Shadows | `--shadow-color-md` | `rgba(0, 0, 0, 0.08)` | `rgba(0, 0, 0, 0.25)` |
+| Shadows | `--shadow-color-lg` | `rgba(0, 0, 0, 0.1)` | `rgba(0, 0, 0, 0.3)` |
+| Shadows | `--shadow-color-tooltip` | `rgba(0, 0, 0, 0.1)` | `rgba(0, 0, 0, 0.3)` |
+| Shadows | `--shadow-color-hover` | `rgba(0, 0, 0, 0.08)` | `rgba(0, 0, 0, 0.2)` |
+| Fonts | `--font-heading` | `ui-sans-serif, system-ui, sans-serif` |  |
+| Fonts | `--font-body` | `ui-sans-serif, system-ui, sans-serif` |  |
+| Fonts | `--font-label` | `var(--font-body)` |  |
+| Fonts | `--font-button` | `var(--font-body)` |  |
+| Fonts | `--font-caption` | `var(--font-body)` |  |
+| Fonts | `--font-display` | `var(--font-heading)` |  |
+| Fonts | `--font-accent` | `var(--font-heading)` |  |
+| Font weights | `--font-weight-body` | `400` |  |
+| Font weights | `--font-weight-heading` | `600` |  |
+| Font weights | `--font-weight-button` | `500` |  |
+| Font weights | `--font-weight-label` | `500` |  |
+| Font weights | `--font-weight-caption` | `400` |  |
+| Font weights | `--font-weight-display` | `700` |  |
+| Semantic radius roles → map to primitives | `--radius-semantic-button` | `var(--radius-md, 4px)` |  |
+| Semantic radius roles → map to primitives | `--radius-semantic-input` | `var(--radius-md, 4px)` |  |
+| Semantic radius roles → map to primitives | `--radius-semantic-card` | `var(--radius-lg, 6px)` |  |
+| Semantic radius roles → map to primitives | `--radius-semantic-modal` | `var(--radius-xl, 8px)` |  |
+| Semantic radius roles → map to primitives | `--radius-semantic-badge` | `var(--radius-full, 9999px)` |  |
+| Semantic radius roles → map to primitives | `--radius-semantic-avatar` | `var(--radius-full, 9999px)` |  |
+| Semantic radius roles → map to primitives | `--radius-semantic-tooltip` | `var(--radius-lg, 6px)` |  |
+| Semantic radius roles → map to primitives | `--radius-semantic-image` | `var(--radius-md, 4px)` |  |
+| Radius primitives (fallbacks for tokens.css) | `--radius-sm` | `2px` |  |
+| Radius primitives (fallbacks for tokens.css) | `--radius-md` | `4px` |  |
+| Radius primitives (fallbacks for tokens.css) | `--radius-lg` | `6px` |  |
+| Radius primitives (fallbacks for tokens.css) | `--radius-xl` | `8px` |  |
+| Radius primitives (fallbacks for tokens.css) | `--radius-2xl` | `12px` |  |
+| Radius primitives (fallbacks for tokens.css) | `--radius-3xl` | `20px` |  |
+| Radius primitives (fallbacks for tokens.css) | `--radius-full` | `9999px` |  |
+| Spacing (fallbacks for tokens.css) | `--space-xs` | `4px` |  |
+| Spacing (fallbacks for tokens.css) | `--space-sm` | `6px` |  |
+| Spacing (fallbacks for tokens.css) | `--space-md` | `8px` |  |
+| Spacing (fallbacks for tokens.css) | `--space-lg` | `10px` |  |
+| Spacing (fallbacks for tokens.css) | `--space-xl` | `12px` |  |
+| Spacing (fallbacks for tokens.css) | `--space-2xl` | `16px` |  |
+| Spacing (fallbacks for tokens.css) | `--space-3xl` | `20px` |  |
+| Spacing (fallbacks for tokens.css) | `--space-4xl` | `24px` |  |
+| Transitions | `--transition-fast` | `0.1s ease` |  |
+| Transitions | `--transition-base` | `0.15s ease` |  |
+| Opacity | `--opacity-disabled` | `0.3` |  |
+| Opacity | `--opacity-muted` | `0.5` |  |
+| Canvas background | `--color-canvas-bg` | `#f5f5f5` | `#080809` |
+| Legacy tokens.css shorthand aliases used by embed components | `--text-primary` | `var(--foreground)` | `var(--foreground)` |
+| Legacy tokens.css shorthand aliases used by embed components | `--text-secondary` | `var(--muted-foreground)` | `var(--muted-foreground)` |
+| Legacy tokens.css shorthand aliases used by embed components | `--bg-primary` | `var(--surface)` | `var(--surface)` |
+| Legacy tokens.css shorthand aliases used by embed components | `--bg-secondary` | `var(--background)` | `var(--background)` |

package/dist/{ContextualToolbars-BDEt9ND0.js → ContextualToolbars-DUhBKVxe.js}

@@ -3,8 +3,8 @@ import * as se from "react";
 import we, { useRef as $, useEffect as X, useCallback as D, useState as T, useLayoutEffect as ic, useMemo as Ye, memo as lc } from "react";
 import { createPortal as xa } from "react-dom";
 import { u as dc, a as Ca, e as wa, f as ka } from "./editorErrors-B2mb1sVN.js";
-import { n as uc, I as P, y as Ce, K as Ta, H as ae, N as mt, B as te, z as Na, T as de, h as ue, i as fe, O as j, m as ss, U as We, J as Sa, C as Da, d as Ma, S as Ia } from "./UnifiedFontService-CC3CSmH5.js";
-import { R as cs, L as Ee, a as Ra, I as Ea, T as Ge } from "./custom-icons-BW6hqmkL.js";
+import { n as uc, I as P, z as Ce, N as Ta, J as ae, O as mt, B as te, A as Na, T as de, h as ue, i as fe, P as j, m as ss, U as We, K as Sa, C as Da, d as Ma, S as Ia } from "./UnifiedFontService-Bx2MxFfy.js";
+import { R as cs, L as Ee, a as Ra, I as Ea, T as Ge } from "./custom-icons-DeYIrTK1.js";
 import * as ht from "@radix-ui/react-popover";
 import * as Je from "@radix-ui/react-slider";
 import { T as Xn, G as fc, H as Ms, J as Is, P as pc, Q as Rs, R as qn } from "./ExportManager-DoU4VK6h.js";
@@ -5553,4 +5553,4 @@ export {
   Di as s,
   zr as u
 };
-//# sourceMappingURL=ContextualToolbars-BDEt9ND0.js.map
+//# sourceMappingURL=ContextualToolbars-DUhBKVxe.js.map