@50arms/ui 0.0.0-stage → 35.1.0

package/dist/components/markdown/AttachmentStrip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AttachmentStrip.js","sources":["../../../src/components/markdown/AttachmentStrip.tsx"],"sourcesContent":["import { useLayoutEffect, useMemo, useRef, useState, type FormEvent } from \"react\";\nimport { useUiStrings } from \"../../lib/i18n\";\nimport { attachmentsOf, type AttachmentRow } from \"../../lib/markdown/attachments\";\nimport type { LocalFileInfo } from \"../../lib/markdown/image-pipeline\";\nimport { isUnstoredImageSrc, sanitizeImageSrc } from \"../../lib/markdown/images\";\nimport type { Projection } from \"../../lib/markdown/project\";\nimport { sanitizeHref } from \"../../lib/syntax/markdown/render\";\nimport { AttachmentAction, AttachmentList } from \"../chat/Attachment\";\nimport { downloadChatFile } from \"../chat/download-file\";\nimport { isImageFile } from \"../chat/file-icon\";\nimport type { ChatFile } from \"../chat/types\";\nimport { FileViewer } from \"../file-viewer\";\nimport { Button } from \"../Button\";\nimport { Icon } from \"../Icon\";\nimport { Input } from \"../Input\";\nimport { Menu, MenuItem } from \"../Menu\";\nimport { Popover } from \"../Popover\";\n\n/* ============================================================================\n   THE ATTACHMENT STRIP - the tiles under a MarkdownEditor's text (DXUI-74).\n\n   THE TEXT IS THE ONLY RECORD. The rows are computed from the markdown on every\n   render (`attachmentsOf`), never kept in state beside it: deleting a reference\n   in the text removes its tile, an undo brings it back, and a typed ordinary\n   link is never a tile because `attachmentsOf` says it is not one. A tile that\n   is still being stored takes its picture and state from the pipeline's registry\n   (`resolve`); a stored one takes them from its URL.\n\n   NOTHING NEW DRAWS A TILE: `AttachmentList layout=\"strip\"` and `Attachment` do,\n   with `AttachmentAction` in their action slot, exactly as the chat composer's\n   strip does.\n\n   ONE CONTROL PER TILE (DEC-262). A tile is 64px square, and four buttons do not\n   fit on it (measured: Retry 0px visible at every width, Rename 0px on a phone),\n   so the tile shows its thumbnail and name and ONE corner control, a menu that\n   holds Download, Rename, Retry (a failed file this editor can upload again) and\n   Remove. Pressing the tile previews it. The chat composer's strip keeps its\n   single remove button: that is `Attachment`'s own cluster, which this does not\n   use.\n   ========================================================================= */\n\nexport interface AttachmentStripProps {\n  /** The parse of the markdown the strip is computed from: the one the editor's surface already holds. */\n  projection: Projection;\n  /** Whether a link's destination is a stored file (an image construct always is). */\n  isFileUrl: (url: string) => boolean;\n  /** What the editor knows about an object URL it minted; null for any other URL. */\n  resolve: (url: string) => LocalFileInfo | null;\n  /** A name for the file at `url` that does not change when its upload finishes and its object URL is swapped for the stored one: the tile is keyed on it, so an open menu or rename survives the swap. */\n  identify: (url: string) => string;\n  /** A read-only editor offers a tile's preview and download only. */\n  readOnly?: boolean;\n  /** Inset the row from the editor's frame; the padding belongs to the strip so an editor with no files has none. */\n  padded?: boolean;\n  /** The editor's text surface: where focus goes after a tile is removed. */\n  textFocus: () => HTMLElement | null;\n  /** Gives every construct pointing at `url` a new reference name. */\n  onRename: (url: string, name: string) => void;\n  /** Deletes every construct pointing at `url`. */\n  onRemove: (url: string) => void;\n  /** Uploads a failed file again. */\n  onRetry: (url: string) => void;\n}\n\n/** The file name a URL ends in, or \"\" when it has none. */\nfunction fileNameOf(url: string): string {\n  /* A `data:` URL holds the file, not a name: a piece of its base64 is no file name. */\n  if (/^data:/i.test(url.trimStart())) return \"\";\n  const path = url.split(/[?#]/, 1)[0];\n  const last = path.slice(path.lastIndexOf(\"/\") + 1);\n  try {\n    return decodeURIComponent(last);\n  } catch {\n    return last;\n  }\n}\n\n/** The tile for one row: what the library's `Attachment` is handed. */\nfunction toChatFile(row: AttachmentRow, id: string, info: LocalFileInfo | null): ChatFile {\n  const fileName = info?.file.name ?? (fileNameOf(row.url) || undefined);\n  /* `![](url)` names nothing: the tile takes the name its URL ends in, else the URL. */\n  const name = row.name || fileName || row.url;\n  /* An image construct is a picture whatever its URL ends in; any other row is what its file name and type say. */\n  const mimeType = info?.file.type || (row.image ? \"image/*\" : undefined);\n  /* A minted object URL is vouched for by the registry and is the only `blob:` that may be loaded; every other URL\n     goes through the same policy the stored-URL check uses. */\n  const picture = info ? row.url : sanitizeImageSrc(row.url) ?? undefined;\n  const isPicture = isImageFile({ name, fileName, mimeType });\n  /* A picture's `url` is the image policy's answer, so a picture stored at a `data:image` URL still previews and\n     downloads. Only a picture gets it: the viewer's open-in-new-tab link belongs to a file with no preview, and an\n     SVG `data:` URL must never be offered there. */\n  const href = info ? row.url : (isPicture ? picture : sanitizeHref(row.url)) ?? undefined;\n  return {\n    id,\n    name,\n    fileName,\n    size: info?.file.size,\n    mimeType,\n    url: href,\n    thumbnailUrl: isPicture ? picture : undefined,\n    /* A `blob:` this editor did not mint can never be stored: it is a failed file, with no reason to give. */\n    status: info?.state === \"uploading\" ? \"uploading\" : info?.state === \"failed\" || (!info && isUnstoredImageSrc(row.url)) ? \"error\" : \"ready\",\n    error: info?.state === \"failed\" ? info.message : undefined,\n  };\n}\n\nexport function AttachmentStrip({ projection, isFileUrl, resolve, identify, textFocus, readOnly = false, padded = false, onRename, onRemove, onRetry }: AttachmentStripProps) {\n  const strings = useUiStrings().markdownEditor.attachment;\n  const fileStrings = useUiStrings().chat.attachment;\n  const rows = useMemo(() => attachmentsOf(projection, { isFileUrl }), [projection, isFileUrl]);\n  /* What is open is held by the file's identity, which survives the upload finishing and swapping its object URL for\n     the stored one under an open rename or viewer; the URL an action needs is looked up when it runs. */\n  const [viewing, setViewing] = useState<string | null>(null);\n  const [renaming, setRenaming] = useState<{ id: string; draft: string } | null>(null);\n  const [anchor, setAnchor] = useState<Element | null>(null);\n  const root = useRef<HTMLDivElement>(null);\n  /* Where focus goes when the menu closes. The page behind an open menu is inert, so a row that removes its own tile\n     cannot focus the text itself: it asks the menu to, after it closes. A row that opens the rename field leaves focus\n     on that field. Any other close returns to the trigger. */\n  const closeTo = useRef<\"trigger\" | \"text\" | \"field\">(\"trigger\");\n  const renamingId = renaming?.id ?? null;\n\n  /* The rename popover opens beside the file's tile. */\n  useLayoutEffect(() => {\n    const tiles = [...(root.current?.querySelectorAll(\"[data-attachment]\") ?? [])];\n    setAnchor(renamingId === null ? null : (tiles.find((tile) => tile.getAttribute(\"data-attachment\") === renamingId) ?? null));\n  }, [renamingId, rows]);\n\n  if (rows.length === 0) return null;\n  const infos = rows.map((row) => resolve(row.url));\n  const files = rows.map((row, i) => toChatFile(row, identify(row.url), infos[i]));\n  /* The URL each tile's file has in the text right now. */\n  const urlOf = new Map(rows.map((row, i) => [files[i].id, row.url]));\n  /* Retry exists only for a file this editor minted and holds: a `blob:` it did not mint cannot be uploaded again. */\n  const retryable = new Set(rows.flatMap((_, i) => (infos[i]?.state === \"failed\" ? [files[i].id] : [])));\n\n  const saveRename = (event: FormEvent) => {\n    event.preventDefault();\n    /* The form lives in a portal, and React bubbles its submit to a form around the editor: it is this form's alone. */\n    event.stopPropagation();\n    const name = renaming?.draft.trim();\n    const url = renaming ? urlOf.get(renaming.id) : undefined;\n    if (url !== undefined && name) onRename(url, name);\n    setRenaming(null);\n  };\n\n  /* The tile's one control: a menu of everything that can be done to the file (DEC-262). */\n  const menuOf = (file: ChatFile) => {\n    const download = file.status !== \"uploading\" && file.url !== undefined;\n    if (readOnly && !download) return undefined;\n    return (\n      <Menu\n        side=\"bottom\"\n        align=\"end\"\n        className=\"min-w-44\"\n        finalFocus={() => {\n          const to = closeTo.current;\n          closeTo.current = \"trigger\";\n          return to === \"text\" ? textFocus() : to === \"trigger\";\n        }}\n        trigger={<AttachmentAction icon=\"more-vertical\" label={strings.actions(file.name)} tinted={Boolean(file.thumbnailUrl)} />}\n      >\n        {file.status === \"error\" && file.error && (\n          /* The reason a picture's upload failed: its tile has room for an icon only, and a tooltip is out of reach\n             of touch and keyboard, so the menu says it. */\n          <p role=\"note\" className=\"max-w-60 px-2.5 py-1.5 text-xs text-danger-text [overflow-wrap:anywhere]\">\n            {file.error}\n          </p>\n        )}\n        {download && (\n          <MenuItem icon={<Icon name=\"download\" size=\"sm\" />} onClick={() => downloadChatFile(file)}>\n            {fileStrings.download(file.name)}\n          </MenuItem>\n        )}\n        {!readOnly && (\n          <MenuItem icon={<Icon name=\"pencil\" size=\"sm\" />} onClick={() => {\n              closeTo.current = \"field\";\n              setRenaming({ id: file.id, draft: file.name });\n            }}>\n            {strings.rename(file.name)}\n          </MenuItem>\n        )}\n        {!readOnly && retryable.has(file.id) && (\n          <MenuItem icon={<Icon name=\"rotate-ccw\" size=\"sm\" />} onClick={() => onRetry(urlOf.get(file.id)!)}>\n            {strings.retry(file.name)}\n          </MenuItem>\n        )}\n        {!readOnly && (\n          <MenuItem tone=\"danger\" icon={<Icon name=\"trash-2\" size=\"sm\" />} onClick={() => {\n              closeTo.current = \"text\";\n              onRemove(urlOf.get(file.id)!);\n            }}>\n            {fileStrings.remove(file.name)}\n          </MenuItem>\n        )}\n      </Menu>\n    );\n  };\n  return (\n    <div ref={root} role=\"group\" aria-label={strings.strip} data-md-attachment-strip=\"\" className={padded ? \"px-3 pb-2\" : undefined}>\n      <AttachmentList\n        files={files}\n        layout=\"strip\"\n        caption\n        action={menuOf}\n        onPreview={(file) => setViewing(file.id)}\n      />\n      <FileViewer\n        open={viewing !== null}\n        onOpenChange={(open) => !open && setViewing(null)}\n        files={files}\n        initialFileId={viewing}\n        onDownload={downloadChatFile}\n      />\n      <Popover\n        anchor={anchor}\n        open={renaming !== null && anchor !== null}\n        onOpenChange={(open) => !open && setRenaming(null)}\n        side=\"top\"\n        aria-label={renaming ? strings.rename(files.find((file) => file.id === renamingId)?.name ?? \"\") : undefined}\n      >\n        {renaming && (\n          <form onSubmit={saveRename} className=\"flex items-center gap-2\">\n            <Input\n              autoFocus\n              value={renaming.draft}\n              aria-label={strings.renameField}\n              onChange={(event) => setRenaming({ ...renaming, draft: event.target.value })}\n            />\n            <Button type=\"submit\" size=\"sm\" disabled={renaming.draft.trim() === \"\"}>\n              {strings.renameSave}\n            </Button>\n          </form>\n        )}\n      </Popover>\n    </div>\n  );\n}\n"],"names":["fileNameOf","url","path","last","toChatFile","row","id","info","fileName","name","mimeType","picture","sanitizeImageSrc","isPicture","isImageFile","href","sanitizeHref","isUnstoredImageSrc","AttachmentStrip","projection","isFileUrl","resolve","identify","textFocus","readOnly","padded","onRename","onRemove","onRetry","strings","useUiStrings","fileStrings","rows","useMemo","attachmentsOf","viewing","setViewing","useState","renaming","setRenaming","anchor","setAnchor","root","useRef","closeTo","renamingId","useLayoutEffect","tiles","tile","infos","files","i","urlOf","retryable","_","saveRename","event","menuOf","file","download","jsxs","Menu","to","jsx","AttachmentAction","MenuItem","Icon","downloadChatFile","AttachmentList","FileViewer","open","Popover","Input","Button"],"mappings":"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"}

