@withpotter/components 0.13.0-next.101

package/dist/sidebar/navigation-types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/sidebar/orders-payments-hub.d.ts

@@ -0,0 +1,58 @@
+import { type NavGroup, type NavItem } from './config';
+/**
+ * ORDERS & PAYMENTS — one row, John's call (2026-09-03).
+ *
+ * Two rows made a merchant answer a question they should never be asked:
+ * is a refund an order thing or a money thing. It is both, and so is a
+ * payment status, and those two objects are the whole of the ambiguity —
+ * everything else under Money is unambiguously bank-side.
+ *
+ * SALES WAS THE OBVIOUS NAME AND IS THE ONE WE CANNOT USE. There was a Sales
+ * row; it was absorbed into Orders precisely because "Orders is a queue you
+ * work and Sales is the read over the top" was a distinction no merchant
+ * could infer from two nouns sitting as peers. `spine-money` still carries
+ * that note. Bringing the word back as their PARENT re-creates what removing
+ * it resolved. Square's own admin says Orders & payments, which names both
+ * objects a merchant says out loud and reuses nothing we have retired.
+ *
+ * THE HUB TAKES NO PERMISSION OF ITS OWN, and that is the load-bearing part.
+ * The Money group required `canViewFinance`; inheriting it here would delete
+ * ORDERS from every shop assistant's sidebar. The children keep their own
+ * gates through `filterItems`, and Money's landing page becomes a real child
+ * carrying the finance permission it always needed — as a generated landing
+ * it had none at all.
+ *
+ * The id stays `payments`: ids are looked up in three other files for icons,
+ * destinations and renames, and changing one is how the catalog rows
+ * collided. The ICON is the orders icon, because the row now opens onto
+ * orders.
+ */
+/**
+ * The order queue in a flattened work list, whatever the collapse called it.
+ *
+ * TWO IDS, and the second is the bug this function exists to have fixed.
+ * `build-nav-groups` hoists a row two archetypes agree on into a group of its
+ * own and renames the id to `shared-${id}`, so a lookup for `orders` finds
+ * nothing the moment a business runs more than one archetype — and Orders &
+ * Payments, John's merge, silently did not happen for any of them. A shop that
+ * added event tickets watched its one merged row split back into Orders and
+ * Money, which reads as the sidebar losing a feature at the moment the
+ * merchant added one.
+ *
+ * It went unseen because single mode was right the whole time and the tests
+ * are written against single mode. `scripts/archetype-shape.mts` is what shows
+ * it: ask it for a two-archetype shape and the id is there in the output.
+ */
+export declare function findOrdersRow(workItems: NavItem[]): NavItem | undefined;
+export declare function buildOrdersPaymentsHub({ ordersItem, moneyGroup, can, }: {
+    ordersItem: NavItem | undefined;
+    moneyGroup: NavGroup | null;
+    /**
+     * Narrowed at the call site, not here. `usePermissions().can` takes a union
+     * of ~25 literal keys and `requiredPermission` is `string[]` on the nav
+     * types, so one of the two has to give: taking the caller's own signature
+     * keeps the strictness where it is checked and puts the cast on the one
+     * value that genuinely is a loose string.
+     */
+    can: (permission: never) => boolean;
+}): NavGroup | null;

package/dist/sidebar/orders-payments-hub.js

@@ -0,0 +1,59 @@
+function findOrdersRow(workItems) {
+  return workItems.find(
+    (item) => (item.id === "orders" || item.id === "shared-orders") && !!item.href
+  );
+}
+function buildOrdersPaymentsHub({
+  ordersItem,
+  moneyGroup,
+  can
+}) {
+  if (!ordersItem || !moneyGroup) return null;
+  if (ordersItem.href?.startsWith("/dashboard/bookings")) return null;
+  const canSeeMoney = !moneyGroup.requiredPermission?.length || moneyGroup.requiredPermission.some((p) => can(p));
+  return {
+    id: "payments",
+    label: "Orders & Payments",
+    icon: ordersItem.icon,
+    href: ordersItem.href,
+    /**
+     * THE LANDING IS CALLED WHAT THE QUEUE IS CALLED.
+     *
+     * John, 2026-09-03: *"all orders and payments sub nav makes no sense,
+     * let's just have an orders sub nav"*. It read "All Orders & Payments",
+     * which is `'All {label}'` doing exactly what it is documented to do —
+     * interpolating the group's post-rename label — against a label that is
+     * now a phrase naming two things. The pattern assumes the hub is named for
+     * one noun, and this one is not.
+     *
+     * `ordersItem.name` rather than a literal "Orders", because that name is
+     * already the archetype's own word: a salon's row says Bookings and a
+     * short-let's says Stays, and hardcoding the noun here would put the
+     * platform's word back inside a hub whose parent is deliberately generic.
+     */
+    landingLabel: `All ${ordersItem.name.toLowerCase()}`,
+    alwaysHub: true,
+    items: [
+      ...ordersItem.children ?? [],
+      // Delivery is not here: it is a row of the Operations group.
+      /* Money's landing, as a row. It was generated from the group's href and
+         therefore carried no permission at all; as an item it can be refused,
+         and it is checked here rather than by `filterItems` because that lives
+         inside `build-nav-groups` and this hub is assembled after it. */
+      ...canSeeMoney ? [
+        {
+          id: "transactions",
+          name: "Transactions",
+          href: moneyGroup.href ?? "/dashboard/payments",
+          icon: moneyGroup.icon
+        }
+      ] : [],
+      ...moneyGroup.items ?? []
+    ]
+  };
+}
+export {
+  buildOrdersPaymentsHub,
+  findOrdersRow
+};
+//# sourceMappingURL=orders-payments-hub.js.map

