@snowcone-app/canvas 0.23.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">
 ```

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