package/dist/components/markdown/ImageUpload.js

@@ -0,0 +1,45 @@
+import { jsx as i } from "react/jsx-runtime";
+import { useMemo as a, useContext as n, createContext as p } from "react";
+import { Callout as u } from "../Callout.js";
+import { Icon as s } from "../Icon.js";
+import { useUiStrings as c } from "../../lib/i18n/provider.js";
+import { useNumberFormat as g } from "../../lib/i18n/number-format.js";
+const f = { uploadImage: null, uploadFile: null, imageTypes: void 0, isFileUrl: void 0 }, t = p(f);
+function T({ uploadImage: o, uploadFile: e, imageTypes: l, isFileUrl: r, children: d }) {
+  const m = a(
+    () => ({ uploadImage: o, uploadFile: e ?? null, imageTypes: l, isFileUrl: r }),
+    [o, e, l, r]
+  );
+  return /* @__PURE__ */ i(t.Provider, { value: m, children: d });
+}
+function b(o) {
+  const e = n(t);
+  return a(
+    () => ({
+      uploadImage: o.uploadImage ?? e.uploadImage,
+      uploadFile: o.uploadFile ?? e.uploadFile,
+      imageTypes: o.imageTypes ?? e.imageTypes,
+      isFileUrl: o.isFileUrl ?? e.isFileUrl
+    }),
+    [o.uploadImage, o.uploadFile, o.imageTypes, o.isFileUrl, e]
+  );
+}
+function C({ state: o }) {
+  const e = c().imageUpload, l = g();
+  return /* @__PURE__ */ i("div", { "aria-live": "polite", "data-md-image-strip": o.local > 0 ? "" : void 0, className: "flex flex-col", children: o.local > 0 && /* @__PURE__ */ i(
+    u,
+    {
+      tone: "warning",
+      className: "rounded-none border-x-0 border-b-0 px-3 py-2",
+      icon: /* @__PURE__ */ i(s, { name: "cloud-off", size: "sm" }),
+      title: e.unstoredTitle(o.local, l(o.local)),
+      children: e.unstoredBody(o.local)
+    }
+  ) });
+}
+export {
+  C as ImageUploadStrip,
+  T as MarkdownImageUploadProvider,
+  b as useMarkdownFileStorage
+};
+//# sourceMappingURL=ImageUpload.js.map

