@open-mercato/documents 0.6.8-develop.7016.1.4ed7b1e49d

package/dist/modules/documents/backend/documents/[id]/EditorStatusPresence.js

@@ -0,0 +1,69 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "@open-mercato/ui/primitives/button";
+import { Avatar } from "@open-mercato/ui/primitives/avatar";
+import { SegmentedControl, SegmentedControlItem } from "@open-mercato/ui/primitives/segmented-control";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+import { cn } from "@open-mercato/shared/lib/utils";
+import { firstSafeDocumentsDisplayLabel } from "../../../lib/displayLabels.js";
+const STATUS_STYLES = {
+  connected: { pill: "border-status-success-border bg-status-success-bg text-status-success-text", dot: "bg-status-success-icon" },
+  connecting: { pill: "border-status-warning-border bg-status-warning-bg text-status-warning-text", dot: "bg-status-warning-icon" },
+  reconnecting: { pill: "border-status-warning-border bg-status-warning-bg text-status-warning-text", dot: "bg-status-warning-icon" },
+  offline: { pill: "border-status-error-border bg-status-error-bg text-status-error-text", dot: "bg-status-error-icon" }
+};
+function EditorStatusPresence({ status, users, counts, mode, canEdit, onModeChange, fallbackSave }) {
+  const t = useT();
+  const style = STATUS_STYLES[status];
+  const fallbackUserLabel = t("documents.users.unknown");
+  const safeUsers = users.flatMap((user) => {
+    const name = firstSafeDocumentsDisplayLabel(user.name, fallbackUserLabel);
+    return name ? [{ ...user, name }] : [];
+  });
+  const visible = safeUsers.slice(0, 4);
+  return /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-wrap items-center justify-between gap-2 sm:w-auto sm:justify-end", children: [
+    canEdit ? /* @__PURE__ */ jsxs(SegmentedControl, { size: "sm", value: mode, onValueChange: (value) => onModeChange(value), "aria-label": t("documents.editor.mode.label"), children: [
+      /* @__PURE__ */ jsx(SegmentedControlItem, { value: "edit", children: t("documents.editor.mode.edit") }),
+      /* @__PURE__ */ jsx(SegmentedControlItem, { value: "preview", children: t("documents.editor.mode.preview") })
+    ] }) : null,
+    visible.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "flex -space-x-2", "aria-label": t("documents.editor.realtime.presenceLabel"), children: [
+      visible.map((user) => /* @__PURE__ */ jsx(Avatar, { label: user.name, title: user.name, size: "xs", className: "border border-background ring-2 ring-background", style: { backgroundColor: user.color } }, user.key)),
+      safeUsers.length > visible.length ? /* @__PURE__ */ jsxs("span", { className: "inline-flex size-5 items-center justify-center rounded-full border border-background bg-muted text-xs font-semibold text-muted-foreground ring-2 ring-background", children: [
+        "+",
+        safeUsers.length - visible.length
+      ] }) : null
+    ] }) : null,
+    /* @__PURE__ */ jsx("span", { className: "order-last w-full text-center text-xs text-muted-foreground sm:order-none sm:w-auto sm:text-left", children: t("documents.editor.wordCount", { words: counts.words, characters: counts.characters }) }),
+    fallbackSave ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", role: "status", "aria-live": "polite", children: t(fallbackSave.status === "error" ? "documents.editor.error.save" : `documents.editor.status.${fallbackSave.status}`) }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          size: "sm",
+          variant: "outline",
+          disabled: fallbackSave.status === "saving" || fallbackSave.status === "saved",
+          onClick: fallbackSave.onSave,
+          children: t("documents.actions.save")
+        }
+      )
+    ] }) : null,
+    /* @__PURE__ */ jsxs(
+      "span",
+      {
+        className: cn("inline-flex items-center gap-2 rounded-full border px-2 py-1 text-xs font-medium", style.pill),
+        role: "status",
+        "aria-live": "polite",
+        "aria-atomic": "true",
+        children: [
+          /* @__PURE__ */ jsx("span", { className: cn("size-2 rounded-full", style.dot), "aria-hidden": "true" }),
+          t(`documents.editor.realtime.${status}`)
+        ]
+      }
+    )
+  ] });
+}
+export {
+  EditorStatusPresence
+};
+//# sourceMappingURL=EditorStatusPresence.js.map

