@morze/ui 0.2.6 → 0.2.8

package/README.md

@@ -21,6 +21,15 @@ active navigation item. The label itself stays flat — the embossed
 `text-shadow` is off (`--mz-convex-text-shadow: none`), as on the landing,
 because on a 34px control it only made the text shout.
 
+The surfaces that other content passes behind are **glass**: menus, popovers,
+dialogs, the sheet, the sidebar rail and a sticky table header are a
+translucent cut of the same surface ramp over a backdrop blur
+(`--mz-glass*`), so a menu frosts the page under it and a pinned header
+frosts the rows scrolling past. Controls stay convex and opaque — glass is
+for what things float over, not for what you press. With
+`prefers-reduced-transparency`, or in an engine without `backdrop-filter`,
+the glass falls back to the opaque ramp.
+
 ## Install
 
 ```bash
@@ -226,7 +235,9 @@ Safari 16.2+, the same baseline as the rest of the kit.
 Everything is driven by custom properties; override them after importing the
 styles. The main groups: surfaces (`--mz-bg`, `--mz-surface`, `--mz-elevated`),
 borders, text, tones, the convex recipe (`--mz-convex-*`, `--mz-face*`,
-`--mz-well*`), geometry (`--mz-radius*`), type (`--mz-font-*`, `--mz-label-*`),
+`--mz-well*`), the glass layer (`--mz-glass`, `--mz-glass-chrome`,
+`--mz-glass-well`, `--mz-glass-filter`, `--mz-glass-sheen`),
+geometry (`--mz-radius*`), type (`--mz-font-*`, `--mz-label-*`),
 motion and states (`--mz-ease`, `--mz-duration`, `--mz-hover-scale`,
 `--mz-press-scale`, `--mz-hover-mix`, `--mz-press-mix`), focus (`--mz-ring-*`).
 
@@ -449,7 +460,12 @@ What it does:
   and the floating bar can escalate to "all N matching" (in that mode a bulk
   action must travel with the query, not with a list of ids).
 - **Columns** — visibility, order (drag and drop plus arrows for the keyboard)
-  and pinning; all of it saved to `localStorage` under `persistKey`.
+  and pinning; all of it saved to `localStorage` under `persistKey`. The list
+  is grouped the way the table paints — pinned left, loose, pinned right — and
+  a move stays inside its group, so what you drag is where it lands. A column
+  whose header is a node rather than text is listed by position: “#3”.
+  `columnManager={false}` drops the button for a layout the host fixes or
+  drives itself; the layout props keep working without it.
 - **Expandable rows** and **inline cell editing** on double click, with
   optimistic saving and a rollback on failure.
 - **States** — skeletons on the first load, a thin progress line when refetching

package/dist/index.cjs

@@ -160,8 +160,8 @@ var ArrowUpIcon = icon(/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 19V5m-7
 var ArrowDownIcon = icon(/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 5v14m7-7-7 7-7-7" }));
 var SortIcon = icon(
   /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m7 15 3 3 3-3", opacity: "0.9" }),
-    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m7 9 3-3 3 3", opacity: "0.9" })
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m8 10 4-4 4 4" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m8 14 4 4 4-4" })
   ] })
 );
 var FilterIcon = icon(/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 5h16l-6.5 7.5V19l-3 2v-8.5L4 5Z" }));
@@ -181,7 +181,13 @@ var GripIcon = icon(
     /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "15", cy: "17", r: "1.4", fill: "currentColor" })
   ] })
 );
-var PinIcon = icon(/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M15 3 21 9l-4 1-4 4-1 5-6-6 5-1 4-4 1-4Z" }));
+var PinIcon = icon(
+  /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 4h6v5l3 4v2H6v-2l3-4V4Z" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 4h8" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 15v5" })
+  ] })
+);
 var EyeIcon = icon(
   /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z" }),
@@ -2104,26 +2110,53 @@ function FilterChip({
     /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: onClear, "aria-label": clearLabel, className: "mz-focusable", children: "\xD7" })
   ] });
 }
+function nameOf(column, declaredIndex) {
+  if (column.label?.trim()) return column.label;
+  if (typeof column.header === "string" && column.header.trim()) return column.header;
+  return `#${declaredIndex + 1}`;
+}
 function ColumnManager({
   columns,
   layout,
   onToggleHidden,
   onSetPinned,
-  onMove,
   onMoveTo,
   onReset,
   labels: labelsProp
 }) {
   const labels = resolveLabels(labelsProp);
   const [dragging, setDragging] = React39__namespace.useState(null);
-  const byId = React39__namespace.useMemo(() => new Map(columns.map((c) => [c.id, c])), [columns]);
-  const ordered = layout.order.map((id) => byId.get(id)).filter((c) => Boolean(c));
+  const [dropTarget, setDropTarget] = React39__namespace.useState(null);
+  const entries = React39__namespace.useMemo(() => {
+    const byId = new Map(columns.map((c, index) => [c.id, { column: c, declaredIndex: index }]));
+    const ordered = layout.order.map((id) => byId.get(id)).filter((e) => Boolean(e));
+    const side = (id) => layout.pinned[id];
+    const groups = ["left", void 0, "right"];
+    return groups.flatMap((group) => {
+      const inGroup = ordered.filter((e) => side(e.column.id) === group);
+      return inGroup.map((entry, indexInGroup) => ({
+        ...entry,
+        side: group,
+        indexInGroup,
+        groupSize: inGroup.length,
+        previous: inGroup[indexInGroup - 1]?.column.id,
+        next: inGroup[indexInGroup + 1]?.column.id,
+        name: nameOf(entry.column, entry.declaredIndex)
+      }));
+    });
+  }, [columns, layout]);
+  const sideOf = (id) => layout.pinned[id];
+  const canDrop = (targetId) => Boolean(dragging) && dragging !== targetId && sideOf(dragging) === sideOf(targetId);
+  const endDrag = () => {
+    setDragging(null);
+    setDropTarget(null);
+  };
   const hiddenCount = layout.hidden.length;
   return /* @__PURE__ */ jsxRuntime.jsxs(Popover, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "secondary", size: "sm", children: [
       /* @__PURE__ */ jsxRuntime.jsx(ColumnsIcon, {}),
       labels.columns,
-      hiddenCount > 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mz-dt__count", children: ordered.length - hiddenCount }) : null
+      hiddenCount > 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mz-dt__count", children: entries.length - hiddenCount }) : null
     ] }) }),
     /* @__PURE__ */ jsxRuntime.jsxs(PopoverContent, { align: "end", className: "mz-dt__columns", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mz-dt__columns-head", children: [
@@ -2131,35 +2164,60 @@ function ColumnManager({
         /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "link", size: "xs", onClick: onReset, children: labels.reset })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(Separator, {}),
-      /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "mz-dt__columns-list", children: ordered.map((column, index) => {
+      /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "mz-dt__columns-list", children: entries.map((entry) => {
+        const column = entry.column;
         const hidden = layout.hidden.includes(column.id);
-        const pinned = layout.pinned[column.id];
-        const label = column.label ?? (typeof column.header === "string" ? column.header : column.id);
+        const pinned = entry.side;
+        const name = entry.name;
+        const pinTitle = pinned === "left" ? labels.pinnedLeft : pinned === "right" ? labels.pinnedRight : labels.notPinned;
         return /* @__PURE__ */ jsxRuntime.jsxs(
           "li",
           {
             className: "mz-dt__columns-item",
             "data-dragging": dragging === column.id || void 0,
+            "data-drop": dropTarget === column.id || void 0,
+            "data-pinned": pinned,
             draggable: true,
-            onDragStart: () => setDragging(column.id),
-            onDragEnd: () => setDragging(null),
-            onDragOver: (event) => event.preventDefault(),
-            onDrop: () => {
-              if (dragging && dragging !== column.id) onMoveTo(dragging, column.id);
-              setDragging(null);
+            onDragStart: (event) => {
+              if (event.target.closest(".mz-dt__columns-controls")) {
+                event.preventDefault();
+                return;
+              }
+              setDragging(column.id);
+              event.dataTransfer.effectAllowed = "move";
+              try {
+                event.dataTransfer.setData("text/plain", column.id);
+              } catch {
+              }
+            },
+            onDragEnd: endDrag,
+            onDragOver: (event) => {
+              if (!canDrop(column.id)) {
+                event.dataTransfer.dropEffect = "none";
+                return;
+              }
+              event.preventDefault();
+              event.dataTransfer.dropEffect = "move";
+              setDropTarget(column.id);
+            },
+            onDragLeave: () => setDropTarget((c) => c === column.id ? null : c),
+            onDrop: (event) => {
+              event.preventDefault();
+              if (canDrop(column.id)) onMoveTo(dragging, column.id);
+              endDrag();
             },
             children: [
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mz-dt__columns-grip", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(GripIcon, {}) }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mz-dt__columns-label", children: label }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mz-dt__columns-controls", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mz-dt__columns-label", children: name }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mz-dt__columns-controls", draggable: false, children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
                   "button",
                   {
                     type: "button",
                     className: "mz-dt__icon-btn mz-focusable",
-                    disabled: index === 0,
-                    onClick: () => onMove(column.id, -1),
-                    "aria-label": labels.moveUp(label),
+                    disabled: !entry.previous,
+                    onClick: () => entry.previous && onMoveTo(column.id, entry.previous),
+                    "aria-label": labels.moveUp(name),
                     children: "\u2191"
                   }
                 ),
@@ -2168,9 +2226,9 @@ function ColumnManager({
                   {
                     type: "button",
                     className: "mz-dt__icon-btn mz-focusable",
-                    disabled: index === ordered.length - 1,
-                    onClick: () => onMove(column.id, 1),
-                    "aria-label": labels.moveDown(label),
+                    disabled: !entry.next,
+                    onClick: () => entry.next && onMoveTo(column.id, entry.next),
+                    "aria-label": labels.moveDown(name),
                     children: "\u2193"
                   }
                 ),
@@ -2178,14 +2236,12 @@ function ColumnManager({
                   "button",
                   {
                     type: "button",
-                    className: "mz-dt__icon-btn mz-focusable",
+                    className: "mz-dt__icon-btn mz-dt__pin mz-focusable",
                     "data-active": pinned ? true : void 0,
+                    "data-pinned": pinned,
                     onClick: () => onSetPinned(column.id, pinned === "left" ? "right" : pinned === "right" ? void 0 : "left"),
-                    "aria-label": labels.pinning(
-                      label,
-                      pinned === "left" ? labels.pinnedLeft : pinned === "right" ? labels.pinnedRight : labels.notPinned
-                    ),
-                    title: pinned === "left" ? labels.pinnedLeft : pinned === "right" ? labels.pinnedRight : labels.notPinned,
+                    "aria-label": labels.pinning(name, pinTitle),
+                    title: pinTitle,
                     children: /* @__PURE__ */ jsxRuntime.jsx(PinIcon, {})
                   }
                 ),
@@ -2196,7 +2252,7 @@ function ColumnManager({
                     className: "mz-dt__icon-btn mz-focusable",
                     disabled: column.hideable === false,
                     onClick: () => onToggleHidden(column.id),
-                    "aria-label": hidden ? labels.show(label) : labels.hide(label),
+                    "aria-label": hidden ? labels.show(name) : labels.hide(name),
                     children: hidden ? /* @__PURE__ */ jsxRuntime.jsx(EyeOffIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(EyeIcon, {})
                   }
                 )
@@ -2649,6 +2705,7 @@ function DataTable({
   onLayoutChange,
   persistKey = null,
   toolbar,
+  columnManager = true,
   autoFit = true,
   density = "normal",
   stickyHeader = true,
@@ -2677,7 +2734,6 @@ function DataTable({
     setWidth,
     toggleHidden,
     setPinned,
-    move,
     moveTo,
     reset,
     fitTo
@@ -2909,22 +2965,25 @@ function DataTable({
       className: cn("mz-dt", className),
       style: widthVars,
       children: [
-        (toolbar || chips.length > 0 || columns.some((c) => c.hideable !== false)) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mz-dt__toolbar", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mz-dt__toolbar-main", children: toolbar }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mz-dt__toolbar-side", children: /* @__PURE__ */ jsxRuntime.jsx(
-            ColumnManager,
-            {
-              columns,
-              layout,
-              labels: labelsProp,
-              onToggleHidden: toggleHidden,
-              onSetPinned: setPinned,
-              onMove: move,
-              onMoveTo: moveTo,
-              onReset: reset
-            }
-          ) })
-        ] }),
+        (() => {
+          const showManager = columnManager && columns.some((c) => c.hideable !== false);
+          if (!toolbar && chips.length === 0 && !showManager) return null;
+          return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mz-dt__toolbar", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mz-dt__toolbar-main", children: toolbar }),
+            showManager && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mz-dt__toolbar-side", children: /* @__PURE__ */ jsxRuntime.jsx(
+              ColumnManager,
+              {
+                columns,
+                layout,
+                labels: labelsProp,
+                onToggleHidden: toggleHidden,
+                onSetPinned: setPinned,
+                onMoveTo: moveTo,
+                onReset: reset
+              }
+            ) })
+          ] });
+        })(),
         chips.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mz-dt__chips", children: [
           chips.map(([id, value]) => /* @__PURE__ */ jsxRuntime.jsx(
             FilterChip,