package/dist/components/markdown/ImageUpload.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageUpload.js","sources":["../../../src/components/markdown/ImageUpload.tsx"],"sourcesContent":["import { createContext, useContext, useMemo, type ReactNode } from \"react\";\nimport { useNumberFormat, useUiStrings } from \"../../lib/i18n\";\nimport type { ImagePipelineSnapshot, ImageUploader } from \"../../lib/markdown/image-pipeline\";\nimport { Callout } from \"../Callout\";\nimport { Icon } from \"../Icon\";\n\n/* ============================================================================\n   FILE STORAGE FOR MARKDOWN EDITORS - the app-wide half of the upload\n   contract, and the warning the editor shows while a file cannot be stored.\n\n   DX-3134 / DXUI-74 / PLN-10 \"Library API\". An app stores files ONE way -\n   danxbot posts them to its own upload routes, gpt-manager runs a presigned\n   three-step upload - and every editor on every screen should use it without\n   each screen wiring it again. So the uploaders are mounted ONCE, at the app\n   root, through `MarkdownImageUploadProvider`; an individual editor can still\n   override each with its own prop, which wins.\n   ========================================================================= */\n\n/** What a `MarkdownEditor` stores files with, and how it tells which links are files. */\nexport interface MarkdownFileStorage {\n  uploadImage: ImageUploader | null;\n  uploadFile: ImageUploader | null;\n  imageTypes: readonly string[] | undefined;\n  isFileUrl: ((url: string) => boolean) | undefined;\n}\n\nconst NO_STORAGE: MarkdownFileStorage = { uploadImage: null, uploadFile: null, imageTypes: undefined, isFileUrl: undefined };\n\nconst MarkdownImageUploadContext = createContext<MarkdownFileStorage>(NO_STORAGE);\n\nexport interface MarkdownImageUploadProviderProps {\n  /**\n   * Stores one picture and resolves with the URL it can be loaded from. Every\n   * `MarkdownEditor` below this provider uses it unless it passes its own\n   * `uploadImage`. It should honour `signal`, which aborts when the editor\n   * unmounts.\n   */\n  uploadImage: ImageUploader;\n  /**\n   * Stores any other file (same contract as `uploadImage`). With it, an editor takes every file type and writes a\n   * non-picture as a link, `[PDF 2](url)`; without it, a file that is not a picture is ignored. SET IT WITH\n   * `isFileUrl`: a stored file's tile is found by `isFileUrl` accepting its link, so without it the tile vanishes\n   * when the upload finishes.\n   */\n  uploadFile?: ImageUploader;\n  /**\n   * The picture types `uploadImage` stores (MIME types, e.g. `[\"image/png\", \"image/jpeg\"]`); default every `image/*`.\n   * A picture of another type (an SVG, say) goes to `uploadFile` as a link, or is ignored when there is none.\n   */\n  imageTypes?: readonly string[];\n  /**\n   * Whether a link's destination is a file this app stores, so the link is an attachment tile in the strip under\n   * the text. An image construct is always an attachment; an ordinary link someone typed is never one. Default: no link is.\n   * Required alongside `uploadFile`.\n   */\n  isFileUrl?: (url: string) => boolean;\n  children?: ReactNode;\n}\n\n/** Makes one file storage available to every `MarkdownEditor` beneath it. */\nexport function MarkdownImageUploadProvider({ uploadImage, uploadFile, imageTypes, isFileUrl, children }: MarkdownImageUploadProviderProps) {\n  const value = useMemo<MarkdownFileStorage>(\n    () => ({ uploadImage, uploadFile: uploadFile ?? null, imageTypes, isFileUrl }),\n    [uploadImage, uploadFile, imageTypes, isFileUrl],\n  );\n  return <MarkdownImageUploadContext.Provider value={value}>{children}</MarkdownImageUploadContext.Provider>;\n}\n\n/**\n * The storage an editor uses: each of its own props when given, otherwise the nearest provider's, otherwise none -\n * in which case pasted pictures are local-only and the editor says so.\n */\nexport function useMarkdownFileStorage(own: Partial<MarkdownFileStorage>): MarkdownFileStorage {\n  const provided = useContext(MarkdownImageUploadContext);\n  return useMemo(\n    () => ({\n      uploadImage: own.uploadImage ?? provided.uploadImage,\n      uploadFile: own.uploadFile ?? provided.uploadFile,\n      imageTypes: own.imageTypes ?? provided.imageTypes,\n      isFileUrl: own.isFileUrl ?? provided.isFileUrl,\n    }),\n    [own.uploadImage, own.uploadFile, own.imageTypes, own.isFileUrl, provided],\n  );\n}\n\n/* --- The warning strip ---------------------------------------------------- */\n\nexport interface ImageUploadStripProps {\n  state: ImagePipelineSnapshot;\n}\n\n/**\n * The editor-chrome warning for files that cannot be stored (PLN-10 R-1): shown whenever the document holds a\n * reference to a file that exists only in this tab. A file uploading or failed is on its own tile in the attachment\n * strip; this is the one state no tile can explain, because the cause is the app's configuration.\n *\n * `aria-live=\"polite\"` on the container, never `role=\"alert\"` on the row: a file being pasted is news the author\n * should hear about without being interrupted mid-sentence.\n */\nexport function ImageUploadStrip({ state }: ImageUploadStripProps) {\n  const strings = useUiStrings().imageUpload;\n  const fmt = useNumberFormat();\n  const compact = \"rounded-none border-x-0 border-b-0 px-3 py-2\";\n  /* The live region is ALWAYS in the tree, and only its content comes and\n     goes: a region inserted together with its first message is not yet being\n     watched by assistive tech, so that first message would never be announced. */\n  return (\n    <div aria-live=\"polite\" data-md-image-strip={state.local > 0 ? \"\" : undefined} className=\"flex flex-col\">\n      {state.local > 0 && (\n        <Callout\n          tone=\"warning\"\n          className={compact}\n          icon={<Icon name=\"cloud-off\" size=\"sm\" />}\n          title={strings.unstoredTitle(state.local, fmt(state.local))}\n        >\n          {strings.unstoredBody(state.local)}\n        </Callout>\n      )}\n    </div>\n  );\n}\n"],"names":["NO_STORAGE","MarkdownImageUploadContext","createContext","MarkdownImageUploadProvider","uploadImage","uploadFile","imageTypes","isFileUrl","children","value","useMemo","jsx","useMarkdownFileStorage","own","provided","useContext","ImageUploadStrip","state","strings","useUiStrings","fmt","useNumberFormat","Callout","Icon"],"mappings":";;;;;;AA0BA,MAAMA,IAAkC,EAAE,aAAa,MAAM,YAAY,MAAM,YAAY,QAAW,WAAW,OAAA,GAE3GC,IAA6BC,EAAmCF,CAAU;AAgCzE,SAASG,EAA4B,EAAE,aAAAC,GAAa,YAAAC,GAAY,YAAAC,GAAY,WAAAC,GAAW,UAAAC,KAA8C;AAC1I,QAAMC,IAAQC;AAAA,IACZ,OAAO,EAAE,aAAAN,GAAa,YAAYC,KAAc,MAAM,YAAAC,GAAY,WAAAC;IAClE,CAACH,GAAaC,GAAYC,GAAYC,CAAS;AAAA,EAAA;AAEjD,SAAO,gBAAAI,EAACV,EAA2B,UAA3B,EAAoC,OAAAQ,GAAe,UAAAD,EAAA,CAAS;AACtE;AAMO,SAASI,EAAuBC,GAAwD;AAC7F,QAAMC,IAAWC,EAAWd,CAA0B;AACtD,SAAOS;AAAA,IACL,OAAO;AAAA,MACL,aAAaG,EAAI,eAAeC,EAAS;AAAA,MACzC,YAAYD,EAAI,cAAcC,EAAS;AAAA,MACvC,YAAYD,EAAI,cAAcC,EAAS;AAAA,MACvC,WAAWD,EAAI,aAAaC,EAAS;AAAA,IAAA;AAAA,IAEvC,CAACD,EAAI,aAAaA,EAAI,YAAYA,EAAI,YAAYA,EAAI,WAAWC,CAAQ;AAAA,EAAA;AAE7E;AAgBO,SAASE,EAAiB,EAAE,OAAAC,KAAgC;AACjE,QAAMC,IAAUC,IAAe,aACzBC,IAAMC,EAAA;AAKZ,SACE,gBAAAV,EAAC,OAAA,EAAI,aAAU,UAAS,uBAAqBM,EAAM,QAAQ,IAAI,KAAK,QAAW,WAAU,iBACtF,UAAAA,EAAM,QAAQ,KACb,gBAAAN;AAAA,IAACW;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,WATQ;AAAA,MAUR,MAAM,gBAAAX,EAACY,GAAA,EAAK,MAAK,aAAY,MAAK,MAAK;AAAA,MACvC,OAAOL,EAAQ,cAAcD,EAAM,OAAOG,EAAIH,EAAM,KAAK,CAAC;AAAA,MAEzD,UAAAC,EAAQ,aAAaD,EAAM,KAAK;AAAA,IAAA;AAAA,EAAA,GAGvC;AAEJ;"}