package/dist/modules/documents/backend/documents/[id]/EditorStatusPresence.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/modules/documents/backend/documents/%5Bid%5D/EditorStatusPresence.tsx"],
+  "sourcesContent": ["\"use client\"\n\nimport { Button } from '@open-mercato/ui/primitives/button'\nimport { Avatar } from '@open-mercato/ui/primitives/avatar'\nimport { SegmentedControl, SegmentedControlItem } from '@open-mercato/ui/primitives/segmented-control'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { cn } from '@open-mercato/shared/lib/utils'\nimport type { ConnectionStatus, EditorMode, EditorWordCount, PresenceUser } from './editorTypes'\nimport type { FallbackSaveStatus } from './useFallbackContentPersistence'\nimport { firstSafeDocumentsDisplayLabel } from '../../../lib/displayLabels'\n\nconst STATUS_STYLES: Record<ConnectionStatus, { pill: string; dot: string }> = {\n  connected: { pill: 'border-status-success-border bg-status-success-bg text-status-success-text', dot: 'bg-status-success-icon' },\n  connecting: { pill: 'border-status-warning-border bg-status-warning-bg text-status-warning-text', dot: 'bg-status-warning-icon' },\n  reconnecting: { pill: 'border-status-warning-border bg-status-warning-bg text-status-warning-text', dot: 'bg-status-warning-icon' },\n  offline: { pill: 'border-status-error-border bg-status-error-bg text-status-error-text', dot: 'bg-status-error-icon' },\n}\n\nexport function EditorStatusPresence({ status, users, counts, mode, canEdit, onModeChange, fallbackSave }: {\n  status: ConnectionStatus\n  users: PresenceUser[]\n  counts: EditorWordCount\n  mode: EditorMode\n  canEdit: boolean\n  onModeChange: (mode: EditorMode) => void\n  fallbackSave?: { status: FallbackSaveStatus; onSave: () => void }\n}) {\n  const t = useT()\n  const style = STATUS_STYLES[status]\n  const fallbackUserLabel = t('documents.users.unknown')\n  const safeUsers = users.flatMap((user) => {\n    const name = firstSafeDocumentsDisplayLabel(user.name, fallbackUserLabel)\n    return name ? [{ ...user, name }] : []\n  })\n  const visible = safeUsers.slice(0, 4)\n  return (\n    <div className=\"flex w-full flex-wrap items-center justify-between gap-2 sm:w-auto sm:justify-end\">\n      {canEdit ? (\n        <SegmentedControl size=\"sm\" value={mode} onValueChange={(value) => onModeChange(value as EditorMode)} aria-label={t('documents.editor.mode.label')}>\n          <SegmentedControlItem value=\"edit\">{t('documents.editor.mode.edit')}</SegmentedControlItem>\n          <SegmentedControlItem value=\"preview\">{t('documents.editor.mode.preview')}</SegmentedControlItem>\n        </SegmentedControl>\n      ) : null}\n      {visible.length > 0 ? (\n        <div className=\"flex -space-x-2\" aria-label={t('documents.editor.realtime.presenceLabel')}>\n          {visible.map((user) => <Avatar key={user.key} label={user.name} title={user.name} size=\"xs\" className=\"border border-background ring-2 ring-background\" style={{ backgroundColor: user.color }} />)}\n          {safeUsers.length > visible.length ? <span className=\"inline-flex size-5 items-center justify-center rounded-full border border-background bg-muted text-xs font-semibold text-muted-foreground ring-2 ring-background\">+{safeUsers.length - visible.length}</span> : null}\n        </div>\n      ) : null}\n      <span className=\"order-last w-full text-center text-xs text-muted-foreground sm:order-none sm:w-auto sm:text-left\">{t('documents.editor.wordCount', { words: counts.words, characters: counts.characters })}</span>\n      {fallbackSave ? (\n        <div className=\"flex items-center gap-2\">\n          <span className=\"text-xs text-muted-foreground\" role=\"status\" aria-live=\"polite\">\n            {t(fallbackSave.status === 'error' ? 'documents.editor.error.save' : `documents.editor.status.${fallbackSave.status}`)}\n          </span>\n          <Button\n            type=\"button\"\n            size=\"sm\"\n            variant=\"outline\"\n            disabled={fallbackSave.status === 'saving' || fallbackSave.status === 'saved'}\n            onClick={fallbackSave.onSave}\n          >\n            {t('documents.actions.save')}\n          </Button>\n        </div>\n      ) : null}\n      <span\n        className={cn('inline-flex items-center gap-2 rounded-full border px-2 py-1 text-xs font-medium', style.pill)}\n        role=\"status\"\n        aria-live=\"polite\"\n        aria-atomic=\"true\"\n      >\n        <span className={cn('size-2 rounded-full', style.dot)} aria-hidden=\"true\" />\n        {t(`documents.editor.realtime.${status}`)}\n      </span>\n    </div>\n  )\n}\n"],
+  "mappings": ";AAsCQ,SACE,KADF;AApCR,SAAS,cAAc;AACvB,SAAS,cAAc;AACvB,SAAS,kBAAkB,4BAA4B;AACvD,SAAS,YAAY;AACrB,SAAS,UAAU;AAGnB,SAAS,sCAAsC;AAE/C,MAAM,gBAAyE;AAAA,EAC7E,WAAW,EAAE,MAAM,8EAA8E,KAAK,yBAAyB;AAAA,EAC/H,YAAY,EAAE,MAAM,8EAA8E,KAAK,yBAAyB;AAAA,EAChI,cAAc,EAAE,MAAM,8EAA8E,KAAK,yBAAyB;AAAA,EAClI,SAAS,EAAE,MAAM,wEAAwE,KAAK,uBAAuB;AACvH;AAEO,SAAS,qBAAqB,EAAE,QAAQ,OAAO,QAAQ,MAAM,SAAS,cAAc,aAAa,GAQrG;AACD,QAAM,IAAI,KAAK;AACf,QAAM,QAAQ,cAAc,MAAM;AAClC,QAAM,oBAAoB,EAAE,yBAAyB;AACrD,QAAM,YAAY,MAAM,QAAQ,CAAC,SAAS;AACxC,UAAM,OAAO,+BAA+B,KAAK,MAAM,iBAAiB;AACxE,WAAO,OAAO,CAAC,EAAE,GAAG,MAAM,KAAK,CAAC,IAAI,CAAC;AAAA,EACvC,CAAC;AACD,QAAM,UAAU,UAAU,MAAM,GAAG,CAAC;AACpC,SACE,qBAAC,SAAI,WAAU,qFACZ;AAAA,cACC,qBAAC,oBAAiB,MAAK,MAAK,OAAO,MAAM,eAAe,CAAC,UAAU,aAAa,KAAmB,GAAG,cAAY,EAAE,6BAA6B,GAC/I;AAAA,0BAAC,wBAAqB,OAAM,QAAQ,YAAE,4BAA4B,GAAE;AAAA,MACpE,oBAAC,wBAAqB,OAAM,WAAW,YAAE,+BAA+B,GAAE;AAAA,OAC5E,IACE;AAAA,IACH,QAAQ,SAAS,IAChB,qBAAC,SAAI,WAAU,mBAAkB,cAAY,EAAE,yCAAyC,GACrF;AAAA,cAAQ,IAAI,CAAC,SAAS,oBAAC,UAAsB,OAAO,KAAK,MAAM,OAAO,KAAK,MAAM,MAAK,MAAK,WAAU,mDAAkD,OAAO,EAAE,iBAAiB,KAAK,MAAM,KAAzJ,KAAK,GAAuJ,CAAE;AAAA,MACjM,UAAU,SAAS,QAAQ,SAAS,qBAAC,UAAK,WAAU,oKAAmK;AAAA;AAAA,QAAE,UAAU,SAAS,QAAQ;AAAA,SAAO,IAAU;AAAA,OACxQ,IACE;AAAA,IACJ,oBAAC,UAAK,WAAU,oGAAoG,YAAE,8BAA8B,EAAE,OAAO,OAAO,OAAO,YAAY,OAAO,WAAW,CAAC,GAAE;AAAA,IAC3M,eACC,qBAAC,SAAI,WAAU,2BACb;AAAA,0BAAC,UAAK,WAAU,iCAAgC,MAAK,UAAS,aAAU,UACrE,YAAE,aAAa,WAAW,UAAU,gCAAgC,2BAA2B,aAAa,MAAM,EAAE,GACvH;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,MAAK;AAAA,UACL,SAAQ;AAAA,UACR,UAAU,aAAa,WAAW,YAAY,aAAa,WAAW;AAAA,UACtE,SAAS,aAAa;AAAA,UAErB,YAAE,wBAAwB;AAAA;AAAA,MAC7B;AAAA,OACF,IACE;AAAA,IACJ;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,GAAG,oFAAoF,MAAM,IAAI;AAAA,QAC5G,MAAK;AAAA,QACL,aAAU;AAAA,QACV,eAAY;AAAA,QAEZ;AAAA,8BAAC,UAAK,WAAW,GAAG,uBAAuB,MAAM,GAAG,GAAG,eAAY,QAAO;AAAA,UACzE,EAAE,6BAA6B,MAAM,EAAE;AAAA;AAAA;AAAA,IAC1C;AAAA,KACF;AAEJ;",
+  "names": []
+}