package/dist/sidebar/orders-payments-hub.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/sidebar/orders-payments-hub.ts"],"sourcesContent":["import { type NavGroup, type NavItem } from './config';\n\n/**\n * ORDERS & PAYMENTS — one row, John's call (2026-09-03).\n *\n * Two rows made a merchant answer a question they should never be asked:\n * is a refund an order thing or a money thing. It is both, and so is a\n * payment status, and those two objects are the whole of the ambiguity —\n * everything else under Money is unambiguously bank-side.\n *\n * SALES WAS THE OBVIOUS NAME AND IS THE ONE WE CANNOT USE. There was a Sales\n * row; it was absorbed into Orders precisely because \"Orders is a queue you\n * work and Sales is the read over the top\" was a distinction no merchant\n * could infer from two nouns sitting as peers. `spine-money` still carries\n * that note. Bringing the word back as their PARENT re-creates what removing\n * it resolved. Square's own admin says Orders & payments, which names both\n * objects a merchant says out loud and reuses nothing we have retired.\n *\n * THE HUB TAKES NO PERMISSION OF ITS OWN, and that is the load-bearing part.\n * The Money group required `canViewFinance`; inheriting it here would delete\n * ORDERS from every shop assistant's sidebar. The children keep their own\n * gates through `filterItems`, and Money's landing page becomes a real child\n * carrying the finance permission it always needed — as a generated landing\n * it had none at all.\n *\n * The id stays `payments`: ids are looked up in three other files for icons,\n * destinations and renames, and changing one is how the catalog rows\n * collided. The ICON is the orders icon, because the row now opens onto\n * orders.\n */\n/**\n * The order queue in a flattened work list, whatever the collapse called it.\n *\n * TWO IDS, and the second is the bug this function exists to have fixed.\n * `build-nav-groups` hoists a row two archetypes agree on into a group of its\n * own and renames the id to `shared-${id}`, so a lookup for `orders` finds\n * nothing the moment a business runs more than one archetype — and Orders &\n * Payments, John's merge, silently did not happen for any of them. A shop that\n * added event tickets watched its one merged row split back into Orders and\n * Money, which reads as the sidebar losing a feature at the moment the\n * merchant added one.\n *\n * It went unseen because single mode was right the whole time and the tests\n * are written against single mode. `scripts/archetype-shape.mts` is what shows\n * it: ask it for a two-archetype shape and the id is there in the output.\n */\nexport function findOrdersRow(workItems: NavItem[]): NavItem | undefined {\n  return workItems.find(\n    (item) =>\n      (item.id === 'orders' || item.id === 'shared-orders') && !!item.href,\n  );\n}\n\nexport function buildOrdersPaymentsHub({\n  ordersItem,\n  moneyGroup,\n  can,\n}: {\n  ordersItem: NavItem | undefined;\n  moneyGroup: NavGroup | null;\n  /**\n   * Narrowed at the call site, not here. `usePermissions().can` takes a union\n   * of ~25 literal keys and `requiredPermission` is `string[]` on the nav\n   * types, so one of the two has to give: taking the caller's own signature\n   * keeps the strictness where it is checked and puts the cast on the one\n   * value that genuinely is a loose string.\n   */\n  can: (permission: never) => boolean;\n}): NavGroup | null {\n  if (!ordersItem || !moneyGroup) return null;\n\n  /**\n   * A DIARY IS NOT AN ORDER QUEUE. John, 2026-09-10: *\"appointments shouldnt\n   * be inside orders, i need it as a nav not a sub nav\"*.\n   *\n   * The merge above is argued on one ambiguity — is a refund an order thing or\n   * a money thing — and that ambiguity is real when the queue IS orders. It is\n   * not what a bookings business has. Their queue is the day: appointments,\n   * reservations, stays. Folding it in produced a row called Orders & Payments\n   * whose landing was \"Appointments\", so the word a salon actually uses became\n   * a child of two words it never says, and the thing they open every morning\n   * cost a click and a disclosure to reach.\n   *\n   * So the hub forms only where its own reasoning holds. Where the archetype\n   * sends `orders` to the diary, the diary stays a top-level row under its own\n   * name and Money keeps its own group — which is what the sidebar renders\n   * when this answers null.\n   */\n  if (ordersItem.href?.startsWith('/dashboard/bookings')) return null;\n\n  const canSeeMoney =\n    !moneyGroup.requiredPermission?.length ||\n    moneyGroup.requiredPermission.some((p) => can(p as never));\n\n  return {\n    id: 'payments',\n    label: 'Orders & Payments',\n    icon: ordersItem.icon,\n    href: ordersItem.href,\n    /**\n     * THE LANDING IS CALLED WHAT THE QUEUE IS CALLED.\n     *\n     * John, 2026-09-03: *\"all orders and payments sub nav makes no sense,\n     * let's just have an orders sub nav\"*. It read \"All Orders & Payments\",\n     * which is `'All {label}'` doing exactly what it is documented to do —\n     * interpolating the group's post-rename label — against a label that is\n     * now a phrase naming two things. The pattern assumes the hub is named for\n     * one noun, and this one is not.\n     *\n     * `ordersItem.name` rather than a literal \"Orders\", because that name is\n     * already the archetype's own word: a salon's row says Bookings and a\n     * short-let's says Stays, and hardcoding the noun here would put the\n     * platform's word back inside a hub whose parent is deliberately generic.\n     */\n    landingLabel: `All ${ordersItem.name.toLowerCase()}`,\n    alwaysHub: true,\n    items: [\n      ...(ordersItem.children ?? []),\n      // Delivery is not here: it is a row of the Operations group.\n      /* Money's landing, as a row. It was generated from the group's href and\n         therefore carried no permission at all; as an item it can be refused,\n         and it is checked here rather than by `filterItems` because that lives\n         inside `build-nav-groups` and this hub is assembled after it. */\n      ...(canSeeMoney\n        ? [\n            {\n              id: 'transactions',\n              name: 'Transactions',\n              href: moneyGroup.href ?? '/dashboard/payments',\n              icon: moneyGroup.icon,\n            },\n          ]\n        : []),\n      ...(moneyGroup.items ?? []),\n    ],\n  };\n}\n"],"mappings":"AA8CO,SAAS,cAAc,WAA2C;AACvE,SAAO,UAAU;AAAA,IACf,CAAC,UACE,KAAK,OAAO,YAAY,KAAK,OAAO,oBAAoB,CAAC,CAAC,KAAK;AAAA,EACpE;AACF;AAEO,SAAS,uBAAuB;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AACF,GAWoB;AAClB,MAAI,CAAC,cAAc,CAAC,WAAY,QAAO;AAmBvC,MAAI,WAAW,MAAM,WAAW,qBAAqB,EAAG,QAAO;AAE/D,QAAM,cACJ,CAAC,WAAW,oBAAoB,UAChC,WAAW,mBAAmB,KAAK,CAAC,MAAM,IAAI,CAAU,CAAC;AAE3D,SAAO;AAAA,IACL,IAAI;AAAA,IACJ,OAAO;AAAA,IACP,MAAM,WAAW;AAAA,IACjB,MAAM,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAgBjB,cAAc,OAAO,WAAW,KAAK,YAAY,CAAC;AAAA,IAClD,WAAW;AAAA,IACX,OAAO;AAAA,MACL,GAAI,WAAW,YAAY,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAM5B,GAAI,cACA;AAAA,QACE;AAAA,UACE,IAAI;AAAA,UACJ,MAAM;AAAA,UACN,MAAM,WAAW,QAAQ;AAAA,UACzB,MAAM,WAAW;AAAA,QACnB;AAAA,MACF,IACA,CAAC;AAAA,MACL,GAAI,WAAW,SAAS,CAAC;AAAA,IAC3B;AAAA,EACF;AACF;","names":[]}

package/dist/sidebar/rail-body.d.ts

@@ -0,0 +1,54 @@
+import { type ReactNode } from 'react';
+import { type LucideIcon } from 'lucide-react';
+import type { NavGroup, NavItem } from './config';
+import { type SectionId } from './rail-edits';
+import type { RailRow } from './rail-rows';
+/** The saved (or, while editing, drafted) settings the rail is drawn from. */
+export interface RailEdits {
+    hidden?: string[];
+    order?: string[];
+    /** Words for rows that nothing upstream renames: Toolkit, More. */
+    labels?: Record<string, string>;
+    sectionLabels?: Record<string, string>;
+}
+/** Present only while editing. */
+export interface RailEdit {
+    /** `key` is where the rename is stored, `id` the row's own id. */
+    onRename: (key: string, next: string) => void;
+    /** A section's whole new order, ids only. */
+    onReorder: (ids: string[]) => void;
+    onRenameSection: (id: SectionId, next: string) => void;
+}
+export interface RailBodyProps {
+    collapsed: boolean;
+    homeActive: boolean;
+    toolkitActive: boolean;
+    highlight: (active: boolean) => ReactNode;
+    inboxRow: NavItem | null;
+    renderRow: (item: NavItem) => ReactNode;
+    renderHub: (group: NavGroup) => ReactNode;
+    renderIcon: (id: string | undefined, Fallback: LucideIcon, size?: number) => ReactNode;
+    ownsRoute: (items: (NavItem | NavGroup | undefined)[]) => boolean;
+    moneyRow: RailRow | null;
+    manageRows: RailRow[];
+    growRows: RailRow[];
+    moreGroup: NavGroup | null;
+    edits: RailEdits;
+    /** Opens the editor; the headings' gear. Absent while editing. */
+    onConfigure?: (section: SectionId) => void;
+    /** The one section being edited; every other row is drawn as it always is. */
+    editSection?: SectionId;
+    /** Leaves edit mode; drawn as Done on the heading being edited. */
+    onDone?: () => void;
+    edit?: RailEdit;
+}
+/**
+ * Home, Inbox and Money; then Manage and Grow, each with a heading; then
+ * Toolkit and More. The same function draws the rail normally and, given
+ * `edit`, draws it editable in place: the rows are the same rows, in the same
+ * order, with a grip, a name field and an eye on each that may change.
+ *
+ * Home and the Inbox are drawn as they always are in both modes: they are
+ * essential (see `rail-edits.ts`) and have nothing to edit.
+ */
+export declare function RailBody(p: RailBodyProps): import("react").JSX.Element;

package/dist/sidebar/rail-body.js

@@ -0,0 +1,202 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment2 } from "react";
+import {
+  DndContext,
+  closestCenter,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors
+} from "@dnd-kit/core";
+import {
+  SortableContext,
+  sortableKeyboardCoordinates,
+  verticalListSortingStrategy
+} from "@dnd-kit/sortable";
+import { MoreHorizontal, Toolbox } from "lucide-react";
+import { HomeRow } from "./home-row";
+import { CustomizeRow } from "./customize-row";
+import { NavSection } from "./nav-section";
+import { NavPendingRows } from "./nav-pending-row";
+import {
+  EditableRow,
+  SortableEditableRow
+} from "./rail-editable";
+import {
+  arrangeRows,
+  isRailHidden,
+  moveId,
+  renameKey,
+  rowLabel,
+  sectionLabel,
+  SECTION_DEFAULT_LABELS
+} from "./rail-edits";
+function RailBody(p) {
+  const { edit, edits } = p;
+  const sensors = useSensors(
+    // A few pixels first, so pressing the handle is not a drag.
+    useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates
+    })
+  );
+  const seen = /* @__PURE__ */ new Map();
+  const uidFor = (id) => {
+    const n = seen.get(id) ?? 0;
+    seen.set(id, n + 1);
+    return n ? `${id}@${n}` : id;
+  };
+  const fromRows = (rows, live = false) => arrangeRows(
+    rows,
+    (r) => ({ id: r.key, href: r.ref.href }),
+    edits,
+    live
+  ).map((r) => {
+    const base = "label" in r.ref ? r.ref.label : r.ref.name;
+    return {
+      id: r.key,
+      uid: uidFor(r.key),
+      href: r.ref.href,
+      label: rowLabel(edits.labels, r.key, base, r.ref.href),
+      icon: p.renderIcon(r.ref.id, r.ref.icon),
+      row: r,
+      node: r.node
+    };
+  });
+  const money = fromRows(p.moneyRow ? [p.moneyRow] : []);
+  const manage = fromRows(p.manageRows, p.editSection === "manage");
+  const grow = fromRows(p.growRows, p.editSection === "grow");
+  const toolkitLabel = rowLabel(edits.labels, "toolkit", "Toolkit");
+  const more = p.moreGroup ? {
+    ...p.moreGroup,
+    label: rowLabel(edits.labels, "more", p.moreGroup.label)
+  } : null;
+  const toolkitEntries = arrangeRows(
+    [
+      {
+        id: "toolkit",
+        label: toolkitLabel,
+        icon: /* @__PURE__ */ jsx(Toolbox, { width: 18, height: 18 }),
+        node: () => /* @__PURE__ */ jsx(
+          CustomizeRow,
+          {
+            active: p.toolkitActive,
+            collapsed: p.collapsed,
+            highlight: p.highlight,
+            label: toolkitLabel
+          },
+          "toolkit"
+        )
+      }
+    ],
+    (e) => ({ id: e.id }),
+    edits,
+    false
+  ).map((e) => ({ ...e, uid: uidFor(e.id) }));
+  const bottom = arrangeRows(
+    more ? [
+      {
+        id: "more",
+        label: more.label,
+        icon: p.renderIcon("more", p.moreGroup?.icon ?? MoreHorizontal),
+        node: () => p.renderHub(more)
+      }
+    ] : [],
+    (e) => ({ id: e.id }),
+    edits,
+    false
+  ).map((e) => ({ ...e, uid: uidFor(e.id) }));
+  const rowProps = (e) => ({
+    id: e.id,
+    icon: e.icon,
+    label: e.label,
+    hidden: isRailHidden(edits.hidden, e.id, e.href),
+    onRename: (next) => edit.onRename(renameKey(e.id, e.href), next)
+  });
+  const draw = (e, sortable2, live = false) => {
+    if (!edit || !live) return /* @__PURE__ */ jsx(Fragment2, { children: e.node() }, e.uid);
+    return sortable2 ? /* @__PURE__ */ jsx(SortableEditableRow, { uid: e.uid, ...rowProps(e) }, e.uid) : /* @__PURE__ */ jsx(EditableRow, { ...rowProps(e) }, e.uid);
+  };
+  const sortable = (list, body2, live = false) => edit && live && list.length > 1 ? /* @__PURE__ */ jsx(
+    SortableContext,
+    {
+      items: list.map((e) => e.uid),
+      strategy: verticalListSortingStrategy,
+      children: body2
+    }
+  ) : body2;
+  const onDragEnd = ({ active, over }) => {
+    if (!edit || !over || active.id === over.id) return;
+    for (const list of [manage, grow]) {
+      const from = list.findIndex((e) => e.uid === active.id);
+      const to = list.findIndex((e) => e.uid === over.id);
+      if (from >= 0 && to >= 0) {
+        edit.onReorder(
+          moveId(
+            list.map((e) => e.id),
+            from,
+            to
+          )
+        );
+        return;
+      }
+    }
+  };
+  const section = (id, list) => {
+    const label = sectionLabel(edits.sectionLabels, id);
+    const live = !!edit && p.editSection === id;
+    return sortable(
+      list,
+      /* @__PURE__ */ jsx(
+        NavSection,
+        {
+          label,
+          foldKey: SECTION_DEFAULT_LABELS[id],
+          onConfigure: p.onConfigure && (() => p.onConfigure(id)),
+          onDone: live ? p.onDone : void 0,
+          onRenameLabel: live ? (next) => edit.onRenameSection(id, next) : void 0,
+          collapsed: p.collapsed,
+          containsActive: p.ownsRoute(
+            list.flatMap((e) => e.row ? [e.row.ref] : [])
+          ),
+          children: list.map((e) => draw(e, true, live))
+        }
+      ),
+      live
+    );
+  };
+  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: "navsection-plain", children: /* @__PURE__ */ jsxs("ul", { className: "navgroup", children: [
+      /* @__PURE__ */ jsx(
+        HomeRow,
+        {
+          active: p.homeActive,
+          collapsed: p.collapsed,
+          highlight: p.highlight
+        }
+      ),
+      money.map((e) => draw(e, false)),
+      p.inboxRow && p.renderRow(p.inboxRow),
+      toolkitEntries.map((e) => draw(e, false))
+    ] }) }),
+    section("manage", manage),
+    /* @__PURE__ */ jsx(NavPendingRows, { show: !p.collapsed && !edit }),
+    section("grow", grow),
+    /* @__PURE__ */ jsx("div", { className: "navsection-plain", children: /* @__PURE__ */ jsx("ul", { className: "navgroup", children: bottom.map((e) => draw(e, false)) }) })
+  ] });
+  if (!edit) return body;
+  return /* @__PURE__ */ jsx(
+    DndContext,
+    {
+      sensors,
+      collisionDetection: closestCenter,
+      onDragEnd,
+      children: body
+    }
+  );
+}
+export {
+  RailBody
+};
+//# sourceMappingURL=rail-body.js.map

