@danxbot/ui 20.7.1 → 20.8.1

package/dist/index.js

@@ -17967,6 +17967,8 @@ const zS = pt({
        or description never runs underneath it — see the close button's own
        comment below for why it sits OUTSIDE this row instead of inside it. */
     header: "flex items-start gap-4 px-6 pr-12 pt-6",
+    /* Pinned to the popup's corner (see the close button's own comment). */
+    close: "absolute top-4 right-4",
     title: "font-display text-lg font-semibold text-primary text-balance",
     description: "mt-1.5 text-sm text-secondary text-pretty",
     /* The body scrolls, not the panel, so the header and footer stay put on a
@@ -18003,7 +18005,11 @@ const zS = pt({
            title turned into a column of two-letter lines. */
         title: "text-base truncate",
         description: "truncate",
-        body: "flex flex-col overflow-hidden p-0"
+        body: "flex flex-col overflow-hidden p-0",
+        /* DX-4533 — the bar is `pt-3` and its controls are `xs` (DX-4398), so the
+           close button takes the same `xs` size at the same `top-3`: it lines up
+           with the bar instead of sitting 8px below it at the default corner. */
+        close: "top-3"
       }
     }
   },
@@ -18070,8 +18076,9 @@ function vs({
                   {
                     label: "Close",
                     hideTooltip: !0,
-                    icon: /* @__PURE__ */ u(ae, { name: "x", size: "sm" }),
-                    className: "absolute top-4 right-4"
+                    size: c === "full" ? "xs" : "sm",
+                    icon: /* @__PURE__ */ u(ae, { name: "x", size: c === "full" ? "xs" : "sm" }),
+                    className: f.close()
                   }
                 )
               }
@@ -50203,9 +50210,13 @@ const h7 = [
   { value: "simulated", label: "Simulated" },
   { value: "live", label: "Live" }
 ];