package/dist/modules/documents/backend/documents/[id]/EditorToolbar.js

@@ -0,0 +1,151 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEditorState } from "@tiptap/react";
+import {
+  AlignCenter,
+  AlignJustify,
+  AlignLeft,
+  AlignRight,
+  Bold,
+  Code2,
+  Database,
+  Heading1,
+  Heading2,
+  Heading3,
+  ImagePlus,
+  Italic,
+  Link2,
+  List,
+  ListOrdered,
+  ListTodo,
+  Loader2,
+  PanelLeft,
+  Pilcrow,
+  Redo2,
+  Strikethrough,
+  Table2,
+  Underline,
+  Undo2
+} from "lucide-react";
+import { IconButton } from "@open-mercato/ui/primitives/icon-button";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+import { EditorColorTools } from "./EditorColorTools.js";
+const EMPTY_EDITOR_STATE = {
+  canUndo: false,
+  canRedo: false,
+  paragraph: false,
+  heading1: false,
+  heading2: false,
+  heading3: false,
+  alignLeft: false,
+  alignCenter: false,
+  alignRight: false,
+  alignJustify: false,
+  bold: false,
+  italic: false,
+  underline: false,
+  strike: false,
+  bulletList: false,
+  orderedList: false,
+  taskList: false,
+  link: false,
+  codeBlock: false
+};
+function ToolbarButtons({ actions }) {
+  return /* @__PURE__ */ jsx(Fragment, { children: actions.map((action) => /* @__PURE__ */ jsx(IconButton, { className: "shrink-0", type: "button", variant: action.active ? "outline" : "ghost", "aria-label": action.label, "aria-pressed": action.active ?? false, title: action.label, disabled: action.disabled, onClick: action.run, children: action.icon }, action.key)) });
+}
+function EditorToolbar({ editor, disabled, outlineOpen, uploading, onToggleOutline, onOpenEntityPicker, onOpenLink, onImage }) {
+  const t = useT();
+  const editorState = useEditorState({
+    editor,
+    selector: ({ editor: current }) => current ? {
+      canUndo: current.can().undo(),
+      canRedo: current.can().redo(),
+      paragraph: current.isActive("paragraph"),
+      heading1: current.isActive("heading", { level: 1 }),
+      heading2: current.isActive("heading", { level: 2 }),
+      heading3: current.isActive("heading", { level: 3 }),
+      alignLeft: current.isActive({ textAlign: "left" }),
+      alignCenter: current.isActive({ textAlign: "center" }),
+      alignRight: current.isActive({ textAlign: "right" }),
+      alignJustify: current.isActive({ textAlign: "justify" }),
+      bold: current.isActive("bold"),
+      italic: current.isActive("italic"),
+      underline: current.isActive("underline"),
+      strike: current.isActive("strike"),
+      bulletList: current.isActive("bulletList"),
+      orderedList: current.isActive("orderedList"),
+      taskList: current.isActive("taskList"),
+      link: current.isActive("link"),
+      codeBlock: current.isActive("codeBlock")
+    } : EMPTY_EDITOR_STATE
+  }) ?? EMPTY_EDITOR_STATE;
+  const command = (run) => () => {
+    if (editor && !disabled) run(editor);
+  };
+  const actions = [
+    { key: "undo", label: t("documents.editor.toolbar.undo"), icon: /* @__PURE__ */ jsx(Undo2, {}), disabled: disabled || !editorState.canUndo, run: command((current) => {
+      current.chain().focus().undo().run();
+    }) },
+    { key: "redo", label: t("documents.editor.toolbar.redo"), icon: /* @__PURE__ */ jsx(Redo2, {}), disabled: disabled || !editorState.canRedo, run: command((current) => {
+      current.chain().focus().redo().run();
+    }) },
+    { key: "outline", label: t("documents.editor.toolbar.outline"), icon: /* @__PURE__ */ jsx(PanelLeft, {}), active: outlineOpen, disabled: !editor, run: onToggleOutline },
+    { key: "paragraph", label: t("documents.editor.toolbar.paragraph"), icon: /* @__PURE__ */ jsx(Pilcrow, {}), active: editorState.paragraph, disabled, run: command((current) => {
+      current.chain().focus().setParagraph().run();
+    }) },
+    ...[1, 2, 3].map((level) => ({ key: `h${level}`, label: t(`documents.editor.toolbar.heading${level}`), icon: level === 1 ? /* @__PURE__ */ jsx(Heading1, {}) : level === 2 ? /* @__PURE__ */ jsx(Heading2, {}) : /* @__PURE__ */ jsx(Heading3, {}), active: editorState[`heading${level}`], disabled, run: command((current) => {
+      current.chain().focus().toggleHeading({ level }).run();
+    }) })),
+    { key: "left", label: t("documents.editor.toolbar.alignLeft"), icon: /* @__PURE__ */ jsx(AlignLeft, {}), active: editorState.alignLeft, disabled, run: command((current) => {
+      current.chain().focus().setTextAlign("left").run();
+    }) },
+    { key: "center", label: t("documents.editor.toolbar.alignCenter"), icon: /* @__PURE__ */ jsx(AlignCenter, {}), active: editorState.alignCenter, disabled, run: command((current) => {
+      current.chain().focus().setTextAlign("center").run();
+    }) },
+    { key: "right", label: t("documents.editor.toolbar.alignRight"), icon: /* @__PURE__ */ jsx(AlignRight, {}), active: editorState.alignRight, disabled, run: command((current) => {
+      current.chain().focus().setTextAlign("right").run();
+    }) },
+    { key: "justify", label: t("documents.editor.toolbar.alignJustify"), icon: /* @__PURE__ */ jsx(AlignJustify, {}), active: editorState.alignJustify, disabled, run: command((current) => {
+      current.chain().focus().setTextAlign("justify").run();
+    }) },
+    { key: "bold", label: t("documents.editor.toolbar.bold"), icon: /* @__PURE__ */ jsx(Bold, {}), active: editorState.bold, disabled, run: command((current) => {
+      current.chain().focus().toggleBold().run();
+    }) },
+    { key: "italic", label: t("documents.editor.toolbar.italic"), icon: /* @__PURE__ */ jsx(Italic, {}), active: editorState.italic, disabled, run: command((current) => {
+      current.chain().focus().toggleItalic().run();
+    }) },
+    { key: "underline", label: t("documents.editor.toolbar.underline"), icon: /* @__PURE__ */ jsx(Underline, {}), active: editorState.underline, disabled, run: command((current) => {
+      current.chain().focus().toggleMark("underline").run();
+    }) },
+    { key: "strike", label: t("documents.editor.toolbar.strike"), icon: /* @__PURE__ */ jsx(Strikethrough, {}), active: editorState.strike, disabled, run: command((current) => {
+      current.chain().focus().toggleStrike().run();
+    }) },
+    { key: "bullet", label: t("documents.editor.toolbar.bulletList"), icon: /* @__PURE__ */ jsx(List, {}), active: editorState.bulletList, disabled, run: command((current) => {
+      current.chain().focus().toggleBulletList().run();
+    }) },
+    { key: "ordered", label: t("documents.editor.toolbar.orderedList"), icon: /* @__PURE__ */ jsx(ListOrdered, {}), active: editorState.orderedList, disabled, run: command((current) => {
+      current.chain().focus().toggleOrderedList().run();
+    }) },
+    { key: "tasks", label: t("documents.editor.toolbar.taskList"), icon: /* @__PURE__ */ jsx(ListTodo, {}), active: editorState.taskList, disabled, run: command((current) => {
+      current.chain().focus().toggleTaskList().run();
+    }) },
+    { key: "table", label: t("documents.editor.toolbar.table"), icon: /* @__PURE__ */ jsx(Table2, {}), disabled, run: command((current) => {
+      current.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run();
+    }) },
+    { key: "record", label: t("documents.editor.toolbar.insertRecord"), icon: /* @__PURE__ */ jsx(Database, {}), disabled, run: onOpenEntityPicker },
+    { key: "link", label: t("documents.editor.toolbar.link"), icon: /* @__PURE__ */ jsx(Link2, {}), active: editorState.link, disabled, run: onOpenLink },
+    { key: "image", label: t("documents.editor.toolbar.image"), icon: uploading ? /* @__PURE__ */ jsx(Loader2, { className: "animate-spin" }) : /* @__PURE__ */ jsx(ImagePlus, {}), disabled: disabled || uploading, run: onImage },
+    { key: "code", label: t("documents.editor.toolbar.codeBlock"), icon: /* @__PURE__ */ jsx(Code2, {}), active: editorState.codeBlock, disabled, run: command((current) => {
+      current.chain().focus().toggleCodeBlock().run();
+    }) }
+  ];
+  return /* @__PURE__ */ jsxs("div", { className: "flex max-w-full flex-nowrap items-center gap-1 overflow-x-auto border-b border-border px-2 py-2 overscroll-x-contain sm:px-3", role: "toolbar", "aria-label": t("documents.editor.toolbar.label"), children: [
+    /* @__PURE__ */ jsx(ToolbarButtons, { actions }),
+    /* @__PURE__ */ jsx(EditorColorTools, { editor, disabled })
+  ] });
+}
+export {
+  EditorToolbar
+};
+//# sourceMappingURL=EditorToolbar.js.map