package/dist/components/media-error.js

@@ -0,0 +1,7 @@
+const t = (r) => (o) => {
+  o?.error && r();
+};
+export {
+  t as reportCommittedError
+};
+//# sourceMappingURL=media-error.js.map

package/dist/components/media-error.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-error.js","sources":["../../src/components/media-error.ts"],"sourcesContent":["/**\n * A ref callback that reports a media element which had ALREADY failed when\n * React committed it. DX-3982.\n *\n * A source the browser rejects at once fails BEFORE React commits the element,\n * and React drops an event for an uncommitted node — so `onError` never runs\n * and the element sits at 0:00 forever. The element's own `error` is the\n * record of that, read at commit. Pair it with `onError` for failures that\n * arrive after.\n */\nexport const reportCommittedError =\n  (onFailed: () => void) =>\n  (el: HTMLMediaElement | null): void => {\n    if (el?.error) onFailed();\n  };\n"],"names":["reportCommittedError","onFailed","el"],"mappings":"AAUO,MAAMA,IACX,CAACC,MACD,CAACC,MAAsC;AACrC,EAAIA,GAAI,SAAOD,EAAA;AACjB;"}

package/dist/components/nav-sections.js

@@ -0,0 +1,61 @@
+import { jsx as a, Fragment as l, jsxs as i } from "react/jsx-runtime";
+import { cn as f } from "../lib/cn.js";
+import { Icon as d } from "./Icon.js";
+import { Tooltip as m } from "./Popover.js";
+function g({ sections: e, activeId: n, collapsed: r = !1, onNavigate: s }) {
+  return /* @__PURE__ */ a(l, { children: e.map((t, o) => /* @__PURE__ */ i("div", { className: "flex flex-col gap-0.5", children: [
+    t.label && !r && /* @__PURE__ */ a("span", { className: "px-2 pt-1 pb-1.5 text-2xs font-semibold tracking-widest text-tertiary uppercase", children: t.label }),
+    t.items.map((c) => /* @__PURE__ */ a(
+      h,
+      {
+        item: c,
+        active: c.id === n,
+        collapsed: r,
+        onNavigate: s
+      },
+      c.id
+    ))
+  ] }, o)) });
+}
+function h({
+  item: e,
+  active: n,
+  collapsed: r,
+  onNavigate: s
+}) {
+  const t = /* @__PURE__ */ i(
+    "a",
+    {
+      href: e.href ?? "#",
+      onClick: (o) => {
+        e.href || o.preventDefault(), e.onClick?.(o), s?.();
+      },
+      "aria-current": n ? "page" : void 0,
+      className: f(
+        /* HEIGHT floor only (the coarse-pointer tap target). `dx-tap` also floors
+         the WIDTH at 44px, and the collapsed rail leaves a row 40px (`w-14` less
+         `px-2`), so it overflowed by 4px. An expanded row is full width anyway. */
+        "min-h-(--tap-target) flex h-control-md items-center gap-3 rounded-md px-2.5",
+        "text-sm font-medium",
+        "transition-[var(--tx-colors)] duration-(--dur-fast) ease-hover",
+        /* The current page keeps a hover of its own — a nav item is
+           still a link, and reverting it to the neutral hover fill
+           makes the page you are on look like the page you are not. */
+        n ? "bg-surface-selected text-accent-text hover:bg-surface-selected-hover" : "text-secondary hover:bg-surface-hover hover:text-primary",
+        r && "justify-center px-0"
+      ),
+      children: [
+        /* @__PURE__ */ a(d, { name: e.icon, size: "sm", className: "shrink-0" }),
+        !r && /* @__PURE__ */ i(l, { children: [
+          /* @__PURE__ */ a("span", { className: "min-w-0 flex-1 truncate", children: e.label }),
+          e.badge
+        ] })
+      ]
+    }
+  );
+  return r ? /* @__PURE__ */ a(m, { content: e.label, side: "right", children: t }) : t;
+}
+export {
+  g as NavSections
+};
+//# sourceMappingURL=nav-sections.js.map

