@rovela-ai/sdk 0.18.7 → 0.19.1

package/dist/admin/hooks/useDirtyState.js

@@ -23,6 +23,13 @@
  *   - `rebaseline()`  — mark the CURRENT state as the new clean baseline
  *                       (call after a successful save, or with an explicit
  *                       value after programmatic resets)
+ *
+ * READY CONTRACT (load-bearing): `ready` must start FALSE when a fetch will
+ * populate the form — derive it lazily from props at first render, e.g.
+ * `useState(() => !!entityId && !initialData)`. Flipping it inside the fetch
+ * effect is TOO LATE: this hook's capture effect runs before your fetch
+ * effect on render 1 and would baseline the pristine empty form, reading as
+ * phantom "Unsaved changes" the moment the data lands.
  */
 import { useCallback, useEffect, useMemo, useState } from 'react';
 export function useDirtyState(current, ready) {

package/dist/admin/hooks/useDirtyState.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDirtyState.js","sourceRoot":"","sources":["../../../src/admin/hooks/useDirtyState.ts"],"names":[],"mappings":"AAAA,YAAY,CAAA;AAEZ;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAWjE,MAAM,UAAU,aAAa,CAAI,OAAU,EAAE,KAAc;IACzD,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC,CAAA;IAE7D,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAA;IAElE,yEAAyE;IACzE,yEAAyE;IACzE,yEAAyE;IACzE,uEAAuE;IACvE,wBAAwB;IACxB,qDAAqD;IACrD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,KAAK,IAAI,QAAQ,KAAK,IAAI,EAAE,CAAC;YAC/B,2DAA2D;YAC3D,WAAW,CAAC,QAAQ,CAAC,CAAA;QACvB,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAA;IAE/B,MAAM,UAAU,GAAG,WAAW,CAC5B,CAAC,IAAQ,EAAE,EAAE;QACX,WAAW,CAAC,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAA;IACnE,CAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAA;IAED,MAAM,aAAa,GAAG,OAAO,CAC3B,GAAG,EAAE,CAAC,CAAC,QAAQ,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAO,CAAC,EAC9D,CAAC,QAAQ,CAAC,CACX,CAAA;IAED,OAAO;QACL,OAAO,EAAE,QAAQ,KAAK,IAAI,IAAI,QAAQ,KAAK,QAAQ;QACnD,aAAa;QACb,UAAU;KACX,CAAA;AACH,CAAC"}
+{"version":3,"file":"useDirtyState.js","sourceRoot":"","sources":["../../../src/admin/hooks/useDirtyState.ts"],"names":[],"mappings":"AAAA,YAAY,CAAA;AAEZ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAEH,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAWjE,MAAM,UAAU,aAAa,CAAI,OAAU,EAAE,KAAc;IACzD,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC,CAAA;IAE7D,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAA;IAElE,yEAAyE;IACzE,yEAAyE;IACzE,yEAAyE;IACzE,uEAAuE;IACvE,wBAAwB;IACxB,qDAAqD;IACrD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,KAAK,IAAI,QAAQ,KAAK,IAAI,EAAE,CAAC;YAC/B,2DAA2D;YAC3D,WAAW,CAAC,QAAQ,CAAC,CAAA;QACvB,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAA;IAE/B,MAAM,UAAU,GAAG,WAAW,CAC5B,CAAC,IAAQ,EAAE,EAAE;QACX,WAAW,CAAC,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAA;IACnE,CAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAA;IAED,MAAM,aAAa,GAAG,OAAO,CAC3B,GAAG,EAAE,CAAC,CAAC,QAAQ,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAO,CAAC,EAC9D,CAAC,QAAQ,CAAC,CACX,CAAA;IAED,OAAO;QACL,OAAO,EAAE,QAAQ,KAAK,IAAI,IAAI,QAAQ,KAAK,QAAQ;QACnD,aAAa;QACb,UAAU;KACX,CAAA;AACH,CAAC"}

package/dist/admin/styles/admin-theme.css

@@ -5234,3 +5234,332 @@ body[data-admin-savebar] .rovela-admin-theme .admin-toaster {
 .rovela-admin-theme .lucide {
   stroke-width: 1.5;
 }
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   MOBILE (2026-07 responsiveness pass — the LEDGER at thumb size)
+   Additive only. One shell pivot at 767px (matches the save bar's existing
+   mobile rule and stays desktop inside the platform's preview iframe);
+   sheets at 639px; column priority at 479px; touch sizing via pointer
+   media queries, never width.
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+/* ── Shell chrome defaults (desktop: burger + drawer head + scrim inert) ── */
+.rovela-admin-theme .admin-topbar-burger {
+  display: none;
+}
+
+.rovela-admin-theme .admin-nav-drawer-head {
+  display: none;
+}
+
+.rovela-admin-theme .admin-nav-backdrop {
+  display: none;
+}
+
+/* Row ⋯ menus can never exceed the viewport (safe at every width). */
+.rovela-admin-theme .admin-dropdown-content {
+  max-width: calc(100vw - 2rem);
+}
+
+/* ── The shell pivot: sidebar → overlay drawer ─────────────────────────── */
+@media (max-width: 767px) {
+  /* Hamburger in the top bar */
+  .rovela-admin-theme .admin-topbar-burger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 2.5rem;
+    height: 2.5rem;
+    margin-left: calc(-1 * var(--admin-space-2));
+    border: none;
+    background: none;
+    border-radius: var(--admin-radius-md);
+    color: hsl(var(--admin-foreground));
+    cursor: pointer;
+    flex-shrink: 0;
+  }
+
+  .rovela-admin-theme .admin-topbar-burger:hover {
+    background: hsl(var(--admin-background-subtle));
+  }
+
+  /* Top bar tightens; View/Edit pills go icon-only (aria-labels carry the
+     names); the Admin chip yields to the store name. */
+  .rovela-admin-theme .admin-topbar {
+    padding-left: var(--admin-space-3);
+    padding-right: var(--admin-space-3);
+    gap: var(--admin-space-2);
+  }
+
+  .rovela-admin-theme .admin-topbar-btn-label {
+    display: none;
+  }
+
+  .rovela-admin-theme .admin-topbar-btn {
+    width: 2.25rem;
+    height: 2.25rem;
+    padding: 0;
+    justify-content: center;
+  }
+
+  .rovela-admin-theme .admin-topbar-divider {
+    display: none;
+  }
+
+  /* The sidebar becomes a fixed overlay drawer: off-canvas by default,
+     slid in by data-mobile-open. Pure CSS animation both directions. */
+  .rovela-admin-theme .admin-sidebar {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: 17rem;
+    min-height: 0;
+    z-index: 230; /* above content + topbar, below modals (250) */
+    transform: translateX(-105%);
+    transition: transform 200ms var(--admin-ease, cubic-bezier(0.2, 0, 0, 1));
+    box-shadow: none;
+  }
+
+  .rovela-admin-theme .admin-sidebar[data-mobile-open="true"] {
+    transform: none;
+    box-shadow: var(--admin-shadow-2xl);
+  }
+
+  /* Scrim under the drawer — same visual family as the modal backdrop. */
+  .rovela-admin-theme .admin-nav-backdrop {
+    display: block;
+    position: fixed;
+    inset: 0;
+    z-index: 220;
+    background: rgb(0 0 0 / 0.5);
+    backdrop-filter: blur(4px);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 200ms ease;
+  }
+
+  .rovela-admin-theme .admin-nav-backdrop[data-open="true"] {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  /* Drawer head — the drawer overlays the top bar, so it carries its own
+     identity + a 44px close. */
+  .rovela-admin-theme .admin-nav-drawer-head {
+    display: flex;
+    align-items: center;
+    gap: var(--admin-space-2-5);
+    padding: var(--admin-space-3);
+    border-bottom: var(--admin-border-width) solid hsl(var(--admin-border));
+    flex-shrink: 0;
+  }
+
+  .rovela-admin-theme .admin-nav-drawer-name {
+    display: flex;
+    align-items: center;
+    gap: var(--admin-space-2);
+    min-width: 0;
+  }
+
+  .rovela-admin-theme .admin-nav-drawer-name b {
+    font-size: var(--admin-text-sm);
+    font-weight: var(--admin-font-bold);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .rovela-admin-theme .admin-nav-drawer-x {
+    margin-left: auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 2.75rem;
+    height: 2.75rem;
+    margin-right: calc(-1 * var(--admin-space-2));
+    border: none;
+    background: none;
+    border-radius: var(--admin-radius-md);
+    color: hsl(var(--admin-foreground-muted));
+    cursor: pointer;
+  }
+
+  .rovela-admin-theme .admin-nav-drawer-x:hover {
+    background: hsl(var(--admin-background-hover, var(--admin-background-subtle)));
+    color: hsl(var(--admin-foreground));
+  }
+
+  /* Drawer nav rows read at thumb size */
+  .rovela-admin-theme .admin-sidebar .admin-sidebar-item {
+    min-height: 2.75rem;
+  }
+
+  /* Content breathes at phone width */
+  .rovela-admin-theme .admin-layout-content {
+    padding: var(--admin-space-4);
+  }
+
+  /* Filter rows: the search takes its own full line; hard min-widths relax */
+  .rovela-admin-theme .admin-filter-search {
+    min-width: 0;
+  }
+
+  .rovela-admin-theme .admin-filter-bar .admin-input-with-icon {
+    flex: 1 1 100%;
+  }
+
+  /* Save bar: full width (rule predates this pass), safe-area padded, and
+     the desktop-only hints step aside. */
+  .rovela-admin-theme .admin-savebar {
+    padding-bottom: env(safe-area-inset-bottom, 0px);
+    height: calc(var(--admin-savebar-h) + env(safe-area-inset-bottom, 0px));
+  }
+
+  .rovela-admin-theme .admin-savebar-meta,
+  .rovela-admin-theme .admin-savebar-kbd {
+    display: none;
+  }
+}
+
+/* ── Phones: column priority + full-width feedback ─────────────────────── */
+@media (max-width: 479px) {
+  /* Low-priority table columns + bulk-select checkboxes rest until desktop
+     (Polaris' own condensed-mode call — bulk work belongs to bigger screens). */
+  .rovela-admin-theme .admin-col-optional,
+  .rovela-admin-theme .admin-col-bulk {
+    display: none;
+  }
+
+  /* Chips become a one-line thumb-scrollable row */
+  .rovela-admin-theme .admin-chip-row {
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    scrollbar-width: none;
+    -webkit-overflow-scrolling: touch;
+    padding-bottom: 2px;
+  }
+
+  .rovela-admin-theme .admin-chip-row::-webkit-scrollbar {
+    display: none;
+  }
+
+  .rovela-admin-theme .admin-chip {
+    flex-shrink: 0;
+  }
+
+  /* Toasts span the width instead of overflowing it */
+  .rovela-admin-theme .admin-toaster {
+    left: var(--admin-space-3);
+    right: var(--admin-space-3);
+    bottom: max(var(--admin-space-4), env(safe-area-inset-bottom, 1rem));
+    align-items: stretch;
+  }
+
+  .rovela-admin-theme .admin-toast-v2 {
+    max-width: none;
+  }
+
+  /* The Admin chip yields the top bar to the store name */
+  .rovela-admin-theme .admin-topbar-tag {
+    display: none;
+  }
+}
+
+/* ── Bottom sheets: AdminModal below 640px ──────────────────────────────
+   Pure CSS — the component is untouched. Cards dock to the bottom edge,
+   keep only the top radius, gain a grab affordance and slide up. */
+@media (max-width: 639px) {
+  .rovela-admin-theme .admin-modal-root {
+    align-items: flex-end;
+    padding: 0;
+  }
+
+  .rovela-admin-theme .admin-modal {
+    max-width: none;
+    margin: 0;
+    border-radius: var(--admin-radius-xl) var(--admin-radius-xl) 0 0;
+    max-height: calc(100vh - 2rem);
+    max-height: calc(100svh - 2rem);
+    animation: admin-sheet-in 260ms var(--admin-ease, cubic-bezier(0.2, 0, 0, 1));
+  }
+
+  /* Grab affordance (decorative — Escape / scrim / buttons dismiss) */
+  .rovela-admin-theme .admin-modal::before {
+    content: '';
+    display: block;
+    width: 2.25rem;
+    height: 4px;
+    border-radius: var(--admin-radius-full);
+    background: hsl(var(--admin-border));
+    margin: var(--admin-space-2) auto 0;
+  }
+
+  .rovela-admin-theme .admin-modal-footer {
+    padding-bottom: max(var(--admin-space-4), env(safe-area-inset-bottom, 1rem));
+  }
+}
+
+@keyframes admin-sheet-in {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: none;
+  }
+}
+
+/* ── Touch ergonomics — sized by input modality, not width ──────────────
+   44px controls on coarse pointers (WCAG 2.5.5 / Apple HIG); desktop
+   pointer density is untouched. */
+@media (pointer: coarse) {
+  .rovela-admin-theme .admin-btn {
+    height: 2.75rem;
+  }
+
+  .rovela-admin-theme .admin-btn-sm {
+    height: 2.5rem;
+  }
+
+  .rovela-admin-theme .admin-btn-icon.admin-btn-sm {
+    width: 2.5rem;
+    height: 2.5rem;
+  }
+
+  .rovela-admin-theme .admin-input,
+  .rovela-admin-theme .admin-filter-search {
+    height: 2.75rem;
+  }
+
+  .rovela-admin-theme textarea.admin-input {
+    height: auto;
+  }
+
+  .rovela-admin-theme .admin-select-trigger {
+    min-height: 2.75rem;
+  }
+
+  .rovela-admin-theme .admin-chip {
+    height: 2.25rem;
+  }
+
+  .rovela-admin-theme .admin-sidebar-item {
+    min-height: 2.75rem;
+  }
+
+  .rovela-admin-theme .admin-topbar-btn {
+    height: 2.25rem;
+  }
+}
+
+/* Reduced motion: the drawer and sheets appear without travel */
+@media (prefers-reduced-motion: reduce) {
+  .rovela-admin-theme .admin-sidebar,
+  .rovela-admin-theme .admin-nav-backdrop {
+    transition: none;
+  }
+
+  .rovela-admin-theme .admin-modal {
+    animation: none;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rovela-ai/sdk",
-  "version": "0.18.7",
+  "version": "0.19.1",
   "description": "Rovela SDK - Pre-built e-commerce components for AI-powered store generation",
   "type": "module",
   "license": "MIT",