package/dist/modules/documents/backend/documents/[id]/EditorToolbar.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/modules/documents/backend/documents/%5Bid%5D/EditorToolbar.tsx"],
+  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport type { Editor } from '@tiptap/core'\nimport { useEditorState } from '@tiptap/react'\nimport {\n  AlignCenter, AlignJustify, AlignLeft, AlignRight, Bold, Code2, Database, Heading1, Heading2,\n  Heading3, ImagePlus, Italic, Link2, List, ListOrdered, ListTodo, Loader2, PanelLeft, Pilcrow,\n  Redo2, Strikethrough, Table2, Underline, Undo2,\n} from 'lucide-react'\nimport { IconButton } from '@open-mercato/ui/primitives/icon-button'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { EditorColorTools } from './EditorColorTools'\n\ntype ToolbarAction = { key: string; label: string; icon: React.ReactNode; active?: boolean; disabled?: boolean; run: () => void }\n\nconst EMPTY_EDITOR_STATE = {\n  canUndo: false,\n  canRedo: false,\n  paragraph: false,\n  heading1: false,\n  heading2: false,\n  heading3: false,\n  alignLeft: false,\n  alignCenter: false,\n  alignRight: false,\n  alignJustify: false,\n  bold: false,\n  italic: false,\n  underline: false,\n  strike: false,\n  bulletList: false,\n  orderedList: false,\n  taskList: false,\n  link: false,\n  codeBlock: false,\n}\n\nfunction ToolbarButtons({ actions }: { actions: ToolbarAction[] }) {\n  return <>{actions.map((action) => <IconButton className=\"shrink-0\" key={action.key} type=\"button\" variant={action.active ? 'outline' : 'ghost'} aria-label={action.label} aria-pressed={action.active ?? false} title={action.label} disabled={action.disabled} onClick={action.run}>{action.icon}</IconButton>)}</>\n}\n\nexport function EditorToolbar({ editor, disabled, outlineOpen, uploading, onToggleOutline, onOpenEntityPicker, onOpenLink, onImage }: {\n  editor: Editor | null\n  disabled: boolean\n  outlineOpen: boolean\n  uploading: boolean\n  onToggleOutline: () => void\n  onOpenEntityPicker: () => void\n  onOpenLink: () => void\n  onImage: () => void\n}) {\n  const t = useT()\n  const editorState = useEditorState({\n    editor,\n    selector: ({ editor: current }) => current ? {\n      canUndo: current.can().undo(),\n      canRedo: current.can().redo(),\n      paragraph: current.isActive('paragraph'),\n      heading1: current.isActive('heading', { level: 1 }),\n      heading2: current.isActive('heading', { level: 2 }),\n      heading3: current.isActive('heading', { level: 3 }),\n      alignLeft: current.isActive({ textAlign: 'left' }),\n      alignCenter: current.isActive({ textAlign: 'center' }),\n      alignRight: current.isActive({ textAlign: 'right' }),\n      alignJustify: current.isActive({ textAlign: 'justify' }),\n      bold: current.isActive('bold'),\n      italic: current.isActive('italic'),\n      underline: current.isActive('underline'),\n      strike: current.isActive('strike'),\n      bulletList: current.isActive('bulletList'),\n      orderedList: current.isActive('orderedList'),\n      taskList: current.isActive('taskList'),\n      link: current.isActive('link'),\n      codeBlock: current.isActive('codeBlock'),\n    } : EMPTY_EDITOR_STATE,\n  }) ?? EMPTY_EDITOR_STATE\n  const command = (run: (editor: Editor) => void) => () => { if (editor && !disabled) run(editor) }\n  const actions: ToolbarAction[] = [\n    { key: 'undo', label: t('documents.editor.toolbar.undo'), icon: <Undo2 />, disabled: disabled || !editorState.canUndo, run: command((current) => { current.chain().focus().undo().run() }) },\n    { key: 'redo', label: t('documents.editor.toolbar.redo'), icon: <Redo2 />, disabled: disabled || !editorState.canRedo, run: command((current) => { current.chain().focus().redo().run() }) },\n    { key: 'outline', label: t('documents.editor.toolbar.outline'), icon: <PanelLeft />, active: outlineOpen, disabled: !editor, run: onToggleOutline },\n    { key: 'paragraph', label: t('documents.editor.toolbar.paragraph'), icon: <Pilcrow />, active: editorState.paragraph, disabled, run: command((current) => { current.chain().focus().setParagraph().run() }) },\n    ...([1, 2, 3] as const).map((level) => ({ key: `h${level}`, label: t(`documents.editor.toolbar.heading${level}`), icon: level === 1 ? <Heading1 /> : level === 2 ? <Heading2 /> : <Heading3 />, active: editorState[`heading${level}`], disabled, run: command((current) => { current.chain().focus().toggleHeading({ level }).run() }) })),\n    { key: 'left', label: t('documents.editor.toolbar.alignLeft'), icon: <AlignLeft />, active: editorState.alignLeft, disabled, run: command((current) => { current.chain().focus().setTextAlign('left').run() }) },\n    { key: 'center', label: t('documents.editor.toolbar.alignCenter'), icon: <AlignCenter />, active: editorState.alignCenter, disabled, run: command((current) => { current.chain().focus().setTextAlign('center').run() }) },\n    { key: 'right', label: t('documents.editor.toolbar.alignRight'), icon: <AlignRight />, active: editorState.alignRight, disabled, run: command((current) => { current.chain().focus().setTextAlign('right').run() }) },\n    { key: 'justify', label: t('documents.editor.toolbar.alignJustify'), icon: <AlignJustify />, active: editorState.alignJustify, disabled, run: command((current) => { current.chain().focus().setTextAlign('justify').run() }) },\n    { key: 'bold', label: t('documents.editor.toolbar.bold'), icon: <Bold />, active: editorState.bold, disabled, run: command((current) => { current.chain().focus().toggleBold().run() }) },\n    { key: 'italic', label: t('documents.editor.toolbar.italic'), icon: <Italic />, active: editorState.italic, disabled, run: command((current) => { current.chain().focus().toggleItalic().run() }) },\n    { key: 'underline', label: t('documents.editor.toolbar.underline'), icon: <Underline />, active: editorState.underline, disabled, run: command((current) => { current.chain().focus().toggleMark('underline').run() }) },\n    { key: 'strike', label: t('documents.editor.toolbar.strike'), icon: <Strikethrough />, active: editorState.strike, disabled, run: command((current) => { current.chain().focus().toggleStrike().run() }) },\n    { key: 'bullet', label: t('documents.editor.toolbar.bulletList'), icon: <List />, active: editorState.bulletList, disabled, run: command((current) => { current.chain().focus().toggleBulletList().run() }) },\n    { key: 'ordered', label: t('documents.editor.toolbar.orderedList'), icon: <ListOrdered />, active: editorState.orderedList, disabled, run: command((current) => { current.chain().focus().toggleOrderedList().run() }) },\n    { key: 'tasks', label: t('documents.editor.toolbar.taskList'), icon: <ListTodo />, active: editorState.taskList, disabled, run: command((current) => { current.chain().focus().toggleTaskList().run() }) },\n    { key: 'table', label: t('documents.editor.toolbar.table'), icon: <Table2 />, disabled, run: command((current) => { current.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run() }) },\n    { key: 'record', label: t('documents.editor.toolbar.insertRecord'), icon: <Database />, disabled, run: onOpenEntityPicker },\n    { key: 'link', label: t('documents.editor.toolbar.link'), icon: <Link2 />, active: editorState.link, disabled, run: onOpenLink },\n    { key: 'image', label: t('documents.editor.toolbar.image'), icon: uploading ? <Loader2 className=\"animate-spin\" /> : <ImagePlus />, disabled: disabled || uploading, run: onImage },\n    { key: 'code', label: t('documents.editor.toolbar.codeBlock'), icon: <Code2 />, active: editorState.codeBlock, disabled, run: command((current) => { current.chain().focus().toggleCodeBlock().run() }) },\n  ]\n  return (\n    <div className=\"flex max-w-full flex-nowrap items-center gap-1 overflow-x-auto border-b border-border px-2 py-2 overscroll-x-contain sm:px-3\" role=\"toolbar\" aria-label={t('documents.editor.toolbar.label')}>\n      <ToolbarButtons actions={actions} />\n      <EditorColorTools editor={editor} disabled={disabled} />\n    </div>\n  )\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/modules/documents/backend/documents/[id]/ExportMenu.js

@@ -0,0 +1,121 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { ChevronDown, FileDown, FileText } from "lucide-react";
+import { flash } from "@open-mercato/ui/backend/FlashMessages";
+import { apiCallOrThrow } from "@open-mercato/ui/backend/utils/apiCall";
+import { Button } from "@open-mercato/ui/primitives/button";
+import { Popover, PopoverClose, PopoverContent, PopoverTrigger } from "@open-mercato/ui/primitives/popover";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+function filenameFromDisposition(disposition, format) {
+  const encoded = disposition?.match(/filename\*=UTF-8''([^;]+)/i)?.[1];
+  if (encoded) {
+    try {
+      return decodeURIComponent(encoded);
+    } catch {
+    }
+  }
+  const quoted = disposition?.match(/filename="([^"]+)"/i)?.[1];
+  return quoted || `document.${format}`;
+}
+function buildDocxPaginationSnapshot(editor) {
+  if (!editor || editor.isDestroyed) return null;
+  const root = editor.view.dom.cloneNode(true);
+  const pageBreaks = root.querySelectorAll("[data-document-page-break]");
+  if (pageBreaks.length === 0) return null;
+  const pageBreakMarker = `OM_DOCX_PAGE_BREAK_${crypto.randomUUID()}`;
+  pageBreaks.forEach((pageBreak) => {
+    const marker = document.createElement("p");
+    marker.textContent = pageBreakMarker;
+    pageBreak.replaceWith(marker);
+  });
+  root.querySelectorAll(".collaboration-carets__caret, .ProseMirror-yjs-selection").forEach((node) => node.remove());
+  return { contentHtml: root.innerHTML, pageBreakMarker };
+}
+async function downloadDocumentExport(documentId, format, snapshot, errorMessage) {
+  const hasSnapshot = format === "docx" && snapshot !== null;
+  const call = await apiCallOrThrow(
+    `/api/documents/${encodeURIComponent(documentId)}/export?format=${format}`,
+    {
+      method: hasSnapshot ? "POST" : "GET",
+      credentials: "same-origin",
+      headers: {
+        "x-om-forbidden-redirect": "0",
+        "x-om-unauthorized-redirect": "0",
+        ...hasSnapshot ? { "content-type": "application/json" } : {}
+      },
+      ...hasSnapshot ? { body: JSON.stringify(snapshot) } : {}
+    },
+    { parse: (response2) => response2.blob(), errorMessage }
+  );
+  const response = call.response;
+  const expectedContentType = format === "docx" ? "application/vnd.openxmlformats-officedocument.wordprocessingml.document" : "application/pdf";
+  const contentType = response.headers.get("content-type")?.split(";", 1)[0]?.trim().toLowerCase();
+  if (contentType !== expectedContentType || !call.result) throw new Error(errorMessage);
+  const blob = call.result;
+  const objectUrl = URL.createObjectURL(blob);
+  try {
+    const link = document.createElement("a");
+    link.href = objectUrl;
+    link.download = filenameFromDisposition(response.headers.get("content-disposition"), format);
+    document.body.append(link);
+    link.click();
+    link.remove();
+  } finally {
+    URL.revokeObjectURL(objectUrl);
+  }
+}
+function ExportMenu({ documentId, editor }) {
+  const t = useT();
+  const label = t("documents.actions.export");
+  const download = React.useCallback((format) => {
+    const snapshot = format === "docx" ? buildDocxPaginationSnapshot(editor) : null;
+    void downloadDocumentExport(documentId, format, snapshot, t("documents.export.error")).catch((error) => {
+      flash(error instanceof Error ? error.message : t("documents.export.runtimeUnavailable"), "error");
+    });
+  }, [documentId, editor, t]);
+  const items = React.useMemo(() => [
+    {
+      id: "docx",
+      label: t("documents.export.docx"),
+      icon: FileText,
+      onSelect: () => download("docx")
+    },
+    {
+      id: "pdf",
+      label: t("documents.export.pdf"),
+      icon: FileDown,
+      onSelect: () => download("pdf")
+    }
+  ], [download, t]);
+  return /* @__PURE__ */ jsxs(Popover, { children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { type: "button", variant: "outline", size: "sm", "aria-label": label, "aria-haspopup": "menu", children: [
+      label,
+      /* @__PURE__ */ jsx(ChevronDown, { className: "size-3.5", "aria-hidden": "true" })
+    ] }) }),
+    /* @__PURE__ */ jsx(PopoverContent, { role: "menu", align: "end", className: "w-52 min-w-52 p-1", children: items.map((item) => {
+      const Icon = item.icon;
+      return /* @__PURE__ */ jsx(PopoverClose, { asChild: true, children: /* @__PURE__ */ jsxs(
+        Button,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "sm",
+          role: "menuitem",
+          className: "h-auto min-h-8 w-full justify-start py-1.5 text-left leading-snug whitespace-normal",
+          onClick: item.onSelect,
+          children: [
+            /* @__PURE__ */ jsx(Icon, { className: "size-4", "aria-hidden": "true" }),
+            item.label
+          ]
+        }
+      ) }, item.id);
+    }) })
+  ] });
+}
+export {
+  ExportMenu,
+  buildDocxPaginationSnapshot,
+  downloadDocumentExport
+};
+//# sourceMappingURL=ExportMenu.js.map

