@orthacms/workspaces-admin 0.0.0-reserve.0

package/dist/lib/presentation/components/WorkspaceStats/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * The home dashboard's workspace stat tiles: active-workspace count, the number
+ * of distinct members across all workspaces, and the number of distinct content
+ * types granted — all derived from the real `GET /api/workspaces` payload (no
+ * separate metrics API yet). Rendered as a `display: contents` group so the
+ * three tiles flow directly into the home page's stat grid.
+ */
+export declare function WorkspaceStats(): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/presentation/components/WorkspaceStats/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lib/presentation/components/WorkspaceStats/index.tsx"],"names":[],"mappings":"AA6BA;;;;;;GAMG;AACH,wBAAgB,cAAc,gCA2C7B"}

package/dist/lib/presentation/components/WorkspaceStats/index.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { defineMessages, useIntl } from 'react-intl';
+import { FileStack, Layers, Users } from 'lucide-react';
+import { StatTile } from '@orthacms/design-system';
+import { useWorkspaces } from '../../../application/useWorkspaces';
+import { isActiveWorkspace } from '../../../domain/isActiveWorkspace';
+/** Intl descriptors for {@link WorkspaceStats}, co-located here. */
+const messages = defineMessages({
+    activeWorkspaces: {
+        id: 'workspaces.stats.active',
+        defaultMessage: 'Active workspaces'
+    },
+    members: {
+        id: 'workspaces.stats.members',
+        defaultMessage: 'Members'
+    },
+    contentTypes: {
+        id: 'workspaces.stats.contentTypes',
+        defaultMessage: 'Content types'
+    },
+    error: {
+        id: 'workspaces.stats.error',
+        defaultMessage: 'Couldn’t load workspace stats.'
+    }
+});
+/** A placeholder shown for a metric while the list query is in flight. */
+const LOADING = '—';
+/**
+ * The home dashboard's workspace stat tiles: active-workspace count, the number
+ * of distinct members across all workspaces, and the number of distinct content
+ * types granted — all derived from the real `GET /api/workspaces` payload (no
+ * separate metrics API yet). Rendered as a `display: contents` group so the
+ * three tiles flow directly into the home page's stat grid.
+ */
+export function WorkspaceStats() {
+    const intl = useIntl();
+    const { data: workspaces, isPending, isError } = useWorkspaces();
+    // A failed load must not read as real zeros — surface it distinctly so the
+    // operator doesn't mistake "couldn't load" for "nothing here".
+    if (isError) {
+        return (_jsx("p", { role: "alert", className: "col-span-full rounded-xl border border-destructive/40 bg-destructive/5 px-4 py-3 text-sm text-destructive", children: intl.formatMessage(messages.error) }));
+    }
+    const active = workspaces?.filter(isActiveWorkspace).length ?? 0;
+    const members = new Set((workspaces ?? []).flatMap((w) => w.members.map((m) => m.id))).size;
+    const contentTypes = new Set((workspaces ?? []).flatMap((w) => w.content))
+        .size;
+    return (_jsxs("div", { className: "contents", children: [_jsx(StatTile, { value: isPending ? LOADING : active, label: intl.formatMessage(messages.activeWorkspaces), icon: Layers }), _jsx(StatTile, { value: isPending ? LOADING : members, label: intl.formatMessage(messages.members), icon: Users }), _jsx(StatTile, { value: isPending ? LOADING : contentTypes, label: intl.formatMessage(messages.contentTypes), icon: FileStack })] }));
+}

package/dist/lib/presentation/components/WorkspaceToolbar/index.d.ts

