@masters-union/union-stack 0.1.8 → 0.3.0

package/dist/picker.cjs

@@ -2,8 +2,28 @@
 
 // src/picker/styles.ts
 var STYLE_ID = "unionstack-picker-styles";
+var FONT_ID = "unionstack-picker-fonts";
+var FONT_HREF = "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap";
+function ensureFonts() {
+  if (document.getElementById(FONT_ID)) return;
+  const preconnect = (href, cross) => {
+    const l = document.createElement("link");
+    l.rel = "preconnect";
+    l.href = href;
+    if (cross) l.crossOrigin = "anonymous";
+    document.head.appendChild(l);
+  };
+  preconnect("https://fonts.googleapis.com");
+  preconnect("https://fonts.gstatic.com", true);
+  const link = document.createElement("link");
+  link.id = FONT_ID;
+  link.rel = "stylesheet";
+  link.href = FONT_HREF;
+  document.head.appendChild(link);
+}
 function ensureStyles() {
   if (typeof document === "undefined") return;
+  ensureFonts();
   if (document.getElementById(STYLE_ID)) return;
   const el3 = document.createElement("style");
   el3.id = STYLE_ID;
@@ -15,6 +35,7 @@ function themeToCssVars(theme) {
   const defaults = mode === "dark" ? DARK_DEFAULTS : LIGHT_DEFAULTS;
   return {
     "--us-primary": theme?.primary ?? defaults.primary,
+    "--us-on-primary": defaults.onPrimary,
     "--us-bg": theme?.background ?? defaults.background,
     "--us-fg": theme?.foreground ?? defaults.foreground,
     "--us-muted": defaults.muted,
@@ -22,55 +43,84 @@ function themeToCssVars(theme) {
     "--us-border": theme?.border ?? defaults.border,
     "--us-border-strong": defaults.borderStrong,
     "--us-elevated": defaults.elevated,
+    "--us-overlay": defaults.overlay,
+    "--us-raised": defaults.raised,
+    "--us-accent": defaults.accent,
     "--us-success": defaults.success,
     "--us-danger": defaults.danger,
     "--us-radius": theme?.radius ?? "12px"
   };
 }
 var LIGHT_DEFAULTS = {
-  primary: "#4f46e5",
-  // indigo-600 — confident, restrained
-  background: "#ffffff",
-  foreground: "#0f172a",
-  // slate-900 — 15.4:1 on white
-  muted: "#64748b",
-  // slate-500 — 4.7:1 on white
-  subtle: "#f8fafc",
-  // slate-50 — chips, icon wells
-  border: "#e2e8f0",
-  // slate-200
-  borderStrong: "#cbd5e1",
-  // slate-300 — drag-over emphasis
+  primary: "#494bd6",
+  // inverse-primary of the dark scheme
+  onPrimary: "#ffffff",
+  background: "#fdfbff",
+  // surface — near-white with a violet hint
+  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",
-  success: "#16a34a",
-  danger: "#dc2626"
+  // cards, one step above the floor
+  overlay: "#eceaf4",
+  // instant hover state
+  raised: "#ffffff",
+  // active tab / popover layer
+  accent: "#b35a00",
+  // tertiary — "edited" markers
+  success: "#2c9a5b",
+  // desaturated green
+  danger: "#ba1a1a"
 };
 var DARK_DEFAULTS = {
-  primary: "#818cf8",
-  // indigo-400 — desaturated for dark mode
-  background: "#0b0f1a",
-  // near-black, not pure
-  foreground: "#f1f5f9",
-  // slate-100 — 15:1 on bg
-  muted: "#94a3b8",
-  // slate-400 — 6.4:1 on bg
-  subtle: "#111827",
-  // slightly elevated surface
-  border: "#1f2937",
-  borderStrong: "#334155",
-  elevated: "#0f1625",
-  success: "#4ade80",
-  danger: "#f87171"
+  primary: "#c0c1ff",
+  // primary
+  onPrimary: "#1000a9",
+  // on-primary — dark ink on periwinkle
+  background: "#0c1324",
+  // surface (floor)
+  foreground: "#dce1fb",
+  // on-surface
+  muted: "#908fa0",
+  // outline
+  subtle: "#191f31",
+  // surface-container
+  border: "#2e3447",
+  // surface-container-highest
+  borderStrong: "#464554",
+  // outline-variant
+  elevated: "#151b2d",
+  // surface-container-low — cards, one step up
+  overlay: "#23293c",
+  // surface-container-high — instant hover
+  raised: "#2e3447",
+  // active tab / popover layer
+  accent: "#ffb783",
+  // tertiary — "edited" markers
+  success: "#7ad08e",
+  // desaturated green
+  danger: "#ffb4ab"
+  // error
 };
 var BASE_CSS = `
 .us-picker-backdrop {
+  --us-font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+  --us-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
   position: fixed; inset: 0; z-index: 2147483000;
-  background: color-mix(in srgb, #02060f 55%, transparent);
+  background: rgba(2, 6, 23, 0.4);
   -webkit-backdrop-filter: blur(8px);
   backdrop-filter: blur(8px);
   display: flex; align-items: center; justify-content: center;
   padding: 16px;
-  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+  font-family: var(--us-font);
+  font-feature-settings: "cv02", "cv11";
   animation: us-fade 140ms ease-out;
 }
 @keyframes us-fade { from { opacity: 0; } to { opacity: 1; } }
@@ -83,10 +133,7 @@ var BASE_CSS = `
   max-height: min(calc(100dvh - 32px), 680px);
   display: flex; flex-direction: column;
   position: relative;
-  box-shadow:
-    0 1px 1px rgba(0,0,0,0.04),
-    0 18px 40px -8px rgba(0,0,0,0.18),
-    0 32px 80px -16px rgba(0,0,0,0.22);
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
   overflow: hidden;
   animation: us-rise 240ms cubic-bezier(0.16, 1, 0.3, 1);
 }
@@ -107,19 +154,20 @@ var BASE_CSS = `
   width: 28px; height: 28px; flex-shrink: 0;
   border-radius: 8px;
   background: var(--us-subtle);
+  border: 1px solid var(--us-border);
   color: var(--us-primary);
 }
-.us-picker-header-logo svg { width: 16px; height: 16px; }
+.us-picker-header-logo svg { width: 15px; height: 15px; }
 .us-picker-header-logo img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
-.us-picker-title { font-weight: 600; font-size: 14px; letter-spacing: -0.01em; flex: 1; }
+.us-picker-title { font-weight: 600; font-size: 15px; letter-spacing: -0.02em; line-height: 1.2; flex: 1; }
 .us-picker-close {
   background: none; border: 0; cursor: pointer;
   width: 32px; height: 32px;
   display: inline-flex; align-items: center; justify-content: center;
   color: var(--us-muted); border-radius: 8px;
-  transition: color 140ms, background 140ms;
+  transition: color 100ms, background 0ms;
 }
-.us-picker-close:hover { background: var(--us-subtle); color: var(--us-fg); }
+.us-picker-close:hover { background: var(--us-overlay); color: var(--us-fg); }
 .us-picker-close:focus-visible { outline: 2px solid var(--us-primary); outline-offset: 1px; }
 .us-picker-close svg { width: 16px; height: 16px; }
 
@@ -128,17 +176,17 @@ var BASE_CSS = `
 
 .us-dropzone {
   position: relative;
-  border: 1.5px dashed var(--us-border-strong);
-  border-radius: calc(var(--us-radius) - 2px);
+  border: 1px dashed var(--us-border-strong);
+  border-radius: 8px;
   padding: 28px 20px;
   text-align: center;
   cursor: pointer;
-  transition: border-color 160ms, background 160ms, transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
-  background: color-mix(in srgb, var(--us-subtle) 60%, transparent);
+  transition: border-color 120ms, background 0ms;
+  background: var(--us-subtle);
 }
 .us-dropzone:hover {
   border-color: var(--us-primary);
-  background: color-mix(in srgb, var(--us-primary) 4%, var(--us-bg));
+  background: color-mix(in srgb, var(--us-primary) 6%, var(--us-subtle));
 }
 .us-dropzone:focus-visible {
   outline: 2px solid var(--us-primary); outline-offset: 2px;
@@ -146,13 +194,13 @@ var BASE_CSS = `
 .us-dropzone[data-drag="over"] {
   border-style: solid;
   border-color: var(--us-primary);
-  background: color-mix(in srgb, var(--us-primary) 8%, var(--us-bg));
-  transform: scale(1.005);
+  background: color-mix(in srgb, var(--us-primary) 10%, var(--us-subtle));
 }
 .us-dropzone-icon {
   width: 44px; height: 44px;
-  border-radius: 12px;
+  border-radius: 8px;
   background: color-mix(in srgb, var(--us-primary) 12%, var(--us-bg));
+  border: 1px solid color-mix(in srgb, var(--us-primary) 24%, transparent);
   color: var(--us-primary);
   display: inline-flex; align-items: center; justify-content: center;
   margin-bottom: 12px;
@@ -161,19 +209,18 @@ var BASE_CSS = `
 .us-dropzone:hover .us-dropzone-icon { transform: translateY(-2px); }
 .us-dropzone[data-drag="over"] .us-dropzone-icon {
   transform: translateY(-3px) scale(1.06);
-  background: color-mix(in srgb, var(--us-primary) 18%, var(--us-bg));
 }
 .us-dropzone-icon svg { width: 22px; height: 22px; }
 .us-dropzone-title {
-  font-size: 14px; font-weight: 600; letter-spacing: -0.01em;
+  font-size: 14px; font-weight: 600; letter-spacing: -0.011em;
   margin-bottom: 2px;
 }
-.us-dropzone-hint { color: var(--us-muted); font-size: 12.5px; }
+.us-dropzone-hint { color: var(--us-muted); font-size: 12.5px; letter-spacing: -0.006em; }
 .us-dropzone-constraints {
-  margin-top: 10px;
+  margin-top: 12px;
   font-size: 11px; color: var(--us-muted);
-  font-family: ui-monospace, "SF Mono", Menlo, monospace;
-  letter-spacing: 0.02em;
+  font-family: var(--us-mono);
+  letter-spacing: 0;
 }
 
 .us-dropzone--compact {
@@ -197,8 +244,8 @@ var BASE_CSS = `
   padding: 10px 12px;
   background: var(--us-elevated);
   border: 1px solid var(--us-border);
-  border-radius: 10px;
-  transition: border-color 140ms, background 140ms;
+  border-radius: 8px;
+  transition: border-color 120ms;
   animation: us-row-in 280ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
   position: relative;
 }
@@ -206,19 +253,20 @@ var BASE_CSS = `
   from { opacity: 0; transform: translateY(6px); }
   to   { opacity: 1; transform: translateY(0); }
 }
-.us-file[data-state="done"]     { border-color: color-mix(in srgb, var(--us-success) 30%, var(--us-border)); }
-.us-file[data-state="failed"]   { border-color: color-mix(in srgb, var(--us-danger)  30%, var(--us-border)); }
+.us-file[data-state="done"]     { border-color: color-mix(in srgb, var(--us-success) 35%, var(--us-border)); }
+.us-file[data-state="failed"]   { border-color: color-mix(in srgb, var(--us-danger)  35%, var(--us-border)); }
 
 .us-file-thumb {
   width: 40px; height: 40px; flex-shrink: 0;
-  border-radius: 8px;
+  border-radius: 4px;
   background: var(--us-subtle);
+  border: 1px solid var(--us-border);
   background-size: cover; background-position: center;
   display: inline-flex; align-items: center; justify-content: center;
   color: var(--us-muted);
   overflow: hidden;
 }
-.us-file-thumb[data-image="true"] { color: transparent; }
+.us-file-thumb[data-image="true"] { color: transparent; border-color: transparent; }
 .us-file-thumb svg { width: 18px; height: 18px; }
 
 .us-file-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
@@ -227,9 +275,12 @@ var BASE_CSS = `
   font-size: 13px; font-weight: 500;
   flex: 1; min-width: 0;
   white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
-  letter-spacing: -0.005em;
+  letter-spacing: -0.006em;
+}
+.us-file-meta {
+  color: var(--us-muted); font-size: 11px; flex-shrink: 0;
+  font-family: var(--us-mono); letter-spacing: 0;
 }
-.us-file-meta { color: var(--us-muted); font-size: 11.5px; flex-shrink: 0; font-variant-numeric: tabular-nums; }
 
 .us-file-progress {
   height: 3px; background: var(--us-border); border-radius: 999px; overflow: hidden;
@@ -285,27 +336,30 @@ var BASE_CSS = `
   padding: 12px 16px;
   border-top: 1px solid var(--us-border);
 }
-.us-actions-summary { font-size: 12px; color: var(--us-muted); font-variant-numeric: tabular-nums; }
+.us-actions-summary {
+  font-size: 11px; color: var(--us-muted);
+  font-family: var(--us-mono); letter-spacing: 0;
+}
 .us-actions-buttons { display: flex; gap: 8px; }
 
 .us-btn {
   appearance: none;
   display: inline-flex; align-items: center; justify-content: center; gap: 6px;
   padding: 8px 14px; min-height: 36px;
-  border-radius: 8px; border: 1px solid var(--us-border);
+  border-radius: 8px; border: 1px solid var(--us-border-strong);
   background: transparent; color: var(--us-fg);
   cursor: pointer; font-size: 13px; font-weight: 500;
-  font-family: inherit; letter-spacing: -0.005em;
-  transition: background 140ms, border-color 140ms, transform 80ms ease-out;
+  font-family: inherit; letter-spacing: 0.01em;
+  transition: background 0ms, border-color 120ms, transform 80ms ease-out;
 }
-.us-btn:hover { background: var(--us-subtle); border-color: var(--us-border-strong); }
+.us-btn:hover { background: var(--us-overlay); }
 .us-btn:active { transform: scale(0.98); }
 .us-btn:focus-visible { outline: 2px solid var(--us-primary); outline-offset: 2px; }
 .us-btn-primary {
-  background: var(--us-primary); color: white;
+  background: var(--us-primary); color: var(--us-on-primary);
   border-color: var(--us-primary);
 }
-.us-btn-primary:hover { filter: brightness(0.95); background: var(--us-primary); }
+.us-btn-primary:hover { filter: brightness(1.06); background: var(--us-primary); }
 .us-btn[disabled] { opacity: 0.5; cursor: not-allowed; }
 .us-btn[disabled]:hover { transform: none; }
 .us-btn svg { width: 14px; height: 14px; }
@@ -313,6 +367,7 @@ var BASE_CSS = `
 .us-footer {
   padding: 8px 16px 12px;
   font-size: 11px; color: var(--us-muted); text-align: center;
+  letter-spacing: 0.02em;
   display: flex; align-items: center; justify-content: center; gap: 6px;
 }
 .us-footer svg { width: 11px; height: 11px; opacity: 0.7; }
@@ -324,25 +379,25 @@ var BASE_CSS = `
   display: inline-flex; gap: 2px; padding: 3px;
   background: var(--us-subtle);
   border: 1px solid var(--us-border);
-  border-radius: 10px;
+  border-radius: 8px;
   margin-bottom: 14px;
 }
 .us-source-tab {
-  appearance: none; background: transparent; border: 0;
+  appearance: none; background: transparent; border: 1px solid transparent;
   font: inherit; cursor: pointer;
   padding: 6px 14px; min-height: 30px;
-  border-radius: 7px;
-  font-size: 12.5px; font-weight: 500; letter-spacing: -0.005em;
+  border-radius: 6px;
+  font-size: 12px; font-weight: 500; letter-spacing: 0.02em;
   color: var(--us-muted);
-  transition: background 140ms, color 140ms;
+  transition: color 100ms, background 0ms;
   display: inline-flex; align-items: center; gap: 6px;
 }
 .us-source-tab svg { width: 13px; height: 13px; }
 .us-source-tab:hover { color: var(--us-fg); }
 .us-source-tab[data-active="true"] {
-  background: var(--us-bg);
+  background: var(--us-raised);
+  border-color: var(--us-border);
   color: var(--us-fg);
-  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
 }
 .us-source-tab:focus-visible { outline: 2px solid var(--us-primary); outline-offset: 2px; }
 