package/dist/modules/documents/backend/documents/[id]/ExportMenu.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/modules/documents/backend/documents/%5Bid%5D/ExportMenu.tsx"],
+  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport { ChevronDown, FileDown, FileText } from 'lucide-react'\nimport type { Editor } from '@tiptap/core'\nimport { flash } from '@open-mercato/ui/backend/FlashMessages'\nimport { apiCallOrThrow } from '@open-mercato/ui/backend/utils/apiCall'\nimport { Button } from '@open-mercato/ui/primitives/button'\nimport { Popover, PopoverClose, PopoverContent, PopoverTrigger } from '@open-mercato/ui/primitives/popover'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\n\ntype ExportMenuProps = {\n  documentId: string\n  editor: Editor | null\n}\n\ntype ExportFormat = 'docx' | 'pdf'\n\nfunction filenameFromDisposition(disposition: string | null, format: ExportFormat): string {\n  const encoded = disposition?.match(/filename\\*=UTF-8''([^;]+)/i)?.[1]\n  if (encoded) {\n    try { return decodeURIComponent(encoded) } catch { /* use the safe fallback */ }\n  }\n  const quoted = disposition?.match(/filename=\"([^\"]+)\"/i)?.[1]\n  return quoted || `document.${format}`\n}\n\nexport type DocxPaginationSnapshot = { contentHtml: string; pageBreakMarker: string }\n\nexport function buildDocxPaginationSnapshot(editor: Editor | null): DocxPaginationSnapshot | null {\n  if (!editor || editor.isDestroyed) return null\n  const root = editor.view.dom.cloneNode(true) as HTMLElement\n  const pageBreaks = root.querySelectorAll<HTMLElement>('[data-document-page-break]')\n  if (pageBreaks.length === 0) return null\n  const pageBreakMarker = `OM_DOCX_PAGE_BREAK_${crypto.randomUUID()}`\n  pageBreaks.forEach((pageBreak) => {\n    const marker = document.createElement('p')\n    marker.textContent = pageBreakMarker\n    pageBreak.replaceWith(marker)\n  })\n  root.querySelectorAll('.collaboration-carets__caret, .ProseMirror-yjs-selection')\n    .forEach((node) => node.remove())\n  return { contentHtml: root.innerHTML, pageBreakMarker }\n}\n\nexport async function downloadDocumentExport(\n  documentId: string,\n  format: ExportFormat,\n  snapshot: DocxPaginationSnapshot | null,\n  errorMessage: string,\n): Promise<void> {\n  const hasSnapshot = format === 'docx' && snapshot !== null\n  // Intentionally outside useGuardedMutation: export is read-shaped (no record is\n  // mutated); the POST variant only carries the client pagination snapshot payload.\n  const call = await apiCallOrThrow<Blob>(\n    `/api/documents/${encodeURIComponent(documentId)}/export?format=${format}`,\n    {\n      method: hasSnapshot ? 'POST' : 'GET',\n      credentials: 'same-origin',\n      headers: {\n        'x-om-forbidden-redirect': '0',\n        'x-om-unauthorized-redirect': '0',\n        ...(hasSnapshot ? { 'content-type': 'application/json' } : {}),\n      },\n      ...(hasSnapshot ? { body: JSON.stringify(snapshot) } : {}),\n    },\n    { parse: (response) => response.blob(), errorMessage },\n  )\n  const response = call.response\n  const expectedContentType = format === 'docx'\n    ? 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'\n    : 'application/pdf'\n  const contentType = response.headers.get('content-type')?.split(';', 1)[0]?.trim().toLowerCase()\n  if (contentType !== expectedContentType || !call.result) throw new Error(errorMessage)\n\n  const blob = call.result\n  const objectUrl = URL.createObjectURL(blob)\n  try {\n    const link = document.createElement('a')\n    link.href = objectUrl\n    link.download = filenameFromDisposition(response.headers.get('content-disposition'), format)\n    document.body.append(link)\n    link.click()\n    link.remove()\n  } finally {\n    URL.revokeObjectURL(objectUrl)\n  }\n}\n\nexport function ExportMenu({ documentId, editor }: ExportMenuProps) {\n  const t = useT()\n  const label = t('documents.actions.export')\n  const download = React.useCallback((format: ExportFormat) => {\n    const snapshot = format === 'docx' ? buildDocxPaginationSnapshot(editor) : null\n    void downloadDocumentExport(documentId, format, snapshot, t('documents.export.error')).catch((error) => {\n      flash(error instanceof Error ? error.message : t('documents.export.runtimeUnavailable'), 'error')\n    })\n  }, [documentId, editor, t])\n  const items = React.useMemo(() => [\n    {\n      id: 'docx',\n      label: t('documents.export.docx'),\n      icon: FileText,\n      onSelect: () => download('docx'),\n    },\n    {\n      id: 'pdf',\n      label: t('documents.export.pdf'),\n      icon: FileDown,\n      onSelect: () => download('pdf'),\n    },\n  ], [download, t])\n\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button type=\"button\" variant=\"outline\" size=\"sm\" aria-label={label} aria-haspopup=\"menu\">\n          {label}\n          <ChevronDown className=\"size-3.5\" aria-hidden=\"true\" />\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent role=\"menu\" align=\"end\" className=\"w-52 min-w-52 p-1\">\n        {items.map((item) => {\n          const Icon = item.icon\n          return (\n            <PopoverClose key={item.id} asChild>\n              <Button\n                type=\"button\"\n                variant=\"ghost\"\n                size=\"sm\"\n                role=\"menuitem\"\n                className=\"h-auto min-h-8 w-full justify-start py-1.5 text-left leading-snug whitespace-normal\"\n                onClick={item.onSelect}\n              >\n                <Icon className=\"size-4\" aria-hidden=\"true\" />\n                {item.label}\n              </Button>\n            </PopoverClose>\n          )\n        })}\n      </PopoverContent>\n    </Popover>\n  )\n}\n"],
+  "mappings": "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",
+  "names": ["response"]
+}

