alinea 1.7.0 → 2.0.0-preview.0

package/dist/dashboard/app/pages/RootPage.js

@@ -0,0 +1,90 @@
+import {
+  useAtomValue,
+  useSetAtom
+} from "../../../chunks/chunk-U4VOHNR2.js";
+import "../../../chunks/chunk-Y7XOMJOC.js";
+import {
+  styler
+} from "../../../chunks/chunk-I4OYYAX5.js";
+import "../../../chunks/chunk-CQ52GEHY.js";
+
+// src/dashboard/app/pages/RootPage.tsx
+import { assert } from "alinea/core/util/Assert";
+import { page, routeAtom } from "alinea/dashboard/atoms/nav";
+import {
+  rootAtoms
+} from "alinea/dashboard/atoms/root";
+import { Explorer } from "../Explorer.js";
+import { CreateEntryButton } from "../DashboardLayout.js";
+import { NotFoundPanel } from "./EntryPage.js";
+import { Rail, RailBody } from "../ui/Rail.js";
+
+// src/dashboard/app/pages/RootPage.module.css
+var RootPage_default = {
+  "RootPage-customView": "alinea-RootPage-customView",
+  "RootPageCustomView": "alinea-RootPage-customView",
+  "RootPage-mobileActions": "alinea-RootPage-mobileActions",
+  "RootPageMobileActions": "alinea-RootPage-mobileActions"
+};
+
+// src/dashboard/app/pages/RootPage.tsx
+import { jsx } from "react/jsx-runtime";
+var styles = styler(RootPage_default);
+var rootPage = page(async (page2, get) => {
+  assert(page2.workspace, "Workspace expected");
+  assert(page2.root, "Root expected");
+  const root = rootAtoms(page2.workspace, page2.root);
+  const data = get(root.data);
+  const view = get(root.view);
+  const explorerPage = view ? void 0 : await get(root.explorer.pageReady);
+  return /* @__PURE__ */ jsx(
+    RootEditor,
+    {
+      data,
+      explorerPage,
+      root,
+      view
+    }
+  );
+});
+function RootEditor({ data, explorerPage, root, view: View }) {
+  if (View) {
+    const rootData = { ...data, name: root.key };
+    return /* @__PURE__ */ jsx(Rail, { main: true, children: /* @__PURE__ */ jsx(RailBody, { className: styles.RootPage.customView(), children: /* @__PURE__ */ jsx(View, { root: rootData }) }) });
+  }
+  assert(explorerPage, "Explorer page expected");
+  return /* @__PURE__ */ jsx(RootBrowser, { page: explorerPage, root });
+}
+function RootBrowser({ page: page2, root }) {
+  return /* @__PURE__ */ jsx(Rail, { main: true, children: /* @__PURE__ */ jsx(
+    Explorer,
+    {
+      controls: /* @__PURE__ */ jsx("div", { className: styles.RootPage.mobileActions(), children: /* @__PURE__ */ jsx(CreateEntryButton, { root, toolbar: true }) }),
+      explorer: root.explorer,
+      page: page2
+    }
+  ) });
+}
+function MissingRoot({ page: page2, requestedRoot, root }) {
+  const label = useAtomValue(root.label);
+  const setRoute = useSetAtom(routeAtom);
+  return /* @__PURE__ */ jsx(
+    NotFoundPanel,
+    {
+      title: "Root not found",
+      message: "The requested root could not be found or is no longer available.",
+      requestedLabel: "Requested root",
+      requestedValue: requestedRoot,
+      actionLabel: `Go to ${label}`,
+      onAction: () => setRoute({
+        workspace: page2.workspace,
+        root: page2.root,
+        locale: page2.locale ?? void 0
+      })
+    }
+  );
+}
+export {
+  MissingRoot,
+  rootPage
+};

package/dist/dashboard/app/pages/UsersPage.d.ts

@@ -0,0 +1,7 @@
+import { Page } from '../../atoms/nav.js';
+export declare const usersPage: (page: Page, get: import("jotai").Getter) => import("react").ReactNode | Promise<import("react").ReactNode>;
+export declare function UsersPage(): import("react").JSX.Element;
+export interface UsersPageSidebarProps {
+    page: Page;
+}
+export declare function UsersPageSidebar({ page }: UsersPageSidebarProps): import("react").JSX.Element;