@@ -352,28 +407,28 @@ var BASE_CSS = `
 .us-url-form {
   display: flex; gap: 8px;
   padding: 16px;
-  border: 1.5px dashed var(--us-border-strong);
-  border-radius: calc(var(--us-radius) - 2px);
-  background: color-mix(in srgb, var(--us-subtle) 60%, transparent);
+  border: 1px dashed var(--us-border-strong);
+  border-radius: 8px;
+  background: var(--us-subtle);
 }
 .us-url-input {
   appearance: none;
   flex: 1; min-width: 0;
   padding: 9px 12px; min-height: 36px;
-  border-radius: 8px; border: 1px solid var(--us-border);
+  border-radius: 8px; border: 1px solid var(--us-border-strong);
   background: var(--us-bg); color: var(--us-fg);
-  font: inherit; font-size: 13px;
-  transition: border-color 140ms, box-shadow 140ms;
+  font: inherit; font-size: 13px; letter-spacing: -0.006em;
+  transition: border-color 120ms, box-shadow 120ms;
 }
 .us-url-input::placeholder { color: var(--us-muted); }
 .us-url-input:focus {
   outline: none;
   border-color: var(--us-primary);
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--us-primary) 18%, transparent);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--us-primary) 25%, transparent);
 }
 .us-url-hint {
   margin-top: 8px;
-  font-size: 11.5px; color: var(--us-muted);
+  font-size: 11.5px; color: var(--us-muted); letter-spacing: -0.006em;
 }
 .us-url-hint[data-error="true"] { color: var(--us-danger); }
 
@@ -384,12 +439,12 @@ var BASE_CSS = `
   width: 28px; height: 28px;
   display: inline-flex; align-items: center; justify-content: center;
   color: var(--us-muted); border-radius: 6px;