@@ -0,0 +1,22 @@
+/** The status the list is filtered by. `Active` is the default view. */
+export type StatusFilter = 'All' | 'Active' | 'Archived';
+/** The default status filter. */
+export declare const DEFAULT_STATUS: StatusFilter;
+type WorkspaceToolbarProps = {
+    search: string;
+    onSearchChange: (value: string) => void;
+    status: StatusFilter;
+    onStatusChange: (value: StatusFilter) => void;
+    /** How many workspaces fall under each status (for the chip counts). */
+    counts: Record<StatusFilter, number>;
+    shown: number;
+    total: number;
+};
+/**
+ * The list toolbar: a search box, the status filter as a segmented chip group
+ * (All / Active / Archived, each badged with its count), and a live
+ * "{shown} of {total}" count. Wraps to multiple rows on narrow viewports.
+ */
+export declare function WorkspaceToolbar({ search, onSearchChange, status, onStatusChange, counts, shown, total }: WorkspaceToolbarProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/presentation/components/WorkspaceToolbar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lib/presentation/components/WorkspaceToolbar/index.tsx"],"names":[],"mappings":"AAWA,wEAAwE;AACxE,MAAM,MAAM,YAAY,GAAG,KAAK,GAAG,QAAQ,GAAG,UAAU,CAAC;AAEzD,iCAAiC;AACjC,eAAO,MAAM,cAAc,EAAE,YAAuB,CAAC;AA8CrD,KAAK,qBAAqB,GAAG;IACzB,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,MAAM,EAAE,YAAY,CAAC;IACrB,cAAc,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IAC9C,wEAAwE;IACxE,MAAM,EAAE,MAAM,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,EAC7B,MAAM,EACN,cAAc,EACd,MAAM,EACN,cAAc,EACd,MAAM,EACN,KAAK,EACL,KAAK,EACR,EAAE,qBAAqB,+BAyEvB"}

package/dist/lib/presentation/components/WorkspaceToolbar/index.js

@@ -0,0 +1,73 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { defineMessages, useIntl } from 'react-intl';
+import { Search } from 'lucide-react';
+import { InputGroup, InputGroupAddon, InputGroupInput, SegmentedControl, SegmentedControlCount, SegmentedControlItem } from '@orthacms/design-system';
+/** The default status filter. */
+export const DEFAULT_STATUS = 'Active';
+/** Intl descriptors for {@link WorkspaceToolbar}, co-located with the component. */
+const messages = defineMessages({
+    searchLabel: {
+        id: 'workspaces.toolbar.searchLabel',
+        defaultMessage: 'Search workspaces'
+    },
+    searchPlaceholder: {
+        id: 'workspaces.toolbar.searchPlaceholder',
+        defaultMessage: 'Search workspaces'
+    },
+    statusLegend: {
+        id: 'workspaces.toolbar.statusLegend',
+        defaultMessage: 'Filter by status'
+    },
+    statusAll: {
+        id: 'workspaces.toolbar.statusAll',
+        defaultMessage: 'All'
+    },
+    statusActive: {
+        id: 'workspaces.toolbar.statusActive',
+        defaultMessage: 'Active'
+    },
+    statusArchived: {
+        id: 'workspaces.toolbar.statusArchived',
+        defaultMessage: 'Archived'
+    },
+    count: {
+        id: 'workspaces.toolbar.count',
+        defaultMessage: '{shown} of {total}'
+    },
+    countAnnouncement: {
+        id: 'workspaces.toolbar.countAnnouncement',
+        defaultMessage: '{shown, plural, one {# workspace shown} other {# workspaces shown}} of {total}.'
+    },
+    statusOption: {
+        id: 'workspaces.toolbar.statusOption',
+        defaultMessage: '{label}, {count, plural, one {# workspace} other {# workspaces}}'
+    }
+});
+const STATUS_OPTIONS = ['All', 'Active', 'Archived'];
+/**
+ * The list toolbar: a search box, the status filter as a segmented chip group
+ * (All / Active / Archived, each badged with its count), and a live
+ * "{shown} of {total}" count. Wraps to multiple rows on narrow viewports.
+ */
+export function WorkspaceToolbar({ search, onSearchChange, status, onStatusChange, counts, shown, total }) {
+    const intl = useIntl();
+    const statusLabel = {
+        All: intl.formatMessage(messages.statusAll),
+        Active: intl.formatMessage(messages.statusActive),
+        Archived: intl.formatMessage(messages.statusArchived)
+    };
+    return (_jsxs("div", { className: "mb-4 flex flex-wrap items-center gap-3", children: [_jsxs(InputGroup, { className: "w-full shadow-none sm:max-w-[360px]", children: [_jsx(InputGroupAddon, { children: _jsx(Search, {}) }), _jsx(InputGroupInput, { type: "search", value: search, onChange: (event) => onSearchChange(event.target.value), "aria-label": intl.formatMessage(messages.searchLabel), placeholder: intl.formatMessage(messages.searchPlaceholder) })] }), _jsx(SegmentedControl, { value: status, 
+                // Radix single-toggle can emit '' when the active chip is
+                // re-clicked; ignore that so a status is always selected.
+                onValueChange: (value) => {
+                    if (value) {
+                        onStatusChange(value);
+                    }
+                }, "aria-label": intl.formatMessage(messages.statusLegend), children: STATUS_OPTIONS.map((option) => (_jsxs(SegmentedControlItem, { value: option, "aria-label": intl.formatMessage(messages.statusOption, {
+                        label: statusLabel[option],
+                        count: counts[option]
+                    }), children: [statusLabel[option], _jsx(SegmentedControlCount, { "aria-hidden": true, children: counts[option] })] }, option))) }), _jsx("span", { "aria-hidden": true, className: "ml-auto text-sm text-muted-foreground", children: intl.formatMessage(messages.count, { shown, total }) }), _jsx("span", { role: "status", "aria-live": "polite", className: "sr-only", children: intl.formatMessage(messages.countAnnouncement, {
+                    shown,
+                    total
+                }) })] }));
+}

package/dist/lib/presentation/components/WorkspacesEmpty/index.d.ts

@@ -0,0 +1,18 @@
+type WorkspacesEmptyProps = {
+    /** Whether a search or non-default filter is currently narrowing the list. */
+    filtered: boolean;
+    /** Whether the user may create a workspace (gates the create CTA). */
+    canCreate: boolean;
+    /** Resets the search and status filter back to their defaults. */
+    onClear: () => void;
+    /** Opens the create-workspace flow. */
+    onCreate: () => void;
+};
+/**
+ * The empty state for the grid. When filters are active it offers to clear
+ * them; otherwise it invites creating the first workspace — but only when the
+ * user holds `workspaces:create`.
+ */
+export declare function WorkspacesEmpty({ filtered, canCreate, onClear, onCreate }: WorkspacesEmptyProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/presentation/components/WorkspacesEmpty/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lib/presentation/components/WorkspacesEmpty/index.tsx"],"names":[],"mappings":"AA0CA,KAAK,oBAAoB,GAAG;IACxB,8EAA8E;IAC9E,QAAQ,EAAE,OAAO,CAAC;IAClB,sEAAsE;IACtE,SAAS,EAAE,OAAO,CAAC;IACnB,kEAAkE;IAClE,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,uCAAuC;IACvC,QAAQ,EAAE,MAAM,IAAI,CAAC;CACxB,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,EAC5B,QAAQ,EACR,SAAS,EACT,OAAO,EACP,QAAQ,EACX,EAAE,oBAAoB,+BAwCtB"}

package/dist/lib/presentation/components/WorkspacesEmpty/index.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { defineMessages, useIntl } from 'react-intl';
+import { Layers, Plus } from 'lucide-react';
+import { Button, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from '@orthacms/design-system';
+/** Intl descriptors for {@link WorkspacesEmpty}, co-located with the component. */
+const messages = defineMessages({
+    filteredTitle: {
+        id: 'workspaces.empty.filtered.title',
+        defaultMessage: 'No workspaces match'
+    },
+    filteredDescription: {
+        id: 'workspaces.empty.filtered.description',
+        defaultMessage: 'Try a different search, or clear the filters to see them all.'
+    },
+    clear: {
+        id: 'workspaces.empty.clear',
+        defaultMessage: 'Clear filters'
+    },
+    emptyTitle: {
+        id: 'workspaces.empty.none.title',
+        defaultMessage: 'No workspaces yet'
+    },
+    emptyDescription: {
+        id: 'workspaces.empty.none.description',
+        defaultMessage: 'Create your first workspace to group content, members, and plugins.'
+    },
+    create: {
+        id: 'workspaces.empty.create',
+        defaultMessage: 'New workspace'
+    }
+});
+/**
+ * The empty state for the grid. When filters are active it offers to clear
+ * them; otherwise it invites creating the first workspace — but only when the
+ * user holds `workspaces:create`.
+ */
+export function WorkspacesEmpty({ filtered, canCreate, onClear, onCreate }) {
+    const intl = useIntl();
+    return (_jsxs(Empty, { className: "border", children: [_jsxs(EmptyHeader, { children: [_jsx(EmptyMedia, { variant: "icon", children: _jsx(Layers, {}) }), _jsx(EmptyTitle, { children: intl.formatMessage(filtered ? messages.filteredTitle : messages.emptyTitle) }), _jsx(EmptyDescription, { children: intl.formatMessage(filtered
+                            ? messages.filteredDescription
+                            : messages.emptyDescription) })] }), _jsx(EmptyContent, { children: filtered ? (_jsx(Button, { variant: "outline", className: "shadow-none", onClick: onClear, children: intl.formatMessage(messages.clear) })) : canCreate ? (_jsxs(Button, { onClick: onCreate, children: [_jsx(Plus, {}), intl.formatMessage(messages.create)] })) : null })] }));
+}

package/dist/lib/presentation/components/WorkspacesHomePanel/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * The home dashboard's Workspaces panel: a preview list of the active
+ * workspaces (each a link into its shell) with a "View all" link to the full
+ * list. Backed by the real `GET /api/workspaces`.
+ */
+export declare function WorkspacesHomePanel(): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/presentation/components/WorkspacesHomePanel/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lib/presentation/components/WorkspacesHomePanel/index.tsx"],"names":[],"mappings":"AA2CA;;;;GAIG;AACH,wBAAgB,mBAAmB,gCA+ElC"}

package/dist/lib/presentation/components/WorkspacesHomePanel/index.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Link } from 'react-router-dom';
+import { defineMessages, useIntl } from 'react-intl';
+import { ChevronRight } from 'lucide-react';
+import { Card, CardContent, CardHeader, CardTitle, Skeleton } from '@orthacms/design-system';
+import { initialsOf } from '@orthacms/utils-admin';
+import { useWorkspaces } from '../../../application/useWorkspaces';
+import { isActiveWorkspace } from '../../../domain/isActiveWorkspace';
+import { WorkspaceAvatar } from '../WorkspaceAvatar';
+/** Intl descriptors for {@link WorkspacesHomePanel}, co-located here. */
+const messages = defineMessages({
+    title: {
+        id: 'workspaces.home.title',
+        defaultMessage: 'Workspaces'
+    },
+    viewAll: {
+        id: 'workspaces.home.viewAll',
+        defaultMessage: 'View all'
+    },
+    meta: {
+        id: 'workspaces.home.meta',
+        defaultMessage: '{members, plural, one {# member} other {# members}} · {types, plural, one {# type} other {# types}}'
+    },
+    empty: {
+        id: 'workspaces.home.empty',
+        defaultMessage: 'No workspaces yet.'
+    },
+    error: {
+        id: 'workspaces.home.error',
+        defaultMessage: 'Couldn’t load workspaces.'
+    }
+});
+/** How many workspaces the home panel previews before "View all". */
+const PREVIEW_LIMIT = 5;
+/**
+ * The home dashboard's Workspaces panel: a preview list of the active
+ * workspaces (each a link into its shell) with a "View all" link to the full
+ * list. Backed by the real `GET /api/workspaces`.
+ */
+export function WorkspacesHomePanel() {
+    const intl = useIntl();
+    const { data: workspaces, isPending, isError } = useWorkspaces();
+    const active = (workspaces ?? [])
+        .filter(isActiveWorkspace)
+        .slice(0, PREVIEW_LIMIT);
+    return (_jsxs(Card, { className: "shadow-none", children: [_jsxs(CardHeader, { className: "flex-row items-center justify-between gap-2 space-y-0", children: [_jsx(CardTitle, { asChild: true, className: "text-base", children: _jsx("h2", { children: intl.formatMessage(messages.title) }) }), _jsx(Link, { to: "/workspaces", className: "text-sm text-muted-foreground transition-colors hover:text-foreground", children: intl.formatMessage(messages.viewAll) })] }), _jsx(CardContent, { className: "flex flex-col gap-1", children: isPending ? (Array.from({ length: 3 }).map((_, index) => (_jsxs("div", { className: "flex items-center gap-3 rounded-lg px-2 py-2", children: [_jsx(Skeleton, { className: "size-9 shrink-0 rounded-lg" }), _jsxs("div", { className: "flex flex-1 flex-col gap-1.5", children: [_jsx(Skeleton, { className: "h-4 w-32" }), _jsx(Skeleton, { className: "h-3 w-40" })] })] }, index)))) : isError ? (_jsx("p", { role: "alert", className: "px-2 py-6 text-center text-sm text-destructive", children: intl.formatMessage(messages.error) })) : active.length === 0 ? (_jsx("p", { className: "px-2 py-6 text-center text-sm text-muted-foreground", children: intl.formatMessage(messages.empty) })) : (active.map((workspace) => (_jsxs(Link, { to: `/workspaces/${workspace.id}`, className: "flex items-center gap-3 rounded-lg px-2 py-2 transition-colors hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", children: [_jsx(WorkspaceAvatar, { initials: initialsOf(workspace.name), color: workspace.color, className: "size-9 shrink-0 rounded-lg text-xs" }), _jsxs("span", { className: "flex min-w-0 flex-1 flex-col", children: [_jsx("span", { className: "truncate text-sm font-medium", children: workspace.name }), _jsx("span", { className: "truncate text-xs text-muted-foreground", children: intl.formatMessage(messages.meta, {
+                                        members: workspace.members.length,
+                                        types: workspace.content.length
+                                    }) })] }), _jsx(ChevronRight, { className: "size-4 shrink-0 text-muted-foreground", "aria-hidden": true })] }, workspace.id)))) })] }));
+}

package/dist/lib/presentation/components/WorkspacesNavSection/index.d.ts

@@ -0,0 +1,15 @@
+/**
+ * The "Workspaces" quick-list in the global sidebar: the active workspaces as
+ * direct links, so a member can jump into one without the Workspaces list page.
+ * Contributed to the shell's `SIDEBAR_SECTION_SLOT` by `workspaces-admin`.
+ * Renders nothing while loading or when there are no active workspaces, so it
+ * never shows an empty section.
+ *
+ * The heading doubles as a **collapse trigger** (Radix `Collapsible`, so
+ * `aria-expanded` + `data-state` come for free), open by default: with a long
+ * membership the list crowded out the sections below it in the sidebar. With no
+ * rows to reveal — loading, or create permission but no workspaces yet — the
+ * heading stays a plain label and no `Collapsible` is rendered at all.
+ */
+export declare function WorkspacesNavSection(): import("react").JSX.Element | null;
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/presentation/components/WorkspacesNavSection/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lib/presentation/components/WorkspacesNavSection/index.tsx"],"names":[],"mappings":"AA8DA;;;;;;;;;;;;GAYG;AACH,wBAAgB,oBAAoB,uCA6FnC"}

package/dist/lib/presentation/components/WorkspacesNavSection/index.js

@@ -0,0 +1,76 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Link, useMatch } from 'react-router-dom';
+import { defineMessages, useIntl } from 'react-intl';
+import { ChevronRight, Plus } from 'lucide-react';
+import { useHasPermission } from '@orthacms/identity-admin';
+import { initialsOf } from '@orthacms/utils-admin';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from '@orthacms/design-system';
+import { useWorkspaces } from '../../../application/useWorkspaces';
+import { isActiveWorkspace } from '../../../domain/isActiveWorkspace';
+import { WORKSPACES_CREATE } from '../../../domain/permissions';
+import { WorkspaceAvatar } from '../WorkspaceAvatar';
+/** Intl descriptors for {@link WorkspacesNavSection}, co-located here. */
+const messages = defineMessages({
+    heading: {
+        id: 'workspaces.sidebar.heading',
+        defaultMessage: 'Workspaces'
+    },
+    newWorkspace: {
+        id: 'workspaces.sidebar.newWorkspace',
+        defaultMessage: 'New workspace'
+    }
+});
+/** One workspace row: a link to the workspace, active on any of its sub-paths. */
+function WorkspaceNavRow({ workspace }) {
+    const match = useMatch(`/workspaces/${workspace.id}/*`);
+    return (_jsx(SidebarMenuItem, { children: _jsx(SidebarMenuButton, { asChild: true, isActive: Boolean(match), tooltip: workspace.name, children: _jsxs(Link, { to: `/workspaces/${workspace.id}`, "aria-current": match ? 'page' : undefined, children: [_jsx(WorkspaceAvatar, { initials: initialsOf(workspace.name), color: workspace.color, className: "size-5 rounded-[5px] text-[10px]" }), _jsx("span", { children: workspace.name })] }) }) }));
+}
+/**
+ * The "Workspaces" quick-list in the global sidebar: the active workspaces as
+ * direct links, so a member can jump into one without the Workspaces list page.
+ * Contributed to the shell's `SIDEBAR_SECTION_SLOT` by `workspaces-admin`.
+ * Renders nothing while loading or when there are no active workspaces, so it
+ * never shows an empty section.
+ *
+ * The heading doubles as a **collapse trigger** (Radix `Collapsible`, so
+ * `aria-expanded` + `data-state` come for free), open by default: with a long
+ * membership the list crowded out the sections below it in the sidebar. With no
+ * rows to reveal — loading, or create permission but no workspaces yet — the
+ * heading stays a plain label and no `Collapsible` is rendered at all.
+ */
+export function WorkspacesNavSection() {
+    const intl = useIntl();
+    const { data: workspaces } = useWorkspaces();
+    const canCreate = useHasPermission(WORKSPACES_CREATE);
+    const active = (workspaces ?? []).filter(isActiveWorkspace);
+    // Nothing to show and nothing to do → skip the section entirely. With create
+    // permission we still show it (the "+" invites creating the first one).
+    if (active.length === 0 && !canCreate) {
+        return null;
+    }
+    const heading = intl.formatMessage(messages.heading);
+    const newWorkspace = intl.formatMessage(messages.newWorkspace);
+    const createAction = canCreate ? (_jsx(SidebarGroupAction, { asChild: true, title: newWorkspace, children: _jsx(Link, { to: "/workspaces/new", "aria-label": newWorkspace, children: _jsx(Plus, {}) }) })) : null;
+    // Nothing to reveal (create permission but no workspaces yet, and every
+    // moment the list query is still in flight) → a plain heading, no
+    // Collapsible at all. Two reasons, and the second is the load-bearing one:
+    //
+    // 1. A disclosure whose body is empty is not a control.
+    // 2. Radix puts `aria-controls={contentId}` on the trigger **whenever it is
+    //    open** — and this group is `defaultOpen`. With the content not
+    //    mounted that idref dangles, which axe flags as `aria-valid-attr-value`
+    //    (critical) on every page carrying the sidebar. Marking the trigger
+    //    `disabled` does not help: Radix keys the attribute off `open`, not off
+    //    `disabled`. The closed case is safe for the same reason — closed means
+    //    no `aria-controls` at all.
+    if (active.length === 0) {
+        return (_jsxs(SidebarGroup, { children: [_jsx(SidebarGroupLabel, { children: heading }), createAction] }));
+    }
+    return (
+    // `defaultOpen`: the quick-list is a primary nav aid, so it starts
+    // expanded and the collapse is an opt-out. The choice is deliberately
+    // **not** persisted — the shell already owns one cookie-backed sidebar
+    // state, and a second, per-section one is scope this section doesn't
+    // need.
+    _jsx(Collapsible, { defaultOpen: true, className: "group/workspaces", children: _jsxs(SidebarGroup, { children: [_jsx(SidebarGroupLabel, { asChild: true, className: "w-fit gap-1 pr-1 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground [&>svg]:size-3.5", children: _jsxs(CollapsibleTrigger, { children: [_jsx(ChevronRight, { "aria-hidden": true, className: "transition-transform duration-200 group-data-[state=open]/workspaces:rotate-90" }), heading] }) }), createAction, _jsx(CollapsibleContent, { children: _jsx(SidebarGroupContent, { children: _jsx("nav", { "aria-label": heading, children: _jsx(SidebarMenu, { children: active.map((workspace) => (_jsx(WorkspaceNavRow, { workspace: workspace }, workspace.id))) }) }) }) })] }) }));
+}

package/dist/lib/presentation/components/WorkspacesSkeleton/index.d.ts

@@ -0,0 +1,49 @@
+/**
+ * The table placeholder shown while {@link useWorkspaces} resolves. Drops into
+ * the page body in place of the real table (header + toolbar stay live), so it
+ * owns the single `role="status"` announcement; the rows themselves are
+ * `aria-hidden`.
+ */
+export declare function WorkspacesTableSkeleton({ count }: {
+    count?: number;
+}): import("react").JSX.Element;
+/**
+ * Full-page placeholder for the lazy-route `Suspense` fallback — before
+ * {@link WorkspacesPage} mounts there is no header or toolbar yet, so this
+ * sketches the whole page (header, toolbar, table) to hold the layout steady
+ * while the chunk loads. Reuses {@link WorkspacesTableSkeleton} for the body.
+ */
+export declare function WorkspacesPageSkeleton(): import("react").JSX.Element;
+/**
+ * Placeholder for the workspace shell's content area — shown both as the
+ * lazy-route `Suspense` fallback and while {@link useWorkspaces} resolves inside
+ * the shell (the per-workspace nav lives in the app sidebar, injected once the
+ * workspace resolves). Owns the single `role="status"` announcement.
+ */
+export declare function WorkspaceShellSkeleton(): import("react").JSX.Element;
+/**
+ * Lazy-route `Suspense` fallback for {@link CreateWorkspacePage}. Wraps the
+ * shared {@link WizardPageSkeleton} so the `sr-only` status stays localized.
+ */
+export declare function CreateWorkspacePageSkeleton(): import("react").JSX.Element;
+/**
+ * Section placeholder shown while {@link useContentTypes} resolves in the
+ * create-workspace wizard's "specific content" mode — two resource sections
+ * (collections and pages). Replaces the inline spinner so the step keeps its
+ * shape. Owns a single `role="status"`; the sections are `aria-hidden`.
+ */
+export declare function ContentTypesSkeleton(): import("react").JSX.Element;
+/**
+ * Full-page placeholder for the workspace-settings lazy-route `Suspense`
+ * fallback, mounted in the workspace shell at `/workspaces/:id/settings/*`.
+ *
+ * The bar is **real**, not a skeleton: it is the page's identity, it hosts the
+ * sidebar-reveal trigger when the app sidebar is collapsed, and it derives its
+ * crumbs from the URL rather than from data — so the very same
+ * {@link WorkspaceSettingsTopBar} the page renders can paint before the chunk
+ * arrives, already naming the section being opened. Below it the header, the
+ * tab bar and the section card are sketched, so the page slots into a layout
+ * that is already the right shape.
+ */
+export declare function WorkspaceSettingsPageSkeleton(): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/presentation/components/WorkspacesSkeleton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lib/presentation/components/WorkspacesSkeleton/index.tsx"],"names":[],"mappings":"AA2CA;;;;;GAKG;AACH,wBAAgB,uBAAuB,CAAC,EAAE,KAAS,EAAE,EAAE;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,+BAexE;AAED;;;;;GAKG;AACH,wBAAgB,sBAAsB,gCAoBrC;AAED;;;;;GAKG;AACH,wBAAgB,sBAAsB,gCAcrC;AAED;;;GAGG;AACH,wBAAgB,2BAA2B,gCAM1C;AAuBD;;;;;GAKG;AACH,wBAAgB,oBAAoB,gCAcnC;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,6BAA6B,gCAoD5C"}

package/dist/lib/presentation/components/WorkspacesSkeleton/index.js

@@ -0,0 +1,94 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { defineMessages, useIntl } from 'react-intl';
+import { Container, Skeleton, WizardPageSkeleton } from '@orthacms/design-system';
+import { WorkspaceSettingsTopBar } from '../WorkspaceSettingsTopBar';
+/** Intl descriptors for the workspaces skeletons, co-located here. */
+const messages = defineMessages({
+    loading: {
+        id: 'workspaces.skeleton.loading',
+        defaultMessage: 'Loading workspaces…'
+    },
+    loadingForm: {
+        id: 'workspaces.skeleton.loadingForm',
+        defaultMessage: 'Loading…'
+    },
+    loadingContent: {
+        id: 'workspaces.skeleton.loadingContent',
+        defaultMessage: 'Loading content types…'
+    },
+    loadingSettings: {
+        id: 'workspaces.skeleton.loadingSettings',
+        defaultMessage: 'Loading workspace settings…'
+    }
+});
+/** A single placeholder row mirroring {@link WorkspacesTable}'s row structure. */
+function WorkspaceRowSkeleton() {
+    return (_jsxs("div", { className: "flex items-center gap-3 border-b px-4 py-3 last:border-b-0", children: [_jsx(Skeleton, { className: "size-9 shrink-0 rounded-xl" }), _jsxs("div", { className: "min-w-0 flex-1 flex-col gap-1.5", children: [_jsx(Skeleton, { className: "h-4 w-40" }), _jsx(Skeleton, { className: "mt-1.5 h-3 w-64 max-w-full" })] }), _jsx(Skeleton, { className: "h-4 w-20 shrink-0" }), _jsx(Skeleton, { className: "h-5 w-16 shrink-0 rounded-xl" })] }));
+}
+/**
+ * The table placeholder shown while {@link useWorkspaces} resolves. Drops into
+ * the page body in place of the real table (header + toolbar stay live), so it
+ * owns the single `role="status"` announcement; the rows themselves are
+ * `aria-hidden`.
+ */
+export function WorkspacesTableSkeleton({ count = 6 }) {
+    const intl = useIntl();
+    return (_jsxs("div", { role: "status", children: [_jsx("span", { className: "sr-only", children: intl.formatMessage(messages.loading) }), _jsx("div", { "aria-hidden": true, className: "rounded-xl border", children: Array.from({ length: count }).map((_, index) => (_jsx(WorkspaceRowSkeleton, {}, index))) })] }));
+}
+/**
+ * Full-page placeholder for the lazy-route `Suspense` fallback — before
+ * {@link WorkspacesPage} mounts there is no header or toolbar yet, so this
+ * sketches the whole page (header, toolbar, table) to hold the layout steady
+ * while the chunk loads. Reuses {@link WorkspacesTableSkeleton} for the body.
+ */
+export function WorkspacesPageSkeleton() {
+    return (_jsxs(Container, { children: [_jsxs("div", { className: "mb-6 flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Skeleton, { className: "h-8 w-48" }), _jsx(Skeleton, { className: "h-4 w-80 max-w-full" })] }), _jsx(Skeleton, { className: "h-9 w-36 shrink-0" })] }), _jsxs("div", { className: "mb-4 flex flex-wrap items-center gap-3", children: [_jsx(Skeleton, { className: "h-9 w-full sm:max-w-[360px]" }), _jsx(Skeleton, { className: "h-9 w-56" }), _jsx(Skeleton, { className: "ml-auto h-4 w-16" })] }), _jsx(WorkspacesTableSkeleton, {})] }));
+}
+/**
+ * Placeholder for the workspace shell's content area — shown both as the
+ * lazy-route `Suspense` fallback and while {@link useWorkspaces} resolves inside
+ * the shell (the per-workspace nav lives in the app sidebar, injected once the
+ * workspace resolves). Owns the single `role="status"` announcement.
+ */
+export function WorkspaceShellSkeleton() {
+    const intl = useIntl();
+    return (_jsxs("div", { role: "status", className: "min-h-svh p-8", children: [_jsx("span", { className: "sr-only", children: intl.formatMessage(messages.loading) }), _jsxs("div", { "aria-hidden": true, children: [_jsx(Skeleton, { className: "h-8 w-48" }), _jsx(Skeleton, { className: "mt-3 h-4 w-80 max-w-full" })] })] }));
+}
+/**
+ * Lazy-route `Suspense` fallback for {@link CreateWorkspacePage}. Wraps the
+ * shared {@link WizardPageSkeleton} so the `sr-only` status stays localized.
+ */
+export function CreateWorkspacePageSkeleton() {
+    const intl = useIntl();
+    return (_jsx(WizardPageSkeleton, { label: intl.formatMessage(messages.loadingForm) }));
+}
+/** A placeholder resource section: a header row over a few selectable rows. */
+function ResourceSectionSkeleton() {
+    return (_jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Skeleton, { className: "size-5 rounded" }), _jsx(Skeleton, { className: "h-4 w-28" })] }), Array.from({ length: 3 }).map((_, index) => (_jsxs("div", { className: "flex items-center gap-3 rounded-xl border p-3", children: [_jsx(Skeleton, { className: "size-5 shrink-0 rounded" }), _jsx(Skeleton, { className: "h-4 w-40" })] }, index)))] }));
+}
+/**
+ * Section placeholder shown while {@link useContentTypes} resolves in the
+ * create-workspace wizard's "specific content" mode — two resource sections
+ * (collections and pages). Replaces the inline spinner so the step keeps its
+ * shape. Owns a single `role="status"`; the sections are `aria-hidden`.
+ */
+export function ContentTypesSkeleton() {
+    const intl = useIntl();
+    return (_jsxs("div", { role: "status", children: [_jsx("span", { className: "sr-only", children: intl.formatMessage(messages.loadingContent) }), _jsxs("div", { "aria-hidden": true, className: "flex flex-col gap-6", children: [_jsx(ResourceSectionSkeleton, {}), _jsx(ResourceSectionSkeleton, {})] })] }));
+}
+/**
+ * Full-page placeholder for the workspace-settings lazy-route `Suspense`
+ * fallback, mounted in the workspace shell at `/workspaces/:id/settings/*`.
+ *
+ * The bar is **real**, not a skeleton: it is the page's identity, it hosts the
+ * sidebar-reveal trigger when the app sidebar is collapsed, and it derives its
+ * crumbs from the URL rather than from data — so the very same
+ * {@link WorkspaceSettingsTopBar} the page renders can paint before the chunk
+ * arrives, already naming the section being opened. Below it the header, the
+ * tab bar and the section card are sketched, so the page slots into a layout
+ * that is already the right shape.
+ */
+export function WorkspaceSettingsPageSkeleton() {
+    const intl = useIntl();
+    return (_jsxs(_Fragment, { children: [_jsx(WorkspaceSettingsTopBar, {}), _jsxs(Container, { className: "space-y-6 py-8", role: "status", children: [_jsx("span", { className: "sr-only", children: intl.formatMessage(messages.loadingSettings) }), _jsxs("div", { "aria-hidden": true, className: "flex flex-col gap-2", children: [_jsx(Skeleton, { className: "h-8 w-56" }), _jsx(Skeleton, { className: "h-4 w-80 max-w-full" })] }), _jsxs("div", { "aria-hidden": true, className: "flex flex-col gap-6", children: [_jsx("div", { className: "flex gap-2 border-b pb-2", children: ['w-16', 'w-20', 'w-16', 'w-24'].map((width, index) => (_jsxs("div", { className: "flex items-center gap-2 px-3 py-1.5", children: [_jsx(Skeleton, { className: "size-4 shrink-0 rounded" }), _jsx(Skeleton, { className: `h-4 ${width}` })] }, index))) }), _jsxs("div", { className: "flex min-w-0 flex-col gap-6 rounded-xl border p-6", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Skeleton, { className: "h-5 w-40" }), _jsx(Skeleton, { className: "h-4 w-72 max-w-full" })] }), Array.from({ length: 3 }).map((_, index) => (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Skeleton, { className: "h-4 w-28" }), _jsx(Skeleton, { className: "h-9 w-full" })] }, index))), _jsx("div", { className: "flex justify-end border-t pt-4", children: _jsx(Skeleton, { className: "h-9 w-28" }) })] })] })] })] }));
+}