package/dist/dashboard/app/pages/UsersPage.js

@@ -0,0 +1,552 @@
+import "../../../chunks/chunk-NUFRM6SI.js";
+import {
+  useAtom,
+  useAtomValue,
+  useSetAtom
+} from "../../../chunks/chunk-U4VOHNR2.js";
+import {
+  atom
+} from "../../../chunks/chunk-Y7XOMJOC.js";
+import {
+  $232f8dea1b0a4f2f$export$762f73dccccd255d
+} from "../../../chunks/chunk-JFROOUG6.js";
+import "../../../chunks/chunk-SJBZFMQ2.js";
+import "../../../chunks/chunk-IYAQC63Y.js";
+import "../../../chunks/chunk-AC4U3IMS.js";
+import {
+  dist_default
+} from "../../../chunks/chunk-I4OYYAX5.js";
+import "../../../chunks/chunk-CQ52GEHY.js";
+
+// src/dashboard/app/pages/UsersPage.tsx
+import {
+  Button,
+  Cell,
+  Column,
+  DialogTrigger,
+  Icon,
+  Menu,
+  MenuItem,
+  MultipleSelect,
+  MultipleSelectItem,
+  ProgressCircle,
+  Row,
+  SearchField,
+  Table,
+  TableBody,
+  TableHeader,
+  Tag,
+  TextField
+} from "alinea/components";
+import { useMemo, useState } from "react";
+import { clientAtom, configAtom } from "../../atoms/core.js";
+import { page, routeAtom } from "../../atoms/nav.js";
+import { IcRoundAdd, IcRoundArrowBack, IcRoundMoreHoriz } from "../../icons.js";
+import { ActivityStatus } from "../ActivityStatus.js";
+import { AppShell, AppShellContent, AppShellInner } from "../AppShell.js";
+import { Badge } from "../Badge.js";
+import {
+  DashboardModal,
+  DashboardModalContent,
+  DashboardModalDialog,
+  DashboardModalFooter,
+  useDashboardModal
+} from "../ui/DashboardModal.js";
+import { SidebarHeader } from "../ui/Sidebar.js";
+
+// src/dashboard/app/pages/UsersPage.module.css
+var UsersPage_default = {
+  "UsersPage-header": "alinea-UsersPage-header",
+  "UsersPageHeader": "alinea-UsersPage-header",
+  "UsersPage-status-text": "alinea-UsersPage-status-text",
+  "UsersPageStatusText": "alinea-UsersPage-status-text",
+  "UsersPage-rolesCell": "alinea-UsersPage-rolesCell",
+  "UsersPageRolesCell": "alinea-UsersPage-rolesCell",
+  "UsersPage-roles": "alinea-UsersPage-roles",
+  "UsersPageRoles": "alinea-UsersPage-roles",
+  "UsersPage": "alinea-UsersPage",
+  "UsersPage-createButton": "alinea-UsersPage-createButton",
+  "UsersPageCreateButton": "alinea-UsersPage-createButton",
+  "UsersPage-search": "alinea-UsersPage-search",
+  "UsersPageSearch": "alinea-UsersPage-search",
+  "UsersPage-identity-text": "alinea-UsersPage-identity-text",
+  "UsersPageIdentityText": "alinea-UsersPage-identity-text",
+  "UsersPage-form-fields": "alinea-UsersPage-form-fields",
+  "UsersPageFormFields": "alinea-UsersPage-form-fields",
+  "UsersPageSidebar-footer": "alinea-UsersPageSidebar-footer",
+  "UsersPageSidebarFooter": "alinea-UsersPageSidebar-footer",
+  "UsersPage-empty": "alinea-UsersPage-empty",
+  "UsersPageEmpty": "alinea-UsersPage-empty",
+  "UsersPage-table": "alinea-UsersPage-table",
+  "UsersPageTable": "alinea-UsersPage-table",
+  "UsersPage-identity": "alinea-UsersPage-identity",
+  "UsersPageIdentity": "alinea-UsersPage-identity",
+  "UsersPage-content": "alinea-UsersPage-content",
+  "UsersPageContent": "alinea-UsersPage-content",
+  "UsersPage-identity-title": "alinea-UsersPage-identity-title",
+  "UsersPageIdentityTitle": "alinea-UsersPage-identity-title",
+  "UsersPage-identity-email": "alinea-UsersPage-identity-email",
+  "UsersPageIdentityEmail": "alinea-UsersPage-identity-email",
+  "UsersPage-noRoles": "alinea-UsersPage-noRoles",
+  "UsersPageNoRoles": "alinea-UsersPage-noRoles",
+  "UsersPage-header-title": "alinea-UsersPage-header-title",
+  "UsersPageHeaderTitle": "alinea-UsersPage-header-title",
+  "UsersPageSidebar-nav": "alinea-UsersPageSidebar-nav",
+  "UsersPageSidebarNav": "alinea-UsersPageSidebar-nav",
+  "UsersPage-form-error": "alinea-UsersPage-form-error",
+  "UsersPageFormError": "alinea-UsersPage-form-error",
+  "UsersPageSidebar-icon": "alinea-UsersPageSidebar-icon",
+  "UsersPageSidebarIcon": "alinea-UsersPageSidebar-icon",
+  "UsersPageSidebar-item": "alinea-UsersPageSidebar-item",
+  "UsersPageSidebarItem": "alinea-UsersPageSidebar-item",
+  "UsersPage-confirmation": "alinea-UsersPage-confirmation",
+  "UsersPageConfirmation": "alinea-UsersPage-confirmation",
+  "UsersPageSidebar": "alinea-UsersPageSidebar",
+  "UsersPage-status": "alinea-UsersPage-status",
+  "UsersPageStatus": "alinea-UsersPage-status"
+};
+
+// src/dashboard/app/pages/UsersPage.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var styles = dist_default(UsersPage_default);
+var userColumns = [
+  { id: "user", name: "User", isRowHeader: true },
+  { id: "roles", name: "Roles" }
+];
+var usersStateAtom = atom({
+  status: "loading",
+  users: []
+});
+var usersAtom = atom(
+  (get) => get(usersStateAtom),
+  async (get, set, action) => {
+    const client = get(clientAtom);
+    if (action.type === "load") {
+      const current = get(usersStateAtom);
+      set(usersStateAtom, { ...current, error: void 0, status: "loading" });
+      try {
+        const users = await client.listUsers();
+        set(usersStateAtom, { status: "loaded", users });
+      } catch (cause) {
+        set(usersStateAtom, {
+          error: cause instanceof Error ? cause.message : String(cause),
+          status: "error",
+          users: current.users
+        });
+      }
+      return void 0;
+    }
+    if (action.type === "remove") {
+      await client.removeUser(action.email);
+      set(usersStateAtom, (current) => {
+        return {
+          status: "loaded",
+          users: removeUser(current.users, action.email)
+        };
+      });
+      return void 0;
+    }
+    const saved = action.type === "create" ? await client.createUser(action.user) : await client.updateUser(action.user);
+    set(usersStateAtom, (current) => {
+      return {
+        status: "loaded",
+        users: upsertUser(current.users, saved)
+      };
+    });
+    return saved;
+  }
+);
+usersAtom.onMount = (dispatch) => {
+  void dispatch({ type: "load" });
+};
+function upsertUser(users, user) {
+  const existing = users.findIndex(
+    (item) => item.email?.toLowerCase() === user.email?.toLowerCase()
+  );
+  if (existing === -1) return [...users, user];
+  const next = users.slice();
+  next[existing] = user;
+  return next;
+}
+function removeUser(users, email) {
+  const normalized = email.toLowerCase();
+  return users.filter((user) => user.email?.toLowerCase() !== normalized);
+}
+var usersPage = page((page2) => {
+  return /* @__PURE__ */ jsx(AppShell, { children: /* @__PURE__ */ jsxs(AppShellInner, { children: [
+    /* @__PURE__ */ jsx(UsersPageSidebar, { page: page2 }),
+    /* @__PURE__ */ jsx(AppShellContent, { children: /* @__PURE__ */ jsx(UsersPage, {}) })
+  ] }) });
+});
+function UsersPage() {
+  const config = useAtomValue(configAtom);
+  const [usersState] = useAtom(usersAtom);
+  const [query, setQuery] = useState("");
+  const [editingUser, setEditingUser] = useState();
+  const [deletingUser, setDeletingUser] = useState();
+  const users = usersState.users;
+  const filteredUsers = useMemo(() => {
+    const normalized = query.trim().toLowerCase();
+    const filtered = normalized ? users.filter((user) => {
+      return userSearchText(user, config.roles).includes(normalized);
+    }) : users;
+    return filtered.toSorted(compareUsers);
+  }, [config.roles, query, users]);
+  return /* @__PURE__ */ jsxs("div", { className: styles.UsersPage(), children: [
+    /* @__PURE__ */ jsxs(SidebarHeader, { className: styles.UsersPage.header(), children: [
+      /* @__PURE__ */ jsx("div", { className: styles.UsersPage.header.title(), children: "Manage users" }),
+      /* @__PURE__ */ jsx(
+        SearchField,
+        {
+          "aria-label": "Search users",
+          placeholder: "Search users",
+          hasIcon: true,
+          value: query,
+          onChange: setQuery,
+          className: styles.UsersPage.search()
+        }
+      ),
+      /* @__PURE__ */ jsxs(DialogTrigger, { children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            intent: "primary",
+            icon: IcRoundAdd,
+            className: styles.UsersPage.createButton(),
+            children: "Create user"
+          }
+        ),
+        /* @__PURE__ */ jsx(DashboardModal, { children: /* @__PURE__ */ jsx(UserModal, {}) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: styles.UsersPage.content(), children: usersState.status === "loading" ? /* @__PURE__ */ jsx(UsersPageStatus, { label: "Loading users", pending: true }) : usersState.status === "error" ? /* @__PURE__ */ jsx(UsersPageStatus, { label: usersState.error ?? "Failed to load users" }) : /* @__PURE__ */ jsx(
+      UsersTable,
+      {
+        users: filteredUsers,
+        roleLabel: (role) => config.roles?.[role]?.label,
+        onEdit: setEditingUser,
+        onDeactivate: setDeletingUser
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      DashboardModal,
+      {
+        isOpen: editingUser !== void 0,
+        onOpenChange: (isOpen) => {
+          if (!isOpen) setEditingUser(void 0);
+        },
+        children: editingUser && /* @__PURE__ */ jsx(UserModal, { user: editingUser })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      DashboardModal,
+      {
+        isOpen: deletingUser !== void 0,
+        onOpenChange: (isOpen) => {
+          if (!isOpen) setDeletingUser(void 0);
+        },
+        children: deletingUser && /* @__PURE__ */ jsx(DeactivateUserModal, { user: deletingUser })
+      }
+    )
+  ] });
+}
+function UsersPageSidebar({ page: page2 }) {
+  const setRoute = useSetAtom(routeAtom);
+  function handleBack() {
+    setRoute({
+      page: "entry",
+      workspace: page2.workspace ?? void 0,
+      root: page2.root ?? void 0
+    });
+  }
+  return /* @__PURE__ */ jsxs("aside", { className: styles.UsersPageSidebar(), "aria-label": "Users", children: [
+    /* @__PURE__ */ jsx("nav", { className: styles.UsersPageSidebar.nav(), children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        "aria-label": "Back to app",
+        appearance: "plain",
+        className: styles.UsersPageSidebar.item(),
+        size: "icon-nav",
+        onPress: handleBack,
+        children: /* @__PURE__ */ jsx(
+          Icon,
+          {
+            icon: IcRoundArrowBack,
+            className: styles.UsersPageSidebar.icon()
+          }
+        )
+      }
+    ) }),
+    /* @__PURE__ */ jsx("div", { className: styles.UsersPageSidebar.footer(), children: /* @__PURE__ */ jsx(ActivityStatus, { mobilePlacement: "bottom right" }) })
+  ] });
+}
+function UsersPageStatus({ label, pending }) {
+  return /* @__PURE__ */ jsxs("div", { className: styles.UsersPage.status(), children: [
+    pending && /* @__PURE__ */ jsx(ProgressCircle, { isIndeterminate: true, "aria-label": label }),
+    /* @__PURE__ */ jsx("p", { className: styles.UsersPage.status.text(), children: label })
+  ] });
+}
+function UsersTable({ onDeactivate, onEdit, users, roleLabel }) {
+  return /* @__PURE__ */ jsxs(Table, { "aria-label": "Users", className: styles.UsersPage.table(), children: [
+    /* @__PURE__ */ jsx(TableHeader, { columns: userColumns, children: (column) => /* @__PURE__ */ jsx(Column, { id: column.id, isRowHeader: column.isRowHeader, children: column.name }) }),
+    /* @__PURE__ */ jsx(
+      TableBody,
+      {
+        items: users,
+        renderEmptyState: () => /* @__PURE__ */ jsx("span", { className: styles.UsersPage.empty(), children: "No users found" }),
+        children: (user) => /* @__PURE__ */ jsx(Row, { id: user.email ?? user.sub, columns: userColumns, children: (column) => /* @__PURE__ */ jsx(Cell, { children: renderUserCell(
+          user,
+          column.id,
+          roleLabel,
+          onEdit,
+          onDeactivate
+        ) }) })
+      }
+    )
+  ] });
+}
+function renderUserCell(user, column, roleLabel, onEdit, onDeactivate) {
+  if (column === "user") {
+    return /* @__PURE__ */ jsx("span", { className: styles.UsersPage.identity(), children: /* @__PURE__ */ jsxs("span", { className: styles.UsersPage.identity.text(), children: [
+      user.name && /* @__PURE__ */ jsx("span", { className: styles.UsersPage.identity.title(), children: user.name }),
+      /* @__PURE__ */ jsx("span", { className: styles.UsersPage.identity.email(), children: user.email || user.sub })
+    ] }) });
+  }
+  const roles = (user.roles ?? []).map((role) => {
+    const label = roleLabel(role);
+    return label ? { id: role, label } : void 0;
+  }).filter((role) => Boolean(role));
+  return /* @__PURE__ */ jsxs("span", { className: styles.UsersPage.rolesCell(), children: [
+    roles.length === 0 ? /* @__PURE__ */ jsx("span", { className: styles.UsersPage.noRoles(), children: "No roles" }) : /* @__PURE__ */ jsx("span", { className: styles.UsersPage.roles(), children: roles.map((role) => /* @__PURE__ */ jsx(Badge, { size: "small", children: role.label }, role.id)) }),
+    /* @__PURE__ */ jsx(
+      UserActionsMenu,
+      {
+        user,
+        onEdit,
+        onDeactivate
+      }
+    )
+  ] });
+}
+function UserActionsMenu({ user, onDeactivate, onEdit }) {
+  const email = user.email;
+  const label = user.name || user.email || user.sub;
+  function handleAction(key) {
+    if (key === "edit") {
+      onEdit(user);
+      return;
+    }
+    if (key !== "deactivate" || !email) return;
+    onDeactivate(user);
+  }
+  return /* @__PURE__ */ jsxs(
+    Menu,
+    {
+      "aria-label": `Actions for ${label}`,
+      label: /* @__PURE__ */ jsx(
+        Button,
+        {
+          "aria-label": `Actions for ${label}`,
+          appearance: "plain",
+          size: "icon-small",
+          icon: IcRoundMoreHoriz
+        }
+      ),
+      disabledKeys: email ? void 0 : ["deactivate"],
+      onAction: handleAction,
+      children: [
+        /* @__PURE__ */ jsx(MenuItem, { id: "edit", children: "Edit" }),
+        /* @__PURE__ */ jsx(MenuItem, { id: "deactivate", children: "Deactivate account" })
+      ]
+    }
+  );
+}
+function DeactivateUserModal({ user }) {
+  const saveUser = useSetAtom(usersAtom);
+  const modal = useDashboardModal();
+  const [isPending, setIsPending] = useState(false);
+  const [error, setError] = useState();
+  const email = user.email;
+  const label = user.name || user.email || user.sub;
+  async function handleDeactivate() {
+    if (!email) return;
+    setIsPending(true);
+    setError(void 0);
+    try {
+      await saveUser({ type: "remove", email });
+      modal.close();
+    } catch (cause) {
+      setError(cause instanceof Error ? cause.message : String(cause));
+    } finally {
+      setIsPending(false);
+    }
+  }
+  return /* @__PURE__ */ jsxs(DashboardModalDialog, { label: "Deactivate account", children: [
+    /* @__PURE__ */ jsx(DashboardModalContent, { children: /* @__PURE__ */ jsxs("div", { className: styles.UsersPage.form.fields(), children: [
+      /* @__PURE__ */ jsxs("p", { className: styles.UsersPage.confirmation(), children: [
+        "Are you sure you want to deactivate ",
+        label,
+        "? This will remove the user account and role assignments."
+      ] }),
+      error && /* @__PURE__ */ jsx("p", { className: styles.UsersPage.form.error(), role: "alert", children: error })
+    ] }) }),
+    /* @__PURE__ */ jsxs(DashboardModalFooter, { children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          appearance: "outline",
+          intent: "secondary",
+          onPress: modal.close,
+          children: "Cancel"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          intent: "danger",
+          isDisabled: !email,
+          isPending,
+          onPress: handleDeactivate,
+          children: "Deactivate account"
+        }
+      )
+    ] })
+  ] });
+}
+function UserModal({ user }) {
+  const config = useAtomValue(configAtom);
+  const saveUser = useSetAtom(usersAtom);
+  const modal = useDashboardModal();
+  const isEditing = user !== void 0;
+  const [email, setEmail] = useState(user?.email ?? "");
+  const [name, setName] = useState(user?.name ?? "");
+  const [isPending, setIsPending] = useState(false);
+  const [error, setError] = useState();
+  const roleItems = useMemo(() => {
+    return Object.entries(config.roles ?? {}).map(([id, role]) => {
+      return { id, name: role.label ?? id };
+    });
+  }, [config.roles]);
+  const selectedRoles = $232f8dea1b0a4f2f$export$762f73dccccd255d({
+    initialItems: (user?.roles ?? []).map((role) => roleItems.find((item) => item.id === role)).filter((item) => Boolean(item))
+  });
+  async function handleSubmit(event) {
+    event.preventDefault();
+    const userEmail = email.trim();
+    const userName = name.trim();
+    if (!userEmail) {
+      setError("Email is required");
+      return;
+    }
+    setIsPending(true);
+    setError(void 0);
+    try {
+      const request = {
+        email: userEmail,
+        name: userName || void 0,
+        roles: selectedRoles.items.map((item) => String(item.id))
+      };
+      await saveUser({
+        type: isEditing ? "update" : "create",
+        user: request
+      });
+      modal.close();
+    } catch (cause) {
+      setError(cause instanceof Error ? cause.message : String(cause));
+    } finally {
+      setIsPending(false);
+    }
+  }
+  return /* @__PURE__ */ jsxs(DashboardModalDialog, { label: isEditing ? "Edit user" : "Create user", children: [
+    /* @__PURE__ */ jsx("form", { onSubmit: handleSubmit, id: "submit", children: /* @__PURE__ */ jsx(DashboardModalContent, { children: /* @__PURE__ */ jsxs("div", { className: styles.UsersPage.form.fields(), children: [
+      /* @__PURE__ */ jsx(
+        TextField,
+        {
+          label: "Email",
+          type: "email",
+          value: email,
+          onChange: setEmail,
+          isRequired: true,
+          isDisabled: isEditing,
+          autoFocus: !isEditing,
+          inputProps: {
+            autoComplete: "off",
+            "data-1p-ignore": "true"
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        TextField,
+        {
+          label: "Name",
+          value: name,
+          onChange: setName,
+          autoFocus: isEditing,
+          inputProps: {
+            autoComplete: "off",
+            "data-1p-ignore": "true"
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        MultipleSelect,
+        {
+          label: "Roles",
+          placeholder: "Select roles",
+          items: roleItems,
+          selectedItems: selectedRoles,
+          tag: (item) => /* @__PURE__ */ jsx(Tag, { "data-shape": "circle", children: item.name }),
+          renderEmptyState: () => "No roles",
+          children: (item) => /* @__PURE__ */ jsx(MultipleSelectItem, { id: item.id, textValue: item.name, children: item.name })
+        }
+      ),
+      error && /* @__PURE__ */ jsx("p", { className: styles.UsersPage.form.error(), role: "alert", children: error })
+    ] }) }) }),
+    /* @__PURE__ */ jsxs(DashboardModalFooter, { children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          appearance: "outline",
+          intent: "secondary",
+          onPress: modal.close,
+          children: "Cancel"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "submit",
+          intent: "primary",
+          isPending,
+          form: "submit",
+          children: isEditing ? "Save changes" : "Create user"
+        }
+      )
+    ] })
+  ] });
+}
+function userSearchText(user, roles) {
+  return [
+    user.name,
+    user.email,
+    user.sub,
+    ...(user.roles ?? []).map((role) => roles?.[role]?.label)
+  ].filter(Boolean).join(" ").toLowerCase();
+}
+function compareUsers(a, b) {
+  const name = (a.name ?? "").localeCompare(b.name ?? "", void 0, {
+    sensitivity: "base"
+  });
+  if (name !== 0) return name;
+  return (a.email ?? a.sub).localeCompare(b.email ?? b.sub, void 0, {
+    sensitivity: "base"
+  });
+}
+export {
+  UsersPage,
+  UsersPageSidebar,
+  usersPage
+};

package/dist/dashboard/app/ui/DashboardModal.d.ts

@@ -0,0 +1,34 @@
+import { Dialog } from 'alinea/components';
+import { type ComponentProps, type PropsWithChildren, type ReactNode } from 'react';
+import { type ModalOverlayProps } from 'react-aria-components';
+import { RailBody, RailFooter, RailHeader } from './Rail.js';
+export interface DashboardModalProps extends Omit<ModalOverlayProps, 'children'> {
+    children?: ReactNode;
+    size?: 'default' | 'explorer';
+}
+export declare function DashboardModal({ children, size, ...props }: DashboardModalProps): import("react").JSX.Element;
+export interface DashboardModalDialogProps extends PropsWithChildren, Omit<ComponentProps<typeof Dialog>, 'children' | 'className'> {
+    isLoading?: boolean;
+    label?: ReactNode;
+    controls?: ReactNode;
+    variant?: 'default' | 'explorer';
+}
+export declare function DashboardModalDialog({ isLoading, label, controls, children, variant, ...props }: DashboardModalDialogProps): import("react").JSX.Element;
+export declare function DashboardModalContent({ children }: PropsWithChildren): import("react").JSX.Element;
+export declare function DashboardModalFooter({ children }: PropsWithChildren): import("react").JSX.Element;
+export declare function DashboardModalTitle({ children }: PropsWithChildren): import("react").JSX.Element;
+export declare function useDashboardModal(): import("react-aria-components").OverlayTriggerState;
+export declare function DashboardModalCloseButton(): import("react").JSX.Element;
+export declare function DashboardModalSeparator(): import("react").JSX.Element;
+export interface DashboardModalFormProps extends ComponentProps<'form'> {
+}
+export declare function DashboardModalForm(props: DashboardModalFormProps): import("react").JSX.Element;
+export interface DashboardModalFormHeaderProps extends ComponentProps<typeof RailHeader> {
+}
+export declare function DashboardModalFormHeader(props: DashboardModalFormHeaderProps): import("react").JSX.Element;
+export interface DashboardModalFormBodyProps extends ComponentProps<typeof RailBody> {
+}
+export declare function DashboardModalFormBody(props: DashboardModalFormBodyProps): import("react").JSX.Element;
+export interface DashboardModalFormFooterProps extends ComponentProps<typeof RailFooter> {
+}
+export declare function DashboardModalFormFooter(props: DashboardModalFormFooterProps): import("react").JSX.Element;