package/dist/modules/documents/backend/documents/[id]/MentionPicker.js

@@ -0,0 +1,114 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { ErrorMessage } from "@open-mercato/ui/backend/detail";
+import { Button } from "@open-mercato/ui/primitives/button";
+import { Input } from "@open-mercato/ui/primitives/input";
+import { Label } from "@open-mercato/ui/primitives/label";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+import { useMentionPicker } from "./useMentionPicker.js";
+import {
+  buildMentionPrincipalUrl,
+  nextMentionIndex,
+  readMentionUserItems
+} from "./useMentionPicker.js";
+function MentionPicker({ documentId, onPick, disabled = false }) {
+  const t = useT();
+  const reactId = React.useId();
+  const inputId = `documents-mention-input-${documentId}-${reactId}`;
+  const listId = `documents-mention-list-${documentId}-${reactId}`;
+  const model = useMentionPicker({
+    documentId,
+    onPick,
+    disabled,
+    fallbackLabel: t("documents.users.unknown")
+  });
+  return /* @__PURE__ */ jsxs("div", { className: "relative space-y-2", children: [
+    /* @__PURE__ */ jsx(Label, { htmlFor: inputId, children: t("documents.mentions.placeholder") }),
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        id: inputId,
+        value: model.query,
+        onChange: (event) => model.onQueryChange(event.target.value),
+        onKeyDown: (event) => {
+          if (model.isDisabled) return;
+          if (event.key === "Escape") {
+            event.preventDefault();
+            event.stopPropagation();
+            model.dismiss();
+            return;
+          }
+          if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+            event.preventDefault();
+            event.stopPropagation();
+            model.moveActive(event.key === "ArrowDown" ? 1 : -1);
+            return;
+          }
+          if (event.key === "Enter" && model.open && model.resultsAreCurrent && model.activeIndex >= 0) {
+            const user = model.users[model.activeIndex];
+            if (!user) return;
+            event.preventDefault();
+            event.stopPropagation();
+            model.pick(user, model.resultQuery);
+          }
+        },
+        placeholder: t("documents.mentions.placeholder"),
+        disabled: model.isDisabled,
+        role: "combobox",
+        "aria-expanded": model.open && !model.isDisabled,
+        "aria-controls": listId,
+        "aria-autocomplete": "list",
+        "aria-activedescendant": model.resultsAreCurrent && model.activeIndex >= 0 ? `${listId}-option-${model.activeIndex}` : void 0
+      }
+    ),
+    model.unavailable ? /* @__PURE__ */ jsx("p", { role: "alert", className: "text-sm text-muted-foreground", children: t("documents.mentions.unavailable") }) : null,
+    model.open && !model.isDisabled ? /* @__PURE__ */ jsxs(
+      "div",
+      {
+        id: listId,
+        role: !model.isLoading && !model.hasError && model.resultsAreCurrent && model.users.length > 0 ? "listbox" : void 0,
+        className: "absolute z-popover max-h-64 w-full overflow-y-auto rounded-md border border-border bg-popover p-1 shadow-lg",
+        children: [
+          model.isLoading ? /* @__PURE__ */ jsx("p", { role: "status", className: "px-3 py-2 text-sm text-muted-foreground", children: t("documents.mentions.loading") }) : null,
+          !model.isLoading && model.hasError ? /* @__PURE__ */ jsx(
+            ErrorMessage,
+            {
+              label: t("documents.mentions.error.search"),
+              action: /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", variant: "outline", onClick: model.retry, children: t("documents.actions.retry") })
+            }
+          ) : null,
+          !model.isLoading && !model.hasError && model.hasSearched && model.resultsAreCurrent && model.users.length === 0 ? /* @__PURE__ */ jsx("p", { role: "status", className: "px-3 py-2 text-sm text-muted-foreground", children: t("documents.mentions.noMatches") }) : null,
+          !model.isLoading && !model.hasError && model.resultsAreCurrent ? model.users.map((user, index) => /* @__PURE__ */ jsx(
+            Button,
+            {
+              id: `${listId}-option-${index}`,
+              role: "option",
+              "aria-selected": index === model.activeIndex,
+              type: "button",
+              disabled: model.isDisabled,
+              variant: index === model.activeIndex ? "secondary" : "ghost",
+              className: "h-auto w-full justify-start px-3 py-2 text-left",
+              onMouseEnter: () => model.activate(index, model.resultQuery),
+              onClick: () => model.pick(user, model.resultQuery),
+              children: /* @__PURE__ */ jsxs("span", { className: "min-w-0", children: [
+                /* @__PURE__ */ jsx("span", { className: "block truncate text-sm font-medium", children: user.label }),
+                user.secondary ? /* @__PURE__ */ jsx("span", { className: "block truncate text-xs text-muted-foreground", children: user.secondary }) : null
+              ] })
+            },
+            user.id
+          )) : null
+        ]
+      }
+    ) : null
+  ] });
+}
+var MentionPicker_default = MentionPicker;
+export {
+  MentionPicker,
+  buildMentionPrincipalUrl,
+  MentionPicker_default as default,
+  nextMentionIndex,
+  readMentionUserItems
+};
+//# sourceMappingURL=MentionPicker.js.map