-  transition: background 140ms, color 140ms;
+  transition: color 100ms, background 0ms;
 }
-.us-file-action:hover { background: var(--us-subtle); color: var(--us-fg); }
+.us-file-action:hover { background: var(--us-overlay); color: var(--us-fg); }
 .us-file-action:focus-visible { outline: 2px solid var(--us-primary); outline-offset: 1px; }
 .us-file-action svg { width: 15px; height: 15px; }
-.us-file-action[data-edited="true"] { color: var(--us-primary); }
+.us-file-action[data-edited="true"] { color: var(--us-accent); }
 .us-file:not([data-state="queued"]) .us-file-action { display: none; }
 
 /* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 image editor overlay \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
@@ -404,15 +459,15 @@ var BASE_CSS = `
   padding: 14px 16px;
   border-bottom: 1px solid var(--us-border);
 }
-.us-editor-title { font-weight: 600; font-size: 14px; flex: 1; letter-spacing: -0.01em; }
+.us-editor-title { font-weight: 600; font-size: 15px; flex: 1; letter-spacing: -0.02em; }
 .us-editor-back {
   appearance: none; background: transparent; border: 0; cursor: pointer;
   width: 32px; height: 32px; border-radius: 8px;
   display: inline-flex; align-items: center; justify-content: center;
   color: var(--us-muted);
-  transition: background 140ms, color 140ms;
+  transition: color 100ms, background 0ms;
 }
-.us-editor-back:hover { background: var(--us-subtle); color: var(--us-fg); }
+.us-editor-back:hover { background: var(--us-overlay); color: var(--us-fg); }
 .us-editor-back svg { width: 16px; height: 16px; }
 
 .us-editor-canvas-wrap {
@@ -425,7 +480,7 @@ var BASE_CSS = `
 }
 .us-editor-canvas {
   max-width: 100%; max-height: 100%;
-  border-radius: 6px;
+  border-radius: 4px;
   display: block;
   /* Checkerboard for transparency awareness (visible only in circle mode). */
   background-image:
@@ -445,18 +500,18 @@ var BASE_CSS = `
   border-top: 1px solid var(--us-border);
 }
 .us-tool {
-  appearance: none; background: transparent; border: 1px solid var(--us-border);
+  appearance: none; background: transparent; border: 1px solid var(--us-border-strong);
   font: inherit; cursor: pointer;
   padding: 6px 11px; min-height: 32px;
   border-radius: 8px;
-  font-size: 12.5px; font-weight: 500;
+  font-size: 12px; font-weight: 500; letter-spacing: 0.02em;
   color: var(--us-fg);
   display: inline-flex; align-items: center; gap: 6px;
-  transition: background 140ms, border-color 140ms, color 140ms;
+  transition: border-color 120ms, color 100ms, background 0ms;
 }
-.us-tool:hover { background: var(--us-subtle); border-color: var(--us-border-strong); }
+.us-tool:hover { background: var(--us-overlay); }
 .us-tool[data-active="true"] {
-  background: color-mix(in srgb, var(--us-primary) 10%, var(--us-bg));
+  background: color-mix(in srgb, var(--us-primary) 12%, var(--us-bg));
   border-color: var(--us-primary);
   color: var(--us-primary);
 }
@@ -491,6 +546,56 @@ var BASE_CSS = `
 .us-crop-handle[data-pos="sw"] { bottom: -6px; left: -6px; cursor: nesw-resize; }
 .us-crop-handle[data-pos="se"] { bottom: -6px; right: -6px; cursor: nwse-resize; }
 