package/dist/components/nav-sections.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nav-sections.js","sources":["../../src/components/nav-sections.tsx"],"sourcesContent":["import type { NavItem, NavSection } from \"./AppShell\";\nimport { cn } from \"../lib/cn\";\nimport { Icon } from \"./Icon\";\nimport { Tooltip } from \"./Popover\";\n\n/* ============================================================================\n   THE ONE DRAWING OF A NAV SECTION — group heading, link row, current-page\n   marker, click contract. DX-4001.\n\n   `AppShell`'s sidebar and `SectionNav` (a page's own grouped sub-navigation)\n   both render a `NavSection[]`. They used to be one private function; a second\n   consumer would have been a copy, and the two would have drifted the first\n   time one of them got a hover state the other did not. Both import THIS, so a\n   row looks and behaves the same wherever a `NavSection[]` is drawn.\n\n   Returns the section blocks only, NOT the `<nav>` around them: the shell's\n   sidebar and SectionNav's two forms each own a different landmark, and a\n   landmark is not part of how a row looks.\n\n   THE CLICK CONTRACT lives here once: an item with no `href` is not a link, so\n   the browser's own `#` jump is suppressed; an item with one keeps it (hover\n   URL, ctrl-click to a new tab) and the consumer's `onClick` receives the event\n   to suppress navigation itself. `onNavigate` runs after, for a container that\n   closes when something is chosen.\n   ========================================================================= */\n\nexport interface NavSectionsProps {\n  sections: NavSection[];\n  activeId?: string;\n  /** Icon-only rows with the label moved into a tooltip. The shell's rail. */\n  collapsed?: boolean;\n  /** Runs after the item's own `onClick`, on every row click. */\n  onNavigate?: () => void;\n}\n\nexport function NavSections({ sections, activeId, collapsed = false, onNavigate }: NavSectionsProps) {\n  return (\n    <>\n      {sections.map((section, i) => (\n        <div key={i} className=\"flex flex-col gap-0.5\">\n          {section.label && !collapsed && (\n            <span className=\"px-2 pt-1 pb-1.5 text-2xs font-semibold tracking-widest text-tertiary uppercase\">\n              {section.label}\n            </span>\n          )}\n          {section.items.map((item) => (\n            <NavRow\n              key={item.id}\n              item={item}\n              active={item.id === activeId}\n              collapsed={collapsed}\n              onNavigate={onNavigate}\n            />\n          ))}\n        </div>\n      ))}\n    </>\n  );\n}\n\nfunction NavRow({\n  item,\n  active,\n  collapsed,\n  onNavigate,\n}: {\n  item: NavItem;\n  active: boolean;\n  collapsed: boolean;\n  onNavigate?: () => void;\n}) {\n  const link = (\n    <a\n      href={item.href ?? \"#\"}\n      onClick={(e) => {\n        if (!item.href) e.preventDefault();\n        item.onClick?.(e);\n        onNavigate?.();\n      }}\n      aria-current={active ? \"page\" : undefined}\n      className={cn(\n        /* HEIGHT floor only (the coarse-pointer tap target). `dx-tap` also floors\n         the WIDTH at 44px, and the collapsed rail leaves a row 40px (`w-14` less\n         `px-2`), so it overflowed by 4px. An expanded row is full width anyway. */\n        \"min-h-(--tap-target) flex h-control-md items-center gap-3 rounded-md px-2.5\",\n        \"text-sm font-medium\",\n        \"transition-[var(--tx-colors)] duration-(--dur-fast) ease-hover\",\n        /* The current page keeps a hover of its own — a nav item is\n           still a link, and reverting it to the neutral hover fill\n           makes the page you are on look like the page you are not. */\n        active\n          ? \"bg-surface-selected text-accent-text hover:bg-surface-selected-hover\"\n          : \"text-secondary hover:bg-surface-hover hover:text-primary\",\n        collapsed && \"justify-center px-0\",\n      )}\n    >\n      <Icon name={item.icon} size=\"sm\" className=\"shrink-0\" />\n      {!collapsed && (\n        <>\n          <span className=\"min-w-0 flex-1 truncate\">{item.label}</span>\n          {item.badge}\n        </>\n      )}\n    </a>\n  );\n\n  /* Collapsed, the label is gone from the screen — so it moves into a\n     tooltip rather than disappearing entirely. That is the whole\n     reason icon-only navigation is usable. */\n  return collapsed ? (\n    <Tooltip content={item.label} side=\"right\">\n      {link}\n    </Tooltip>\n  ) : (\n    link\n  );\n}\n"],"names":["NavSections","sections","activeId","collapsed","onNavigate","jsx","Fragment","section","i","jsxs","item","NavRow","active","link","e","cn","Icon","Tooltip"],"mappings":";;;;AAmCO,SAASA,EAAY,EAAE,UAAAC,GAAU,UAAAC,GAAU,WAAAC,IAAY,IAAO,YAAAC,KAAgC;AACnG,SACE,gBAAAC,EAAAC,GAAA,EACG,YAAS,IAAI,CAACC,GAASC,MACtB,gBAAAC,EAAC,OAAA,EAAY,WAAU,yBACpB,UAAA;AAAA,IAAAF,EAAQ,SAAS,CAACJ,KACjB,gBAAAE,EAAC,UAAK,WAAU,mFACb,YAAQ,MAAA,CACX;AAAA,IAEDE,EAAQ,MAAM,IAAI,CAACG,MAClB,gBAAAL;AAAA,MAACM;AAAA,MAAA;AAAA,QAEC,MAAAD;AAAA,QACA,QAAQA,EAAK,OAAOR;AAAA,QACpB,WAAAC;AAAA,QACA,YAAAC;AAAA,MAAA;AAAA,MAJKM,EAAK;AAAA,IAAA,CAMb;AAAA,EAAA,KAdOF,CAeV,CACD,GACH;AAEJ;AAEA,SAASG,EAAO;AAAA,EACd,MAAAD;AAAA,EACA,QAAAE;AAAA,EACA,WAAAT;AAAA,EACA,YAAAC;AACF,GAKG;AACD,QAAMS,IACJ,gBAAAJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAMC,EAAK,QAAQ;AAAA,MACnB,SAAS,CAACI,MAAM;AACd,QAAKJ,EAAK,QAAMI,EAAE,eAAA,GAClBJ,EAAK,UAAUI,CAAC,GAChBV,IAAA;AAAA,MACF;AAAA,MACA,gBAAcQ,IAAS,SAAS;AAAA,MAChC,WAAWG;AAAA;AAAA;AAAA;AAAA,QAIT;AAAA,QACA;AAAA,QACA;AAAA;AAAA;AAAA;AAAA,QAIAH,IACI,yEACA;AAAA,QACJT,KAAa;AAAA,MAAA;AAAA,MAGf,UAAA;AAAA,QAAA,gBAAAE,EAACW,KAAK,MAAMN,EAAK,MAAM,MAAK,MAAK,WAAU,YAAW;AAAA,QACrD,CAACP,KACA,gBAAAM,EAAAH,GAAA,EACE,UAAA;AAAA,UAAA,gBAAAD,EAAC,QAAA,EAAK,WAAU,2BAA2B,UAAAK,EAAK,OAAM;AAAA,UACrDA,EAAK;AAAA,QAAA,EAAA,CACR;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAQN,SAAOP,sBACJc,GAAA,EAAQ,SAASP,EAAK,OAAO,MAAK,SAChC,UAAAG,EAAA,CACH,IAEAA;AAEJ;"}