-function fJ({ onOpenUseCaseLedger: e, showSimControls: t = !0 } = {}) {
-  const { canAccessDevTools: n, roles: r, viewingAsRoleId: o, setViewingAsRoleId: s, effectiveRole: i, isImpersonating: a } = Ps(), { networkSpeed: c, dataSource: l } = f7(), [d, p] = ne(!1), [f, h] = ne(!1);
-  return n ? /* @__PURE__ */ u(
+function fJ({
+  onOpenUseCaseLedger: e,
+  showSimControls: t = !0,
+  iconOnly: n = !1
+} = {}) {
+  const { canAccessDevTools: r, roles: o, viewingAsRoleId: s, setViewingAsRoleId: i, effectiveRole: a, isImpersonating: c } = Ps(), { networkSpeed: l, dataSource: d } = f7(), [p, f] = ne(!1), [h, m] = ne(!1);
+  return r ? /* @__PURE__ */ u(
     mn,
     {
       align: "end",
@@ -50214,11 +50225,12 @@ function fJ({ onOpenUseCaseLedger: e, showSimControls: t = !0 } = {}) {
         Je,
         {
           size: "sm",
-          variant: a ? "subtle" : "outline",
+          variant: c ? "subtle" : "outline",
+          iconOnly: n,
           "aria-label": "Developer tools",
           children: [
-            /* @__PURE__ */ u(ae, { name: "eye", size: "sm" }),
-            /* @__PURE__ */ u("span", { className: "hidden sm:inline", children: "Dev tools" })
+            /* @__PURE__ */ u(ae, { name: "wrench", size: "sm" }),
+            !n && /* @__PURE__ */ u("span", { className: "hidden sm:inline", children: "Dev tools" })
           ]
         }
       ),
@@ -50230,13 +50242,13 @@ function fJ({ onOpenUseCaseLedger: e, showSimControls: t = !0 } = {}) {
             {
               "aria-label": "View the app as a role",
               placeholder: "Your actual role",
-              value: o,
-              onValueChange: (m) => s(m ?? null),
-              children: r.map((m) => /* @__PURE__ */ u(Hn, { value: m.id, children: m.label }, m.id))
+              value: s,
+              onValueChange: (g) => i(g ?? null),
+              children: o.map((g) => /* @__PURE__ */ u(Hn, { value: g.id, children: g.label }, g.id))
             }
           )
         ] }),
-        a && /* @__PURE__ */ R(
+        c && /* @__PURE__ */ R(
           "div",
           {
             role: "status",
@@ -50246,7 +50258,7 @@ function fJ({ onOpenUseCaseLedger: e, showSimControls: t = !0 } = {}) {
               /* @__PURE__ */ R("p", { className: "text-xs text-warning-text", children: [
                 "Viewing as",
                 " ",
-                /* @__PURE__ */ u("strong", { className: "font-semibold", children: i?.label ?? "an unknown role" }),
+                /* @__PURE__ */ u("strong", { className: "font-semibold", children: a?.label ?? "an unknown role" }),
                 ". Screens and permissions reflect that role, not your own."
               ] })
             ]
@@ -50257,8 +50269,8 @@ function fJ({ onOpenUseCaseLedger: e, showSimControls: t = !0 } = {}) {
           {
             variant: "outline",
             size: "sm",
-            disabled: !a,
-            onClick: () => s(null),
+            disabled: !c,
+            onClick: () => i(null),
             children: [
               /* @__PURE__ */ u(ae, { name: "rotate-ccw", size: "sm" }),
               "Reset to actual"
@@ -50272,12 +50284,12 @@ function fJ({ onOpenUseCaseLedger: e, showSimControls: t = !0 } = {}) {
               pr,
               {
                 "aria-label": "Data source",
-                value: l,
-                onValueChange: (m) => Z0({ dataSource: m }),
-                children: m7.map((m) => /* @__PURE__ */ u(Hn, { value: m.value, children: m.label }, m.value))
+                value: d,
+                onValueChange: (g) => Z0({ dataSource: g }),
+                children: m7.map((g) => /* @__PURE__ */ u(Hn, { value: g.value, children: g.label }, g.value))
               }
             ),
-            l === "live" && /* @__PURE__ */ u("p", { className: "text-2xs text-tertiary", children: "No live backend is configured in this demo — stores keep answering with simulated data. A consuming app wires its own fetcher per store to make this real." })
+            d === "live" && /* @__PURE__ */ u("p", { className: "text-2xs text-tertiary", children: "No live backend is configured in this demo — stores keep answering with simulated data. A consuming app wires its own fetcher per store to make this real." })
           ] }),
           /* @__PURE__ */ R("div", { className: "flex flex-col gap-2 border-t border-border-subtle pt-4", children: [
             /* @__PURE__ */ u("span", { className: "text-2xs font-semibold tracking-widest text-tertiary uppercase", children: "Network speed" }),
@@ -50285,9 +50297,9 @@ function fJ({ onOpenUseCaseLedger: e, showSimControls: t = !0 } = {}) {
               pr,
               {
                 "aria-label": "Network speed",
-                value: c,
-                onValueChange: (m) => Z0({ networkSpeed: m }),
-                children: h7.map((m) => /* @__PURE__ */ u(Hn, { value: m.value, children: m.label }, m.value))
+                value: l,
+                onValueChange: (g) => Z0({ networkSpeed: g }),
+                children: h7.map((g) => /* @__PURE__ */ u(Hn, { value: g.value, children: g.label }, g.value))
               }
             )
           ] }),
@@ -50298,15 +50310,15 @@ function fJ({ onOpenUseCaseLedger: e, showSimControls: t = !0 } = {}) {
                 /* @__PURE__ */ u(ae, { name: "refresh-cw", size: "sm" }),
                 "Regenerate demo data"
               ] }),
-              open: d,
-              onOpenChange: p,
+              open: p,
+              onOpenChange: f,
               title: "Regenerate demo data?",
               description: "Every user, team, role and permission reverts to its seed. The use-case ledger is untouched — this never erases product history.",
               confirmLabel: "Regenerate",
-              loading: f,
+              loading: h,
               onConfirm: () => {
-                h(!0), i7("demo").finally(() => {
-                  h(!1), p(!1);
+                m(!0), i7("demo").finally(() => {
+                  m(!1), f(!1);
                 });
               }
             }