package/dist/lib/presentation/components/WorkspacesTable/index.d.ts

@@ -0,0 +1,12 @@
+import type { Workspace } from '../../../domain/types/workspace';
+/**
+ * The workspaces list as a table (mirroring the members table): each row is a
+ * workspace — avatar + name + description, its member and content-type counts,
+ * and a status pill. The whole row opens the workspace (its shell redirects to
+ * the first section); the name is a real link for keyboard users, and stops the
+ * click from bubbling so it navigates exactly once. Archived rows read muted.
+ */
+export declare function WorkspacesTable({ workspaces }: {
+    workspaces: Workspace[];
+}): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/presentation/components/WorkspacesTable/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lib/presentation/components/WorkspacesTable/index.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAkCjE;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAC,EAAE,UAAU,EAAE,EAAE;IAAE,UAAU,EAAE,SAAS,EAAE,CAAA;CAAE,+BAkF1E"}

package/dist/lib/presentation/components/WorkspacesTable/index.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Link, useNavigate } from 'react-router-dom';
+import { defineMessages, useIntl } from 'react-intl';
+import { initialsOf } from '@orthacms/utils-admin';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, cn } from '@orthacms/design-system';
+import { WorkspaceAvatar } from '../WorkspaceAvatar';
+import { StatusChip } from '../StatusChip';
+import { isActiveWorkspace } from '../../../domain/isActiveWorkspace';
+/** Intl descriptors for {@link WorkspacesTable}, co-located with the component. */
+const messages = defineMessages({
+    caption: {
+        id: 'workspaces.table.caption',
+        defaultMessage: 'Workspaces'
+    },
+    workspace: {
+        id: 'workspaces.table.workspace',
+        defaultMessage: 'Workspace'
+    },
+    members: {
+        id: 'workspaces.table.members',
+        defaultMessage: 'Members'
+    },
+    types: {
+        id: 'workspaces.table.types',
+        defaultMessage: 'Content types'
+    },
+    status: {
+        id: 'workspaces.table.status',
+        defaultMessage: 'Status'
+    },
+    memberCount: {
+        id: 'workspaces.table.memberCount',
+        defaultMessage: '{count, plural, one {# member} other {# members}}'
+    },
+    typeCount: {
+        id: 'workspaces.table.typeCount',
+        defaultMessage: '{count, plural, one {# type} other {# types}}'
+    }
+});
+/**
+ * The workspaces list as a table (mirroring the members table): each row is a
+ * workspace — avatar + name + description, its member and content-type counts,
+ * and a status pill. The whole row opens the workspace (its shell redirects to
+ * the first section); the name is a real link for keyboard users, and stops the
+ * click from bubbling so it navigates exactly once. Archived rows read muted.
+ */
+export function WorkspacesTable({ workspaces }) {
+    const intl = useIntl();
+    const navigate = useNavigate();
+    return (_jsx("div", { className: "overflow-hidden rounded-xl border bg-card shadow-xs", children: _jsxs(Table, { "aria-label": intl.formatMessage(messages.caption), children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { scope: "col", className: "whitespace-nowrap", children: intl.formatMessage(messages.workspace) }), _jsx(TableHead, { scope: "col", className: "whitespace-nowrap", children: intl.formatMessage(messages.members) }), _jsx(TableHead, { scope: "col", className: "whitespace-nowrap", children: intl.formatMessage(messages.types) }), _jsx(TableHead, { scope: "col", className: "whitespace-nowrap", children: intl.formatMessage(messages.status) })] }) }), _jsx(TableBody, { children: workspaces.map((workspace) => {
+                        const isArchived = !isActiveWorkspace(workspace);
+                        return (_jsxs(TableRow, { onClick: () => navigate(`/workspaces/${workspace.id}`), className: cn('cursor-pointer', isArchived && 'bg-muted/30'), children: [_jsx(TableCell, { children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx(WorkspaceAvatar, { initials: initialsOf(workspace.name), color: workspace.color, className: "size-9 shrink-0 text-xs" }), _jsxs("div", { className: "min-w-0 max-w-md", children: [_jsx(Link, { to: `/workspaces/${workspace.id}`, className: "block truncate text-sm font-medium hover:underline", onClick: (event) => event.stopPropagation(), children: workspace.name }), _jsx("p", { className: "line-clamp-3 text-xs break-words text-muted-foreground", children: workspace.description })] })] }) }), _jsx(TableCell, { className: "whitespace-nowrap text-sm text-muted-foreground", children: intl.formatMessage(messages.memberCount, {
+                                        count: workspace.members.length
+                                    }) }), _jsx(TableCell, { className: "whitespace-nowrap text-sm text-muted-foreground", children: intl.formatMessage(messages.typeCount, {
+                                        count: workspace.content.length
+                                    }) }), _jsx(TableCell, { children: _jsx(StatusChip, { status: workspace.status }) })] }, workspace.id));
+                    }) })] }) }));
+}