package/dist/components/node-canvas/NodeCanvas.js

@@ -0,0 +1,384 @@
+import { jsxs as C, jsx as i } from "react/jsx-runtime";
+import { useId as Ve, useState as $, useCallback as g, useMemo as N, useRef as A, useEffect as j } from "react";
+import { cn as E } from "../../lib/cn.js";
+import { Icon as F } from "../Icon.js";
+import { IconButton as Be } from "../IconButton.js";
+import { Breadcrumb as Ke } from "../Navigation.js";
+import { Tooltip as $e } from "../Popover.js";
+import { ToggleGroup as Ee, Toggle as ge } from "../Toggle.js";
+import { layoutGraph as Fe, LAYOUT_DEFAULTS as Pe, neighbourhood as je, edgePath as Ge } from "./layout.js";
+import { useCanvasGestures as _e } from "./use-canvas-gestures.js";
+import { useUiStrings as ve } from "../../lib/i18n/provider.js";
+import { useNumberFormat as ye } from "../../lib/i18n/number-format.js";
+const M = 96, qe = 2;
+function G(s) {
+  return s.group !== null || s.cycle;
+}
+function _(s, f, m) {
+  return s.node ? s.node.label : s.group ? s.group.label : f.cyclicCluster(m(s.memberCount));
+}
+function be(s, f, m) {
+  return s.node ? s.node : { id: s.id, label: _(s, f, m) };
+}
+function He({ label: s, memberCount: f, isGroup: m }) {
+  const T = ve().nodeCanvas, z = ye();
+  return /* @__PURE__ */ C("div", { className: "flex h-full flex-col justify-center gap-1 px-3 py-2", children: [
+    /* @__PURE__ */ i("span", { className: "line-clamp-2 text-sm font-medium text-primary", children: s }),
+    m && /* @__PURE__ */ i("span", { className: "tabular text-2xs text-tertiary", children: T.itemCount(f, z(f)) })
+  ] });
+}
+function it({
+  graph: s,
+  groups: f = [],
+  label: m,
+  renderNode: T,
+  renderSummary: z,
+  edgeClassName: pe,
+  orientation: k = Pe.orientation,
+  nodeWidth: q,
+  nodeHeight: H,
+  height: W = "30rem",
+  expandedGroupId: O,
+  defaultExpandedGroupId: Y = null,
+  onExpandedGroupIdChange: J,
+  onNodeClick: Q,
+  onNodeDragEnd: we,
+  disabled: v,
+  className: xe
+}) {
+  const l = ve().nodeCanvas, y = ye(), P = Ve(), [ke, X] = $(Y), h = O !== void 0 ? O : ke, S = g(
+    (e) => {
+      O === void 0 && X(e), J?.(e);
+    },
+    [O, J]
+  ), [c, R] = $(null), Z = N(
+    () => c ? { cycleMemberIds: c } : h,
+    [c, h]
+  ), [D, p] = $(null), [ee, te] = $("canvas"), ne = A(!1);
+  j(() => {
+    ne.current || (ne.current = !0, typeof window < "u" && window.matchMedia("(max-width: 640px)").matches && te("list"));
+  }, []);
+  const oe = A(s.nodes), re = A(s.edges);
+  (oe.current !== s.nodes || re.current !== s.edges) && (oe.current = s.nodes, re.current = s.edges, O === void 0 && X(Y), R(null), p(null));
+  const o = N(
+    () => Fe(s, f, Z, { orientation: k, nodeWidth: q, nodeHeight: H }),
+    [s, f, Z, k, q, H]
+  ), U = N(() => new Map(o.nodes.map((e) => [e.id, e])), [o.nodes]), V = h ? f.find((e) => e.id === h) ?? null : null, b = N(
+    () => ({ width: o.width + M * 2, height: o.height + M * 2 }),
+    [o]
+  ), I = N(() => {
+    const e = /* @__PURE__ */ new Map();
+    for (const t of o.nodes)
+      e.set(t.id, { ...t, x: t.x + M, y: t.y + M });
+    return e;
+  }, [o]), Ne = g(
+    (e) => {
+      const t = I.get(e);
+      return t ? { x: t.x, y: t.y, width: t.width, height: t.height } : null;
+    },
+    [I]
+  ), B = g(
+    (e) => {
+      const t = U.get(e);
+      if (t) {
+        if (t.group) {
+          S(t.group.id), p(e);
+          return;
+        }
+        if (t.cycle) {
+          R(t.memberIds), p(null);
+          return;
+        }
+        p(e), t.node && Q?.(t.node);
+      }
+    },
+    [U, Q, S]
+  ), w = _e({
+    layoutBoxOf: Ne,
+    planeSize: b,
+    onNodeClick: B,
+    onNodeDragEnd: we,
+    disabled: v
+  }), { clearOffsets: se } = w, K = `${h ?? ""}:${c?.join(",") ?? ""}:${k}`, ie = A(K);
+  j(() => {
+    ie.current !== K && (ie.current = K, se());
+  }, [K, se]);
+  const Ce = g(
+    (e) => {
+      const t = I.get(e);
+      if (!t) return null;
+      const n = w.offsets[e];
+      return {
+        x: t.x + (n?.x ?? 0),
+        y: t.y + (n?.y ?? 0),
+        width: t.width,
+        height: t.height
+      };
+    },
+    [I, w.offsets]
+  ), x = N(
+    () => D ? je(D, o.edges, qe) : null,
+    [D, o.edges]
+  ), le = A(null), Se = N(() => {
+    if (o.nodes.length === 0) return null;
+    const e = new Set(o.edges.map((r) => r.to)), t = o.nodes.filter((r) => !e.has(r.id));
+    return [...t.length > 0 ? t : o.nodes].sort((r, a) => r.y - a.y || r.x - a.x)[0].id;
+  }, [o.nodes, o.edges]), ce = D && I.has(D) ? D : Se, De = g((e) => {
+    p(e), queueMicrotask(() => {
+      const t = le.current?.querySelector(
+        `[data-canvas-node="${CSS.escape(e)}"]`
+      );
+      t?.focus(), t?.scrollIntoView({ block: "nearest", inline: "nearest" });
+    });
+  }, []), ae = g(() => {
+    if (c) {
+      R(null), p(null);
+      return;
+    }
+    h !== null && (S(null), p(null));
+  }, [c, h, S]), ue = g(
+    (e) => Math.round(k === "vertical" ? e.y : e.x),
+    [k]
+  );
+  function de(e, t) {
+    const n = I.get(e);
+    if (!n) return null;
+    const r = ue(n), a = o.nodes.filter((d) => ue(d) === r).sort((d, u) => k === "vertical" ? d.x - u.x : d.y - u.y), L = a.findIndex((d) => d.id === e);
+    return a[L + t]?.id ?? null;
+  }
+  function Ie(e) {
+    return o.edges.find((t) => t.to === e)?.from ?? null;
+  }
+  function Ae(e) {
+    return o.edges.find((t) => t.from === e)?.to ?? null;
+  }
+  function Me(e, t) {
+    const n = k === "vertical", r = n ? "ArrowLeft" : "ArrowUp", a = n ? "ArrowRight" : "ArrowDown", L = n ? "ArrowUp" : "ArrowLeft", d = n ? "ArrowDown" : "ArrowRight";
+    let u = null;
+    switch (e.key) {
+      case r:
+        u = de(t, -1);
+        break;
+      case a:
+        u = de(t, 1);
+        break;
+      case L:
+        u = Ie(t);
+        break;
+      case d:
+        u = Ae(t);
+        break;
+      case "Enter":
+      case " ":
+        e.preventDefault(), v || B(t);
+        return;
+      case "Backspace":
+        e.preventDefault(), v || ae();
+        return;
+      default:
+        return;
+    }
+    u && (e.preventDefault(), De(u));
+  }
+  const fe = A(null), { bindViewport: me } = w, Oe = g(
+    (e) => {
+      fe.current = e, me(e);
+    },
+    [me]
+  );
+  j(() => {
+    const e = fe.current;
+    !e || o.nodes.length === 0 || (e.scrollLeft = Math.max(0, b.width / 2 - e.clientWidth / 2), e.scrollTop = Math.max(0, b.height / 2 - e.clientHeight / 2));
+  }, [h, c, b.width, b.height]);
+  const Re = g(() => {
+    S(null), R(null);
+  }, [S]), Le = [
+    { label: m, onClick: h === null && !c ? void 0 : Re },
+    ...V ? [{ label: V.label, onClick: c ? () => R(null) : void 0 }] : [],
+    ...c ? [{ label: l.cyclicCluster(y(c.length)), onClick: void 0 }] : []
+  ], Te = g(
+    (e) => o.edges.filter((n) => n.from === e).map((n) => U.get(n.to)).filter((n) => !!n),
+    [o.edges, U]
+  ), he = (e, t, n) => {
+    const r = be(e, l, y), a = {
+      isGroup: G(e),
+      memberCount: e.memberCount,
+      isFocused: t,
+      isDragging: n,
+      focusDistance: x?.get(e.id) ?? null
+    };
+    return T ? T(r, a) : /* @__PURE__ */ i(He, { label: r.label, memberCount: e.memberCount, isGroup: a.isGroup });
+  }, ze = (e) => {
+    const t = be(e, l, y);
+    return z ? z(t) : t.label;
+  };
+  return /* @__PURE__ */ C(
+    "div",
+    {
+      className: E(
+        "relative flex min-w-0 flex-col overflow-hidden rounded-xl border border-border bg-surface",
+        xe
+      ),
+      children: [
+        /* @__PURE__ */ C("div", { className: "flex flex-wrap items-center gap-2 border-b border-border-subtle px-3 py-2", children: [
+          /* @__PURE__ */ i(
+            Be,
+            {
+              icon: /* @__PURE__ */ i(F, { name: "arrow-up", size: "sm" }),
+              label: l.goUp,
+              size: "sm",
+              onClick: ae,
+              disabledReason: v ? l.readOnly : h === null && !c ? l.atTop : void 0
+            }
+          ),
+          /* @__PURE__ */ i(Ke, { items: Le, className: "min-w-0 flex-1" }),
+          /* @__PURE__ */ C(
+            Ee,
+            {
+              variant: "segmented",
+              multiple: !1,
+              "aria-label": l.view,
+              value: [ee],
+              onValueChange: (e) => te(e[0] === "list" ? "list" : "canvas"),
+              children: [
+                /* @__PURE__ */ i(ge, { value: "canvas", iconOnly: !0, "aria-label": l.chartView, children: /* @__PURE__ */ i(F, { name: "git-branch", size: "xs" }) }),
+                /* @__PURE__ */ i(ge, { value: "list", iconOnly: !0, "aria-label": l.listView, children: /* @__PURE__ */ i(F, { name: "list", size: "xs" }) })
+              ]
+            }
+          )
+        ] }),
+        ee === "list" ? /* @__PURE__ */ i(
+          "div",
+          {
+            role: "list",
+            "aria-label": m,
+            "aria-describedby": P,
+            className: "min-w-0 flex-1 divide-y divide-border-subtle overflow-auto",
+            style: { height: W },
+            children: o.nodes.map((e) => {
+              const t = Te(e.id), n = G(e);
+              return /* @__PURE__ */ C(
+                "div",
+                {
+                  role: "listitem",
+                  tabIndex: 0,
+                  onClick: () => B(e.id),
+                  onKeyDown: (r) => {
+                    (r.key === "Enter" || r.key === " ") && (r.preventDefault(), B(e.id));
+                  },
+                  className: E(
+                    "flex flex-col gap-1 px-3 py-2 outline-none",
+                    "focus-visible:ring-2 focus-visible:ring-accent-border focus-visible:ring-inset",
+                    n && !v ? "cursor-pointer hover:bg-surface-hover" : "cursor-default"
+                  ),
+                  children: [
+                    /* @__PURE__ */ C("div", { className: "flex min-w-0 items-center gap-2", children: [
+                      he(e, !1, !1),
+                      n && /* @__PURE__ */ i(F, { name: "chevron-right", size: "xs", className: "shrink-0 text-tertiary" })
+                    ] }),
+                    t.length > 0 && /* @__PURE__ */ i("p", { className: "pl-3 text-2xs text-tertiary", children: l.connectsTo(t.map((r) => _(r, l, y))) })
+                  ]
+                },
+                e.id
+              );
+            })
+          }
+        ) : /* @__PURE__ */ i(
+          "div",
+          {
+            ref: Oe,
+            "data-canvas-viewport": !0,
+            className: E(
+              "relative min-w-0 overflow-auto overscroll-contain bg-canvas-subtle",
+              "select-none",
+              v ? "cursor-default" : w.panning ? "cursor-grabbing" : "cursor-grab"
+            ),
+            style: { height: W },
+            children: /* @__PURE__ */ C("div", { className: "relative", style: { width: b.width, height: b.height }, children: [
+              /* @__PURE__ */ i(
+                "svg",
+                {
+                  "aria-hidden": "true",
+                  "data-canvas-edges": !0,
+                  className: "pointer-events-none absolute inset-0 text-border-strong",
+                  width: b.width,
+                  height: b.height,
+                  children: o.edges.map((e) => {
+                    const t = {
+                      ...e,
+                      points: e.points.map((r) => ({ x: r.x + M, y: r.y + M }))
+                    }, n = x !== null && x.has(e.from) && x.has(e.to);
+                    return /* @__PURE__ */ i(
+                      "path",
+                      {
+                        d: Ge(t),
+                        fill: "none",
+                        stroke: "currentColor",
+                        strokeWidth: x ? n ? 2 : 1 : 1.5,
+                        opacity: x ? n ? 1 : 0.35 : 1,
+                        className: pe?.(e)
+                      },
+                      `${e.from}->${e.to}`
+                    );
+                  })
+                }
+              ),
+              /* @__PURE__ */ i(
+                "div",
+                {
+                  ref: le,
+                  role: "tree",
+                  "aria-label": m,
+                  "aria-describedby": P,
+                  className: "pointer-events-none absolute inset-0",
+                  children: o.nodes.map((e) => {
+                    const t = Ce(e.id);
+                    if (!t) return null;
+                    const n = w.draggingId === e.id, r = G(e), a = x?.get(e.id) ?? null, L = x !== null && a === null, d = ze(e), u = /* @__PURE__ */ i(
+                      "div",
+                      {
+                        ref: w.bindNode(e.id),
+                        role: "treeitem",
+                        "aria-label": _(e, l, y),
+                        "aria-expanded": r ? !1 : void 0,
+                        "data-canvas-node": e.id,
+                        "data-canvas-dragging": n || void 0,
+                        tabIndex: e.id === ce ? 0 : -1,
+                        onFocus: () => p(e.id),
+                        onKeyDown: (Ue) => Me(Ue, e.id),
+                        className: E(
+                          "pointer-events-auto absolute rounded-lg border bg-surface-raised outline-none",
+                          "transition-[var(--tx-colors),box-shadow,scale,opacity] duration-(--dur-fast) ease-snappy",
+                          "focus-visible:ring-2 focus-visible:ring-accent-border",
+                          r && !v ? "cursor-pointer border-border hover:border-accent-border hover:bg-surface-hover" : "cursor-default border-border-subtle",
+                          n ? "z-20 scale-[1.02] border-accent-border elevate-lg" : "elevate-sm",
+                          !n && w.offsets[e.id] && "z-10",
+                          L && "opacity-40"
+                        ),
+                        style: {
+                          left: t.x,
+                          top: t.y,
+                          width: t.width,
+                          height: t.height,
+                          touchAction: v ? void 0 : "pan-x pan-y"
+                        },
+                        children: he(e, e.id === ce, n)
+                      },
+                      e.id
+                    );
+                    return d != null ? /* @__PURE__ */ i($e, { content: d, children: u }, e.id) : u;
+                  })
+                }
+              )
+            ] })
+          }
+        ),
+        /* @__PURE__ */ i("p", { id: P, role: "status", "aria-live": "polite", className: "sr-only", children: c ? l.showingCycle(o.nodes.length, y(o.nodes.length), y(c.length)) : l.showing(o.nodes.length, y(o.nodes.length), V ? V.label : m) })
+      ]
+    }
+  );
+}
+export {
+  it as NodeCanvas
+};
+//# sourceMappingURL=NodeCanvas.js.map