@masters-union/union-stack 0.3.3 → 0.3.5

package/dist/picker.js

@@ -37,11 +37,17 @@ function themeToCssVars(theme) {
     "--us-bg": theme?.background ?? defaults.background,
     "--us-fg": theme?.foreground ?? defaults.foreground,
     "--us-muted": defaults.muted,
-    "--us-subtle": defaults.subtle,
     "--us-border": theme?.border ?? defaults.border,
-    "--us-border-strong": defaults.borderStrong,
+    // Surface + emphasis tokens are *derived* from the resolved bg/fg/border so
+    // they track a host's custom colors instead of snapping back to the curated
+    // palette. The mix percentages reproduce the hand-tuned defaults closely
+    // (both light and dark lift surfaces toward the foreground), but now a
+    // custom background/foreground/border flows through to every surface —
+    // including the image editor canvas, tool hovers, and control borders.
+    "--us-subtle": "color-mix(in srgb, var(--us-fg) 5%, var(--us-bg))",
+    "--us-overlay": "color-mix(in srgb, var(--us-fg) 9%, var(--us-bg))",
+    "--us-border-strong": "color-mix(in srgb, var(--us-fg) 18%, var(--us-border))",
     "--us-elevated": defaults.elevated,
-    "--us-overlay": defaults.overlay,
     "--us-raised": defaults.raised,
     "--us-accent": defaults.accent,
     "--us-success": defaults.success,
@@ -58,16 +64,10 @@ var LIGHT_DEFAULTS = {
   foreground: "#1b1b21",
   // on-surface
   muted: "#5e5c6e",
-  // on-surface-variant
-  subtle: "#f3f1fa",
   // surface-container — chips, icon wells, tab rail
   border: "#e4e1ee",
-  // outline-variant (soft)
-  borderStrong: "#c8c5d4",
   // outline — drag-over emphasis
   elevated: "#ffffff",
-  // cards, one step above the floor
-  overlay: "#eceaf4",
   // instant hover state
   raised: "#ffffff",
   // active tab / popover layer
@@ -78,27 +78,21 @@ var LIGHT_DEFAULTS = {
   danger: "#ba1a1a"
 };
 var DARK_DEFAULTS = {
-  primary: "#c0c1ff",
-  // primary
-  onPrimary: "#1000a9",
-  // on-primary — dark ink on periwinkle
-  background: "#0c1324",
+  primary: "#f4f4f5",
+  // primary — near-white on dark
+  onPrimary: "#18181b",
+  // on-primary — dark ink on white
+  background: "#0a0a0c",
   // surface (floor)
-  foreground: "#dce1fb",
+  foreground: "#f4f4f5",
   // on-surface
-  muted: "#908fa0",
-  // outline
-  subtle: "#191f31",
+  muted: "#8b8b93",
   // surface-container
-  border: "#2e3447",
-  // surface-container-highest
-  borderStrong: "#464554",
+  border: "#2a2a2e",
   // outline-variant
-  elevated: "#151b2d",
-  // surface-container-low — cards, one step up
-  overlay: "#23293c",
+  elevated: "#141416",
   // surface-container-high — instant hover
-  raised: "#2e3447",
+  raised: "#27272a",
   // active tab / popover layer
   accent: "#ffb783",
   // tertiary — "edited" markers
@@ -215,7 +209,7 @@ var BASE_CSS = `
 }
 .us-dropzone-hint { color: var(--us-muted); font-size: 12.5px; letter-spacing: -0.006em; }
 .us-dropzone-constraints {
-  margin-top: 12px;
+  margin-top: 6px;
   font-size: 11px; color: var(--us-muted);
   font-family: var(--us-mono);
   letter-spacing: 0;
@@ -1053,6 +1047,7 @@ var ICON2 = {
   check: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>`,
   alert: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>`,
   spinner: `<svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="9" stroke="currentColor" opacity="0.2"/><path d="M21 12a9 9 0 0 0-9-9" stroke="currentColor"/></svg>`,
+  clock: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><polyline points="12 7.5 12 12 15 13.5"/></svg>`,
   image: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>`,
   video: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2"/></svg>`,
   audio: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>`,
@@ -1530,8 +1525,11 @@ var Picker = class {
         return ICON2.alert;
       case "cancelled":
         return ICON2.alert;
+      // Queued = waiting to upload. A clock reads as "pending" — unlike a frozen
+      // spinner, which falsely signals an in-progress upload. The spinner is
+      // reserved for the actual 'uploading' state (where CSS animates it).
       default:
-        return ICON2.spinner;
+        return ICON2.clock;
     }
   }
   statusLabel(item) {