@flytedan/flytebot-design-system 0.56.0 → 0.58.0

package/dist/index.cjs

@@ -49,6 +49,7 @@ __export(index_exports, {
   CHANNEL_WEIGHTS: () => CHANNEL_WEIGHTS,
   CHAT_UNAVAILABLE: () => CHAT_UNAVAILABLE,
   COPIED_FEEDBACK_MS: () => COPIED_FEEDBACK_MS,
+  CORNER_STACK_INSET_PROPERTY: () => CORNER_STACK_INSET_PROPERTY,
   Calendar: () => Calendar,
   Card: () => Card,
   CardGrid: () => CardGrid,
@@ -1386,9 +1387,11 @@ var React10 = __toESM(require("react"), 1);
 // src/kits/cornerStack.tsx
 var React9 = __toESM(require("react"), 1);
 var import_react_dom5 = require("react-dom");
+var CORNER_STACK_INSET_PROPERTY = "--fd-corner-stack-inset";
 var SLOTS = ["jobs", "toasts"];
 var references = /* @__PURE__ */ new Map();
 var host = null;
+var hostObserver = null;
 var slotElements = /* @__PURE__ */ new Map();
 function createHost() {
   const stack = document.createElement("div");
@@ -1402,8 +1405,18 @@ function createHost() {
     slotElements.set(slot, element);
   }
   document.body.appendChild(stack);
+  publishInset(stack);
+  if (typeof ResizeObserver === "function") {
+    hostObserver = new ResizeObserver(() => publishInset(stack));
+    hostObserver.observe(stack);
+  }
   return stack;
 }
+function publishInset(stack) {
+  const height = stack.offsetHeight;
+  const inset = height > 0 ? height + parseFloat(getComputedStyle(stack).bottom) : 0;
+  document.documentElement.style.setProperty(CORNER_STACK_INSET_PROPERTY, `${inset}px`);
+}
 function acquire(slot) {
   host ??= createHost();
   references.set(slot, (references.get(slot) ?? 0) + 1);
@@ -1414,6 +1427,9 @@ function release(slot) {
   if (remaining > 0) references.set(slot, remaining);
   else references.delete(slot);
   if (references.size === 0 && host) {
+    hostObserver?.disconnect();
+    hostObserver = null;
+    document.documentElement.style.removeProperty(CORNER_STACK_INSET_PROPERTY);
     host.remove();
     host = null;
     slotElements.clear();
@@ -1852,7 +1868,7 @@ function AppShell({
             /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
               "div",
               {
-                className: contentClassName,
+                className: ["fd-app-shell-content", contentClassName].filter(Boolean).join(" "),
                 style: {
                   flex: 1,
                   minWidth: 0,
@@ -1860,7 +1876,6 @@ function AppShell({
                   // table) is contained and clipped by this scroller, never stretching the document.
                   position: "relative",
                   overflowY: "auto",
-                  padding: 24,
                   maxWidth: contentMaxWidth,
                   margin: "0 auto",
                   width: "100%",
@@ -5686,52 +5701,155 @@ function InlinePanelSurface({ panel, align = "right", ...popover }) {
 
 // src/components/data/SortMenu.tsx
 var import_jsx_runtime58 = require("react/jsx-runtime");
-function SortMenu({ fields = [], sort, onSort, align = "right", size = "md", className = "", ...rest }) {
+var directionWord = (field, dir) => dir === "asc" ? field.numeric ? "lowest first" : "A to Z" : field.numeric ? "highest first" : "Z to A";
+function moved(sort, from, to) {
+  const next = [...sort];
+  const [entry] = next.splice(from, 1);
+  next.splice(to, 0, entry);
+  return next;
+}
+function SortMenu({
+  fields = [],
+  sort = [],
+  onSortChange,
+  multiple = false,
+  align = "right",
+  size = "md",
+  className = "",
+  ...rest
+}) {
   const panel = useInlinePanel();
   const { open: open2, setOpen, ref } = panel;
-  const cur = fields.find((f) => f.key === (sort && sort.key));
-  const dir = sort && sort.dir;
-  const arrow = (f, d) => {
-    const on = cur && cur.key === f.key && dir === d;
-    const label = d === "asc" ? f.numeric ? "lowest first" : "A to Z" : f.numeric ? "highest first" : "Z to A";
-    return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
-      "button",
+  const change = (next) => onSortChange && onSortChange(next);
+  const fieldOf = (key) => fields.find((f) => f.key === key);
+  const active = sort.filter((entry) => fieldOf(entry.key));
+  const first = active[0];
+  const firstField = first && fieldOf(first.key);
+  const triggerLabel = firstField ? firstField.label + (active.length > 1 ? " +" + (active.length - 1) : "") : "Unsorted";
+  const triggerTitle = active.map((entry) => {
+    const field = fieldOf(entry.key);
+    return field.label + " " + directionWord(field, entry.dir);
+  }).join(", then ");
+  const arrow = (field, dir, on, onClick) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+    "button",
+    {
+      type: "button",
+      "aria-label": field.label + ", " + directionWord(field, dir),
+      "aria-pressed": on,
+      onClick,
+      style: {
+        display: "grid",
+        placeItems: "center",
+        width: 26,
+        height: 26,
+        borderRadius: 6,
+        cursor: "pointer",
+        flex: "none",
+        border: "1px solid " + (on ? "var(--brand)" : "var(--border)"),
+        background: on ? "var(--brand)" : "var(--surface)",
+        color: on ? "#fff" : "var(--text-muted)"
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("i", { className: "ph ph-arrow-" + (dir === "asc" ? "up" : "down"), style: { fontSize: 13 } })
+    }
+  );
+  const rowStyle = (highlight) => ({
+    gap: 8,
+    padding: "4px 8px",
+    borderRadius: 7,
+    background: highlight ? "var(--surface-brand)" : "transparent"
+  });
+  const labelStyle = (highlight) => ({
+    flex: 1,
+    minWidth: 0,
+    fontWeight: highlight ? 700 : 500,
+    color: highlight ? "var(--text-on-surface-brand)" : "var(--text)"
+  });
+  const singleBody = fields.map((f) => {
+    const on = !!first && first.key === f.key;
+    return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("span", { className: "fd-row", style: rowStyle(on), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "fd-body-sm", style: labelStyle(on), children: f.label }),
+      arrow(f, "asc", on && first.dir === "asc", () => change([{ key: f.key, dir: "asc" }])),
+      arrow(f, "desc", on && first.dir === "desc", () => change([{ key: f.key, dir: "desc" }]))
+    ] }, f.key);
+  });
+  const unused = fields.filter((f) => !active.some((entry) => entry.key === f.key));
+  const multipleBody = /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_jsx_runtime58.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "fd-overline fd-muted", style: { padding: "4px 8px 6px" }, children: "Sorted by" }),
+    active.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "fd-body-sm fd-muted", style: { padding: "4px 8px" }, children: "Unsorted" }) : /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("ol", { className: "fd-stack", style: { gap: 2, margin: 0, padding: 0, listStyle: "none" }, "aria-label": "Sort order", children: active.map((entry, index) => {
+      const f = fieldOf(entry.key);
+      const flipped = entry.dir === "asc" ? "desc" : "asc";
+      return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("li", { className: "fd-row", style: rowStyle(false), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "fd-body-sm fd-muted", "aria-hidden": "true", style: { width: 14, flex: "none" }, children: index + 1 }),
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "fd-body-sm", style: labelStyle(false), children: f.label }),
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+          IconButton,
+          {
+            size: "sm",
+            variant: "outline",
+            icon: entry.dir === "asc" ? "arrow-up" : "arrow-down",
+            label: f.label + ", " + directionWord(f, entry.dir) + ". Switch to " + directionWord(f, flipped),
+            onClick: () => change(active.map((e) => e.key === entry.key ? { key: e.key, dir: flipped } : e))
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+          IconButton,
+          {
+            size: "sm",
+            icon: "caret-up",
+            label: "Sort " + f.label + " earlier",
+            disabled: index === 0,
+            onClick: () => change(moved(active, index, index - 1))
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+          IconButton,
+          {
+            size: "sm",
+            icon: "caret-down",
+            label: "Sort " + f.label + " later",
+            disabled: index === active.length - 1,
+            onClick: () => change(moved(active, index, index + 1))
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+          IconButton,
+          {
+            size: "sm",
+            icon: "x",
+            label: "Remove " + f.label + " from the sort",
+            onClick: () => change(active.filter((e) => e.key !== entry.key))
+          }
+        )
+      ] }, entry.key);
+    }) }),
+    unused.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_jsx_runtime58.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "fd-overline fd-muted", style: { padding: "10px 8px 6px" }, children: "Add a sort" }),
+      unused.map((f) => /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("span", { className: "fd-row", style: rowStyle(false), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "fd-body-sm", style: labelStyle(false), children: f.label }),
+        arrow(f, "asc", false, () => change([...active, { key: f.key, dir: "asc" }])),
+        arrow(f, "desc", false, () => change([...active, { key: f.key, dir: "desc" }]))
+      ] }, f.key))
+    ] }) : null
+  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("span", { className, style: { display: "inline-flex", minWidth: 0 }, ref, ...rest, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
+      Button,
       {
-        type: "button",
-        "aria-label": f.label + ", " + label,
-        "aria-pressed": on,
-        onClick: () => onSort && onSort(f.key, d),
-        style: {
-          display: "grid",
-          placeItems: "center",
-          width: 26,
-          height: 26,
-          borderRadius: 6,
-          cursor: "pointer",
-          border: "1px solid " + (on ? "var(--brand)" : "var(--border)"),
-          background: on ? "var(--brand)" : "var(--surface)",
-          color: on ? "#fff" : "var(--text-muted)"
-        },
-        children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("i", { className: "ph ph-arrow-" + (d === "asc" ? "up" : "down"), style: { fontSize: 13 } })
+        size,
+        variant: "secondary",
+        icon: first && first.dir === "asc" ? "sort-ascending" : "sort-descending",
+        title: triggerTitle || void 0,
+        onClick: () => setOpen(!open2),
+        children: [
+          triggerLabel,
+          /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("i", { className: "ph ph-" + (first && first.dir === "asc" ? "arrow-up" : "arrow-down"), style: { fontSize: 12, marginLeft: 6, opacity: 0.75 } })
+        ]
       }
-    );
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("span", { className, style: { display: "inline-flex" }, ref, ...rest, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(Button, { size, variant: "secondary", icon: dir === "asc" ? "sort-ascending" : "sort-descending", onClick: () => setOpen(!open2), children: [
-      cur ? cur.label : "Unsorted",
-      /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("i", { className: "ph ph-" + (dir === "asc" ? "arrow-up" : "arrow-down"), style: { fontSize: 12, marginLeft: 6, opacity: 0.75 } })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(InlinePanelSurface, { panel, align, offset: 6, width: 280, label: "Sort by", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("span", { className: "fd-stack", style: { gap: 2, padding: 8 }, children: [
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(InlinePanelSurface, { panel, align, offset: 6, width: multiple ? 340 : 280, label: "Sort by", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "fd-stack", style: { gap: 2, padding: 8 }, children: multiple ? multipleBody : /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_jsx_runtime58.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "fd-overline fd-muted", style: { padding: "4px 8px 6px" }, children: "Sort by" }),
-      fields.map((f) => {
-        const active = cur && cur.key === f.key;
-        return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("span", { className: "fd-row", style: { gap: 8, padding: "4px 8px", borderRadius: 7, background: active ? "var(--surface-brand)" : "transparent" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "fd-body-sm", style: { flex: 1, fontWeight: active ? 700 : 500, color: active ? "var(--text-on-surface-brand)" : "var(--text)" }, children: f.label }),
-          arrow(f, "asc"),
-          arrow(f, "desc")
-        ] }, f.key);
-      })
-    ] }) })
+      singleBody
+    ] }) }) })
   ] });
 }
 
@@ -6269,7 +6387,7 @@ function TransferList({
           cfg.header ? /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { className: "fd-tlist-header", children: cfg.header }) : null,
           /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("span", { className: "fd-row", style: { gap: 8 }, children: [
             /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(SearchField, { value: cfg.search, onChange: cfg.onSearchChange, placeholder: "Search", "aria-label": (cfg.label || side) + " search", style: { flex: 1 } }),
-            /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(SortMenu, { fields: cfg.sortFields, sort: cfg.sort, onSort: cfg.onSort, align: side === "left" ? "left" : "right" })
+            /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(SortMenu, { fields: cfg.sortFields, sort: cfg.sort ? [cfg.sort] : [], onSortChange: (next) => next[0] && cfg.onSort(next[0].key, next[0].dir), align: side === "left" ? "left" : "right" })
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
             VirtualList,
@@ -14610,6 +14728,7 @@ function useDocumentTitle(routeTitle, appName) {
   CHANNEL_WEIGHTS,
   CHAT_UNAVAILABLE,
   COPIED_FEEDBACK_MS,
+  CORNER_STACK_INSET_PROPERTY,
   Calendar,
   Card,
   CardGrid,