>,
+ boxSelectedIds: string[],
+ clearBoxSelection: () => void,
+ activeDragIds: string[],
+ justMoved: boolean,
+ dragHandleProps?: any,
+ zoomLevel?: number,
+) => {
+ const { ref: dndRef, ...restDragProps } = dragHandleProps ?? {};
+ const isBoxSelected = boxSelectedIds.includes(item.id);
+ const isDragging = activeDragIds.includes(item.id);
+
+ return (
+ {
+ if (element) {
+ refs.current.set(item.id, element);
+ } else {
+ refs.current.delete(item.id);
+ }
+ dndRef?.(element);
+ }}
+ {...restDragProps}
+ onClick={clearBoxSelection}
+ style={{
+ width: `calc(10rem * ${zoomLevel ?? 1})`,
+ height: `calc(13rem * ${zoomLevel ?? 1})`,
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "center",
+ borderRadius: "0.5rem",
+ border: isBoxSelected
+ ? "2px solid var(--mantine-color-blue-6)"
+ : "1px solid var(--mantine-color-gray-4)",
+ background: isDragging
+ ? "var(--mantine-color-gray-1)"
+ : "var(--mantine-color-body)",
+ opacity: justMoved ? 0.7 : 1,
+ cursor: "grab",
+ }}
+ >
+ Page {item.pageNumber ?? index + 1}
+
+ );
+};
+
+const noopReorder = () => {};
+
+const meta = {
+ title: "PageEditor/DragDropGrid",
+ component: DragDropGrid,
+ parameters: { layout: "fullscreen" },
+} satisfies Meta;
+export default meta;
+
+type Story = StoryObj;
+
+const ScrollDecorator = (StoryComponent: React.ComponentType) => (
+
+
+
+);
+
+export const Default: Story = {
+ args: {
+ items: buildItems(8),
+ onReorderPages: noopReorder,
+ renderItem,
+ },
+ decorators: [ScrollDecorator],
+};
+
+export const Empty: Story = {
+ args: {
+ items: [],
+ onReorderPages: noopReorder,
+ renderItem,
+ },
+ decorators: [ScrollDecorator],
+};
+
+export const Zoomed: Story = {
+ args: {
+ items: buildItems(6),
+ onReorderPages: noopReorder,
+ renderItem,
+ zoomLevel: 1.5,
+ },
+ decorators: [ScrollDecorator],
+};
diff --git a/frontend/editor/src/core/components/pageEditor/PageEditorControls.stories.tsx b/frontend/editor/src/core/components/pageEditor/PageEditorControls.stories.tsx
new file mode 100644
index 0000000000..5838a6c7d4
--- /dev/null
+++ b/frontend/editor/src/core/components/pageEditor/PageEditorControls.stories.tsx
@@ -0,0 +1,57 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import PageEditorControls from "@app/components/pageEditor/PageEditorControls";
+
+const meta = {
+ title: "PageEditor/PageEditorControls",
+ component: PageEditorControls,
+ parameters: { layout: "padded" },
+} satisfies Meta;
+export default meta;
+type Story = StoryObj;
+
+const baseArgs = {
+ onClosePdf: () => {},
+ onUndo: () => {},
+ onRedo: () => {},
+ canUndo: true,
+ canRedo: true,
+ onRotate: () => {},
+ onDelete: () => {},
+ onSplit: () => {},
+ onSplitAll: () => {},
+ onPageBreak: () => {},
+ onPageBreakAll: () => {},
+ onExportAll: () => {},
+ exportLoading: false,
+ selectionMode: true,
+ selectedPageIds: ["page-1", "page-2"],
+ displayDocument: {
+ pages: [
+ { id: "page-1", pageNumber: 1 },
+ { id: "page-2", pageNumber: 2 },
+ { id: "page-3", pageNumber: 3 },
+ ],
+ },
+ splitPositions: new Set(),
+ totalPages: 3,
+};
+
+export const Default: Story = {
+ args: baseArgs,
+};
+
+export const NoSelection: Story = {
+ args: {
+ ...baseArgs,
+ selectedPageIds: [],
+ canUndo: false,
+ canRedo: false,
+ },
+};
+
+export const WithExistingSplits: Story = {
+ args: {
+ ...baseArgs,
+ splitPositions: new Set(["page-1", "page-2"]),
+ },
+};
diff --git a/frontend/editor/src/core/components/pageEditor/bulkSelectionPanel/AdvancedSelectionPanel.stories.tsx b/frontend/editor/src/core/components/pageEditor/bulkSelectionPanel/AdvancedSelectionPanel.stories.tsx
new file mode 100644
index 0000000000..5f3f1138d5
--- /dev/null
+++ b/frontend/editor/src/core/components/pageEditor/bulkSelectionPanel/AdvancedSelectionPanel.stories.tsx
@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import AdvancedSelectionPanel from "@app/components/pageEditor/bulkSelectionPanel/AdvancedSelectionPanel";
+
+const meta = {
+ title: "PageEditor/BulkSelectionPanel/AdvancedSelectionPanel",
+ component: AdvancedSelectionPanel,
+} satisfies Meta;
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ csvInput: "",
+ setCsvInput: () => {},
+ onUpdatePagesFromCSV: () => {},
+ maxPages: 20,
+ advancedOpened: true,
+ },
+};
+
+export const WithExpression: Story = {
+ args: {
+ csvInput: "1-5, odd",
+ setCsvInput: () => {},
+ onUpdatePagesFromCSV: () => {},
+ maxPages: 20,
+ advancedOpened: true,
+ },
+};
+
+export const Closed: Story = {
+ args: {
+ csvInput: "",
+ setCsvInput: () => {},
+ onUpdatePagesFromCSV: () => {},
+ maxPages: 20,
+ advancedOpened: false,
+ },
+};
diff --git a/frontend/editor/src/core/components/pageEditor/bulkSelectionPanel/OperatorsSection.stories.tsx b/frontend/editor/src/core/components/pageEditor/bulkSelectionPanel/OperatorsSection.stories.tsx
new file mode 100644
index 0000000000..b913dbbde5
--- /dev/null
+++ b/frontend/editor/src/core/components/pageEditor/bulkSelectionPanel/OperatorsSection.stories.tsx
@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import OperatorsSection from "@app/components/pageEditor/bulkSelectionPanel/OperatorsSection";
+
+const meta = {
+ title: "PageEditor/BulkSelectionPanel/OperatorsSection",
+ component: OperatorsSection,
+} satisfies Meta;
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ csvInput: "1,2,3",
+ onInsertOperator: (op) => console.log("insert operator", op),
+ },
+};
+
+export const EmptyInput: Story = {
+ args: {
+ csvInput: "",
+ onInsertOperator: (op) => console.log("insert operator", op),
+ },
+};
diff --git a/frontend/editor/src/core/components/pageEditor/bulkSelectionPanel/SelectPages.stories.tsx b/frontend/editor/src/core/components/pageEditor/bulkSelectionPanel/SelectPages.stories.tsx
new file mode 100644
index 0000000000..3f3ff93a94
--- /dev/null
+++ b/frontend/editor/src/core/components/pageEditor/bulkSelectionPanel/SelectPages.stories.tsx
@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import SelectPages from "@app/components/pageEditor/bulkSelectionPanel/SelectPages";
+
+const meta = {
+ title: "PageEditor/SelectPages",
+ component: SelectPages,
+} satisfies Meta;
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ title: "Select pages",
+ placeholder: "Page number",
+ onApply: (value: number) => console.log("apply", value),
+ maxPages: 10,
+ },
+};
+
+export const WithValidation: Story = {
+ args: {
+ title: "Select pages",
+ placeholder: "Page number",
+ onApply: (value: number) => console.log("apply", value),
+ maxPages: 10,
+ validationFn: (value: number) =>
+ value > 10 ? "Page number exceeds document length" : null,
+ },
+};
+
+export const Range: Story = {
+ args: {
+ title: "Select page range",
+ placeholder: "Start page",
+ onApply: (value: number) => console.log("apply", value),
+ maxPages: 10,
+ isRange: true,
+ rangeEndValue: 5,
+ onRangeEndChange: (value: string | number) =>
+ console.log("range end", value),
+ rangeEndPlaceholder: "End page",
+ },
+};
diff --git a/frontend/editor/src/core/components/pageEditor/bulkSelectionPanel/SelectedPagesDisplay.stories.tsx b/frontend/editor/src/core/components/pageEditor/bulkSelectionPanel/SelectedPagesDisplay.stories.tsx
new file mode 100644
index 0000000000..3b5d8421d1
--- /dev/null
+++ b/frontend/editor/src/core/components/pageEditor/bulkSelectionPanel/SelectedPagesDisplay.stories.tsx
@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import SelectedPagesDisplay from "@app/components/pageEditor/bulkSelectionPanel/SelectedPagesDisplay";
+
+const displayDocument = {
+ pages: [
+ { id: "page-1", pageNumber: 1 },
+ { id: "page-2", pageNumber: 2 },
+ { id: "page-3", pageNumber: 3 },
+ { id: "page-4", pageNumber: 4 },
+ ],
+};
+
+const meta = {
+ title: "PageEditor/SelectedPagesDisplay",
+ component: SelectedPagesDisplay,
+} satisfies Meta;
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ selectedPageIds: ["page-1", "page-3"],
+ displayDocument,
+ syntaxError: null,
+ },
+};
+
+export const SyntaxError: Story = {
+ args: {
+ selectedPageIds: ["page-1", "page-3"],
+ displayDocument,
+ syntaxError: "Invalid page range: 1-abc",
+ },
+};
diff --git a/frontend/editor/src/core/components/shared/AllToolsNavButton.stories.tsx b/frontend/editor/src/core/components/shared/AllToolsNavButton.stories.tsx
new file mode 100644
index 0000000000..a4912a750c
--- /dev/null
+++ b/frontend/editor/src/core/components/shared/AllToolsNavButton.stories.tsx
@@ -0,0 +1,63 @@
+import { useState } from "react";
+import type { ReactElement } from "react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import AllToolsNavButton from "@app/components/shared/AllToolsNavButton";
+import { PreferencesProvider } from "@app/contexts/PreferencesContext";
+import { ToolRegistryProvider } from "@app/contexts/ToolRegistryProvider";
+import { NavigationProvider } from "@app/contexts/NavigationContext";
+import { ToolWorkflowProvider } from "@app/contexts/ToolWorkflowContext";
+
+/**
+ * The button reads/writes tool selection and panel state via ToolWorkflowContext,
+ * and derives the home link href from NavigationContext plus the tool registry —
+ * all four providers must be present for it to render.
+ */
+function withProviders(Story: () => ReactElement) {
+ return (
+
+
+
+
+
+
+
+
+
+ );
+}
+
+const meta = {
+ title: "Shared/AllToolsNavButton",
+ component: AllToolsNavButton,
+ decorators: [withProviders],
+ args: {
+ activeButton: "tools",
+ setActiveButton: () => {},
+ },
+} satisfies Meta;
+export default meta;
+
+type Story = StoryObj;
+
+/** Highlighted when it is the active quick-access button. */
+export const Default: Story = {
+ args: {
+ activeButton: "tools",
+ setActiveButton: () => {},
+ },
+};
+
+function InactiveDemo() {
+ const [activeButton, setActiveButton] = useState("home");
+ return (
+
+ );
+}
+
+/** Not the active button — a different quick-access item is selected. */
+export const Inactive: Story = {
+ render: () => ,
+};
diff --git a/frontend/editor/src/core/components/shared/AppSwitch.stories.tsx b/frontend/editor/src/core/components/shared/AppSwitch.stories.tsx
new file mode 100644
index 0000000000..6d4449fe58
--- /dev/null
+++ b/frontend/editor/src/core/components/shared/AppSwitch.stories.tsx
@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { AppSwitch } from "@app/components/shared/AppSwitch";
+
+/** The editor ⇄ processor app switcher rendered by both the editor and portal sidebars. */
+const meta: Meta = {
+ title: "Shared/AppSwitch",
+ component: AppSwitch,
+ parameters: { layout: "padded" },
+};
+export default meta;
+type Story = StoryObj;
+
+export const Editor: Story = {
+ args: {
+ current: "editor",
+ theme: "light",
+ onSwitch: () => {},
+ },
+};
+
+export const Processor: Story = {
+ args: {
+ current: "processor",
+ theme: "light",
+ onSwitch: () => {},
+ },
+};
+
+export const DarkTheme: Story = {
+ args: {
+ current: "editor",
+ theme: "dark",
+ onSwitch: () => {},
+ },
+};
diff --git a/frontend/editor/src/core/components/shared/BulkShareModal.stories.tsx b/frontend/editor/src/core/components/shared/BulkShareModal.stories.tsx
new file mode 100644
index 0000000000..cfa1f223ee
--- /dev/null
+++ b/frontend/editor/src/core/components/shared/BulkShareModal.stories.tsx
@@ -0,0 +1,75 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import type { ReactElement } from "react";
+import BulkShareModal from "@app/components/shared/BulkShareModal";
+import { AppConfigProvider } from "@app/contexts/AppConfigContext";
+import { FileContextProvider } from "@app/contexts/FileContext";
+import type { StirlingFileStub } from "@app/types/fileContext";
+import type { FileId } from "@app/types/file";
+
+const mockFiles: StirlingFileStub[] = [
+ {
+ id: "story-file-1" as FileId,
+ name: "quarterly-report.pdf",
+ type: "application/pdf",
+ size: 2_400_000,
+ lastModified: Date.now(),
+ isLeaf: true,
+ originalFileId: "story-file-1",
+ versionNumber: 1,
+ },
+ {
+ id: "story-file-2" as FileId,
+ name: "cover-letter.pdf",
+ type: "application/pdf",
+ size: 180_000,
+ lastModified: Date.now(),
+ isLeaf: true,
+ originalFileId: "story-file-2",
+ versionNumber: 1,
+ },
+];
+
+/**
+ * BulkShareModal reads useFileActions() from FileContext, which isn't part of
+ * the shared preview decorators, so it's provided here for every story.
+ * AppConfig (gating share links on `storageShareLinksEnabled`) is added
+ * per-story instead, since Default and LinksEnabled need different values.
+ */
+function withFileContext(Story: () => ReactElement) {
+ return (
+
+
+
+ );
+}
+
+const meta = {
+ title: "Shared/BulkShareModal",
+ component: BulkShareModal,
+ parameters: { layout: "fullscreen" },
+ args: {
+ opened: true,
+ onClose: () => {},
+ files: mockFiles,
+ },
+ decorators: [withFileContext],
+} satisfies Meta;
+export default meta;
+type Story = StoryObj;
+
+/** Share links disabled by server config — default when no config is loaded. */
+export const Default: Story = {};
+
+/** Share links enabled — the role selector and "Generate Link" action are active. */
+export const LinksEnabled: Story = {
+ decorators: [
+ (Story) => (
+
+
+
+ ),
+ ],
+};
diff --git a/frontend/editor/src/core/components/shared/BulkUploadToServerModal.stories.tsx b/frontend/editor/src/core/components/shared/BulkUploadToServerModal.stories.tsx
new file mode 100644
index 0000000000..0b800195f5
--- /dev/null
+++ b/frontend/editor/src/core/components/shared/BulkUploadToServerModal.stories.tsx
@@ -0,0 +1,67 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import type { ReactElement } from "react";
+import BulkUploadToServerModal from "@app/components/shared/BulkUploadToServerModal";
+import { FileContextProvider } from "@app/contexts/FileContext";
+import type { StirlingFileStub } from "@app/types/fileContext";
+import type { FileId } from "@app/types/file";
+
+const mockFiles: StirlingFileStub[] = [
+ {
+ id: "file-1" as FileId,
+ name: "quarterly-report.pdf",
+ type: "application/pdf",
+ size: 2_400_000,
+ lastModified: Date.now(),
+ isLeaf: true,
+ originalFileId: "file-1" as FileId,
+ versionNumber: 1,
+ },
+ {
+ id: "file-2" as FileId,
+ name: "invoice-march.pdf",
+ type: "application/pdf",
+ size: 512_000,
+ lastModified: Date.now(),
+ isLeaf: true,
+ originalFileId: "file-2" as FileId,
+ versionNumber: 1,
+ },
+];
+
+/**
+ * The modal dispatches updateStirlingFileStub on upload, so it needs
+ * FileContext (also supplies IndexedDBContext) mounted above it.
+ */
+function withProviders(Story: () => ReactElement) {
+ return (
+
+
+
+ );
+}
+
+const meta = {
+ title: "Shared/BulkUploadToServerModal",
+ component: BulkUploadToServerModal,
+ decorators: [withProviders],
+ args: {
+ onClose: () => {},
+ },
+} satisfies Meta;
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ opened: true,
+ files: mockFiles,
+ },
+};
+
+export const SingleFile: Story = {
+ args: {
+ opened: true,
+ files: [mockFiles[0]],
+ },
+};
diff --git a/frontend/editor/src/core/components/shared/ButtonToggle.stories.tsx b/frontend/editor/src/core/components/shared/ButtonToggle.stories.tsx
new file mode 100644
index 0000000000..88183305d3
--- /dev/null
+++ b/frontend/editor/src/core/components/shared/ButtonToggle.stories.tsx
@@ -0,0 +1,58 @@
+import { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import {
+ ButtonToggle,
+ ButtonToggleOption,
+} from "@app/components/shared/ButtonToggle";
+
+const meta: Meta = {
+ title: "Shared/ButtonToggle",
+ component: ButtonToggle,
+ parameters: { layout: "padded" },
+ decorators: [
+ (S) => (
+
+
+ ),
+ ],
+};
+export default meta;
+type Story = StoryObj;
+
+const options: ButtonToggleOption[] = [
+ {
+ value: "automatic",
+ label: "Automatic",
+ description: "Detect and redact automatically",
+ },
+ { value: "manual", label: "Manual", description: "Select regions yourself" },
+];
+
+function ToggleDemo({
+ disabled,
+ size,
+}: {
+ disabled?: boolean;
+ size?: "xs" | "sm" | "md" | "lg";
+}) {
+ const [value, setValue] = useState("automatic");
+ return (
+
+ );
+}
+
+/** Default toggle with two options, each carrying a label + description. */
+export const Default: Story = { render: () => };
+
+/** Disabled state — the selected segment must still be legible. */
+export const Disabled: Story = { render: () => };
+
+/** Small size variant. */
+export const Small: Story = { render: () => };
diff --git a/frontend/editor/src/core/components/shared/CloudStorageIcons.stories.tsx b/frontend/editor/src/core/components/shared/CloudStorageIcons.stories.tsx
new file mode 100644
index 0000000000..9d44784233
--- /dev/null
+++ b/frontend/editor/src/core/components/shared/CloudStorageIcons.stories.tsx
@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import {
+ GoogleDriveIcon,
+ OneDriveIcon,
+ DropboxIcon,
+} from "@app/components/shared/CloudStorageIcons";
+
+/** Cloud storage brand icons with brand-color / muted current-color variants. */
+const meta: Meta = {
+ title: "Shared/CloudStorageIcons",
+ component: GoogleDriveIcon,
+ parameters: { layout: "padded" },
+};
+export default meta;
+type Story = StoryObj;
+
+export const GoogleDrive: Story = {
+ args: { colored: true },
+};
+
+export const GoogleDriveMuted: Story = {
+ args: { colored: false },
+};
+
+export const OneDrive: Story = {
+ render: (args) => ,
+ args: { colored: true },
+};
+
+export const Dropbox: Story = {
+ render: (args) => ,
+ args: { colored: true },
+};
diff --git a/frontend/editor/src/core/components/shared/DropdownListWithFooter.stories.tsx b/frontend/editor/src/core/components/shared/DropdownListWithFooter.stories.tsx
new file mode 100644
index 0000000000..c52f1c9298
--- /dev/null
+++ b/frontend/editor/src/core/components/shared/DropdownListWithFooter.stories.tsx
@@ -0,0 +1,86 @@
+import { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Button } from "@mantine/core";
+import DropdownListWithFooter, {
+ DropdownItem,
+} from "@app/components/shared/DropdownListWithFooter";
+
+const meta: Meta = {
+ title: "Shared/DropdownListWithFooter",
+ component: DropdownListWithFooter,
+ parameters: { layout: "padded" },
+ decorators: [
+ (S) => (
+
+
+ ),
+ ],
+};
+export default meta;
+type Story = StoryObj;
+
+const items: DropdownItem[] = [
+ { value: "single", name: "Single page" },
+ { value: "facing", name: "Facing pages" },
+ { value: "book", name: "Book view" },
+ { value: "continuous", name: "Continuous scroll", disabled: true },
+];
+
+function SingleSelectDemo() {
+ const [value, setValue] = useState("single");
+ return (
+ setValue(v as string)}
+ />
+ );
+}
+
+function MultiSelectDemo() {
+ const [value, setValue] = useState(["single"]);
+ return (
+ setValue(v as string[])}
+ multiSelect
+ searchable
+ footer={
+
+ }
+ />
+ );
+}
+
+/** Single-select dropdown with a disabled item. */
+export const Default: Story = { render: () => };
+
+/** Multi-select with search box and a footer action. */
+export const MultiSelectWithFooter: Story = {
+ render: () => ,
+};
+
+/** No items available — empty state message inside the dropdown. */
+export const Empty: Story = {
+ render: () => {
+ return (
+ {}}
+ />
+ );
+ },
+};
diff --git a/frontend/editor/src/core/components/shared/EditableSecretField.stories.tsx b/frontend/editor/src/core/components/shared/EditableSecretField.stories.tsx
new file mode 100644
index 0000000000..b49fbd2806
--- /dev/null
+++ b/frontend/editor/src/core/components/shared/EditableSecretField.stories.tsx
@@ -0,0 +1,61 @@
+import { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import EditableSecretField from "@app/components/shared/EditableSecretField";
+
+const meta: Meta = {
+ title: "Shared/EditableSecretField",
+ component: EditableSecretField,
+ parameters: { layout: "padded" },
+ decorators: [
+ (S) => (
+
+
+ ),
+ ],
+};
+export default meta;
+type Story = StoryObj;
+
+function SecretFieldDemo({
+ initialValue = "",
+ ...rest
+}: {
+ initialValue?: string;
+ label?: string;
+ description?: string;
+ placeholder?: string;
+ disabled?: boolean;
+ error?: string;
+}) {
+ const [value, setValue] = useState(initialValue);
+ return (
+
+ );
+}
+
+/** Empty value: renders a normal password input. */
+export const Default: Story = {
+ render: () => ,
+};
+
+/** Backend returned a masked value (********): shows a read-only display + Edit button. */
+export const Masked: Story = {
+ render: () => ,
+};
+
+/** Disabled state — the Edit button on a masked value must still read as inert. */
+export const MaskedDisabled: Story = {
+ render: () => ,
+};
+
+/** Validation error surfaced under the password input. */
+export const WithError: Story = {
+ render: () => ,
+};
diff --git a/frontend/editor/src/core/components/shared/EncryptedPdfUnlockModal.stories.tsx b/frontend/editor/src/core/components/shared/EncryptedPdfUnlockModal.stories.tsx
new file mode 100644
index 0000000000..dd83b6eece
--- /dev/null
+++ b/frontend/editor/src/core/components/shared/EncryptedPdfUnlockModal.stories.tsx
@@ -0,0 +1,60 @@
+import { useState, type ComponentProps } from "react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import EncryptedPdfUnlockModal from "@app/components/shared/EncryptedPdfUnlockModal";
+
+const meta = {
+ title: "Shared/EncryptedPdfUnlockModal",
+ component: EncryptedPdfUnlockModal,
+ args: {
+ opened: true,
+ password: "",
+ isProcessing: false,
+ remainingCount: 0,
+ onPasswordChange: () => {},
+ onUnlock: () => {},
+ onUnlockAll: () => {},
+ onSkip: () => {},
+ },
+} satisfies Meta;
+export default meta;
+type Story = StoryObj;
+
+function UnlockDemo(
+ props: Partial>,
+) {
+ const [password, setPassword] = useState("");
+ return (
+ {}}
+ onUnlockAll={() => {}}
+ onSkip={() => {}}
+ {...props}
+ />
+ );
+}
+
+export const Default: Story = { render: () => };
+
+export const MultipleFilesRemaining: Story = {
+ render: () => ,
+};
+
+export const IncorrectPassword: Story = {
+ render: () => (
+
+ ),
+};
+
+export const Processing: Story = {
+ render: () => ,
+};
diff --git a/frontend/editor/src/core/components/shared/ErrorBoundary.stories.tsx b/frontend/editor/src/core/components/shared/ErrorBoundary.stories.tsx
new file mode 100644
index 0000000000..22a5f06feb
--- /dev/null
+++ b/frontend/editor/src/core/components/shared/ErrorBoundary.stories.tsx
@@ -0,0 +1,44 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Text } from "@mantine/core";
+import ErrorBoundary from "@app/components/shared/ErrorBoundary";
+
+const meta: Meta = {
+ title: "Shared/ErrorBoundary",
+ component: ErrorBoundary,
+ parameters: { layout: "padded" },
+};
+export default meta;
+type Story = StoryObj;
+
+function ThrowingChild(): never {
+ throw new Error("Simulated render error for Storybook");
+}
+
+/** Normal path — children render untouched when nothing throws. */
+export const Default: Story = {
+ args: {
+ children: Protected content renders normally.,
+ },
+};
+
+/** A child throwing during render is caught, showing the default fallback with a retry button. */
+export const CaughtError: Story = {
+ args: {
+ children: ,
+ },
+};
+
+/** A custom fallback component receives the error and a retry callback. */
+export const CustomFallback: Story = {
+ args: {
+ children: ,
+ fallback: ({ error, retry }) => (
+
+ Custom fallback: {error?.message}
+
+
+ ),
+ },
+};
diff --git a/frontend/editor/src/core/components/shared/FileCard.stories.tsx b/frontend/editor/src/core/components/shared/FileCard.stories.tsx
new file mode 100644
index 0000000000..48edd5854e
--- /dev/null
+++ b/frontend/editor/src/core/components/shared/FileCard.stories.tsx
@@ -0,0 +1,65 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import FileCard from "@app/components/shared/FileCard";
+import { FileContextProvider } from "@app/contexts/FileContext";
+import { StirlingFileStub, FileId } from "@app/types/fileContext";
+
+function makeFile(name: string, type = "application/pdf"): File {
+ return new File(["%PDF-1.4 storybook fixture"], name, {
+ type,
+ lastModified: Date.now(),
+ });
+}
+
+function makeStub(id: string): StirlingFileStub {
+ return {
+ id: id as FileId,
+ name: "Annual-Report-2026.pdf",
+ type: "application/pdf",
+ size: 245_760,
+ lastModified: Date.now(),
+ isLeaf: true,
+ originalFileId: id,
+ versionNumber: 1,
+ };
+}
+
+/** FileCard reads/writes files via FileContext + IndexedDB, so it needs a real provider tree. */
+const meta = {
+ title: "Shared/FileCard",
+ component: FileCard,
+ parameters: { layout: "padded" },
+ decorators: [
+ (Story) => (
+
+
+
+ ),
+ ],
+} satisfies Meta;
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ file: makeFile("Annual-Report-2026.pdf"),
+ fileStub: makeStub("story-file-1"),
+ onRemove: () => {},
+ onView: () => {},
+ onEdit: () => {},
+ },
+};
+
+export const Selected: Story = {
+ args: {
+ ...Default.args,
+ isSelected: true,
+ onSelect: () => {},
+ },
+};
+
+export const Unsupported: Story = {
+ args: {
+ ...Default.args,
+ isSupported: false,
+ },
+};
diff --git a/frontend/editor/src/core/components/shared/FileDocIcon.stories.tsx b/frontend/editor/src/core/components/shared/FileDocIcon.stories.tsx
new file mode 100644
index 0000000000..b42f7085a2
--- /dev/null
+++ b/frontend/editor/src/core/components/shared/FileDocIcon.stories.tsx
@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { FileDocIcon } from "@app/components/shared/FileDocIcon";
+
+const meta = {
+ title: "Shared/FileDocIcon",
+ component: FileDocIcon,
+ parameters: { layout: "padded" },
+ args: { variant: "pdf" },
+} satisfies Meta;
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: { variant: "pdf" },
+};
+
+/** All file-type variants, each using its own default accent color. */
+export const AllVariants: Story = {
+ render: () => (
+
+
+
+
+
+
+
+
+
+ ),
+};
+
+/** Explicit `color` overrides the variant's default accent. */
+export const CustomColor: Story = {
+ args: { variant: "pdf", color: "#e64980" },
+};
diff --git a/frontend/editor/src/core/components/shared/FileDropdownMenu.stories.tsx b/frontend/editor/src/core/components/shared/FileDropdownMenu.stories.tsx
new file mode 100644
index 0000000000..bb6b7d2670
--- /dev/null
+++ b/frontend/editor/src/core/components/shared/FileDropdownMenu.stories.tsx
@@ -0,0 +1,49 @@
+import type { CSSProperties } from "react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { FileDropdownMenu } from "@app/components/shared/FileDropdownMenu";
+
+const viewOptionStyle: CSSProperties = {
+ display: "flex",
+ alignItems: "center",
+ gap: "0.25rem",
+ padding: "0.25rem 0.5rem",
+};
+
+const activeFiles = [
+ { fileId: "file-1", name: "Contract-Draft-v1.pdf" },
+ { fileId: "file-2", name: "Invoice-2026-04.pdf", versionNumber: 2 },
+ { fileId: "file-3", name: "Scanned-Document-With-A-Very-Long-Name.pdf" },
+];
+
+const meta: Meta = {
+ title: "Shared/FileDropdownMenu",
+ component: FileDropdownMenu,
+ parameters: { layout: "padded" },
+};
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ displayName: "Contract-Draft-v1.pdf",
+ activeFiles,
+ currentFileIndex: 0,
+ viewOptionStyle,
+ onFileSelect: () => {},
+ onFileRemove: () => {},
+ },
+};
+
+export const Switching: Story = {
+ args: {
+ ...Default.args,
+ switchingTo: "viewer",
+ },
+};
+
+export const NoRemove: Story = {
+ args: {
+ ...Default.args,
+ onFileRemove: undefined,
+ },
+};
diff --git a/frontend/editor/src/core/components/shared/FileGrid.stories.tsx b/frontend/editor/src/core/components/shared/FileGrid.stories.tsx
new file mode 100644
index 0000000000..aea431852a
--- /dev/null
+++ b/frontend/editor/src/core/components/shared/FileGrid.stories.tsx
@@ -0,0 +1,104 @@
+import type { ReactElement } from "react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import FileGrid from "@app/components/shared/FileGrid";
+import { FileContextProvider } from "@app/contexts/FileContext";
+import type { StirlingFileStub } from "@app/types/fileContext";
+import type { FileId } from "@app/types/file";
+
+/**
+ * FileGrid renders FileCard entries, which call useFileThumbnail ->
+ * useIndexedDBThumbnail. That hook reads IndexedDBContext + FileContext,
+ * neither of which is part of the shared preview decorators, so
+ * FileContextProvider (which wraps IndexedDBProvider internally) is stood up
+ * here.
+ */
+function withFileContext(Story: () => ReactElement) {
+ return (
+
+
+
+ );
+}
+
+const buildFile = (name: string, size: number, type: string): File => {
+ return new File([new Uint8Array(size)], name, {
+ type,
+ lastModified: Date.now(),
+ });
+};
+
+const buildRecord = (
+ id: string,
+ overrides: Partial = {},
+): StirlingFileStub => ({
+ id: id as FileId,
+ name: overrides.name ?? "report.pdf",
+ type: overrides.type ?? "application/pdf",
+ size: overrides.size ?? 1_240_000,
+ lastModified: overrides.lastModified ?? Date.now(),
+ isLeaf: true,
+ originalFileId: id,
+ versionNumber: 1,
+ // Set so useLazyThumbnail short-circuits on the stored thumbnail instead of
+ // trying to read file bytes out of IndexedDB.
+ thumbnailUrl:
+ "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='160'%3E%3Crect width='120' height='160' fill='%23e9ecef'/%3E%3C/svg%3E",
+ ...overrides,
+});
+
+const files = [
+ {
+ file: buildFile("report.pdf", 1_240_000, "application/pdf"),
+ record: buildRecord("file-1", { name: "report.pdf" }),
+ },
+ {
+ file: buildFile("invoice.pdf", 540_000, "application/pdf"),
+ record: buildRecord("file-2", {
+ name: "invoice.pdf",
+ size: 540_000,
+ }),
+ },
+ {
+ file: buildFile(
+ "budget.xlsx",
+ 82_000,
+ "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+ ),
+ record: buildRecord("file-3", {
+ name: "budget.xlsx",
+ type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+ size: 82_000,
+ thumbnailUrl: undefined,
+ }),
+ },
+];
+
+const meta = {
+ title: "Shared/FileGrid",
+ component: FileGrid,
+ decorators: [withFileContext],
+ args: {
+ files,
+ onRemove: () => {},
+ },
+} satisfies Meta;
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {};
+
+export const SearchAndSort: Story = {
+ args: {
+ showSearch: true,
+ showSort: true,
+ onDeleteAll: () => {},
+ },
+};
+
+export const Empty: Story = {
+ args: {
+ files: [],
+ showSearch: true,
+ },
+};
diff --git a/frontend/editor/src/core/components/shared/FilePickerModal.stories.tsx b/frontend/editor/src/core/components/shared/FilePickerModal.stories.tsx
new file mode 100644
index 0000000000..51eac29632
--- /dev/null
+++ b/frontend/editor/src/core/components/shared/FilePickerModal.stories.tsx
@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import FilePickerModal from "@app/components/shared/FilePickerModal";
+
+const mockStoredFiles = [
+ { id: "file-1", name: "invoice.pdf", size: 245_000, thumbnail: null },
+ {
+ id: "file-2",
+ name: "contract-draft.pdf",
+ size: 1_240_000,
+ thumbnail: null,
+ },
+ { id: "file-3", name: "scanned-form.pdf", size: 3_400_000, thumbnail: null },
+];
+
+const meta = {
+ title: "Shared/FilePickerModal",
+ component: FilePickerModal,
+ parameters: { layout: "padded" },
+ args: {
+ opened: true,
+ onClose: () => {},
+ onSelectFiles: () => {},
+ storedFiles: mockStoredFiles,
+ },
+} satisfies Meta;
+export default meta;
+type Story = StoryObj;
+
+/** Storage populated with a few files available to pick from. */
+export const Default: Story = {};
+
+/** No files exist in storage yet — shows the empty-state message. */
+export const Empty: Story = {
+ args: {
+ storedFiles: [],
+ },
+};
diff --git a/frontend/editor/src/core/components/shared/FilePreview.stories.tsx b/frontend/editor/src/core/components/shared/FilePreview.stories.tsx
new file mode 100644
index 0000000000..30e2fec884
--- /dev/null
+++ b/frontend/editor/src/core/components/shared/FilePreview.stories.tsx
@@ -0,0 +1,57 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import FilePreview from "@app/components/shared/FilePreview";
+import { StirlingFileStub } from "@app/types/fileContext";
+import type { FileId } from "@app/types/file";
+
+const mockFile: StirlingFileStub = {
+ id: "file-1" as FileId,
+ name: "annual-report.pdf",
+ type: "application/pdf",
+ size: 245_000,
+ lastModified: Date.now(),
+ isLeaf: true,
+ originalFileId: "file-1",
+ versionNumber: 1,
+};
+
+const meta = {
+ title: "Shared/FilePreview",
+ component: FilePreview,
+ parameters: { layout: "padded" },
+ decorators: [
+ (Story) => (
+
+
+
+ ),
+ ],
+} satisfies Meta;
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ file: mockFile,
+ thumbnail: null,
+ },
+};
+
+export const Empty: Story = {
+ args: {
+ file: null,
+ },
+};
+
+export const WithNavigation: Story = {
+ args: {
+ file: mockFile,
+ thumbnail: null,
+ showStacking: true,
+ showHoverOverlay: true,
+ showNavigation: true,
+ totalFiles: 3,
+ onFileClick: () => {},
+ onPrevious: () => {},
+ onNext: () => {},
+ },
+};
diff --git a/frontend/editor/src/core/components/shared/FileSelectorPicker.stories.tsx b/frontend/editor/src/core/components/shared/FileSelectorPicker.stories.tsx
new file mode 100644
index 0000000000..3d01996b99
--- /dev/null
+++ b/frontend/editor/src/core/components/shared/FileSelectorPicker.stories.tsx
@@ -0,0 +1,48 @@
+import type { ReactElement } from "react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { FileSelectorPicker } from "@app/components/shared/FileSelectorPicker";
+import { FileContextProvider } from "@app/contexts/FileContext";
+
+/**
+ * Reads from FileContext (workbench files) and IndexedDBContext (persisted
+ * saved files) further up the tree — neither is part of the shared preview
+ * decorators, so FileContextProvider (which also wraps IndexedDBProvider) is
+ * stood up here. The popover starts closed, so no IndexedDB read happens
+ * until a story interacts with it.
+ */
+function withFileContext(Story: () => ReactElement) {
+ return (
+
+
+
+
+
+ );
+}
+
+const meta = {
+ title: "Shared/FileSelectorPicker",
+ component: FileSelectorPicker,
+ parameters: { layout: "padded" },
+ args: {
+ onSelect: () => {},
+ },
+ decorators: [withFileContext],
+} satisfies Meta;
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {};
+
+export const CustomPlaceholder: Story = {
+ args: {
+ placeholder: "Choose a comparison file",
+ },
+};
+
+export const Disabled: Story = {
+ args: {
+ disabled: true,
+ },
+};
diff --git a/frontend/editor/src/core/components/shared/FileUploadButton.stories.tsx b/frontend/editor/src/core/components/shared/FileUploadButton.stories.tsx
new file mode 100644
index 0000000000..d0411f1be9
--- /dev/null
+++ b/frontend/editor/src/core/components/shared/FileUploadButton.stories.tsx
@@ -0,0 +1,56 @@
+import { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import FileUploadButton from "@app/components/shared/FileUploadButton";
+
+const meta: Meta = {
+ title: "Shared/FileUploadButton",
+ component: FileUploadButton,
+ parameters: { layout: "padded" },
+ decorators: [
+ (S) => (
+
+
+ ),
+ ],
+};
+export default meta;
+type Story = StoryObj;
+
+function UploadDemo({
+ initialFile,
+ ...rest
+}: {
+ initialFile?: File;
+ disabled?: boolean;
+ accept?: string;
+ placeholder?: string;
+}) {
+ const [file, setFile] = useState(initialFile);
+ return (
+ setFile(next ?? undefined)}
+ {...rest}
+ />
+ );
+}
+
+/** No file chosen yet — shows the default "Choose File" placeholder. */
+export const Default: Story = { render: () => };
+
+/** A file has already been selected — the button shows its name. */
+export const WithFileSelected: Story = {
+ render: () => (
+
+ ),
+};
+
+/** Disabled state — should still be legible but non-interactive. */
+export const Disabled: Story = {
+ render: () => ,
+};
diff --git a/frontend/editor/src/core/components/shared/FirstLoginModal.stories.tsx b/frontend/editor/src/core/components/shared/FirstLoginModal.stories.tsx
new file mode 100644
index 0000000000..30941579f4
--- /dev/null
+++ b/frontend/editor/src/core/components/shared/FirstLoginModal.stories.tsx
@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import FirstLoginModal from "@app/components/shared/FirstLoginModal";
+
+const meta = {
+ title: "Shared/FirstLoginModal",
+ component: FirstLoginModal,
+ parameters: { layout: "fullscreen" },
+} satisfies Meta;
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ opened: true,
+ username: "jane.doe",
+ onPasswordChanged: () => {},
+ },
+};
diff --git a/frontend/editor/src/core/components/shared/FitText.stories.tsx b/frontend/editor/src/core/components/shared/FitText.stories.tsx
new file mode 100644
index 0000000000..63b93d0ed7
--- /dev/null
+++ b/frontend/editor/src/core/components/shared/FitText.stories.tsx
@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import FitText from "@app/components/shared/FitText";
+
+const meta: Meta = {
+ title: "Shared/FitText",
+ component: FitText,
+ parameters: { layout: "padded" },
+ decorators: [
+ (S) => (
+
+
+ ),
+ ],
+};
+export default meta;
+type Story = StoryObj;
+
+/** Single-line text that shrinks its font size to fit the available width. */
+export const Default: Story = {
+ args: {
+ text: "Invoice_2026_Quarterly_Report.pdf",
+ },
+};
+
+/** Multi-line clamp with soft-break hints inserted after '/', '-' and '_'. */
+export const MultiLine: Story = {
+ args: {
+ text: "path/to/some-very/long_document/name_that_needs_multiple_lines.pdf",
+ lines: 3,
+ },
+};
+
+/** Explicit font size (rem) with a lower minimum shrink scale. */
+export const CustomFontSize: Story = {
+ args: {
+ text: "Custom Sized Label",
+ fontSize: 1.5,
+ minimumFontScale: 0.5,
+ },
+};
diff --git a/frontend/editor/src/core/components/shared/Footer.stories.tsx b/frontend/editor/src/core/components/shared/Footer.stories.tsx
new file mode 100644
index 0000000000..af1d4a5805
--- /dev/null
+++ b/frontend/editor/src/core/components/shared/Footer.stories.tsx
@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import Footer from "@app/components/shared/Footer";
+
+const meta = {
+ title: "Shared/Footer",
+ component: Footer,
+ parameters: { layout: "padded" },
+} satisfies Meta;
+export default meta;
+type Story = StoryObj;
+
+/** Defaults: no overrides supplied, only the always-present links render. */
+export const Default: Story = {
+ args: {},
+};
+
+/** All optional legal links populated, plus the cookie preferences button. */
+export const AllLinksAndCookieBanner: Story = {
+ args: {
+ privacyPolicy: "https://example.com/privacy",
+ termsAndConditions: "https://example.com/terms",
+ accessibilityStatement: "https://example.com/accessibility",
+ cookiePolicy: "https://example.com/cookies",
+ impressum: "https://example.com/impressum",
+ analyticsEnabled: true,
+ },
+};
diff --git a/frontend/editor/src/core/components/shared/HoverActionMenu.stories.tsx b/frontend/editor/src/core/components/shared/HoverActionMenu.stories.tsx
new file mode 100644
index 0000000000..dc391d0e9a
--- /dev/null
+++ b/frontend/editor/src/core/components/shared/HoverActionMenu.stories.tsx
@@ -0,0 +1,76 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import HoverActionMenu, {
+ type HoverAction,
+} from "@app/components/shared/HoverActionMenu";
+import { iconMap } from "@app/components/tools/automate/iconMap";
+
+const { EditIcon, DeleteIcon, DownloadIcon } = iconMap;
+
+const actions: HoverAction[] = [
+ {
+ id: "edit",
+ icon: ,
+ label: "Edit",
+ onClick: () => {},
+ },
+ {
+ id: "download",
+ icon: ,
+ label: "Download",
+ onClick: () => {},
+ },
+ {
+ id: "delete",
+ icon: ,
+ label: "Delete",
+ onClick: () => {},
+ color: "var(--text-error)",
+ },
+];
+
+const meta: Meta = {
+ title: "Shared/HoverActionMenu",
+ component: HoverActionMenu,
+ parameters: { layout: "padded" },
+ decorators: [
+ (S) => (
+
+
+ ),
+ ],
+};
+export default meta;
+type Story = StoryObj;
+
+/** Visible menu with the standard edit/download/delete action set. */
+export const Default: Story = {
+ args: {
+ show: true,
+ actions,
+ },
+};
+
+/** Hidden state (`show: false`) — menu stays mounted but faded/non-interactive. */
+export const Hidden: Story = {
+ args: {
+ show: false,
+ actions,
+ },
+};
+
+/** One action disabled with a custom tooltip explaining why. */
+export const WithDisabledAction: Story = {
+ args: {
+ show: true,
+ actions: [
+ actions[0],
+ actions[1],
+ {
+ ...actions[2],
+ disabled: true,
+ tooltip: "Deletion is restricted by policy",
+ },
+ ],
+ },
+};
diff --git a/frontend/editor/src/core/components/shared/InfoBanner.stories.tsx b/frontend/editor/src/core/components/shared/InfoBanner.stories.tsx
new file mode 100644
index 0000000000..5fad071d05
--- /dev/null
+++ b/frontend/editor/src/core/components/shared/InfoBanner.stories.tsx
@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { InfoBanner } from "@app/components/shared/InfoBanner";
+
+const meta = {
+ title: "Shared/InfoBanner",
+ component: InfoBanner,
+ parameters: { layout: "padded" },
+} satisfies Meta;
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ icon: "info-rounded",
+ title: "Heads up",
+ message: "This document contains form fields that will be flattened.",
+ },
+};
+
+export const Warning: Story = {
+ args: {
+ tone: "warning",
+ icon: "warning-rounded",
+ title: "Action required",
+ message: "Some pages could not be processed and were skipped.",
+ buttonText: "Review",
+ onButtonClick: () => {},
+ },
+};
+
+export const Compact: Story = {
+ args: {
+ compact: true,
+ icon: "info-rounded",
+ message: "Autosave is enabled for this file.",
+ dismissible: false,
+ },
+};
diff --git a/frontend/editor/src/core/components/shared/LandingDocumentStack.stories.tsx b/frontend/editor/src/core/components/shared/LandingDocumentStack.stories.tsx
new file mode 100644
index 0000000000..e51e068ff9
--- /dev/null
+++ b/frontend/editor/src/core/components/shared/LandingDocumentStack.stories.tsx
@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { LandingDocumentStack } from "@app/components/shared/LandingDocumentStack";
+
+/** Decorative stack only: window dots + grey bars — no props, no i18n. */
+const meta: Meta = {
+ title: "Shared/LandingDocumentStack",
+ component: LandingDocumentStack,
+ parameters: { layout: "padded" },
+};
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {};
diff --git a/frontend/editor/src/core/components/shared/LanguageSelector.stories.tsx b/frontend/editor/src/core/components/shared/LanguageSelector.stories.tsx
new file mode 100644
index 0000000000..2ffcba96c1
--- /dev/null
+++ b/frontend/editor/src/core/components/shared/LanguageSelector.stories.tsx
@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import LanguageSelector from "@app/components/shared/LanguageSelector";
+
+const meta = {
+ title: "Shared/LanguageSelector",
+ component: LanguageSelector,
+} satisfies Meta;
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {};
+
+export const Compact: Story = {
+ args: {
+ compact: true,
+ tooltip: "Change language",
+ },
+};
+
+export const TopStartPosition: Story = {
+ args: {
+ position: "top-start",
+ offset: 4,
+ },
+};
diff --git a/frontend/editor/src/core/components/shared/LoadingFallback.stories.tsx b/frontend/editor/src/core/components/shared/LoadingFallback.stories.tsx
new file mode 100644
index 0000000000..1ce948a671
--- /dev/null
+++ b/frontend/editor/src/core/components/shared/LoadingFallback.stories.tsx
@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { LoadingFallback } from "@app/components/shared/LoadingFallback";
+
+/** Full-screen splash shown while i18next Suspense is loading translations. */
+const meta: Meta = {
+ title: "Shared/LoadingFallback",
+ component: LoadingFallback,
+ parameters: { layout: "fullscreen" },
+};
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {};
diff --git a/frontend/editor/src/core/components/shared/LocalIcon.stories.tsx b/frontend/editor/src/core/components/shared/LocalIcon.stories.tsx
new file mode 100644
index 0000000000..5f38ef168b
--- /dev/null
+++ b/frontend/editor/src/core/components/shared/LocalIcon.stories.tsx
@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import LocalIcon from "@app/components/shared/LocalIcon";
+
+const meta: Meta = {
+ title: "Shared/LocalIcon",
+ component: LocalIcon,
+ parameters: { layout: "padded" },
+};
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ icon: "description",
+ width: "2rem",
+ height: "2rem",
+ },
+};
+
+export const NumericSize: Story = {
+ args: {
+ icon: "download",
+ width: 32,
+ },
+};
+
+export const WithFullCollectionPrefix: Story = {
+ args: {
+ icon: "material-symbols:error-rounded",
+ width: "1.5rem",
+ },
+};
diff --git a/frontend/editor/src/core/components/shared/LoginAgreementModal.stories.tsx b/frontend/editor/src/core/components/shared/LoginAgreementModal.stories.tsx
new file mode 100644
index 0000000000..d8b160692a
--- /dev/null
+++ b/frontend/editor/src/core/components/shared/LoginAgreementModal.stories.tsx
@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import LoginAgreementModal from "@app/components/shared/LoginAgreementModal";
+
+/**
+ * Renders nothing by default: the modal only opens after fetching
+ * `/api/v1/config/login-disclaimer` and finding it enabled, which requires a
+ * live AppConfigProvider/backend. In Storybook (no providers configured) the
+ * config stays null, so the effect bails out and the component stays hidden.
+ */
+const meta: Meta = {
+ title: "Shared/LoginAgreementModal",
+ component: LoginAgreementModal,
+ parameters: { layout: "padded" },
+};
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {};
diff --git a/frontend/editor/src/core/components/shared/MobileUploadModal.stories.tsx b/frontend/editor/src/core/components/shared/MobileUploadModal.stories.tsx
new file mode 100644
index 0000000000..58e7e86aa4
--- /dev/null
+++ b/frontend/editor/src/core/components/shared/MobileUploadModal.stories.tsx
@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import MobileUploadModal from "@app/components/shared/MobileUploadModal";
+
+const meta: Meta = {
+ title: "Shared/MobileUploadModal",
+ component: MobileUploadModal,
+ parameters: { layout: "fullscreen" },
+ args: {
+ opened: true,
+ onClose: () => {},
+ onFilesReceived: () => {},
+ },
+};
+export default meta;
+type Story = StoryObj;
+
+/** QR code + instructions for scanning a file upload session from a phone. */
+export const Default: Story = {};
+
+/** Closed state — modal renders nothing visible. */
+export const Closed: Story = {
+ args: {
+ opened: false,
+ },
+};
diff --git a/frontend/editor/src/core/components/shared/MultiSelectControls.stories.tsx b/frontend/editor/src/core/components/shared/MultiSelectControls.stories.tsx
new file mode 100644
index 0000000000..cb8281399b
--- /dev/null
+++ b/frontend/editor/src/core/components/shared/MultiSelectControls.stories.tsx
@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import MultiSelectControls from "@app/components/shared/MultiSelectControls";
+
+const meta: Meta = {
+ title: "Shared/MultiSelectControls",
+ component: MultiSelectControls,
+ parameters: { layout: "padded" },
+ args: {
+ selectedCount: 3,
+ onClearSelection: () => {},
+ },
+};
+export default meta;
+type Story = StoryObj;
+
+/** Only the always-present "Clear files" action, since none of the optional handlers are passed. */
+export const Default: Story = {};
+
+/** All optional actions supplied — every button in the group renders. */
+export const AllActions: Story = {
+ args: {
+ onAddToUpload: () => {},
+ onOpenInFileEditor: () => {},
+ onOpenInPageEditor: () => {},
+ onDeleteAll: () => {},
+ },
+};
+
+/** Renders nothing when no files are selected. */
+export const NoSelection: Story = {
+ args: {
+ selectedCount: 0,
+ },
+};
diff --git a/frontend/editor/src/core/components/shared/NavigationWarningModal.stories.tsx b/frontend/editor/src/core/components/shared/NavigationWarningModal.stories.tsx
new file mode 100644
index 0000000000..ac6636125e
--- /dev/null
+++ b/frontend/editor/src/core/components/shared/NavigationWarningModal.stories.tsx
@@ -0,0 +1,103 @@
+import { useEffect, type ReactElement } from "react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import NavigationWarningModal from "@app/components/shared/NavigationWarningModal";
+import { ToolRegistryProvider } from "@app/contexts/ToolRegistryProvider";
+import {
+ NavigationProvider,
+ useNavigationGuard,
+ type NavigationWarningHandlers,
+} from "@app/contexts/NavigationContext";
+
+/**
+ * The modal renders nothing until NavigationContext has unsaved changes AND a
+ * pending navigation to warn about, so this drives both into place on mount —
+ * mirroring what a real editor does when it calls requestNavigation() while
+ * hasUnsavedChanges is true. It also registers any warning handlers the story
+ * supplies, since the modal only shows the "Apply & Leave"/"Export & Leave"
+ * buttons when a handler for them is present.
+ */
+function TriggerWarning({
+ children,
+ handlers,
+}: {
+ children: React.ReactNode;
+ handlers?: NavigationWarningHandlers;
+}) {
+ const {
+ hasUnsavedChanges,
+ setHasUnsavedChanges,
+ requestNavigation,
+ registerNavigationWarningHandlers,
+ } = useNavigationGuard();
+
+ useEffect(() => {
+ setHasUnsavedChanges(true);
+ }, [setHasUnsavedChanges]);
+
+ useEffect(() => {
+ if (handlers) {
+ registerNavigationWarningHandlers(handlers);
+ }
+ }, [handlers, registerNavigationWarningHandlers]);
+
+ useEffect(() => {
+ if (hasUnsavedChanges) {
+ requestNavigation(() => {});
+ }
+ }, [hasUnsavedChanges, requestNavigation]);
+
+ return <>{children};
+}
+
+function withProviders(
+ Story: () => ReactElement,
+ context: { parameters: { navigationHandlers?: NavigationWarningHandlers } },
+) {
+ return (
+
+
+
+
+
+
+
+ );
+}
+
+const meta = {
+ title: "Shared/NavigationWarningModal",
+ component: NavigationWarningModal,
+ decorators: [withProviders],
+} satisfies Meta;
+export default meta;
+
+type Story = StoryObj;
+
+/** Unsaved changes plus a pending navigation trigger the confirmation dialog. */
+export const Default: Story = {};
+
+/**
+ * When the active tool registers an "apply and continue" handler (e.g. a
+ * pending edit that can be committed before leaving), the modal adds a third
+ * action alongside "Keep Working" and "Discard Changes".
+ */
+export const WithApplyAndContinue: Story = {
+ parameters: {
+ navigationHandlers: {
+ onApplyAndContinue: async () => {},
+ } satisfies NavigationWarningHandlers,
+ },
+};
+
+/**
+ * When the active tool registers an "export and continue" handler (e.g. a
+ * conversion tool that can export its result before leaving), the modal adds
+ * an "Export & Leave" action instead.
+ */
+export const WithExportAndContinue: Story = {
+ parameters: {
+ navigationHandlers: {
+ onExportAndContinue: async () => {},
+ } satisfies NavigationWarningHandlers,
+ },
+};
diff --git a/frontend/editor/src/core/components/shared/ObscuredOverlay.stories.tsx b/frontend/editor/src/core/components/shared/ObscuredOverlay.stories.tsx
new file mode 100644
index 0000000000..4b8d936cc5
--- /dev/null
+++ b/frontend/editor/src/core/components/shared/ObscuredOverlay.stories.tsx
@@ -0,0 +1,49 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import ObscuredOverlay from "@app/components/shared/ObscuredOverlay";
+
+const meta: Meta = {
+ title: "Shared/ObscuredOverlay",
+ component: ObscuredOverlay,
+ parameters: { layout: "padded" },
+ decorators: [
+ (S) => (
+
+
+ ),
+ ],
+};
+export default meta;
+type Story = StoryObj;
+
+const Content = () => (
+
+ Underlying content that gets obscured.
+
+);
+
+export const Unobscured: Story = {
+ args: {
+ obscured: false,
+ children: ,
+ },
+};
+
+export const Obscured: Story = {
+ args: {
+ obscured: true,
+ overlayMessage: "This feature requires an upgrade",
+ buttonText: "Upgrade",
+ onButtonClick: () => {},
+ children: ,
+ },
+};
+
+export const RoundedCorners: Story = {
+ args: {
+ obscured: true,
+ overlayMessage: "Locked",
+ borderRadius: "0.5rem",
+ children: ,
+ },
+};
diff --git a/frontend/editor/src/core/components/shared/PageSelectionSyntaxHint.stories.tsx b/frontend/editor/src/core/components/shared/PageSelectionSyntaxHint.stories.tsx
new file mode 100644
index 0000000000..e14d9dc030
--- /dev/null
+++ b/frontend/editor/src/core/components/shared/PageSelectionSyntaxHint.stories.tsx
@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import PageSelectionSyntaxHint from "@app/components/shared/PageSelectionSyntaxHint";
+
+const meta = {
+ title: "Shared/PageSelectionSyntaxHint",
+ component: PageSelectionSyntaxHint,
+ parameters: { layout: "padded" },
+} satisfies Meta;
+export default meta;
+type Story = StoryObj;
+
+/** Valid syntax ("1-3,5") renders nothing — no hint shown. */
+export const Default: Story = {
+ args: {
+ input: "1-3,5",
+ maxPages: 10,
+ },
+};
+
+/** Malformed expression falls back to CSV parsing and shows the panel-style hint. */
+export const SyntaxError: Story = {
+ args: {
+ input: "abc",
+ maxPages: 10,
+ },
+};
+
+/** Same malformed input, compact variant used inline within a tool panel. */
+export const CompactSyntaxError: Story = {
+ args: {
+ input: "abc",
+ maxPages: 10,
+ variant: "compact",
+ },
+};
diff --git a/frontend/editor/src/core/components/shared/PolicyBadges.stories.tsx b/frontend/editor/src/core/components/shared/PolicyBadges.stories.tsx
new file mode 100644
index 0000000000..81969bf615
--- /dev/null
+++ b/frontend/editor/src/core/components/shared/PolicyBadges.stories.tsx
@@ -0,0 +1,44 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { PolicyBadges } from "@app/components/shared/PolicyBadges";
+import type { FileItemPolicyRef } from "@app/components/shared/PolicyBadges";
+
+const mockPolicies: FileItemPolicyRef[] = [
+ { id: "policy-1", name: "Redact PII", accentColor: "#e03131", recent: true },
+ { id: "policy-2", name: "Sanitize", accentColor: "#2f9e44", recent: false },
+ { id: "policy-3", name: "Watermark", accentColor: "#4263eb", recent: false },
+];
+
+const meta = {
+ title: "Shared/PolicyBadges",
+ component: PolicyBadges,
+ parameters: { layout: "padded" },
+} satisfies Meta;
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ policies: mockPolicies,
+ },
+};
+
+export const Enforcing: Story = {
+ args: {
+ policies: [
+ {
+ id: "policy-1",
+ name: "Redact PII",
+ accentColor: "#e03131",
+ recent: false,
+ enforcing: true,
+ },
+ ...mockPolicies.slice(1),
+ ],
+ },
+};
+
+export const Empty: Story = {
+ args: {
+ policies: [],
+ },
+};
diff --git a/frontend/editor/src/core/components/shared/PrivateContent.stories.tsx b/frontend/editor/src/core/components/shared/PrivateContent.stories.tsx
new file mode 100644
index 0000000000..3103eb3962
--- /dev/null
+++ b/frontend/editor/src/core/components/shared/PrivateContent.stories.tsx
@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { PrivateContent } from "@app/components/shared/PrivateContent";
+
+/** Layout-invisible wrapper that tags sensitive content with 'ph-no-capture' to exclude it from analytics. */
+const meta: Meta = {
+ title: "Shared/PrivateContent",
+ component: PrivateContent,
+ parameters: { layout: "padded" },
+};
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ children: "sensitive-filename.pdf",
+ },
+};
+
+export const WithCustomClassName: Story = {
+ args: {
+ children: "sensitive-filename.pdf",
+ className: "custom-class",
+ },
+};
diff --git a/frontend/editor/src/core/components/shared/ShareFileModal.stories.tsx b/frontend/editor/src/core/components/shared/ShareFileModal.stories.tsx
new file mode 100644
index 0000000000..a616480d36
--- /dev/null
+++ b/frontend/editor/src/core/components/shared/ShareFileModal.stories.tsx
@@ -0,0 +1,63 @@
+import type { ReactElement } from "react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import ShareFileModal from "@app/components/shared/ShareFileModal";
+import { AppConfigProvider } from "@app/contexts/AppConfigContext";
+import { FileContextProvider } from "@app/contexts/FileContext";
+import type { StirlingFileStub } from "@app/types/fileContext";
+import type { FileId } from "@app/types/file";
+
+const mockFile: StirlingFileStub = {
+ id: "story-file-1" as FileId,
+ name: "quarterly-report.pdf",
+ type: "application/pdf",
+ size: 2_400_000,
+ lastModified: Date.now(),
+ isLeaf: true,
+ originalFileId: "story-file-1",
+ versionNumber: 1,
+};
+
+/**
+ * ShareFileModal reads useFileActions() from FileContext (stood up here since
+ * it isn't part of the shared preview decorators) and useAppConfig() to gate
+ * share links on `storageShareLinksEnabled` — wrapped per-story to show both
+ * the disabled and enabled states.
+ */
+function withFileContext(Story: () => ReactElement) {
+ return (
+
+
+
+ );
+}
+
+const meta = {
+ title: "Shared/ShareFileModal",
+ component: ShareFileModal,
+ parameters: { layout: "fullscreen" },
+ args: {
+ opened: true,
+ onClose: () => {},
+ file: mockFile,
+ },
+ decorators: [withFileContext],
+} satisfies Meta;
+export default meta;
+type Story = StoryObj;
+
+/** Share links disabled by server config — default when no config is loaded. */
+export const Default: Story = {};
+
+/** Share links enabled — the role selector and "Generate Link" action are active. */
+export const LinksEnabled: Story = {
+ decorators: [
+ (Story) => (
+
+
+
+ ),
+ ],
+};
diff --git a/frontend/editor/src/core/components/shared/ShareManagementModal.stories.tsx b/frontend/editor/src/core/components/shared/ShareManagementModal.stories.tsx
new file mode 100644
index 0000000000..3fff68cbf3
--- /dev/null
+++ b/frontend/editor/src/core/components/shared/ShareManagementModal.stories.tsx
@@ -0,0 +1,66 @@
+import type { ReactElement } from "react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import ShareManagementModal from "@app/components/shared/ShareManagementModal";
+import { AppConfigProvider } from "@app/contexts/AppConfigContext";
+import { FileContextProvider } from "@app/contexts/FileContext";
+import type { StirlingFileStub } from "@app/types/fileContext";
+import type { FileId } from "@app/types/file";
+
+const mockFile: StirlingFileStub = {
+ id: "story-file-1" as FileId,
+ name: "quarterly-report.pdf",
+ type: "application/pdf",
+ size: 2_400_000,
+ lastModified: Date.now(),
+ isLeaf: true,
+ originalFileId: "story-file-1",
+ versionNumber: 1,
+};
+
+/**
+ * ShareManagementModal reads useFileActions() from FileContext (stood up here
+ * since it isn't part of the shared preview decorators) and useAppConfig() to
+ * gate share links on `storageShareLinksEnabled` — wrapped per-story to show
+ * both the disabled and enabled states.
+ */
+function withFileContext(Story: () => ReactElement) {
+ return (
+
+
+
+ );
+}
+
+const meta = {
+ title: "Shared/ShareManagementModal",
+ component: ShareManagementModal,
+ parameters: { layout: "fullscreen" },
+ args: {
+ opened: true,
+ onClose: () => {},
+ file: mockFile,
+ },
+ decorators: [withFileContext],
+} satisfies Meta;
+export default meta;
+type Story = StoryObj;
+
+/** Share links disabled by server config — default when no config is loaded. */
+export const Default: Story = {};
+
+/** Share links enabled — the role selector, link generation and activity panel are active. */
+export const LinksEnabled: Story = {
+ decorators: [
+ (Story) => (
+
+
+
+ ),
+ ],
+};
diff --git a/frontend/editor/src/core/components/shared/SkeletonLoader.stories.tsx b/frontend/editor/src/core/components/shared/SkeletonLoader.stories.tsx
new file mode 100644
index 0000000000..50c754a3cf
--- /dev/null
+++ b/frontend/editor/src/core/components/shared/SkeletonLoader.stories.tsx
@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import SkeletonLoader from "@app/components/shared/SkeletonLoader";
+
+const meta: Meta = {
+ title: "Shared/SkeletonLoader",
+ component: SkeletonLoader,
+ parameters: { layout: "padded" },
+};
+export default meta;
+type Story = StoryObj;
+
+export const PageGrid: Story = {
+ args: { type: "pageGrid", count: 4 },
+};
+
+export const FileGrid: Story = {
+ args: { type: "fileGrid", count: 4 },
+};
+
+export const Controls: Story = {
+ args: { type: "controls" },
+};
+
+export const Viewer: Story = {
+ args: { type: "viewer" },
+ decorators: [
+ (S) => (
+
+
+ ),
+ ],
+};
+
+export const Block: Story = {
+ args: { type: "block", width: 120, height: 20 },
+};
diff --git a/frontend/editor/src/core/components/shared/ToolChain.stories.tsx b/frontend/editor/src/core/components/shared/ToolChain.stories.tsx
new file mode 100644
index 0000000000..b8ef29f9b5
--- /dev/null
+++ b/frontend/editor/src/core/components/shared/ToolChain.stories.tsx
@@ -0,0 +1,56 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import ToolChain from "@app/components/shared/ToolChain";
+import { ToolOperation } from "@app/types/file";
+
+function op(toolId: ToolOperation["toolId"], timestamp: number): ToolOperation {
+ return { toolId, timestamp };
+}
+
+const shortChain: ToolOperation[] = [op("watermark", 1), op("ocr", 2)];
+
+const longChain: ToolOperation[] = [
+ op("split", 1),
+ op("merge", 2),
+ op("watermark", 3),
+ op("ocr", 4),
+ op("rotate", 5),
+];
+
+const meta = {
+ title: "Shared/ToolChain",
+ component: ToolChain,
+ parameters: { layout: "padded" },
+} satisfies Meta;
+export default meta;
+type Story = StoryObj;
+
+/** Default text style, short chain (no truncation needed). */
+export const Default: Story = {
+ args: {
+ toolChain: shortChain,
+ },
+};
+
+/** Text style with a long chain — truncates to first → +N → last, with a tooltip for the full chain. */
+export const TextTruncated: Story = {
+ args: {
+ toolChain: longChain,
+ displayStyle: "text",
+ },
+};
+
+/** Badge style — shows up to 3 badges, with "..." + final badge and a tooltip when longer. */
+export const Badges: Story = {
+ args: {
+ toolChain: longChain,
+ displayStyle: "badges",
+ },
+};
+
+/** Compact style — collapses to a tool count once more than one tool is present. */
+export const Compact: Story = {
+ args: {
+ toolChain: longChain,
+ displayStyle: "compact",
+ },
+};
diff --git a/frontend/editor/src/core/components/shared/ToolIcon.stories.tsx b/frontend/editor/src/core/components/shared/ToolIcon.stories.tsx
new file mode 100644
index 0000000000..8994f34157
--- /dev/null
+++ b/frontend/editor/src/core/components/shared/ToolIcon.stories.tsx
@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { iconMap } from "@app/components/tools/automate/iconMap";
+import { ToolIcon } from "@app/components/shared/ToolIcon";
+
+const { PictureAsPdfIcon } = iconMap;
+
+const meta = {
+ title: "Shared/ToolIcon",
+ component: ToolIcon,
+ parameters: { layout: "padded" },
+} satisfies Meta;
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ icon: ,
+ },
+};
+
+/** Visually unavailable state, for tools the user can't run. */
+export const ReducedOpacity: Story = {
+ args: {
+ icon: ,
+ opacity: 0.25,
+ },
+};
+
+/** No right margin, for inline placement. */
+export const NoMargin: Story = {
+ args: {
+ icon: ,
+ marginRight: "0",
+ },
+};
diff --git a/frontend/editor/src/core/components/shared/ToolPanelHeader.stories.tsx b/frontend/editor/src/core/components/shared/ToolPanelHeader.stories.tsx
new file mode 100644
index 0000000000..bfcaedba4f
--- /dev/null
+++ b/frontend/editor/src/core/components/shared/ToolPanelHeader.stories.tsx
@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import SettingsIcon from "@mui/icons-material/Settings";
+import { ToolPanelHeader } from "@app/components/shared/ToolPanelHeader";
+
+const meta: Meta = {
+ title: "Shared/ToolPanelHeader",
+ component: ToolPanelHeader,
+ parameters: { layout: "padded" },
+};
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ icon: ,
+ title: "Split",
+ },
+};
+
+/** Trailing close button only renders when `onClose` is supplied. */
+export const WithCloseButton: Story = {
+ args: {
+ icon: ,
+ title: "Split",
+ onClose: () => {},
+ closeLabel: "Close tool panel",
+ },
+};
diff --git a/frontend/editor/src/core/components/shared/UpdateModal.stories.tsx b/frontend/editor/src/core/components/shared/UpdateModal.stories.tsx
new file mode 100644
index 0000000000..9d7626edbf
--- /dev/null
+++ b/frontend/editor/src/core/components/shared/UpdateModal.stories.tsx
@@ -0,0 +1,79 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import UpdateModal from "@app/components/shared/UpdateModal";
+import type { UpdateSummary, MachineInfo } from "@app/services/updateService";
+
+const UPDATE_SUMMARY: UpdateSummary = {
+ latest_version: "2.5.0",
+ latest_stable_version: "2.5.0",
+ max_priority: "normal",
+ recommended_action: "This update contains important fixes and improvements.",
+ any_breaking: false,
+ migration_guides: [
+ {
+ version: "2.5.0",
+ notes: "Config file format changed for custom watermark presets.",
+ url: "https://docs.stirlingpdf.com/migration/2.5.0",
+ },
+ ],
+};
+
+const MACHINE_INFO: MachineInfo = {
+ machineType: "Client-win",
+ activeSecurity: false,
+ licenseType: "NORMAL",
+};
+
+const meta = {
+ title: "Shared/UpdateModal",
+ component: UpdateModal,
+ parameters: { layout: "fullscreen" },
+ args: {
+ opened: true,
+ onClose: () => {},
+ currentVersion: "2.4.0",
+ updateSummary: UPDATE_SUMMARY,
+ machineInfo: MACHINE_INFO,
+ downloadSizeBytes: 235_000_000,
+ },
+} satisfies Meta;
+export default meta;
+
+type Story = StoryObj;
+
+/** Web/server build: no Tauri updater, so the footer offers a plain download link. */
+export const Default: Story = {};
+
+/** Desktop app: an update has finished installing and is waiting for a restart. */
+export const DesktopInstallReadyToRestart: Story = {
+ args: {
+ desktopInstall: {
+ state: "ready-to-restart",
+ progress: null,
+ errorMessage: null,
+ actions: {
+ startInstall: async () => true,
+ restartApp: async () => {},
+ },
+ },
+ },
+};
+
+/** Desktop app on a non-admin machine: install probe reported it can't write to
+ * the install directory, so Install Now is disabled and the docs alert shows. */
+export const DesktopInstallBlocked: Story = {
+ args: {
+ desktopInstall: {
+ state: "idle",
+ progress: null,
+ errorMessage: null,
+ actions: {
+ startInstall: async () => true,
+ restartApp: async () => {},
+ },
+ canInstall: {
+ canInstall: false,
+ reason: "Install directory is not writable without elevation.",
+ },
+ },
+ },
+};
diff --git a/frontend/editor/src/core/components/shared/UpdateStartupPopup.stories.tsx b/frontend/editor/src/core/components/shared/UpdateStartupPopup.stories.tsx
new file mode 100644
index 0000000000..4abfdece22
--- /dev/null
+++ b/frontend/editor/src/core/components/shared/UpdateStartupPopup.stories.tsx
@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { UpdateStartupPopup } from "@app/components/shared/UpdateStartupPopup";
+import { AppConfigProvider } from "@app/contexts/AppConfigContext";
+
+/**
+ * Startup update-check popup — renders null until an update is detected, so
+ * every story here shows an empty canvas. The stories exercise the gating
+ * logic (`isUpdatePopupAllowed`) rather than the (invisible) update-found UI,
+ * which additionally requires a real startup delay + network round trip.
+ */
+const meta = {
+ title: "Shared/UpdateStartupPopup",
+ component: UpdateStartupPopup,
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+/** No app config resolved yet — gate is closed, renders nothing. */
+export const Default: Story = {};
+
+/** Config resolved but `shouldShowUpdate` is false — gate stays closed. */
+export const UpdatesDisabled: Story = {
+ decorators: [
+ (StoryComponent) => (
+
+
+
+ ),
+ ],
+};
+
+/**
+ * Gate is open (`shouldShowUpdate: true`), so the startup timer would fire and
+ * check for an update — but the modal itself only appears once that check
+ * resolves with a newer version, well after the 15s startup delay.
+ */
+export const UpdatesEnabled: Story = {
+ decorators: [
+ (StoryComponent) => (
+
+
+
+ ),
+ ],
+};
diff --git a/frontend/editor/src/core/components/shared/UploadToServerModal.stories.tsx b/frontend/editor/src/core/components/shared/UploadToServerModal.stories.tsx
new file mode 100644
index 0000000000..50f1e9e0ad
--- /dev/null
+++ b/frontend/editor/src/core/components/shared/UploadToServerModal.stories.tsx
@@ -0,0 +1,62 @@
+import type { ReactElement } from "react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import UploadToServerModal from "@app/components/shared/UploadToServerModal";
+import { FileContextProvider } from "@app/contexts/FileContext";
+import type { StirlingFileStub } from "@app/types/fileContext";
+import type { FileId } from "@app/types/file";
+
+const mockFile: StirlingFileStub = {
+ id: "file-1" as FileId,
+ name: "quarterly-report.pdf",
+ type: "application/pdf",
+ size: 2_400_000,
+ lastModified: Date.now(),
+ isLeaf: true,
+ originalFileId: "file-1" as FileId,
+ versionNumber: 1,
+};
+
+const mockUploadedFile: StirlingFileStub = {
+ ...mockFile,
+ id: "file-2" as FileId,
+ originalFileId: "file-2" as FileId,
+ remoteStorageId: 2,
+};
+
+/**
+ * The modal dispatches updateStirlingFileStub on upload, so it needs
+ * FileContext (also supplies IndexedDBContext) mounted above it.
+ */
+function withProviders(Story: () => ReactElement) {
+ return (
+
+
+
+ );
+}
+
+const meta = {
+ title: "Shared/UploadToServerModal",
+ component: UploadToServerModal,
+ decorators: [withProviders],
+ args: {
+ onClose: () => {},
+ },
+} satisfies Meta;
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ opened: true,
+ file: mockFile,
+ },
+};
+
+export const AlreadyUploaded: Story = {
+ args: {
+ opened: true,
+ file: mockUploadedFile,
+ },
+};
diff --git a/frontend/editor/src/core/components/shared/UserSelector.stories.tsx b/frontend/editor/src/core/components/shared/UserSelector.stories.tsx
new file mode 100644
index 0000000000..760eb0f5ee
--- /dev/null
+++ b/frontend/editor/src/core/components/shared/UserSelector.stories.tsx
@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import UserSelector from "@app/components/shared/UserSelector";
+
+/**
+ * Fetches `/api/v1/user/users` on mount — unmocked here, so stories render
+ * whatever the fetch settles to (loader, then the "no users" empty state).
+ */
+const meta = {
+ title: "Shared/UserSelector",
+ component: UserSelector,
+ parameters: { layout: "padded" },
+ args: {
+ value: [],
+ onChange: () => {},
+ },
+} satisfies Meta;
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {};
+
+export const Disabled: Story = {
+ args: { disabled: true },
+};
+
+export const CustomPlaceholder: Story = {
+ args: { placeholder: "Add collaborators..." },
+};
diff --git a/frontend/editor/src/core/components/shared/ZipWarningModal.stories.tsx b/frontend/editor/src/core/components/shared/ZipWarningModal.stories.tsx
new file mode 100644
index 0000000000..4f43ee145c
--- /dev/null
+++ b/frontend/editor/src/core/components/shared/ZipWarningModal.stories.tsx
@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import ZipWarningModal from "@app/components/shared/ZipWarningModal";
+
+const meta: Meta = {
+ title: "Shared/ZipWarningModal",
+ component: ZipWarningModal,
+ parameters: { layout: "padded" },
+};
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ opened: true,
+ fileCount: 42,
+ zipFileName: "large-archive.zip",
+ onConfirm: () => {},
+ onCancel: () => {},
+ },
+};
+
+export const SingleFile: Story = {
+ args: {
+ opened: true,
+ fileCount: 1,
+ zipFileName: "small-archive.zip",
+ onConfirm: () => {},
+ onCancel: () => {},
+ },
+};
diff --git a/frontend/editor/src/core/components/shared/config/LoginRequiredBanner.stories.tsx b/frontend/editor/src/core/components/shared/config/LoginRequiredBanner.stories.tsx
new file mode 100644
index 0000000000..7544729824
--- /dev/null
+++ b/frontend/editor/src/core/components/shared/config/LoginRequiredBanner.stories.tsx
@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import LoginRequiredBanner from "@app/components/shared/config/LoginRequiredBanner";
+
+const meta = {
+ title: "Shared/Config/LoginRequiredBanner",
+ component: LoginRequiredBanner,
+ parameters: { layout: "padded" },
+} satisfies Meta;
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ show: true,
+ },
+};
+
+export const Hidden: Story = {
+ args: {
+ show: false,
+ },
+};
diff --git a/frontend/editor/src/core/components/shared/config/OverviewHeader.stories.tsx b/frontend/editor/src/core/components/shared/config/OverviewHeader.stories.tsx
new file mode 100644
index 0000000000..0dc2b09db3
--- /dev/null
+++ b/frontend/editor/src/core/components/shared/config/OverviewHeader.stories.tsx
@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { OverviewHeader } from "@app/components/shared/config/OverviewHeader";
+
+const meta = {
+ title: "Shared/Config/OverviewHeader",
+ component: OverviewHeader,
+ parameters: { layout: "padded" },
+} satisfies Meta;
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {};
diff --git a/frontend/editor/src/core/components/shared/config/PendingBadge.stories.tsx b/frontend/editor/src/core/components/shared/config/PendingBadge.stories.tsx
new file mode 100644
index 0000000000..85df5f4243
--- /dev/null
+++ b/frontend/editor/src/core/components/shared/config/PendingBadge.stories.tsx
@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import PendingBadge from "@app/components/shared/config/PendingBadge";
+
+const meta = {
+ title: "Shared/Config/PendingBadge",
+ component: PendingBadge,
+ parameters: { layout: "padded" },
+} satisfies Meta;
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ show: true,
+ },
+};
+
+export const Hidden: Story = {
+ args: {
+ show: false,
+ },
+};
+
+export const LargeSize: Story = {
+ args: {
+ show: true,
+ size: "lg",
+ },
+};
diff --git a/frontend/editor/src/core/components/shared/config/RestartConfirmationModal.stories.tsx b/frontend/editor/src/core/components/shared/config/RestartConfirmationModal.stories.tsx
new file mode 100644
index 0000000000..d9f250da6e
--- /dev/null
+++ b/frontend/editor/src/core/components/shared/config/RestartConfirmationModal.stories.tsx
@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import RestartConfirmationModal from "@app/components/shared/config/RestartConfirmationModal";
+
+const meta = {
+ title: "Shared/Config/RestartConfirmationModal",
+ component: RestartConfirmationModal,
+ parameters: { layout: "padded" },
+} satisfies Meta;
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ opened: true,
+ onClose: () => {},
+ onRestart: () => {},
+ },
+};
+
+export const Closed: Story = {
+ args: {
+ opened: false,
+ onClose: () => {},
+ onRestart: () => {},
+ },
+};
diff --git a/frontend/editor/src/core/components/shared/config/SettingsSearchBar.stories.tsx b/frontend/editor/src/core/components/shared/config/SettingsSearchBar.stories.tsx
new file mode 100644
index 0000000000..28d5a1c3e0
--- /dev/null
+++ b/frontend/editor/src/core/components/shared/config/SettingsSearchBar.stories.tsx
@@ -0,0 +1,62 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { SettingsSearchBar } from "@app/components/shared/config/SettingsSearchBar";
+import type { ConfigNavSection } from "@app/components/shared/config/configNavSections";
+
+const mockConfigNavSections: ConfigNavSection[] = [
+ {
+ title: "Preferences",
+ items: [
+ {
+ key: "general",
+ label: "General",
+ icon: "settings-rounded",
+ component: null,
+ },
+ {
+ key: "hotkeys",
+ label: "Keyboard Shortcuts",
+ icon: "keyboard-rounded",
+ component: null,
+ },
+ ],
+ },
+ {
+ title: "Workspace",
+ items: [
+ {
+ key: "people",
+ label: "People",
+ icon: "group-rounded",
+ component: null,
+ },
+ {
+ key: "teams",
+ label: "Teams",
+ icon: "groups-rounded",
+ component: null,
+ disabled: true,
+ },
+ ],
+ },
+];
+
+const meta = {
+ title: "Shared/Config/SettingsSearchBar",
+ component: SettingsSearchBar,
+ parameters: { layout: "padded" },
+ args: {
+ configNavSections: mockConfigNavSections,
+ onNavigate: async () => {},
+ isMobile: false,
+ },
+} satisfies Meta;
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {};
+
+export const Mobile: Story = {
+ args: {
+ isMobile: true,
+ },
+};
diff --git a/frontend/editor/src/core/components/shared/config/SettingsStickyFooter.stories.tsx b/frontend/editor/src/core/components/shared/config/SettingsStickyFooter.stories.tsx
new file mode 100644
index 0000000000..ae94dd7117
--- /dev/null
+++ b/frontend/editor/src/core/components/shared/config/SettingsStickyFooter.stories.tsx
@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { SettingsStickyFooter } from "@app/components/shared/config/SettingsStickyFooter";
+
+const meta = {
+ title: "Shared/Config/SettingsStickyFooter",
+ component: SettingsStickyFooter,
+ parameters: { layout: "padded" },
+} satisfies Meta;
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ isDirty: true,
+ saving: false,
+ loginEnabled: true,
+ onSave: () => {},
+ onDiscard: () => {},
+ },
+};
+
+export const Saving: Story = {
+ args: {
+ ...Default.args,
+ saving: true,
+ },
+};
+
+export const Hidden: Story = {
+ args: {
+ ...Default.args,
+ isDirty: false,
+ },
+};
diff --git a/frontend/editor/src/core/components/shared/config/configSections/GeneralSection.stories.tsx b/frontend/editor/src/core/components/shared/config/configSections/GeneralSection.stories.tsx
new file mode 100644
index 0000000000..08047afb17
--- /dev/null
+++ b/frontend/editor/src/core/components/shared/config/configSections/GeneralSection.stories.tsx
@@ -0,0 +1,71 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import GeneralSection from "@app/components/shared/config/configSections/GeneralSection";
+import { PreferencesProvider } from "@app/contexts/PreferencesContext";
+import { ThemeProvider } from "@app/components/shared/ThemeProvider";
+import { AppConfigProvider } from "@app/contexts/AppConfigContext";
+
+// Reads theme/tool-panel preferences via usePreferences()/useTheme() and server
+// config via useAppConfig() — none of which the Storybook preview's own provider
+// tree supplies (those are the portal contexts), so wrap here. AppConfigProvider
+// uses autoFetch off so stories render a fixed config instead of hitting the API.
+const meta = {
+ title: "Shared/Config/ConfigSections/GeneralSection",
+ component: GeneralSection,
+ parameters: { layout: "padded" },
+ decorators: [
+ (Story) => (
+
+
+
+
+
+ ),
+ ],
+} satisfies Meta;
+export default meta;
+type Story = StoryObj;
+
+/** Login enabled, no backend version known yet — Software Updates section and admin banner stay hidden. */
+export const Default: Story = {
+ decorators: [
+ (StoryComponent) => (
+
+
+
+ ),
+ ],
+};
+
+/** Backend version known — shows the Software Updates section with version info. */
+export const WithBackendVersion: Story = {
+ decorators: [
+ (StoryComponent) => (
+
+
+
+ ),
+ ],
+};
+
+/** Login disabled — the "For System Administrators" banner shows, prompting the env vars to enable it. */
+export const AdminBanner: Story = {
+ decorators: [
+ (StoryComponent) => (
+
+
+
+ ),
+ ],
+};
diff --git a/frontend/editor/src/core/components/shared/config/configSections/HelpSection.stories.tsx b/frontend/editor/src/core/components/shared/config/configSections/HelpSection.stories.tsx
new file mode 100644
index 0000000000..d7ad738458
--- /dev/null
+++ b/frontend/editor/src/core/components/shared/config/configSections/HelpSection.stories.tsx
@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import HelpSection from "@app/components/shared/config/configSections/HelpSection";
+
+const meta = {
+ title: "Shared/Config/ConfigSections/HelpSection",
+ component: HelpSection,
+ parameters: { layout: "padded" },
+ args: {
+ onRequestClose: () => {},
+ },
+} satisfies Meta;
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ isAdmin: false,
+ },
+};
+
+export const Admin: Story = {
+ args: {
+ isAdmin: true,
+ },
+};
diff --git a/frontend/editor/src/core/components/shared/config/configSections/HotkeysSection.stories.tsx b/frontend/editor/src/core/components/shared/config/configSections/HotkeysSection.stories.tsx
new file mode 100644
index 0000000000..94420ad5cd
--- /dev/null
+++ b/frontend/editor/src/core/components/shared/config/configSections/HotkeysSection.stories.tsx
@@ -0,0 +1,40 @@
+import type { ReactElement } from "react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import HotkeysSection from "@app/components/shared/config/configSections/HotkeysSection";
+import { PreferencesProvider } from "@app/contexts/PreferencesContext";
+import { ToolRegistryProvider } from "@app/contexts/ToolRegistryProvider";
+import { NavigationProvider } from "@app/contexts/NavigationContext";
+import { ToolWorkflowProvider } from "@app/contexts/ToolWorkflowContext";
+import { HotkeyProvider } from "@app/contexts/HotkeyContext";
+
+/**
+ * HotkeyContext reads the tool registry and selection state off
+ * ToolWorkflowContext, so both providers must wrap the story.
+ */
+function withProviders(Story: () => ReactElement) {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+const meta = {
+ title: "Shared/Config/ConfigSections/HotkeysSection",
+ component: HotkeysSection,
+ decorators: [withProviders],
+} satisfies Meta;
+export default meta;
+
+type Story = StoryObj;
+
+/** Full tool list with default keyboard shortcuts assigned. */
+export const Default: Story = {};
diff --git a/frontend/editor/src/core/components/shared/config/configSections/LegalSection.stories.tsx b/frontend/editor/src/core/components/shared/config/configSections/LegalSection.stories.tsx
new file mode 100644
index 0000000000..6b0c958725
--- /dev/null
+++ b/frontend/editor/src/core/components/shared/config/configSections/LegalSection.stories.tsx
@@ -0,0 +1,74 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import LegalSection from "@app/components/shared/config/configSections/LegalSection";
+import { AppConfigProvider } from "@app/contexts/AppConfigContext";
+
+// Reads legal document links and the analytics flag via useAppConfig() (the
+// preview's own provider tree doesn't supply this — that's the portal
+// context), so wrap here. AppConfigProvider uses autoFetch off so stories
+// render a fixed config instead of hitting the API.
+const meta = {
+ title: "Shared/Config/ConfigSections/LegalSection",
+ component: LegalSection,
+ parameters: { layout: "padded" },
+} satisfies Meta;
+export default meta;
+type Story = StoryObj;
+
+/** All optional legal documents configured, analytics disabled — no Cookie Preferences card. */
+export const Default: Story = {
+ decorators: [
+ (StoryComponent) => (
+
+
+
+ ),
+ ],
+};
+
+/** Analytics enabled — adds the Cookie Preferences card with its "Manage" button. */
+export const WithAnalyticsEnabled: Story = {
+ decorators: [
+ (StoryComponent) => (
+
+
+
+ ),
+ ],
+};
+
+/** No legal documents configured — only Privacy Policy and Terms show, using the stirling.com fallback links. */
+export const MinimalLinks: Story = {
+ decorators: [
+ (StoryComponent) => (
+
+
+
+ ),
+ ],
+};
diff --git a/frontend/editor/src/core/components/shared/config/configSections/Overview.stories.tsx b/frontend/editor/src/core/components/shared/config/configSections/Overview.stories.tsx
new file mode 100644
index 0000000000..9b04d088e9
--- /dev/null
+++ b/frontend/editor/src/core/components/shared/config/configSections/Overview.stories.tsx
@@ -0,0 +1,59 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import Overview from "@app/components/shared/config/configSections/Overview";
+import { AppConfigProvider } from "@app/contexts/AppConfigContext";
+
+// Reads config via useAppConfig() — no props. Wrap in AppConfigProvider with
+// autoFetch off so stories render a fixed config instead of hitting the API.
+const meta = {
+ title: "Shared/Config/Overview",
+ component: Overview,
+ parameters: { layout: "padded" },
+} satisfies Meta;
+export default meta;
+type Story = StoryObj;
+
+/** No config resolved yet (default context state) — shows the loading spinner. */
+export const Default: Story = {};
+
+/** Config loaded — renders the basic/security/system/integration sections. */
+export const Loaded: Story = {
+ decorators: [
+ (StoryComponent) => (
+
+
+
+ ),
+ ],
+};
+
+/** Config resolved but carrying a server-reported warning. */
+export const WithWarning: Story = {
+ decorators: [
+ (StoryComponent) => (
+
+
+
+ ),
+ ],
+};
diff --git a/frontend/editor/src/core/components/shared/config/configSections/ProviderCard.stories.tsx b/frontend/editor/src/core/components/shared/config/configSections/ProviderCard.stories.tsx
new file mode 100644
index 0000000000..0d7a44c38f
--- /dev/null
+++ b/frontend/editor/src/core/components/shared/config/configSections/ProviderCard.stories.tsx
@@ -0,0 +1,80 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import ProviderCard from "@app/components/shared/config/configSections/ProviderCard";
+import type { Provider } from "@app/components/shared/config/configSections/providerDefinitions";
+
+const mockProvider: Provider = {
+ id: "google",
+ name: "Google",
+ icon: "key-rounded",
+ type: "oauth2",
+ scope: "Sign-in authentication",
+ documentationUrl: "https://docs.stirlingpdf.com/Configuration/OAuth",
+ fields: [
+ {
+ key: "clientId",
+ type: "text",
+ label: "Client ID",
+ description: "The OAuth2 client ID from Google Cloud Console",
+ placeholder: "your-client-id.apps.googleusercontent.com",
+ },
+ {
+ key: "clientSecret",
+ type: "password",
+ label: "Client Secret",
+ description: "The OAuth2 client secret from Google Cloud Console",
+ },
+ {
+ key: "scopes",
+ type: "tags",
+ label: "Scopes",
+ description: "OAuth2 scopes to request",
+ defaultValue: ["email", "profile"],
+ },
+ {
+ key: "autoProvision",
+ type: "switch",
+ label: "Auto Provision Users",
+ description: "Automatically create accounts for new sign-ins",
+ defaultValue: false,
+ },
+ ],
+};
+
+const meta = {
+ title: "Shared/Config/ConfigSections/ProviderCard",
+ component: ProviderCard,
+ parameters: { layout: "padded" },
+} satisfies Meta;
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ provider: mockProvider,
+ isConfigured: false,
+ },
+};
+
+export const Configured: Story = {
+ args: {
+ provider: mockProvider,
+ isConfigured: true,
+ settings: {
+ clientId: "example-client-id.apps.googleusercontent.com",
+ scopes: ["email", "profile"],
+ autoProvision: true,
+ },
+ },
+};
+
+export const ReadOnly: Story = {
+ args: {
+ provider: mockProvider,
+ isConfigured: true,
+ readOnly: true,
+ settings: {
+ clientId: "example-client-id.apps.googleusercontent.com",
+ scopes: ["email", "profile"],
+ },
+ },
+};
diff --git a/frontend/editor/src/core/components/shared/config/configSections/ProviderCard.tsx b/frontend/editor/src/core/components/shared/config/configSections/ProviderCard.tsx
index 93999ce438..c24178635c 100644
--- a/frontend/editor/src/core/components/shared/config/configSections/ProviderCard.tsx
+++ b/frontend/editor/src/core/components/shared/config/configSections/ProviderCard.tsx
@@ -32,10 +32,16 @@ interface ProviderCardProps {
readOnly?: boolean;
}
+// Shared default so an omitted `settings` prop keeps the same identity across
+// renders. An inline `settings = {}` would allocate a new object every render,
+// and the sync effect below lists `settings` as a dependency — so it would
+// re-run and setState on every render, looping until React bails out.
+const NO_SETTINGS: Record = {};
+
export default function ProviderCard({
provider,
isConfigured,
- settings = {},
+ settings = NO_SETTINGS,
onSave,
onDisconnect,
onChange,
diff --git a/frontend/editor/src/core/components/shared/config/configSections/ThirdPartyLicensesSection.stories.tsx b/frontend/editor/src/core/components/shared/config/configSections/ThirdPartyLicensesSection.stories.tsx
new file mode 100644
index 0000000000..7d149b2b3b
--- /dev/null
+++ b/frontend/editor/src/core/components/shared/config/configSections/ThirdPartyLicensesSection.stories.tsx
@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import ThirdPartyLicensesSection, {
+ FrontendThirdPartyLicensesSection,
+} from "@app/components/shared/config/configSections/ThirdPartyLicensesSection";
+
+const meta = {
+ title: "Shared/Config/ConfigSections/ThirdPartyLicensesSection",
+ component: ThirdPartyLicensesSection,
+ parameters: { layout: "padded" },
+} satisfies Meta;
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {};
+
+export const Frontend: Story = {
+ render: () => ,
+};
diff --git a/frontend/editor/src/core/components/shared/filePreview/DocumentStack.stories.tsx b/frontend/editor/src/core/components/shared/filePreview/DocumentStack.stories.tsx
new file mode 100644
index 0000000000..f76bc47831
--- /dev/null
+++ b/frontend/editor/src/core/components/shared/filePreview/DocumentStack.stories.tsx
@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Box } from "@mantine/core";
+import DocumentStack from "@app/components/shared/filePreview/DocumentStack";
+
+const meta = {
+ title: "Shared/FilePreview/DocumentStack",
+ component: DocumentStack,
+ parameters: { layout: "padded" },
+ decorators: [
+ (Story) => (
+
+
+
+ ),
+ ],
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+const previewContent = (
+
+);
+
+export const SingleFile: Story = {
+ args: {
+ totalFiles: 1,
+ children: previewContent,
+ },
+};
+
+export const TwoFiles: Story = {
+ args: {
+ totalFiles: 2,
+ children: previewContent,
+ },
+};
+
+export const ManyFiles: Story = {
+ args: {
+ totalFiles: 5,
+ children: previewContent,
+ },
+};
diff --git a/frontend/editor/src/core/components/shared/filePreview/DocumentThumbnail.stories.tsx b/frontend/editor/src/core/components/shared/filePreview/DocumentThumbnail.stories.tsx
new file mode 100644
index 0000000000..d410c3af78
--- /dev/null
+++ b/frontend/editor/src/core/components/shared/filePreview/DocumentThumbnail.stories.tsx
@@ -0,0 +1,49 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import DocumentThumbnail from "@app/components/shared/filePreview/DocumentThumbnail";
+
+const mockFile = new File(["dummy content"], "sample-report.pdf", {
+ type: "application/pdf",
+});
+
+const meta = {
+ title: "Shared/FilePreview/DocumentThumbnail",
+ component: DocumentThumbnail,
+ parameters: { layout: "padded" },
+ args: {
+ file: mockFile,
+ },
+ decorators: [
+ (Story) => (
+
+
+
+ ),
+ ],
+} satisfies Meta;
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {};
+
+export const WithThumbnail: Story = {
+ args: {
+ thumbnail:
+ "data:image/svg+xml;utf8," +
+ encodeURIComponent(
+ '',
+ ),
+ },
+};
+
+export const Encrypted: Story = {
+ args: {
+ isEncrypted: true,
+ },
+};
+
+export const Loading: Story = {
+ args: {
+ isLoading: true,
+ },
+};
diff --git a/frontend/editor/src/core/components/shared/filePreview/HoverOverlay.stories.tsx b/frontend/editor/src/core/components/shared/filePreview/HoverOverlay.stories.tsx
new file mode 100644
index 0000000000..560d129843
--- /dev/null
+++ b/frontend/editor/src/core/components/shared/filePreview/HoverOverlay.stories.tsx
@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Box, Text } from "@mantine/core";
+import HoverOverlay from "@app/components/shared/filePreview/HoverOverlay";
+
+const meta = {
+ title: "Shared/FilePreview/HoverOverlay",
+ component: HoverOverlay,
+ parameters: { layout: "padded" },
+} satisfies Meta;
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ children: (
+
+