@nivaro/react 0.3.36 → 0.3.38

package/dist/shared/components/layout-editor/EditorTopBar.js

@@ -1,6 +1,6 @@
 import { jsxs as n, jsx as e, Fragment as Z } from "react/jsx-runtime";
 import { ChevronLeft as ie, Undo2 as ce, Redo2 as me, Wrench as ue, Sparkles as he, History as pe, MoreHorizontal as be, Save as z, GitCompare as xe, ChevronDown as X, Eye as Y, X as ge, RotateCcw as ve } from "lucide-react";
-import { useState as B, useMemo as we, useCallback as q, useRef as fe, useEffect as ke } from "react";
+import { useState as E, useMemo as we, useCallback as q, useRef as fe, useEffect as ke } from "react";
 import { useNivaroClient as Ne } from "../../context.js";
 import { useDebounced as ye } from "../../hooks/useDebounced.js";
 import { useRelationOptions as Ce } from "../../hooks/useRelationOptions.js";
@@ -14,27 +14,28 @@ import { ShareButton as Be, WatchButton as De } from "./collab/FormFollowShare.j
 import { HistoryPanel as Ee } from "./HistoryPanel.js";
 import { useRuleChoiceLabels as Le, useDisplayTemplate as Ue, useRoleNames as $e } from "./overview/overview-api.js";
 import { rowPill as Me, purposeSegments as je, TYPE_USE as G, Pill as He, Sentence as Ie } from "./overview/purpose.js";