package/dist/modules/documents/backend/documents/[id]/MentionPicker.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/modules/documents/backend/documents/%5Bid%5D/MentionPicker.tsx"],
+  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport { ErrorMessage } from '@open-mercato/ui/backend/detail'\nimport { Button } from '@open-mercato/ui/primitives/button'\nimport { Input } from '@open-mercato/ui/primitives/input'\nimport { Label } from '@open-mercato/ui/primitives/label'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { useMentionPicker } from './useMentionPicker'\n\nexport {\n  buildMentionPrincipalUrl,\n  nextMentionIndex,\n  readMentionUserItems,\n} from './useMentionPicker'\n\ntype MentionPickerProps = {\n  documentId: string\n  onPick: (user: { id: string; name: string }) => void\n  disabled?: boolean\n}\n\nexport function MentionPicker({ documentId, onPick, disabled = false }: MentionPickerProps) {\n  const t = useT()\n  const reactId = React.useId()\n  const inputId = `documents-mention-input-${documentId}-${reactId}`\n  const listId = `documents-mention-list-${documentId}-${reactId}`\n  const model = useMentionPicker({\n    documentId,\n    onPick,\n    disabled,\n    fallbackLabel: t('documents.users.unknown'),\n  })\n\n  return (\n    <div className=\"relative space-y-2\">\n      <Label htmlFor={inputId}>{t('documents.mentions.placeholder')}</Label>\n      <Input\n        id={inputId}\n        value={model.query}\n        onChange={(event) => model.onQueryChange(event.target.value)}\n        onKeyDown={(event) => {\n          if (model.isDisabled) return\n          if (event.key === 'Escape') {\n            event.preventDefault()\n            event.stopPropagation()\n            model.dismiss()\n            return\n          }\n          if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {\n            event.preventDefault()\n            event.stopPropagation()\n            model.moveActive(event.key === 'ArrowDown' ? 1 : -1)\n            return\n          }\n          if (event.key === 'Enter' && model.open && model.resultsAreCurrent && model.activeIndex >= 0) {\n            const user = model.users[model.activeIndex]\n            if (!user) return\n            event.preventDefault()\n            event.stopPropagation()\n            model.pick(user, model.resultQuery)\n          }\n        }}\n        placeholder={t('documents.mentions.placeholder')}\n        disabled={model.isDisabled}\n        role=\"combobox\"\n        aria-expanded={model.open && !model.isDisabled}\n        aria-controls={listId}\n        aria-autocomplete=\"list\"\n        aria-activedescendant={\n          model.resultsAreCurrent && model.activeIndex >= 0\n            ? `${listId}-option-${model.activeIndex}`\n            : undefined\n        }\n      />\n      {model.unavailable ? (\n        <p role=\"alert\" className=\"text-sm text-muted-foreground\">\n          {t('documents.mentions.unavailable')}\n        </p>\n      ) : null}\n      {model.open && !model.isDisabled ? (\n        <div\n          id={listId}\n          role={\n            !model.isLoading\n            && !model.hasError\n            && model.resultsAreCurrent\n            && model.users.length > 0\n              ? 'listbox'\n              : undefined\n          }\n          className=\"absolute z-popover max-h-64 w-full overflow-y-auto rounded-md border border-border bg-popover p-1 shadow-lg\"\n        >\n          {model.isLoading ? (\n            <p role=\"status\" className=\"px-3 py-2 text-sm text-muted-foreground\">\n              {t('documents.mentions.loading')}\n            </p>\n          ) : null}\n          {!model.isLoading && model.hasError ? (\n            <ErrorMessage\n              label={t('documents.mentions.error.search')}\n              action={<Button type=\"button\" size=\"sm\" variant=\"outline\" onClick={model.retry}>{t('documents.actions.retry')}</Button>}\n            />\n          ) : null}\n          {!model.isLoading && !model.hasError && model.hasSearched && model.resultsAreCurrent && model.users.length === 0 ? (\n            <p role=\"status\" className=\"px-3 py-2 text-sm text-muted-foreground\">\n              {t('documents.mentions.noMatches')}\n            </p>\n          ) : null}\n          {!model.isLoading && !model.hasError && model.resultsAreCurrent ? model.users.map((user, index) => (\n            <Button\n              key={user.id}\n              id={`${listId}-option-${index}`}\n              role=\"option\"\n              aria-selected={index === model.activeIndex}\n              type=\"button\"\n              disabled={model.isDisabled}\n              variant={index === model.activeIndex ? 'secondary' : 'ghost'}\n              className=\"h-auto w-full justify-start px-3 py-2 text-left\"\n              onMouseEnter={() => model.activate(index, model.resultQuery)}\n              onClick={() => model.pick(user, model.resultQuery)}\n            >\n              <span className=\"min-w-0\">\n                <span className=\"block truncate text-sm font-medium\">{user.label}</span>\n                {user.secondary ? (\n                  <span className=\"block truncate text-xs text-muted-foreground\">{user.secondary}</span>\n                ) : null}\n              </span>\n            </Button>\n          )) : null}\n        </div>\n      ) : null}\n    </div>\n  )\n}\n\nexport default MentionPicker\n"],
+  "mappings": "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",
+  "names": []
+}