+/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 mobile (bottom sheet) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+@media (max-width: 600px) {
+  .us-picker-backdrop {
+    padding: 0;
+    align-items: flex-end;
+  }
+  .us-picker {
+    max-width: none;
+    max-height: calc(100dvh - 40px);
+    border-radius: 16px 16px 0 0;
+    border-left: 0; border-right: 0; border-bottom: 0;
+    animation: us-sheet-up 300ms cubic-bezier(0.32, 0.72, 0, 1);
+  }
+  /* Grab handle */
+  .us-picker::before {
+    content: "";
+    flex-shrink: 0;
+    width: 36px; height: 4px;
+    border-radius: 999px;
+    background: var(--us-border-strong);
+    margin: 8px auto 0;
+  }
+  .us-picker-header { padding: 10px 16px 14px; }
+  .us-dropzone { padding: 24px 16px; }
+  .us-btn { min-height: 44px; padding: 10px 16px; }
+  .us-actions {
+    flex-direction: column; align-items: stretch; gap: 10px;
+    padding-bottom: max(12px, env(safe-area-inset-bottom));
+  }
+  .us-actions-summary { text-align: center; order: 2; }
+  .us-actions-summary:empty { display: none; }
+  .us-actions-buttons { width: 100%; }
+  .us-actions-buttons .us-btn { flex: 1; }
+  .us-source-tabs { display: flex; width: 100%; }
+  .us-source-tab { flex: 1; justify-content: center; min-height: 38px; }
+  .us-url-form { flex-direction: column; }
+  .us-url-input { min-height: 44px; }
+  .us-file { padding: 12px; }
+  .us-file-action, .us-picker-close { width: 36px; height: 36px; }
+  .us-editor-toolbar { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
+  .us-tool { flex-shrink: 0; min-height: 40px; }
+  .us-editor-footer { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
+  .us-editor-footer .us-btn { flex: 1; }
+  .us-footer { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
+}
+@keyframes us-sheet-up {
+  from { opacity: 0.6; transform: translateY(32px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
 /* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 reduced motion \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
 @media (prefers-reduced-motion: reduce) {
   .us-picker-backdrop,
@@ -945,6 +1050,7 @@ var DEFAULT_TITLE = "Upload files";
 var FOOTER_LINK = "https://unionstack.link";
 var ICON2 = {
   upload: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>`,
+  fileUp: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><path d="M12 18v-6"/><path d="m9 15 3-3 3 3"/></svg>`,
   close: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>`,
   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>`,
@@ -1205,7 +1311,7 @@ var Picker = class {
     dz.setAttribute("tabindex", "0");
     dz.setAttribute("aria-label", "Drop files here or click to browse");
     const icon = el2("div", "us-dropzone-icon");
-    icon.innerHTML = ICON2.upload;
+    icon.innerHTML = ICON2.fileUp;
     dz.appendChild(icon);
     dz.appendChild(el2("div", "us-dropzone-title", "Drop files to upload"));
     dz.appendChild(el2("div", "us-dropzone-hint", "or click to browse from your device"));
@@ -1480,7 +1586,10 @@ var Picker = class {
     const done = this.items.filter((i) => i.state === "done").length;
     const failed = this.items.filter((i) => i.state === "failed").length;
     const active = this.items.filter((i) => i.state === "uploading" || i.state === "queued").length;
-    if (active > 0) {
+    if (!this.uploadStarted && active > 0) {
+      const ready = this.items.filter((i) => i.state === "queued").length;
+      this.$summary.textContent = `${ready} file${ready === 1 ? "" : "s"} ready`;
+    } else if (active > 0) {
       this.$summary.textContent = `Uploading ${done + 1} of ${total}`;
     } else if (failed > 0) {
       this.$summary.textContent = `${done} of ${total} uploaded \xB7 ${failed} failed`;