-import { ScheduleChange as We } from "./ScheduleChange.js";
-import { barIconBtn as I, BarMenu as A, barIconOn as Ze, MenuSeparator as W, ToolButton as J, barBtnOn as _e, barBtn as Fe } from "./toolbar-kit.js";
-import { unsavedText as D } from "./UnsavedConfirm.js";
-const ze = "h-8 w-full rounded-md border border-slate-200 bg-white px-2.5 text-[12.5px] text-slate-800 outline-none placeholder:text-slate-400 focus:border-nvr-cyan dark:border-border dark:bg-background dark:text-foreground dark:placeholder:text-muted-foreground", K = "mb-1 block text-[11.5px] font-semibold text-slate-600 dark:text-muted-foreground", Ye = `
+import { SampleRecordChip as We, SampleRecordOffer as Ze } from "./preview/SampleRecord.js";
+import { ScheduleChange as _e } from "./ScheduleChange.js";
+import { barIconBtn as I, BarMenu as D, barIconOn as Fe, MenuSeparator as W, ToolButton as J, barBtnOn as ze, barBtn as Ye } from "./toolbar-kit.js";
+import { unsavedText as L } from "./UnsavedConfirm.js";
+const Ge = "h-8 w-full rounded-md border border-slate-200 bg-white px-2.5 text-[12.5px] text-slate-800 outline-none placeholder:text-slate-400 focus:border-nvr-cyan dark:border-border dark:bg-background dark:text-foreground dark:placeholder:text-muted-foreground", K = "mb-1 block text-[11.5px] font-semibold text-slate-600 dark:text-muted-foreground", Je = `
 [data-editor-topbar]{container-type:inline-size;container-name:letb}
 @container letb (max-width: 1499px){[data-editor-topbar] [data-tb-sentence]{display:none}}
 @container letb (max-width: 1399px){[data-editor-topbar] [data-tb-xwide]{display:none}}
 @container letb (max-width: 1099px){[data-editor-topbar] [data-tb-wide],[data-editor-topbar] [data-tb-menu-label]{display:none}}
 @container letb (min-width: 1100px){[data-editor-topbar] [data-tb-name]{min-width:140px}}
 `;
-function Ge({
+function Ke({
   draft: i,
   onOpen: a,
   pendingTip: d
 }) {
-  const { status: r, error: o } = i, s = i.unsavedCount ?? 0, t = s > 0 && (r === "idle" || r === "saved"), m = r === "saving" ? "Saving…" : r === "error" ? o ?? "Not saved" : r === "conflict" ? s > 0 ? "Not saved — someone else saved" : "Reloaded — someone else saved" : t ? D(s) : "Saved", p = /* @__PURE__ */ n(
+  const { status: r, error: o } = i, l = i.unsavedCount ?? 0, t = l > 0 && (r === "idle" || r === "saved"), m = r === "saving" ? "Saving…" : r === "error" ? o ?? "Not saved" : r === "conflict" ? l > 0 ? "Not saved — someone else saved" : "Reloaded — someone else saved" : t ? L(l) : "Saved", p = /* @__PURE__ */ n(
     "span",
     {
       role: "status",
       "data-save-status": r,
-      "data-unsaved": s,
+      "data-unsaved": l,
       "data-tip": (r === "error" || r === "conflict") && o ? o : t ? d ?? "Only you see these changes until you save (⌘S)" : void 0,
       className: u(
         "inline-flex max-w-[180px] shrink-0 items-center gap-1 whitespace-nowrap rounded-full px-2 py-px text-[11px] font-semibold",
@@ -55,20 +56,20 @@ function Ge({
     {
       type: "button",
       "data-unsaved-list-open": "",
-      "aria-label": `${D(s)} — list them`,
+      "aria-label": `${L(l)} — list them`,
       onClick: (b) => a(b.currentTarget),
       className: "inline-flex rounded-full transition-opacity hover:opacity-80",
       children: p
     }
   );
 }
-function Je({
+function Xe({
   icon: i,
   label: a,
   hint: d,
   on: r,
   onChange: o,
-  data: s
+  data: l
 }) {
   return /* @__PURE__ */ n("div", { className: "flex items-start gap-2 text-[12.5px] text-slate-700 dark:text-foreground", children: [
     /* @__PURE__ */ e("span", { className: "mt-0.5 text-slate-500 dark:text-muted-foreground", children: i }),
@@ -84,7 +85,7 @@ function Je({
         "aria-checked": r,
         "aria-label": a,
         onClick: () => o(!r),
-        ...s,
+        ...l,
         className: u(
           "relative mt-0.5 h-4 w-7 shrink-0 rounded-full transition-colors",
           r ? "bg-nvr-cyan" : "bg-slate-300 dark:bg-white/35"
@@ -102,36 +103,36 @@ function Je({
     )
   ] });
 }
-function Ke({
+function qe({
   collection: i,
   value: a,
   onChange: d,
   showHidden: r,
   onShowHidden: o,
-  extra: s
+  extra: l
 }) {
-  var S, R, O, f;
-  const t = Ne(), [m, p] = B(!1), [b, E] = B(""), L = ye(b, 250), { data: v } = Ue(i, m), { data: x = [] } = $e(!0), { options: N, loading: U } = Ce(m ? t : null, i, {
-    search: L,
+  var O, T, P, N;
+  const t = Ne(), [m, p] = E(!1), [b, U] = E(""), v = ye(b, 250), { data: w } = Ue(i, m), { data: x = [] } = $e(!0), { options: f, loading: C } = Ce(m ? t : null, i, {
+    search: v,
     limit: 8,
-    displayTemplate: v ?? null,
-    enabled: m && v !== void 0
-  }), y = Re(Oe).length, w = ((S = x.find((l) => l.id === a.roleId)) == null ? void 0 : S.name) ?? null, C = ((R = x.find((l) => l.id === a.compareRoleId)) == null ? void 0 : R.name) ?? null, $ = [
-    (O = a.record) == null ? void 0 : O.label,
-    C && w ? `${w} | ${C}` : w,
-    (f = a.state) == null ? void 0 : f.label,
+    displayTemplate: w ?? null,
+    enabled: m && w !== void 0
+  }), S = Re(Oe).length, k = ((O = x.find((s) => s.id === a.roleId)) == null ? void 0 : O.name) ?? null, R = ((T = x.find((s) => s.id === a.compareRoleId)) == null ? void 0 : T.name) ?? null, $ = [
+    a.sample ? "Sample record" : (P = a.record) == null ? void 0 : P.label,
+    R && k ? `${k} | ${R}` : k,
+    (N = a.state) == null ? void 0 : N.label,
     a.values && Object.keys(a.values).length > 0 ? "What if" : null,
-    a.device && a.device !== "desktop" ? a.device === "phone" ? "Phone" : "Tablet" : null,
+    a.device && a.device !== "desktop" ? a.device === "phone" ? "Phone" : a.device === "all" ? "All devices" : "Tablet" : null,
     a.who ? "Who sees" : null,
     // #2858 — pretending something is down is a preview mode too: never forgotten on screen.
-    y > 0 ? `${y} down` : null
+    S > 0 ? `${S} down` : null
   ].filter(Boolean).join(" · ") || "No record";
   return /* @__PURE__ */ n(Q, { open: m, onOpenChange: p, children: [
     /* @__PURE__ */ e(V, { asChild: !0, children: /* @__PURE__ */ n(
       "button",
       {
         type: "button",
-        className: u(Fe, "min-w-[110px] max-w-[260px] shrink", m && _e),
+        className: u(Ye, "min-w-[110px] max-w-[260px] shrink", m && ze),
         "aria-label": "Preview as",
         "data-preview-as": "",
         "data-tip": "Show the form with a real record’s values, as a role sees it",
@@ -164,7 +165,14 @@ function Ke({
         className: "max-h-[min(80vh,640px)] w-[320px] overflow-y-auto overscroll-contain p-3",
         children: [
           /* @__PURE__ */ e("p", { className: K, children: "Record" }),
-          a.record ? /* @__PURE__ */ n("span", { className: "inline-flex max-w-full items-center gap-1.5 rounded-full bg-nvr-cyan/10 px-2.5 py-1 text-[12px] font-medium text-slate-800 dark:text-foreground", children: [
+          a.sample ? /* @__PURE__ */ e(
+            We,
+            {
+              collection: i,
+              onSample: (s) => d({ ...a, record: null, sample: s }),
+              onClear: () => d({ ...a, sample: null })
+            }
+          ) : a.record ? /* @__PURE__ */ n("span", { className: "inline-flex max-w-full items-center gap-1.5 rounded-full bg-nvr-cyan/10 px-2.5 py-1 text-[12px] font-medium text-slate-800 dark:text-foreground", children: [
             /* @__PURE__ */ e("span", { className: "truncate", children: a.record.label }),
             /* @__PURE__ */ e(
               "button",
@@ -181,43 +189,55 @@ function Ke({
               "input",
               {
                 value: b,
-                onChange: (l) => E(l.target.value),
+                onChange: (s) => U(s.target.value),
                 placeholder: "Search records…",
                 "aria-label": "Search records",
-                className: ze
+                className: Ge
               }
             ),
             /* @__PURE__ */ n("div", { className: "mt-1 max-h-[220px] overflow-y-auto overscroll-contain", children: [
-              N.map((l) => /* @__PURE__ */ e(
+              f.map((s) => /* @__PURE__ */ e(
                 "button",
                 {
                   type: "button",
-                  onClick: () => d({ ...a, record: { id: String(l.id), label: l.label } }),
+                  onClick: () => d({
+                    ...a,
+                    record: { id: String(s.id), label: s.label },
+                    sample: null
+                  }),
                   className: "block w-full truncate rounded px-2 py-1.5 text-left text-[12.5px] text-slate-700 hover:bg-muted dark:text-foreground",
-                  children: l.label
+                  children: s.label
                 },
-                String(l.id)
+                String(s.id)
               )),
-              !U && N.length === 0 && /* @__PURE__ */ e("p", { className: "px-2 py-1.5 text-[12px] text-slate-500 dark:text-muted-foreground", children: "No records match." })
-            ] })
+              !C && f.length === 0 && v.trim() !== "" && /* @__PURE__ */ e("p", { className: "px-2 py-1.5 text-[12px] text-slate-500 dark:text-muted-foreground", children: "No records match." })
+            ] }),
+            /* @__PURE__ */ e(
+              Ze,
+              {
+                collection: i,
+                empty: !C && f.length === 0 && v.trim() === "",
+                onSample: (s) => d({ ...a, record: null, sample: s })
+              }
+            )
           ] }),
           /* @__PURE__ */ e("p", { className: u(K, "mt-3"), children: "As a role" }),
           /* @__PURE__ */ e(
             Pe,
             {
               value: a.roleId ?? "",
-              onChange: (l) => d({ ...a, roleId: l || null }),
+              onChange: (s) => d({ ...a, roleId: s || null }),
               ariaLabel: "Preview as role",
               className: "h-8 text-[12.5px]",
               options: [
                 { value: "", label: "Any role" },
-                ...x.map((l) => ({ value: l.id, label: l.name }))
+                ...x.map((s) => ({ value: s.id, label: s.name }))
               ]
             }
           ),
           /* @__PURE__ */ e("p", { className: "mt-2 text-[11.5px] leading-snug text-slate-500 dark:text-muted-foreground", children: "The form shows this record’s values, steps and rules. Nothing you do here changes the record." }),
           /* @__PURE__ */ e("div", { className: "mt-3 border-t border-slate-100 pt-3 dark:border-border", children: /* @__PURE__ */ e(
-            Je,
+            Xe,
             {
               icon: /* @__PURE__ */ e(Y, { className: "h-3.5 w-3.5" }),
               label: "Show hidden",
@@ -227,50 +247,50 @@ function Ke({
               data: { "data-show-hidden-switch": "" }
             }
           ) }),
-          s
+          l
         ]
       }
     )
   ] });
 }
-function xt({
+function wt({
   collection: i,
   layoutId: a,
   layoutName: d,
   layoutType: r,
   row: o,
-  fields: s,
+  fields: l,
   draft: t,
   preview: m,
   onPreview: p,
   showHidden: b,
-  onShowHidden: E,
-  onBack: L,
-  backLabel: v = "Forms",
+  onShowHidden: U,
+  onBack: v,
+  backLabel: w = "Forms",
   view: x,
-  tools: N,
-  ai: U,
-  previewExtra: y,
-  problems: w,
-  more: C,
+  tools: f,
+  ai: C,
+  previewExtra: S,
+  problems: k,
+  more: R,
   presence: $,
-  onOpenUnsaved: S,
-  pendingTip: R,
-  onSelectField: O,
-  onShowOnCanvas: f,
-  onReviewChanges: l,
+  onOpenUnsaved: O,
+  pendingTip: T,
+  onSelectField: P,
+  onShowOnCanvas: N,
+  onReviewChanges: s,
   reviewing: te = !1,
   testing: ae,
   beforeSave: re
 }) {
-  const [M, j] = B(
+  const [M, j] = E(
     () => typeof window < "u" && new URLSearchParams(window.location.search).get("history") === "1"
-  ), h = t.unsavedCount ?? 0, H = o ? Me(o) : null, ne = we(() => o ? [o] : [], [o]), oe = Le(i, s, ne), _ = o ? je(o, s, oe) : G[r] ? [{ text: G[r] }] : [], T = !!t.save && !t.autosave, P = T && h > 0, se = q(
+  ), h = t.unsavedCount ?? 0, H = o ? Me(o) : null, ne = we(() => o ? [o] : [], [o]), oe = Le(i, l, ne), _ = o ? je(o, l, oe) : G[r] ? [{ text: G[r] }] : [], A = !!t.save && !t.autosave, B = A && h > 0, se = q(
     (c) => {
       var g, F;
-      return ((F = (g = s.find((le) => le.field === c)) == null ? void 0 : g.label) == null ? void 0 : F.trim()) || Se(c);
+      return ((F = (g = l.find((le) => le.field === c)) == null ? void 0 : g.label) == null ? void 0 : F.trim()) || Se(c);
     },
-    [s]
+    [l]
   ), de = Te(d);
   return /* @__PURE__ */ n(
     "header",
@@ -278,22 +298,22 @@ function xt({
       "data-editor-topbar": "",
       className: "flex shrink-0 flex-nowrap items-center gap-1.5 overflow-hidden border-b border-slate-200 bg-white px-3 py-2 dark:border-border dark:bg-card",
       children: [
-        /* @__PURE__ */ e("style", { children: Ye }),
+        /* @__PURE__ */ e("style", { children: Je }),
         /* @__PURE__ */ n(
           "button",
           {
             type: "button",
-            "aria-label": v,
+            "aria-label": w,
             "data-editor-back": "",
-            onClick: (c) => L(c.currentTarget),
+            onClick: (c) => v(c.currentTarget),
             className: "inline-flex h-8 shrink-0 items-center gap-0.5 rounded-md pl-1 pr-2 text-[12px] text-slate-500 transition-colors hover:bg-muted hover:text-slate-800 dark:text-muted-foreground dark:hover:text-foreground",
             children: [
               /* @__PURE__ */ e(ie, { className: "h-4 w-4" }),
-              /* @__PURE__ */ e("span", { "data-tb-wide": "", children: v })
+              /* @__PURE__ */ e("span", { "data-tb-wide": "", children: w })
             ]
           }
         ),
-        /* @__PURE__ */ e(k, {}),
+        /* @__PURE__ */ e(y, {}),
         /* @__PURE__ */ n("div", { "data-tb-name": "", className: "flex min-w-[64px] flex-1 items-center gap-2", children: [
           /* @__PURE__ */ e(
             "h2",
@@ -317,7 +337,7 @@ function xt({
           ),
           $
         ] }),
-        /* @__PURE__ */ e(k, {}),
+        /* @__PURE__ */ e(y, {}),
         /* @__PURE__ */ n("div", { className: "flex shrink-0 items-center gap-0.5", children: [
           /* @__PURE__ */ e(
             "button",
@@ -345,47 +365,47 @@ function xt({
           )
         ] }),
         x && /* @__PURE__ */ n(Z, { children: [
-          /* @__PURE__ */ e(k, {}),
+          /* @__PURE__ */ e(y, {}),
           /* @__PURE__ */ e("div", { className: "flex shrink-0 items-center gap-1", children: x })
         ] }),
-        /* @__PURE__ */ e(k, {}),
+        /* @__PURE__ */ e(y, {}),
         /* @__PURE__ */ e(
-          Ke,
+          qe,
           {
             collection: i,
             value: m,
             onChange: p,
             showHidden: b,
-            onShowHidden: E,
-            extra: y
+            onShowHidden: U,
+            extra: S
           }
         ),
         /* @__PURE__ */ e(
-          A,
+          D,
           {
             label: "Tools",
             icon: /* @__PURE__ */ e(ue, { className: "h-3.5 w-3.5" }),
             tip: "Arrange, find, outline, every form, form map and shortcuts",
-            children: N
+            children: f
           }
         ),
         /* @__PURE__ */ e(
-          A,
+          D,
           {
             label: "AI",
             icon: /* @__PURE__ */ e(he, { className: "h-3.5 w-3.5 text-nvr-cyan" }),
             tip: "Rebuild, review and ask about this form with AI; type a change",
             width: "w-[320px]",
-            children: U
+            children: C
           }
         ),
-        w,
+        k,
         /* @__PURE__ */ n(Q, { open: M, onOpenChange: j, children: [
           /* @__PURE__ */ e(V, { asChild: !0, children: /* @__PURE__ */ e(
             "button",
             {
               type: "button",
-              className: u(I, M && Ze),
+              className: u(I, M && Fe),
               "aria-label": "History",
               "data-tip": "History: saved versions, this session’s steps, restore",
               "data-editor-history": "",
@@ -409,8 +429,8 @@ function xt({
                   bundle: t.bundle,
                   onApply: (c, g) => t.apply(c, { label: g }),
                   fieldLabel: se,
-                  onShowOnCanvas: f ? (c, g) => {
-                    j(!1), f(c, g);
+                  onShowOnCanvas: N ? (c, g) => {
+                    j(!1), N(c, g);
                   } : void 0
                 }
               )
@@ -418,7 +438,7 @@ function xt({
           )
         ] }),
         /* @__PURE__ */ n(
-          A,
+          D,
           {
             label: "More",
             icon: /* @__PURE__ */ e(be, { className: "h-4 w-4" }),
@@ -429,18 +449,18 @@ function xt({
             children: [
               ae,
               /* @__PURE__ */ e(W, {}),
-              /* @__PURE__ */ e(Be, { layoutId: a, fields: s, onSelectField: O }),
+              /* @__PURE__ */ e(Be, { layoutId: a, fields: l, onSelectField: P }),
               /* @__PURE__ */ e(De, { layoutId: a }),
               /* @__PURE__ */ e(W, {}),
-              C
+              R
             ]
           }
         ),
-        /* @__PURE__ */ e(k, {}),
-        /* @__PURE__ */ e(Ge, { draft: t, onOpen: S, pendingTip: R }),
-        P && t.discard && /* @__PURE__ */ e(Xe, { count: h, onDiscard: t.discard }),
+        /* @__PURE__ */ e(y, {}),
+        /* @__PURE__ */ e(Ke, { draft: t, onOpen: O, pendingTip: T }),
+        B && t.discard && /* @__PURE__ */ e(Qe, { count: h, onDiscard: t.discard }),
         /* @__PURE__ */ n("div", { "data-save-split": "", className: "flex shrink-0 items-center", children: [
-          T && /* @__PURE__ */ n(
+          A && /* @__PURE__ */ n(
             "button",
             {
               type: "button",
@@ -450,7 +470,7 @@ function xt({
                 var c;
                 return void ((c = t.save) == null ? void 0 : c.call(t));
               },
-              "data-tip": h > 0 ? `Save ${D(h)} (⌘S)` : "Nothing to save",
+              "data-tip": h > 0 ? `Save ${L(h)} (⌘S)` : "Nothing to save",
               className: u(
                 "inline-flex h-8 items-center gap-1.5 rounded-l-md px-3 text-[12.5px] font-medium transition-opacity disabled:pointer-events-none disabled:opacity-40",
                 h > 0 ? "bg-nvr-cyan text-white hover:opacity-90" : "border border-slate-200 text-slate-700 dark:border-border dark:text-foreground"
@@ -462,34 +482,34 @@ function xt({
             }
           ),
           /* @__PURE__ */ n(
-            A,
+            D,
             {
               label: "Save options",
               icon: /* @__PURE__ */ e(X, { className: "h-3.5 w-3.5" }),
               iconOnly: !0,
               align: "end",
               width: "w-[300px]",
-              tip: T ? "Review, check or schedule the changes; Autosave" : "Autosave",
+              tip: A ? "Review, check or schedule the changes; Autosave" : "Autosave",
               className: u(
-                T ? "rounded-l-none border border-l-0 border-slate-200 dark:border-border" : "border border-slate-200 dark:border-border"
+                A ? "rounded-l-none border border-l-0 border-slate-200 dark:border-border" : "border border-slate-200 dark:border-border"
               ),
               data: { "data-save-menu": "" },
               children: [
-                l && P && /* @__PURE__ */ e(
+                s && B && /* @__PURE__ */ e(
                   J,
                   {
                     label: "Review changes on canvas",
                     icon: /* @__PURE__ */ e(xe, { className: "h-3.5 w-3.5" }),
                     hint: "Mark the unsaved changes on the form",
                     checked: te,
-                    onClick: l,
+                    onClick: s,
                     data: { "data-editor-review": "" }
                   }
                 ),
-                P && re,
+                B && re,
                 /* @__PURE__ */ e(Ae, { layoutId: a, draft: t }),
-                t.unsavedOps && t.discard && P && /* @__PURE__ */ e(
-                  We,
+                t.unsavedOps && t.discard && B && /* @__PURE__ */ e(
+                  _e,
                   {
                     collection: i,
                     layoutId: a,
@@ -525,12 +545,12 @@ function xt({
     }
   );
 }
-function Xe({ count: i, onDiscard: a }) {
-  const [d, r] = B(!1), o = fe(null), s = q(() => {
+function Qe({ count: i, onDiscard: a }) {
+  const [d, r] = E(!1), o = fe(null), l = q(() => {
     o.current && clearTimeout(o.current), o.current = null, r(!1);
   }, []);
-  ke(() => s, [s]);
-  const t = `Discard ${D(i)}`;
+  ke(() => l, [l]);
+  const t = `Discard ${L(i)}`;
   return /* @__PURE__ */ n(
     "button",
     {
@@ -544,11 +564,11 @@ function Xe({ count: i, onDiscard: a }) {
           r(!0), o.current && clearTimeout(o.current), o.current = setTimeout(() => r(!1), 4e3);
           return;
         }
-        s(), a();
+        l(), a();
       },
-      onBlur: s,
+      onBlur: l,
       onKeyDown: (m) => {
-        m.key === "Escape" && d && (m.stopPropagation(), s());
+        m.key === "Escape" && d && (m.stopPropagation(), l());
       },
       className: u(
         "inline-flex h-8 shrink-0 items-center gap-1.5 whitespace-nowrap rounded-md px-2.5 text-[12.5px] font-medium transition-colors",
@@ -565,10 +585,10 @@ function Xe({ count: i, onDiscard: a }) {
     }
   );
 }
-function k() {
+function y() {
   return /* @__PURE__ */ e("span", { "aria-hidden": !0, "data-tb-wide": "", className: "h-5 w-px shrink-0 bg-slate-200 dark:bg-border" });
 }
 export {
-  Xe as DiscardButton,
-  xt as EditorTopBar
+  Qe as DiscardButton,
+  wt as EditorTopBar
 };