package/dist/sidebar/rail-body.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/sidebar/rail-body.tsx"],"sourcesContent":["'use client';\n\nimport { Fragment, type ReactNode } from 'react';\nimport {\n  DndContext,\n  closestCenter,\n  KeyboardSensor,\n  PointerSensor,\n  useSensor,\n  useSensors,\n  type DragEndEvent,\n} from '@dnd-kit/core';\nimport {\n  SortableContext,\n  sortableKeyboardCoordinates,\n  verticalListSortingStrategy,\n} from '@dnd-kit/sortable';\nimport { MoreHorizontal, Toolbox, type LucideIcon } from 'lucide-react';\nimport type { NavGroup, NavItem } from './config';\nimport { HomeRow } from './home-row';\nimport { CustomizeRow } from './customize-row';\nimport { NavSection } from './nav-section';\nimport { NavPendingRows } from './nav-pending-row';\nimport {\n  EditableRow,\n  SortableEditableRow,\n  type EditableRowProps,\n} from './rail-editable';\nimport {\n  arrangeRows,\n  isRailHidden,\n  moveId,\n  renameKey,\n  rowLabel,\n  sectionLabel,\n  SECTION_DEFAULT_LABELS,\n  type SectionId,\n} from './rail-edits';\nimport type { RailRow } from './rail-rows';\n\n/** The saved (or, while editing, drafted) settings the rail is drawn from. */\nexport interface RailEdits {\n  hidden?: string[];\n  order?: string[];\n  /** Words for rows that nothing upstream renames: Toolkit, More. */\n  labels?: Record<string, string>;\n  sectionLabels?: Record<string, string>;\n}\n\n/** Present only while editing. */\nexport interface RailEdit {\n  /** `key` is where the rename is stored, `id` the row's own id. */\n  onRename: (key: string, next: string) => void;\n  /** A section's whole new order, ids only. */\n  onReorder: (ids: string[]) => void;\n  onRenameSection: (id: SectionId, next: string) => void;\n}\n\nexport interface RailBodyProps {\n  collapsed: boolean;\n  homeActive: boolean;\n  toolkitActive: boolean;\n  highlight: (active: boolean) => ReactNode;\n  inboxRow: NavItem | null;\n  renderRow: (item: NavItem) => ReactNode;\n  renderHub: (group: NavGroup) => ReactNode;\n  renderIcon: (\n    id: string | undefined,\n    Fallback: LucideIcon,\n    size?: number,\n  ) => ReactNode;\n  ownsRoute: (items: (NavItem | NavGroup | undefined)[]) => boolean;\n  moneyRow: RailRow | null;\n  manageRows: RailRow[];\n  growRows: RailRow[];\n  moreGroup: NavGroup | null;\n  edits: RailEdits;\n  /** Opens the editor; the headings' gear. Absent while editing. */\n  onConfigure?: (section: SectionId) => void;\n  /** The one section being edited; every other row is drawn as it always is. */\n  editSection?: SectionId;\n  /** Leaves edit mode; drawn as Done on the heading being edited. */\n  onDone?: () => void;\n  edit?: RailEdit;\n}\n\ninterface Entry {\n  id: string;\n  /** Unique within the rail, for dnd and React (ids can repeat: `catalog`). */\n  uid: string;\n  href?: string;\n  label: string;\n  icon: ReactNode;\n  row?: RailRow;\n  node: () => ReactNode;\n}\n\n/**\n * Home, Inbox and Money; then Manage and Grow, each with a heading; then\n * Toolkit and More. The same function draws the rail normally and, given\n * `edit`, draws it editable in place: the rows are the same rows, in the same\n * order, with a grip, a name field and an eye on each that may change.\n *\n * Home and the Inbox are drawn as they always are in both modes: they are\n * essential (see `rail-edits.ts`) and have nothing to edit.\n */\nexport function RailBody(p: RailBodyProps) {\n  const { edit, edits } = p;\n  const sensors = useSensors(\n    // A few pixels first, so pressing the handle is not a drag.\n    useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),\n    useSensor(KeyboardSensor, {\n      coordinateGetter: sortableKeyboardCoordinates,\n    }),\n  );\n\n  const seen = new Map<string, number>();\n  const uidFor = (id: string) => {\n    const n = seen.get(id) ?? 0;\n    seen.set(id, n + 1);\n    return n ? `${id}@${n}` : id;\n  };\n\n  const fromRows = (rows: RailRow[], live = false): Entry[] =>\n    arrangeRows(\n      rows,\n      (r) => ({ id: r.key, href: r.ref.href }),\n      edits,\n      live,\n    ).map((r) => {\n      const base = 'label' in r.ref ? r.ref.label : r.ref.name;\n      return {\n        id: r.key,\n        uid: uidFor(r.key),\n        href: r.ref.href,\n        label: rowLabel(edits.labels, r.key, base, r.ref.href),\n        icon: p.renderIcon(r.ref.id, r.ref.icon),\n        row: r,\n        node: r.node,\n      };\n    });\n\n  const money = fromRows(p.moneyRow ? [p.moneyRow] : []);\n  const manage = fromRows(p.manageRows, p.editSection === 'manage');\n  const grow = fromRows(p.growRows, p.editSection === 'grow');\n\n  // Toolkit is a top-level door beside Money; More is the bottom run, absent\n  // when it has nothing to hold.\n  const toolkitLabel = rowLabel(edits.labels, 'toolkit', 'Toolkit');\n  const more = p.moreGroup\n    ? {\n        ...p.moreGroup,\n        label: rowLabel(edits.labels, 'more', p.moreGroup.label),\n      }\n    : null;\n  const toolkitEntries: Entry[] = arrangeRows(\n    [\n      {\n        id: 'toolkit',\n        label: toolkitLabel,\n        icon: <Toolbox width={18} height={18} />,\n        node: () => (\n          <CustomizeRow\n            key=\"toolkit\"\n            active={p.toolkitActive}\n            collapsed={p.collapsed}\n            highlight={p.highlight}\n            label={toolkitLabel}\n          />\n        ),\n      },\n    ],\n    (e) => ({ id: e.id }),\n    edits,\n    false,\n  ).map((e) => ({ ...e, uid: uidFor(e.id) }));\n  const bottom: Entry[] = arrangeRows(\n    more\n      ? [\n          {\n            id: 'more',\n            label: more.label,\n            icon: p.renderIcon('more', p.moreGroup?.icon ?? MoreHorizontal),\n            node: () => p.renderHub(more),\n          },\n        ]\n      : [],\n    (e) => ({ id: e.id }),\n    edits,\n    false,\n  ).map((e) => ({ ...e, uid: uidFor(e.id) }));\n\n  const rowProps = (e: Entry): Omit<EditableRowProps, 'drag'> => ({\n    id: e.id,\n    icon: e.icon,\n    label: e.label,\n    hidden: isRailHidden(edits.hidden, e.id, e.href),\n    onRename: (next) => edit!.onRename(renameKey(e.id, e.href), next),\n  });\n\n  /**\n   * An entry as drawn: the real row normally; editable while editing. A hidden\n   * row is only ever in the list while editing, so it is dimmed there.\n   */\n  const draw = (e: Entry, sortable: boolean, live = false): ReactNode => {\n    if (!edit || !live) return <Fragment key={e.uid}>{e.node()}</Fragment>;\n    return sortable ? (\n      <SortableEditableRow key={e.uid} uid={e.uid} {...rowProps(e)} />\n    ) : (\n      <EditableRow key={e.uid} {...rowProps(e)} />\n    );\n  };\n\n  /** Rows that can be reordered share one sortable list; a lone row cannot. */\n  const sortable = (list: Entry[], body: ReactNode, live = false): ReactNode =>\n    edit && live && list.length > 1 ? (\n      <SortableContext\n        items={list.map((e) => e.uid)}\n        strategy={verticalListSortingStrategy}\n      >\n        {body}\n      </SortableContext>\n    ) : (\n      body\n    );\n\n  const onDragEnd = ({ active, over }: DragEndEvent) => {\n    if (!edit || !over || active.id === over.id) return;\n    for (const list of [manage, grow]) {\n      const from = list.findIndex((e) => e.uid === active.id);\n      const to = list.findIndex((e) => e.uid === over.id);\n      if (from >= 0 && to >= 0) {\n        edit.onReorder(\n          moveId(\n            list.map((e) => e.id),\n            from,\n            to,\n          ),\n        );\n        return;\n      }\n    }\n  };\n\n  const section = (id: SectionId, list: Entry[]) => {\n    const label = sectionLabel(edits.sectionLabels, id);\n    const live = !!edit && p.editSection === id;\n    return sortable(\n      list,\n      <NavSection\n        label={label}\n        foldKey={SECTION_DEFAULT_LABELS[id]}\n        onConfigure={p.onConfigure && (() => p.onConfigure!(id))}\n        onDone={live ? p.onDone : undefined}\n        onRenameLabel={\n          live ? (next) => edit!.onRenameSection(id, next) : undefined\n        }\n        collapsed={p.collapsed}\n        containsActive={p.ownsRoute(\n          list.flatMap((e) => (e.row ? [e.row.ref] : [])),\n        )}\n      >\n        {list.map((e) => draw(e, true, live))}\n      </NavSection>,\n      live,\n    );\n  };\n\n  const body = (\n    <>\n      {/* Home, Money, Inbox and Toolkit: the top-level doors. */}\n      <div className=\"navsection-plain\">\n        <ul className=\"navgroup\">\n          <HomeRow\n            active={p.homeActive}\n            collapsed={p.collapsed}\n            highlight={p.highlight}\n          />\n          {money.map((e) => draw(e, false))}\n          {p.inboxRow && p.renderRow(p.inboxRow)}\n          {toolkitEntries.map((e) => draw(e, false))}\n        </ul>\n      </div>\n\n      {section('manage', manage)}\n      <NavPendingRows show={!p.collapsed && !edit} />\n      {section('grow', grow)}\n\n      {/* The bottom of the list, near the Support footer: rare utilities,\n          unlabelled. */}\n      <div className=\"navsection-plain\">\n        <ul className=\"navgroup\">{bottom.map((e) => draw(e, false))}</ul>\n      </div>\n    </>\n  );\n\n  if (!edit) return body;\n  return (\n    <DndContext\n      sensors={sensors}\n      collisionDetection={closestCenter}\n      onDragEnd={onDragEnd}\n    >\n      {body}\n    </DndContext>\n  );\n}\n"],"mappings":"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","names":["Fragment","sortable","body"]}

package/dist/sidebar/rail-editable.d.ts

@@ -0,0 +1,48 @@
+import type { CSSProperties, ReactNode } from 'react';
+/**
+ * The chrome the rail wears while it is being edited, and nothing else.
+ *
+ * These are module-level components because they hold state (the drag, the
+ * text being typed). The nav renderers are a factory that runs on every render
+ * and anything stateful declared inside it is remounted each pass; see the
+ * comment at the top of `nav-renderers.tsx`.
+ */
+/**
+ * A name you can type over. Enter or leaving the field saves it, Escape puts
+ * the old one back. Saved only if it changed, and an empty name is "no
+ * rename", handled by the caller.
+ */
+export declare function EditableName({ value, label, onCommit, className, }: {
+    value: string;
+    /** What the field is for, said to a screen reader. */
+    label: string;
+    onCommit: (next: string) => void;
+    className?: string;
+}): import("react").JSX.Element;
+export interface DragHandle {
+    setNodeRef: (el: HTMLElement | null) => void;
+    style: CSSProperties;
+    isDragging: boolean;
+    grip: Record<string, unknown>;
+}
+export interface EditableRowProps {
+    id: string;
+    /** The row's icon, drawn exactly as the rail draws it. */
+    icon: ReactNode;
+    /** The name the row has now. */
+    label: string;
+    hidden: boolean;
+    onRename: (next: string) => void;
+    drag?: DragHandle;
+}
+/**
+ * One rail row, editable where it stands. It wears the rail's own classes
+ * (`navitem`, `navlink`, `ic`) so it is the row you were looking at, with a
+ * grip at its left edge, its name as a field and an eye at its right. A hidden
+ * row is dimmed rather than removed so it can be shown again.
+ */
+export declare function EditableRow({ id, icon, label, hidden, onRename, drag, }: EditableRowProps): import("react").JSX.Element;
+/** An editable row that can be dragged. Must sit inside a SortableContext. */
+export declare function SortableEditableRow({ uid, ...row }: Omit<EditableRowProps, 'drag'> & {
+    uid: string;
+}): import("react").JSX.Element;

package/dist/sidebar/rail-editable.js

@@ -0,0 +1,109 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { Grip } from "lucide-react";
+import { Input } from "@withpotter/ui-kit";
+import { NAME_MAX } from "./rail-edits";
+function EditableName({
+  value,
+  label,
+  onCommit,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      variant: "inline",
+      defaultValue: value,
+      maxLength: NAME_MAX,
+      name: `rename-${label}`,
+      autoComplete: "off",
+      "aria-label": label,
+      onBlur: (e) => {
+        const next = e.currentTarget.value.trim();
+        if (next !== value) onCommit(next);
+      },
+      onKeyDown: (e) => {
+        if (e.key === "Enter") e.currentTarget.blur();
+        if (e.key === "Escape") {
+          e.stopPropagation();
+          e.currentTarget.value = value;
+          e.currentTarget.blur();
+        }
+      },
+      className: `nav-edit-name ${className}`
+    },
+    value
+  );
+}
+function EditableRow({
+  id,
+  icon,
+  label,
+  hidden,
+  onRename,
+  drag
+}) {
+  return /* @__PURE__ */ jsx(
+    "li",
+    {
+      ref: drag?.setNodeRef,
+      style: drag?.style,
+      className: "navitem nav-edit" + (hidden ? " is-hidden" : "") + (drag?.isDragging ? " is-dragging" : ""),
+      "data-rail-row": id,
+      children: /* @__PURE__ */ jsxs("div", { className: "navlink nav-edit-link", children: [
+        drag && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            ...drag.grip,
+            "aria-label": `Move ${label}`,
+            className: "nav-edit-grip",
+            children: /* @__PURE__ */ jsx(Grip, { "aria-hidden": "true" })
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "ic", children: icon }),
+        /* @__PURE__ */ jsx(
+          EditableName,
+          {
+            value: label,
+            label: `Rename ${label}`,
+            onCommit: onRename
+          }
+        )
+      ] })
+    }
+  );
+}
+function SortableEditableRow({
+  uid,
+  ...row
+}) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging
+  } = useSortable({ id: uid });
+  return /* @__PURE__ */ jsx(
+    EditableRow,
+    {
+      ...row,
+      drag: {
+        setNodeRef,
+        isDragging,
+        style: { transform: CSS.Transform.toString(transform), transition },
+        grip: { ...attributes, ...listeners }
+      }
+    }
+  );
+}
+export {
+  EditableName,
+  EditableRow,
+  SortableEditableRow
+};
+//# sourceMappingURL=rail-editable.js.map

package/dist/sidebar/rail-editable.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/sidebar/rail-editable.tsx"],"sourcesContent":["'use client';\n\nimport type { CSSProperties, ReactNode } from 'react';\nimport { useSortable } from '@dnd-kit/sortable';\nimport { CSS } from '@dnd-kit/utilities';\nimport { Grip } from 'lucide-react';\nimport { Input } from '@withpotter/ui-kit';\nimport { NAME_MAX } from './rail-edits';\n\n/**\n * The chrome the rail wears while it is being edited, and nothing else.\n *\n * These are module-level components because they hold state (the drag, the\n * text being typed). The nav renderers are a factory that runs on every render\n * and anything stateful declared inside it is remounted each pass; see the\n * comment at the top of `nav-renderers.tsx`.\n */\n\n/**\n * A name you can type over. Enter or leaving the field saves it, Escape puts\n * the old one back. Saved only if it changed, and an empty name is \"no\n * rename\", handled by the caller.\n */\nexport function EditableName({\n  value,\n  label,\n  onCommit,\n  className = '',\n}: {\n  value: string;\n  /** What the field is for, said to a screen reader. */\n  label: string;\n  onCommit: (next: string) => void;\n  className?: string;\n}) {\n  return (\n    <Input\n      variant=\"inline\"\n      // Re-mounted when the saved name changes, so it never shows a stale one.\n      key={value}\n      defaultValue={value}\n      maxLength={NAME_MAX}\n      name={`rename-${label}`}\n      autoComplete=\"off\"\n      aria-label={label}\n      onBlur={(e) => {\n        const next = e.currentTarget.value.trim();\n        if (next !== value) onCommit(next);\n      }}\n      onKeyDown={(e) => {\n        if (e.key === 'Enter') e.currentTarget.blur();\n        if (e.key === 'Escape') {\n          // The field's own Escape; it must not also leave edit mode.\n          e.stopPropagation();\n          e.currentTarget.value = value;\n          e.currentTarget.blur();\n        }\n      }}\n      className={`nav-edit-name ${className}`}\n    />\n  );\n}\n\nexport interface DragHandle {\n  setNodeRef: (el: HTMLElement | null) => void;\n  style: CSSProperties;\n  isDragging: boolean;\n  grip: Record<string, unknown>;\n}\n\nexport interface EditableRowProps {\n  id: string;\n  /** The row's icon, drawn exactly as the rail draws it. */\n  icon: ReactNode;\n  /** The name the row has now. */\n  label: string;\n  hidden: boolean;\n  onRename: (next: string) => void;\n  drag?: DragHandle;\n}\n\n/**\n * One rail row, editable where it stands. It wears the rail's own classes\n * (`navitem`, `navlink`, `ic`) so it is the row you were looking at, with a\n * grip at its left edge, its name as a field and an eye at its right. A hidden\n * row is dimmed rather than removed so it can be shown again.\n */\nexport function EditableRow({\n  id,\n  icon,\n  label,\n  hidden,\n  onRename,\n  drag,\n}: EditableRowProps) {\n  return (\n    <li\n      ref={drag?.setNodeRef}\n      style={drag?.style}\n      className={\n        'navitem nav-edit' +\n        (hidden ? ' is-hidden' : '') +\n        (drag?.isDragging ? ' is-dragging' : '')\n      }\n      data-rail-row={id}\n    >\n      <div className=\"navlink nav-edit-link\">\n        {drag && (\n          <button\n            type=\"button\"\n            {...drag.grip}\n            aria-label={`Move ${label}`}\n            className=\"nav-edit-grip\"\n          >\n            <Grip aria-hidden=\"true\" />\n          </button>\n        )}\n        <span className=\"ic\">{icon}</span>\n        <EditableName\n          value={label}\n          label={`Rename ${label}`}\n          onCommit={onRename}\n        />\n      </div>\n    </li>\n  );\n}\n\n/** An editable row that can be dragged. Must sit inside a SortableContext. */\nexport function SortableEditableRow({\n  uid,\n  ...row\n}: Omit<EditableRowProps, 'drag'> & { uid: string }) {\n  const {\n    attributes,\n    listeners,\n    setNodeRef,\n    transform,\n    transition,\n    isDragging,\n  } = useSortable({ id: uid });\n  return (\n    <EditableRow\n      {...row}\n      drag={{\n        setNodeRef,\n        isDragging,\n        style: { transform: CSS.Transform.toString(transform), transition },\n        grip: { ...attributes, ...listeners },\n      }}\n    />\n  );\n}\n"],"mappings":";AAoCI,cAsEE,YAtEF;AAjCJ,SAAS,mBAAmB;AAC5B,SAAS,WAAW;AACpB,SAAS,YAAY;AACrB,SAAS,aAAa;AACtB,SAAS,gBAAgB;AAgBlB,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AACd,GAMG;AACD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MAGR,cAAc;AAAA,MACd,WAAW;AAAA,MACX,MAAM,UAAU,KAAK;AAAA,MACrB,cAAa;AAAA,MACb,cAAY;AAAA,MACZ,QAAQ,CAAC,MAAM;AACb,cAAM,OAAO,EAAE,cAAc,MAAM,KAAK;AACxC,YAAI,SAAS,MAAO,UAAS,IAAI;AAAA,MACnC;AAAA,MACA,WAAW,CAAC,MAAM;AAChB,YAAI,EAAE,QAAQ,QAAS,GAAE,cAAc,KAAK;AAC5C,YAAI,EAAE,QAAQ,UAAU;AAEtB,YAAE,gBAAgB;AAClB,YAAE,cAAc,QAAQ;AACxB,YAAE,cAAc,KAAK;AAAA,QACvB;AAAA,MACF;AAAA,MACA,WAAW,iBAAiB,SAAS;AAAA;AAAA,IAnBhC;AAAA,EAoBP;AAEJ;AA0BO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAqB;AACnB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK,MAAM;AAAA,MACX,OAAO,MAAM;AAAA,MACb,WACE,sBACC,SAAS,eAAe,OACxB,MAAM,aAAa,iBAAiB;AAAA,MAEvC,iBAAe;AAAA,MAEf,+BAAC,SAAI,WAAU,yBACZ;AAAA,gBACC;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACJ,GAAG,KAAK;AAAA,YACT,cAAY,QAAQ,KAAK;AAAA,YACzB,WAAU;AAAA,YAEV,8BAAC,QAAK,eAAY,QAAO;AAAA;AAAA,QAC3B;AAAA,QAEF,oBAAC,UAAK,WAAU,MAAM,gBAAK;AAAA,QAC3B;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,YACP,OAAO,UAAU,KAAK;AAAA,YACtB,UAAU;AAAA;AAAA,QACZ;AAAA,SACF;AAAA;AAAA,EACF;AAEJ;AAGO,SAAS,oBAAoB;AAAA,EAClC;AAAA,EACA,GAAG;AACL,GAAqD;AACnD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,YAAY,EAAE,IAAI,IAAI,CAAC;AAC3B,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,MAAM;AAAA,QACJ;AAAA,QACA;AAAA,QACA,OAAO,EAAE,WAAW,IAAI,UAAU,SAAS,SAAS,GAAG,WAAW;AAAA,QAClE,MAAM,EAAE,GAAG,YAAY,GAAG,UAAU;AAAA,MACtC;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/sidebar/rail-editor.d.ts

@@ -0,0 +1,19 @@
+import { type RailBodyProps } from './rail-body';
+type Props = Omit<RailBodyProps, 'edit' | 'edits' | 'onConfigure'> & {
+    /** Leave edit mode. */
+    onDone: () => void;
+    /** The labels the rail shows now, and the raw stored ones. */
+    savedLabels: Record<string, string> | undefined;
+    storedLabels: Record<string, string> | undefined;
+};
+/**
+ * THE RAIL, EDITABLE IN PLACE.
+ *
+ * Mounted only while editing, so a resting sidebar pays nothing for it. It owns
+ * the draft (`useModuleNavigation`, the same hook the Dashboard navigation
+ * page uses, so the two cannot disagree) and saves as you go (`useAutoSave`).
+ * It draws the ordinary rail with `edit` handlers switched on; a short bar at
+ * the top carries Done, Reset and the save status.
+ */
+export declare function EditableRailBody({ onDone, savedLabels, storedLabels, ...rail }: Props): import("react").JSX.Element;
+export {};