@weasel-js/core 1.9.4 → 1.10.1

package/dist/features/text/useSceneTextEdit.js.map

@@ -1 +1 @@
-{"version":3,"file":"useSceneTextEdit.js","names":["resolveView","view","useSceneTextEdit","sceneRef","useLatest","scene","optsRef","options","containerRef","container","openedOnRef","useRef","surface","root","canvas","findMountedCanvas","a","b","read","useMemo","data","isTextData","edit","useTextEdit","el","node","asNodeId","id","get","pose","effectivePose","style","at","zoom","originX","originY","resolveScreenLength","nid","setText","text","runs","setRuns","setStyle","onDoubleClick","useCallback","e","canvasX","canvasY","clientToCanvas","cx","cy","order","i","pointInTextPose","caretIndexAt","isTextNode"],"sources":["../../../src/features/text/useSceneTextEdit.ts"],"sourcesContent":["/**\n * `useSceneTextEdit` — scene-aware wrapper around `useTextEdit`.\n *\n * Every consumer that wires `useTextEdit` against a `useScene`-managed\n * scene writes the same callbacks: scene lookups for text / style /\n * runs / screen-pose, and `scene.update(id, { data })` for commits. This\n * helper bakes that wiring in. Consumers pass `scene` + `container` and\n * get back the same `UseTextEditReturn` shape (`startEdit`, `isEditing`,\n * `cancelEdit`, `commit`, `editingId`).\n *\n * Defaults assume the node's `data` carries `text` / `style` / `runs`\n * directly — matches the `useScene({ items })` trivial form where\n * `data === item` for text-shaped items, and matches `TextPose`-shaped\n * data. For custom data shapes, override any of the optional projections\n * (`getText` / `getStyle` / `getRuns` / `setText` / `setRuns` / `setStyle`).\n *\n * Pose component: the helper reads `(x, y, width, height)` straight off\n * the node's pose (typed `RectPose`) and projects that box through the view\n * of the weasel canvas mounted inside `container` — see the `view` option.\n * The overlay is clipped to that canvas's box, where its glyphs are clipped.\n * Consumers with non-rect poses should drop down to raw `useTextEdit` and\n * supply their own `getScreenPose`.\n */\nimport { useCallback, useMemo, useRef, type MouseEvent } from 'react';\nimport { useLatest } from '@weasel-js/react';\nimport { asNodeId } from '../../core/scene/types';\nimport { effectivePose } from '../../core/scene/effectivePose';\nimport type { Scene } from '../../core/scene/types';\nimport type { FillStyle, Stroke } from '@weasel-js/paint';\nimport { resolveScreenLength } from '@weasel-js/paint';\nimport { clientToCanvas } from '@weasel-js/routing';\nimport { findMountedCanvas, type MountedCanvas } from '../../canvas/mountedCanvases';\nimport type { View } from '../../core/viewport/view';\nimport type { RectPose } from 'core/geometry/unionBounds';\nimport { caretIndexAt, pointInTextPose } from './hitTest';\nimport { isTextData } from './isTextData';\nimport type { StyledRun } from '@weasel-js/text';\nimport type { TextPaint, TextStyle, TextVerticalAlign } from '@weasel-js/text';\nimport { useTextEdit, type TextEditClipRect, type UseTextEditReturn } from './useTextEdit';\n\n/** Shape the default projections expect `data` to satisfy. All fields\n *  optional so any object satisfies the constraint — projections fill in\n *  the gaps for non-default shapes. */\nexport interface DefaultTextData {\n  text?: string;\n  style?: TextStyle;\n  runs?: readonly StyledRun[];\n  fill?: FillStyle | null;\n  stroke?: Stroke | null;\n  verticalAlign?: TextVerticalAlign;\n}\n\n/** All-optional projections + fontSize fallback. */\nexport interface UseSceneTextEditOptions<TData> {\n  /**\n   * Is this node text? A double-click opens an edit only on a node that\n   * answers yes, and passes through any other to the text under it. Default:\n   * `isTextData`, the test `inferredNodeRouting` classifies a text node by. Pass one when `getText` reads some other shape.\n   */\n  isText?: (data: TData) => boolean;\n  /** Read plain text from `data`. Default: `data.text ?? ''`. */\n  getText?: (data: TData) => string;\n  /** Read style from `data`. Default: `data.style`. */\n  getStyle?: (data: TData) => TextStyle | undefined;\n  /** Read the node's paint from `data`. Default: `data.fill` / `data.stroke`. */\n  getPaint?: (data: TData) => TextPaint | undefined;\n  /** Read rich-text runs from `data`. Default: `data.runs`. */\n  getRuns?: (data: TData) => readonly StyledRun[] | undefined;\n  /** Read the box vertical alignment from `data`. Default: `data.verticalAlign`. */\n  getVerticalAlign?: (data: TData) => TextVerticalAlign | undefined;\n  /** Produce updated data with new text. Default: `{ ...data, text }`. */\n  setText?: (data: TData, text: string) => TData;\n  /** Produce updated data with new runs. Default: `{ ...data, runs }`. */\n  setRuns?: (data: TData, runs: StyledRun[]) => TData;\n  /**\n   * Produce updated data with a new node-wide style. Default:\n   * `{ ...data, style }`. Written only when a range toggle has to *clear* a\n   * flag the node itself sets — the run algebra is additive, so that edit\n   * lowers the node flag and raises it on the runs outside the range. See\n   * `useTextEdit`'s `setStyle`.\n   *\n   * An edit's text, runs, and style are folded through these three and\n   * written as one `scene.update`, so a commit is one undo step.\n   */\n  setStyle?: (data: TData, style: TextStyle) => TData;\n  /** Fallback fontSize when `style.fontSize` is unset. Default `16`. */\n  defaultFontSize?: number;\n  /**\n   * The view to project through. Omit it and the view is read live from the\n   * weasel canvas mounted inside `container` (the one a double-click landed\n   * on, when there are several) — which is all a canvas that pans or zooms\n   * needs. With no canvas there, the node's world box is passed through as\n   * screen pixels.\n   *\n   * The overlay is positioned at the node's projected origin and CSS-scaled\n   * by the view, so every typographic metric on it — including the\n   * `fontSize` / `letterSpacing` a *run* carries — stays in world units and\n   * scales together.\n   *\n   * The overlay takes a single scale factor, so a non-uniform view scale is\n   * represented by its `scale.x`; text under `scale.x !== scale.y` will not\n   * match the canvas.\n   *\n   * Pass one to project through a camera other than the canvas's own. A\n   * thunk is re-read on every projection; a plain `View` is the value from\n   * the render that supplied it.\n   */\n  view?: View | (() => View);\n  /**\n   * Forwarded to `useTextEdit`: is `el` part of the editor's own chrome?\n   * Focus moving into it does not end the edit. Wire it to whatever renders\n   * the character controls.\n   */\n  isEditorChrome?: (el: Element) => boolean;\n  /** Forwarded to `useTextEdit`: what Escape does to the edit. */\n  escape?: 'cancel' | 'commit';\n  /** Forwarded to `useTextEdit`: how long an edit waits for its face. */\n  fontHold?: number;\n}\n\nfunction resolveView(view: View | (() => View) | undefined): View | undefined {\n  return typeof view === 'function' ? view() : view;\n}\n\n/** Return shape extends `UseTextEditReturn` with an `onDoubleClick`\n *  binding for the canvas container. Double-clicking inside a text\n *  node enters edit mode with the caret seeded at the clicked glyph. */\nexport interface UseSceneTextEditReturn extends UseTextEditReturn {\n  /** Bind to the element wrapping `<SceneCanvas>` (the same element\n   *  passed as `container`, or any ancestor that receives the dblclick\n   *  bubble). The handler looks up the canvas via `e.target`, hits the\n   *  top-most text node under the cursor via `pointInTextPose`, resolves\n   *  a caret offset via `caretIndexAt`, and starts edit on that node. */\n  onDoubleClick: (e: MouseEvent<HTMLElement>) => void;\n  /** The `isText` option asked of the node with this id: what\n   *  `TextEditDep.isTextNode` wants, so both ways into an edit agree. */\n  isTextNode: (id: string) => boolean;\n}\n\n/** Wire double-click-to-edit text on a scene: mounts a DOM editing overlay\n *  over the node being edited and writes the result back as an undoable op. */\nexport function useSceneTextEdit<\n  TData extends DefaultTextData,\n  TLayer extends string,\n  TPose extends RectPose = RectPose,\n>(\n  scene: Scene<TData, TLayer, TPose>,\n  container: HTMLElement | null,\n  options: UseSceneTextEditOptions<TData> = {},\n): UseSceneTextEditReturn {\n  // Stash scene + options in refs so the useTextEdit callbacks always see\n  // the current values without re-binding (the underlying hook also reads\n  // its options through a ref, so any re-creation would be churn).\n  const sceneRef = useLatest(scene);\n  const optsRef = useLatest(options);\n  const containerRef = useLatest(container);\n  // The last double-click's target, so the overlay projects through the\n  // canvas the edit was opened on.\n  const openedOnRef = useRef<EventTarget | null>(null);\n\n  // The canvas's box in container pixels is both the origin its view projects\n  // from and the region its glyphs are clipped to.\n  const surface = (): { canvas: MountedCanvas; box: TextEditClipRect } | null => {\n    const root = containerRef.current;\n    const canvas = root ? findMountedCanvas(root, openedOnRef.current) : null;\n    if (!root || !canvas) return null;\n    const a = canvas.element.getBoundingClientRect();\n    const b = root.getBoundingClientRect();\n    return {\n      canvas,\n      box: {\n        x: a.left - b.left - root.clientLeft + root.scrollLeft,\n        y: a.top - b.top - root.clientTop + root.scrollTop,\n        width: a.width,\n        height: a.height,\n      },\n    };\n  };\n\n  const read = useMemo(() => ({\n    isText: (data: TData): boolean =>\n      optsRef.current.isText ? optsRef.current.isText(data) : isTextData(data),\n    text: (data: TData): string =>\n      optsRef.current.getText ? optsRef.current.getText(data) : (data.text ?? ''),\n    style: (data: TData): TextStyle | undefined =>\n      optsRef.current.getStyle ? optsRef.current.getStyle(data) : data.style,\n    runs: (data: TData): readonly StyledRun[] | undefined =>\n      optsRef.current.getRuns ? optsRef.current.getRuns(data) : data.runs,\n    verticalAlign: (data: TData): TextVerticalAlign | undefined =>\n      optsRef.current.getVerticalAlign ? optsRef.current.getVerticalAlign(data) : data.verticalAlign,\n  }), [optsRef]);\n\n  const edit = useTextEdit({\n    container,\n    isEditorChrome: (el) => optsRef.current.isEditorChrome?.(el) ?? false,\n    escape: options.escape,\n    fontHold: options.fontHold,\n    getText: (id) => {\n      const node = sceneRef.current.get(asNodeId(id));\n      return node ? read.text(node.data) : '';\n    },\n    getStyle: (id) => {\n      const node = sceneRef.current.get(asNodeId(id));\n      return node ? read.style(node.data) : undefined;\n    },\n    getPaint: (id) => {\n      const node = sceneRef.current.get(asNodeId(id));\n      if (!node) return undefined;\n      const get = optsRef.current.getPaint;\n      return get ? get(node.data) : { fill: node.data.fill, stroke: node.data.stroke };\n    },\n    getScreenPose: (id) => {\n      const scene = sceneRef.current;\n      const node = scene.get(asNodeId(id));\n      if (!node) return null;\n      const pose = effectivePose(scene, node);\n      const style = read.style(node.data);\n      const at = surface();\n      const view = resolveView(optsRef.current.view) ?? at?.canvas.getView();\n      const zoom = view ? view.scale.x : 1;\n      const originX = at?.box.x ?? 0;\n      const originY = at?.box.y ?? 0;\n      // Only the origin is projected. Width, height and font size stay in\n      // world units and reach the screen through the overlay's own\n      // `scale(zoom)` — see `TextEditScreenPose.zoom`.\n      return {\n        x: originX + (view ? (pose.x - view.x) * view.scale.x : pose.x),\n        y: originY + (view ? (pose.y - view.y) * view.scale.y : pose.y),\n        width: pose.width,\n        height: pose.height,\n        // Against `zoom`, the same factor the overlay scales back up by, so a\n        // `{ px }` size arrives on screen at the pixel count it names.\n        fontSize: resolveScreenLength(\n          style?.fontSize ?? optsRef.current.defaultFontSize ?? 16,\n          zoom,\n        ),\n        zoom,\n        verticalAlign: read.verticalAlign(node.data),\n      };\n    },\n    getClipRect: () => surface()?.box ?? null,\n    getRuns: (id) => {\n      const node = sceneRef.current.get(asNodeId(id));\n      return node ? read.runs(node.data) : undefined;\n    },\n    commit: (id, { text, runs, style }) => {\n      const nid = asNodeId(id);\n      const node = sceneRef.current.get(nid);\n      if (!node) return;\n      const { setText, setRuns, setStyle } = optsRef.current;\n      let data = setText ? setText(node.data, text) : { ...node.data, text };\n      if (runs) data = setRuns ? setRuns(data, runs) : { ...data, runs };\n      if (style) data = setStyle ? setStyle(data, style) : { ...data, style };\n      sceneRef.current.update(nid, { data });\n    },\n  });\n\n  const onDoubleClick = useCallback((e: MouseEvent<HTMLElement>) => {\n    // The dblclick bubbles from the canvas up to any wrapping container; the\n    // element it started on is what the click coordinates are relative to.\n    const canvas = e.target instanceof HTMLElement ? e.target : null;\n    if (!canvas) return;\n    // Inside the editor a double-click selects a word, and its target is a run\n    // span whose box the click would be measured against as if it were a canvas.\n    if (canvas.closest('[contenteditable=\"true\"]')) return;\n\n    // `pointInTextPose` and `caretIndexAt` both work in world units, so the\n    // canvas-space click has to be un-projected before either sees it.\n    const [canvasX, canvasY] = clientToCanvas(canvas, e.clientX, e.clientY);\n    const root = containerRef.current;\n    const view = resolveView(optsRef.current.view)\n      ?? (root ? findMountedCanvas(root, canvas)?.getView() : undefined);\n    const cx = view ? canvasX / view.scale.x + view.x : canvasX;\n    const cy = view ? canvasY / view.scale.y + view.y : canvasY;\n    // Top-most-first hit test: renderOrder() is back-to-front, so iterate\n    // in reverse and break on the first hit.\n    const order = sceneRef.current.renderOrderNodes();\n    for (let i = order.length - 1; i >= 0; i--) {\n      const node = order[i];\n      if (sceneRef.current.isLocked(node.id)) continue;\n      if (!read.isText(node.data)) continue;\n      const text = read.text(node.data);\n      const at = effectivePose(sceneRef.current, node);\n      const pose = {\n        x: at.x,\n        y: at.y,\n        width: at.width,\n        height: at.height,\n        text,\n        runs: read.runs(node.data) as StyledRun[] | undefined,\n        style: read.style(node.data),\n        verticalAlign: read.verticalAlign(node.data),\n      };\n      if (!pointInTextPose(cx, cy, pose)) continue;\n\n      openedOnRef.current = canvas;\n      edit.startEdit(String(node.id), { caret: caretIndexAt(cx, cy, pose) });\n      return;\n    }\n  }, [edit, containerRef, optsRef, read, sceneRef]);\n\n  const isTextNode = useCallback((id: string): boolean => {\n    const node = sceneRef.current.get(asNodeId(id));\n    return node !== undefined && read.isText(node.data);\n  }, [read, sceneRef]);\n\n  return { ...edit, onDoubleClick, isTextNode };\n}\n"],"mappings":"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"}
+{"version":3,"file":"useSceneTextEdit.js","names":["resolveView","view","projectionsOf","opts","data","isTextData","useSceneTextEdit","sceneRef","useLatest","scene","optsRef","options","containerRef","container","openedOnRef","useRef","surface","root","canvas","findMountedCanvas","a","b","read","useMemo","edit","useTextEdit","el","id","node","asNodeId","get","pose","scenePaintedPoseOf","style","at","box","screenBoxOf","resolveScreenLength","nid","setText","text","runs","setRuns","setStyle","onDoubleClick","useCallback","e","canvasX","canvasY","clientToCanvas","cx","cy","order","paintedPoseOf","i","p","worldToLocal","targetTransformOf","pointInTextPose","caretIndexAt","isTextNode","zoom","zoomY","origin","frameLinearOf","m","poseFrameOf","stretch","c","d"],"sources":["../../../src/features/text/useSceneTextEdit.ts"],"sourcesContent":["/**\n * `useSceneTextEdit` — scene-aware wrapper around `useTextEdit`: scene\n * lookups for text / style / runs / screen-pose, and\n * `scene.update(id, { data })` for commits. The overlay and a double-click\n * both read the pose a node is painted at, so text inside a container whose\n * pose is a frame is edited where it is drawn.\n *\n * Defaults assume the node's `data` carries `text` / `style` / `runs`\n * directly. For custom data shapes, override any of the optional projections.\n * Consumers with non-rect poses should drop down to raw `useTextEdit` and\n * supply their own `getScreenPose`.\n */\nimport { useCallback, useMemo, useRef, type MouseEvent } from 'react';\nimport { useLatest } from '@weasel-js/react';\nimport { asNodeId } from '../../core/scene/types';\nimport { scenePaintedPoseOf } from '../../canvas/derivedPath';\nimport type { Scene } from '../../core/scene/types';\nimport type { Stroke, Fill } from '@weasel-js/paint';\nimport { resolveScreenLength } from '@weasel-js/paint';\nimport { clientToCanvas } from '@weasel-js/routing';\nimport { findMountedCanvas, type MountedCanvas } from '../../canvas/mountedCanvases';\nimport type { View } from '../../core/viewport/view';\nimport type { RectPose } from 'core/geometry/unionBounds';\nimport { targetTransformOf, worldToLocal } from 'core/geometry/targetFrame';\nimport { poseFrameOf } from '@weasel-js/geom';\nimport { caretIndexAt, pointInTextPose, isTextData, type StyledRun, type TextPaint, type TextStyle, type TextVerticalAlign } from '@weasel-js/text';\nimport { useTextEdit, type TextEditClipRect, type TextEditScreenPose, type UseTextEditReturn } from '@weasel-js/text-dom';\n\n/** Shape the default projections expect `data` to satisfy. All fields\n *  optional so any object satisfies the constraint — projections fill in\n *  the gaps for non-default shapes. */\nexport interface DefaultTextData {\n  text?: string;\n  style?: TextStyle;\n  runs?: readonly StyledRun[];\n  fill?: Fill | null;\n  stroke?: Stroke | null;\n  verticalAlign?: TextVerticalAlign;\n}\n\n/** All-optional projections + fontSize fallback. */\nexport interface UseSceneTextEditOptions<TData> {\n  /**\n   * Is this node text? A double-click opens an edit only on a node that\n   * answers yes, and passes through any other to the text under it. Default:\n   * `isTextData`, the test `inferredNodeRouting` classifies a text node by. Pass one when `getText` reads some other shape.\n   */\n  isText?: (data: TData) => boolean;\n  /** Read plain text from `data`. Default: `data.text ?? ''`. */\n  getText?: (data: TData) => string;\n  /** Read style from `data`. Default: `data.style`. */\n  getStyle?: (data: TData) => TextStyle | undefined;\n  /** Read the node's paint from `data`. Default: `data.fill` / `data.stroke`. */\n  getPaint?: (data: TData) => TextPaint | undefined;\n  /** Read rich-text runs from `data`. Default: `data.runs`. */\n  getRuns?: (data: TData) => readonly StyledRun[] | undefined;\n  /** Read the box vertical alignment from `data`. Default: `data.verticalAlign`. */\n  getVerticalAlign?: (data: TData) => TextVerticalAlign | undefined;\n  /** Produce updated data with new text. Default: `{ ...data, text }`. */\n  setText?: (data: TData, text: string) => TData;\n  /** Produce updated data with new runs. Default: `{ ...data, runs }`. */\n  setRuns?: (data: TData, runs: StyledRun[]) => TData;\n  /**\n   * Produce updated data with a new node-wide style. Default:\n   * `{ ...data, style }`. Written only when a range toggle has to *clear* a\n   * flag the node itself sets — the run algebra is additive, so that edit\n   * lowers the node flag and raises it on the runs outside the range. See\n   * `useTextEdit`'s `setStyle`.\n   *\n   * An edit's text, runs, and style are folded through these three and\n   * written as one `scene.update`, so a commit is one undo step.\n   */\n  setStyle?: (data: TData, style: TextStyle) => TData;\n  /** Fallback fontSize when `style.fontSize` is unset. Default `16`. */\n  defaultFontSize?: number;\n  /**\n   * The view to project through. Omit it and the view is read live from the\n   * weasel canvas mounted inside `container` (the one a double-click landed\n   * on, when there are several). With no canvas there, the node's world box\n   * is passed through as screen pixels.\n   *\n   * A thunk is re-read on every projection; a plain `View` is the value from\n   * the render that supplied it.\n   */\n  view?: View | (() => View);\n  /**\n   * Forwarded to `useTextEdit`: is `el` part of the editor's own chrome?\n   * Focus moving into it does not end the edit. Wire it to whatever renders\n   * the character controls.\n   */\n  isEditorChrome?: (el: Element) => boolean;\n  /** Forwarded to `useTextEdit`: what Escape does to the edit. */\n  escape?: 'cancel' | 'commit';\n  /** Forwarded to `useTextEdit`: how long an edit waits for its face. */\n  fontHold?: number;\n  /** Forwarded to `useTextEdit`: called as an edit of the node `id` opens,\n   *  whichever way it was started. */\n  onStart?: (id: string) => void;\n  /** Forwarded to `useTextEdit`: called as the edit of `id` closes, after\n   *  any commit has been written to the scene. */\n  onEnd?: (id: string) => void;\n}\n\nfunction resolveView(view: View | (() => View) | undefined): View | undefined {\n  return typeof view === 'function' ? view() : view;\n}\n\n/** Return shape extends `UseTextEditReturn` with an `onDoubleClick`\n *  binding for the canvas container. Double-clicking inside a text\n *  node enters edit mode with the caret seeded at the clicked glyph. */\nexport interface UseSceneTextEditReturn extends UseTextEditReturn {\n  /** Bind to the element wrapping `<SceneCanvas>` (the same element\n   *  passed as `container`, or any ancestor that receives the dblclick\n   *  bubble). Starts an edit on the top-most text node under the cursor. */\n  onDoubleClick: (e: MouseEvent<HTMLElement>) => void;\n  /** The `isText` option asked of the node with this id: what\n   *  `TextEditDep.isTextNode` wants, so both ways into an edit agree. */\n  isTextNode: (id: string) => boolean;\n}\n\n/** How each field is read from a node's `data`: the option's projection, else the default shape. */\nfunction projectionsOf<TData extends DefaultTextData>(opts: { readonly current: UseSceneTextEditOptions<TData> }) {\n  return {\n    isText: (data: TData): boolean =>\n      opts.current.isText ? opts.current.isText(data) : isTextData(data),\n    text: (data: TData): string =>\n      opts.current.getText ? opts.current.getText(data) : (data.text ?? ''),\n    style: (data: TData): TextStyle | undefined =>\n      opts.current.getStyle ? opts.current.getStyle(data) : data.style,\n    runs: (data: TData): readonly StyledRun[] | undefined =>\n      opts.current.getRuns ? opts.current.getRuns(data) : data.runs,\n    verticalAlign: (data: TData): TextVerticalAlign | undefined =>\n      opts.current.getVerticalAlign ? opts.current.getVerticalAlign(data) : data.verticalAlign,\n  };\n}\n\n/** Wire double-click-to-edit text on a scene: mounts a DOM editing overlay\n *  over the node being edited and writes the result back as an undoable op. */\nexport function useSceneTextEdit<\n  TData extends DefaultTextData,\n  TLayer extends string,\n  TPose extends RectPose = RectPose,\n>(\n  scene: Scene<TData, TLayer, TPose>,\n  container: HTMLElement | null,\n  options: UseSceneTextEditOptions<TData> = {},\n): UseSceneTextEditReturn {\n  // Refs, so the useTextEdit callbacks always see the current values\n  // without re-binding.\n  const sceneRef = useLatest(scene);\n  const optsRef = useLatest(options);\n  const containerRef = useLatest(container);\n  // The last double-click's target, so the overlay projects through the\n  // canvas the edit was opened on.\n  const openedOnRef = useRef<EventTarget | null>(null);\n\n  // The canvas's box in container pixels is both the origin its view projects\n  // from and the region its glyphs are clipped to.\n  const surface = (): { canvas: MountedCanvas; box: TextEditClipRect } | null => {\n    const root = containerRef.current;\n    const canvas = root ? findMountedCanvas(root, openedOnRef.current) : null;\n    if (!root || !canvas) return null;\n    const a = canvas.element.getBoundingClientRect();\n    const b = root.getBoundingClientRect();\n    return {\n      canvas,\n      box: {\n        x: a.left - b.left - root.clientLeft + root.scrollLeft,\n        y: a.top - b.top - root.clientTop + root.scrollTop,\n        width: a.width,\n        height: a.height,\n      },\n    };\n  };\n\n  const read = useMemo(() => projectionsOf(optsRef), [optsRef]);\n\n  const edit = useTextEdit({\n    container,\n    isEditorChrome: (el) => optsRef.current.isEditorChrome?.(el) ?? false,\n    escape: options.escape,\n    fontHold: options.fontHold,\n    onStart: (id) => optsRef.current.onStart?.(id),\n    onEnd: (id) => optsRef.current.onEnd?.(id),\n    getText: (id) => {\n      const node = sceneRef.current.get(asNodeId(id));\n      return node ? read.text(node.data) : '';\n    },\n    getStyle: (id) => {\n      const node = sceneRef.current.get(asNodeId(id));\n      return node ? read.style(node.data) : undefined;\n    },\n    getPaint: (id) => {\n      const node = sceneRef.current.get(asNodeId(id));\n      if (!node) return undefined;\n      const get = optsRef.current.getPaint;\n      return get ? get(node.data) : { fill: node.data.fill, stroke: node.data.stroke };\n    },\n    getScreenPose: (id) => {\n      const scene = sceneRef.current;\n      const node = scene.get(asNodeId(id));\n      if (!node) return null;\n      const pose = scenePaintedPoseOf(scene)(node);\n      const style = read.style(node.data);\n      const at = surface();\n      const view = resolveView(optsRef.current.view) ?? at?.canvas.getView();\n      const box = screenBoxOf(pose, view, at?.box);\n      return {\n        ...box,\n        // Against `zoom`, the same factor the overlay scales back up by, so a\n        // `{ px }` size arrives on screen at the pixel count it names.\n        fontSize: resolveScreenLength(\n          style?.fontSize ?? optsRef.current.defaultFontSize ?? 16,\n          box.zoom,\n        ),\n        verticalAlign: read.verticalAlign(node.data),\n      };\n    },\n    getClipRect: () => surface()?.box ?? null,\n    getRuns: (id) => {\n      const node = sceneRef.current.get(asNodeId(id));\n      return node ? read.runs(node.data) : undefined;\n    },\n    commit: (id, { text, runs, style }) => {\n      const nid = asNodeId(id);\n      const node = sceneRef.current.get(nid);\n      if (!node) return;\n      const { setText, setRuns, setStyle } = optsRef.current;\n      let data = setText ? setText(node.data, text) : { ...node.data, text };\n      if (runs) data = setRuns ? setRuns(data, runs) : { ...data, runs };\n      if (style) data = setStyle ? setStyle(data, style) : { ...data, style };\n      sceneRef.current.update(nid, { data });\n    },\n  });\n\n  const onDoubleClick = useCallback((e: MouseEvent<HTMLElement>) => {\n    // The dblclick bubbles from the canvas up to any wrapping container; the\n    // element it started on is what the click coordinates are relative to.\n    const canvas = e.target instanceof HTMLElement ? e.target : null;\n    if (!canvas) return;\n    // Inside the editor a double-click selects a word, and its target is a run\n    // span whose box the click would be measured against as if it were a canvas.\n    if (canvas.closest('[contenteditable=\"true\"]')) return;\n\n    // `pointInTextPose` and `caretIndexAt` work in the node's own box: the click\n    // is un-projected here, then taken back through the frame the node is drawn in.\n    const [canvasX, canvasY] = clientToCanvas(canvas, e.clientX, e.clientY);\n    const root = containerRef.current;\n    const view = resolveView(optsRef.current.view)\n      ?? (root ? findMountedCanvas(root, canvas)?.getView() : undefined);\n    const cx = view ? canvasX / view.scale.x + view.x : canvasX;\n    const cy = view ? canvasY / view.scale.y + view.y : canvasY;\n    // Top-most-first hit test: renderOrder() is back-to-front, so iterate\n    // in reverse and break on the first hit.\n    const order = sceneRef.current.renderOrderNodes();\n    const paintedPoseOf = scenePaintedPoseOf(sceneRef.current);\n    for (let i = order.length - 1; i >= 0; i--) {\n      const node = order[i];\n      if (sceneRef.current.isLocked(node.id)) continue;\n      if (!read.isText(node.data)) continue;\n      const text = read.text(node.data);\n      const at = paintedPoseOf(node);\n      const p = worldToLocal(targetTransformOf(at), cx, cy);\n      if (!p) continue;\n      const pose = {\n        x: at.x, y: at.y, width: at.width, height: at.height,\n        text,\n        runs: read.runs(node.data) as StyledRun[] | undefined,\n        style: read.style(node.data),\n        verticalAlign: read.verticalAlign(node.data),\n      };\n      if (!pointInTextPose(p.x, p.y, pose)) continue;\n\n      openedOnRef.current = canvas;\n      edit.startEdit(String(node.id), { caret: caretIndexAt(p.x, p.y, pose) });\n      return;\n    }\n  }, [edit, containerRef, optsRef, read, sceneRef]);\n\n  const isTextNode = useCallback((id: string): boolean => {\n    const node = sceneRef.current.get(asNodeId(id));\n    return node !== undefined && read.isText(node.data);\n  }, [read, sceneRef]);\n\n  return { ...edit, onDoubleClick, isTextNode };\n}\n\n/**\n * `pose`'s box as the overlay takes it, `origin` being the canvas's corner in\n * container pixels. Only the box center is projected, since the overlay's\n * frame is about it. Width and height stay in world units and reach the\n * screen through the overlay's own `scale(zoom)` — see\n * `TextEditScreenPose.zoom`.\n */\nfunction screenBoxOf(\n  pose: RectPose,\n  view: View | undefined,\n  origin: { x: number; y: number } | undefined,\n): Pick<TextEditScreenPose, 'x' | 'y' | 'width' | 'height' | 'frame'> & { zoom: number } {\n  const zoom = view ? view.scale.x : 1;\n  const zoomY = view ? view.scale.y : 1;\n  const cx = (origin?.x ?? 0) + (pose.x + pose.width / 2 - (view?.x ?? 0)) * zoom;\n  const cy = (origin?.y ?? 0) + (pose.y + pose.height / 2 - (view?.y ?? 0)) * zoomY;\n  return {\n    x: cx - (pose.width * zoom) / 2,\n    y: cy - (pose.height * zoom) / 2,\n    width: pose.width,\n    height: pose.height,\n    zoom,\n    frame: frameLinearOf(pose, zoomY / zoom),\n  };\n}\n\n/** The linear part of the frame `pose` is drawn in, as the overlay takes it.\n *  `stretch` is the view's y scale over its x scale: the overlay scales both\n *  axes by the x scale, so the frame carries what is left of y. */\nfunction frameLinearOf(pose: unknown, stretch: number): TextEditScreenPose['frame'] {\n  const m = poseFrameOf(pose);\n  if (!m && stretch === 1) return undefined;\n  const [a, b, c, d] = m ?? [1, 0, 0, 1];\n  return [a, b * stretch, c, d * stretch];\n}\n"],"mappings":"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"}

package/dist/features/viewports/viewResolver.js

@@ -1,49 +1,53 @@
 //#region src/features/viewports/viewResolver.ts
 function e(e) {
-	let { views: t, root: n, canvasOrigin: r, occluded: i } = e, a = /* @__PURE__ */ new Map();
-	function o() {
+	let { views: t, root: n, toLocal: r, occluded: i } = e, a = /* @__PURE__ */ new Map(), o = (e, t, n) => ({
+		x: (e.x - t.x) / n.scale.x + n.x,
+		y: (e.y - t.y) / n.scale.y + n.y
+	});
+	function s(e) {
+		let t = n();
 		return {
 			id: null,
-			view: n(),
-			origin: r()
+			view: t,
+			world: o(e, {
+				x: 0,
+				y: 0
+			}, t)
 		};
 	}
-	function s(e) {
-		let t = r();
+	function c(e, t) {
 		return {
 			id: e.id,
 			view: e.view,
-			origin: {
-				left: t.left + e.rect.x,
-				top: t.top + e.rect.y
-			}
+			world: o(t, e.rect, e.view)
 		};
 	}
-	function c(e, n) {
-		let a = r(), o = e - a.left, s = n - a.top, c = t();
-		for (let e = c.length - 1; e >= 0; e--) {
-			let { rect: t } = c[e];
-			if (o >= t.x && o < t.x + t.w && s >= t.y && s < t.y + t.h) return i?.(o, s) ? void 0 : c[e];
+	function l({ x: e, y: n }) {
+		let r = t();
+		for (let t = r.length - 1; t >= 0; t--) {
+			let { rect: a } = r[t];
+			if (e >= a.x && e < a.x + a.w && n >= a.y && n < a.y + a.h) return i?.(e, n) ? void 0 : r[t];
 		}
 	}
-	function l(e, t) {
-		let n = c(e, t);
-		return n ? s(n) : o();
+	function u(e) {
+		let t = l(e);
+		return t ? c(t, e) : s(e);
 	}
 	return {
 		begin(e, t, n) {
-			let r = l(t, n);
-			return a.set(e, r.id), r;
+			let i = u(r(t, n));
+			return a.set(e, i.id), i;
 		},
-		at(e, n, r) {
+		at(e, n, i) {
+			let o = r(n, i);
 			if (e !== null && a.has(e)) {
 				let n = a.get(e);
-				if (n === null) return o();
+				if (n === null) return s(o);
 				let r = t().find((e) => e.id === n);
-				if (r) return s(r);
+				if (r) return c(r, o);
 				a.delete(e);
 			}
-			return l(n, r);
+			return u(o);
 		},
 		end(e) {
 			a.delete(e);

package/dist/features/viewports/viewResolver.js.map

@@ -1 +1 @@
-{"version":3,"file":"viewResolver.js","names":["createViewResolver","opts","pinned","rootTarget","root","canvasOrigin","target","c","v","hit","x","clientX","y","clientY","list","views","i","rect","occluded","fresh","t","pointerId","id"],"sources":["../../../src/features/viewports/viewResolver.ts"],"sourcesContent":["import type { View } from 'core/viewport/view';\n\n/**\n * @experimental\n *\n * A view the resolver can route input to: a camera and the rect it paints\n * into, in canvas CSS-pixel space. A viewport node supplies one of these per\n * frame; so could any other per-view surface.\n */\nexport interface ResolvableView {\n  id: string;\n  view: View;\n  rect: { x: number; y: number; w: number; h: number };\n}\n\n/**\n * @experimental\n *\n * The view an input event belongs to. `id` is `null` for the root view —\n * the whole canvas, when no viewport contains the point.\n *\n * `origin` is the client-space origin of that view's surface, ready to hand\n * to `clientToWorld` — which is the whole reason this type carries it rather\n * than leaving callers to add the canvas rect and the view rect themselves.\n */\nexport interface ViewTarget {\n  id: string | null;\n  view: View;\n  origin: { left: number; top: number };\n}\n\n/**\n * @experimental\n *\n * Routes client points to views, and holds a captured pointer on the view its\n * gesture started in.\n *\n * Stickiness is the point. A drag that leaves its view's rect — over a\n * neighbouring view, or off the canvas — must keep reporting coordinates in\n * the space it began in, or a marquee crossing a panel edge silently starts\n * measuring against the wrong camera.\n */\nexport interface ViewResolver {\n  /** Resolve and pin `pointerId`. Call on pointerdown. */\n  begin(pointerId: number, clientX: number, clientY: number): ViewTarget;\n  /**\n   * The view for a point. A pinned `pointerId` gets its pinned view, looked\n   * up fresh so a rect that moved mid-gesture is honored. Pass `null` for\n   * input with no pointer to capture — wheel, hover, keys.\n   */\n  at(pointerId: number | null, clientX: number, clientY: number): ViewTarget;\n  /** Release `pointerId`. Call on pointerup and pointercancel. */\n  end(pointerId: number): void;\n  /** Release every pin. */\n  clear(): void;\n}\n\n/**\n * @experimental\n *\n * Options for `createViewResolver`. Each field is a function called afresh on\n * every query, so views and the canvas may move between events.\n */\nexport interface CreateViewResolverOpts {\n  /** Candidate views in paint order — the last one containing a point wins. */\n  views: () => readonly ResolvableView[];\n  /** The camera for points no view claims. */\n  root: () => View;\n  /** Client-space origin of the canvas element. */\n  canvasOrigin: () => { left: number; top: number };\n  /**\n   * Whether something painted over every view claims a canvas-local point —\n   * chrome on the surface's own frame. Such a point resolves to the root even\n   * inside a view's rect. Asked only where a view would otherwise win.\n   */\n  occluded?: (x: number, y: number) => boolean;\n}\n\n/** @experimental Build a `ViewResolver` over `opts.views`, falling back to `opts.root`. */\nexport function createViewResolver(opts: CreateViewResolverOpts): ViewResolver {\n  const { views, root, canvasOrigin, occluded } = opts;\n  const pinned = new Map<number, string | null>();\n\n  function rootTarget(): ViewTarget {\n    return { id: null, view: root(), origin: canvasOrigin() };\n  }\n\n  function target(v: ResolvableView): ViewTarget {\n    const c = canvasOrigin();\n    return {\n      id: v.id,\n      view: v.view,\n      origin: { left: c.left + v.rect.x, top: c.top + v.rect.y },\n    };\n  }\n\n  /** Right and bottom edges are exclusive, so neighbouring views never both\n   *  claim a pixel. */\n  function hit(clientX: number, clientY: number): ResolvableView | undefined {\n    const c = canvasOrigin();\n    const x = clientX - c.left;\n    const y = clientY - c.top;\n    const list = views();\n    for (let i = list.length - 1; i >= 0; i--) {\n      const { rect } = list[i]!;\n      if (x >= rect.x && x < rect.x + rect.w && y >= rect.y && y < rect.y + rect.h) {\n        return occluded?.(x, y) ? undefined : list[i];\n      }\n    }\n    return undefined;\n  }\n\n  function fresh(clientX: number, clientY: number): ViewTarget {\n    const v = hit(clientX, clientY);\n    return v ? target(v) : rootTarget();\n  }\n\n  return {\n    begin(pointerId, clientX, clientY) {\n      const t = fresh(clientX, clientY);\n      pinned.set(pointerId, t.id);\n      return t;\n    },\n    at(pointerId, clientX, clientY) {\n      if (pointerId !== null && pinned.has(pointerId)) {\n        const id = pinned.get(pointerId)!;\n        if (id === null) return rootTarget();\n        const v = views().find((c) => c.id === id);\n        if (v) return target(v);\n        pinned.delete(pointerId);\n      }\n      return fresh(clientX, clientY);\n    },\n    end(pointerId) {\n      pinned.delete(pointerId);\n    },\n    clear() {\n      pinned.clear();\n    },\n  };\n}\n"],"mappings":";AA+EA,SAAgBA,EAAmB,GAA4C;CAC7E,IAAM,EAAE,UAAO,SAAM,iBAAc,gBAAaC,GAC1CC,oBAAS,IAAI,IAA2B;CAE9C,SAASC,IAAyB;EAChC,OAAO;GAAE,IAAI;GAAM,MAAMC,EAAK;GAAG,QAAQC,EAAa;EAAE;CAC1D;CAEA,SAASC,EAAO,GAA+B;EAC7C,IAAMC,IAAIF,EAAa;EACvB,OAAO;GACL,IAAIG,EAAE;GACN,MAAMA,EAAE;GACR,QAAQ;IAAE,MAAMD,EAAE,OAAOC,EAAE,KAAK;IAAG,KAAKD,EAAE,MAAMC,EAAE,KAAK;GAAE;EAC3D;CACF;CAIA,SAASC,EAAI,GAAiB,GAA6C;EACzE,IAAMF,IAAIF,EAAa,GACjBK,IAAIC,IAAUJ,EAAE,MAChBK,IAAIC,IAAUN,EAAE,KAChBO,IAAOC,EAAM;EACnB,KAAK,IAAIC,IAAIF,EAAK,SAAS,GAAGE,KAAK,GAAG,KAAK;GACzC,IAAM,EAAE,YAASF,EAAKE;GACtB,IAAIN,KAAKO,EAAK,KAAKP,IAAIO,EAAK,IAAIA,EAAK,KAAKL,KAAKK,EAAK,KAAKL,IAAIK,EAAK,IAAIA,EAAK,GACzE,OAAOC,IAAWR,GAAGE,CAAC,IAAI,KAAA,IAAYE,EAAKE;EAE/C;CAEF;CAEA,SAASG,EAAM,GAAiB,GAA6B;EAC3D,IAAMX,IAAIC,EAAIE,GAASE,CAAO;EAC9B,OAAOL,IAAIF,EAAOE,CAAC,IAAIL,EAAW;CACpC;CAEA,OAAO;EACL,MAAM,GAAW,GAAS,GAAS;GACjC,IAAMiB,IAAID,EAAMR,GAASE,CAAO;GAEhC,OADAX,EAAO,IAAImB,GAAWD,EAAE,EAAE,GACnBA;EACT;EACA,GAAG,GAAW,GAAS,GAAS;GAC9B,IAAIC,MAAc,QAAQnB,EAAO,IAAImB,CAAS,GAAG;IAC/C,IAAMC,IAAKpB,EAAO,IAAImB,CAAS;IAC/B,IAAIC,MAAO,MAAM,OAAOnB,EAAW;IACnC,IAAMK,IAAIO,EAAM,CAAC,CAAC,MAAM,MAAMR,EAAE,OAAOe,CAAE;IACzC,IAAId,GAAG,OAAOF,EAAOE,CAAC;IACtB,EAAO,OAAOa,CAAS;GACzB;GACA,OAAOF,EAAMR,GAASE,CAAO;EAC/B;EACA,IAAI,GAAW;GACb,EAAO,OAAOQ,CAAS;EACzB;EACA,QAAQ;GACN,EAAO,MAAM;EACf;CACF;AACF"}
+{"version":3,"file":"viewResolver.js","names":["createViewResolver","opts","pinned","worldOf","at","from","view","rootTarget","root","target","v","hit","list","views","i","x","rect","y","occluded","fresh","t","toLocal","clientX","clientY","pointerId","id","c"],"sources":["../../../src/features/viewports/viewResolver.ts"],"sourcesContent":["import type { View } from 'core/viewport/view';\n\n/**\n * @experimental\n *\n * A view the resolver can route input to: a camera and the rect it paints\n * into, in canvas CSS-pixel space. A viewport node supplies one of these per\n * frame; so could any other per-view surface.\n */\nexport interface ResolvableView {\n  id: string;\n  view: View;\n  rect: { x: number; y: number; w: number; h: number };\n}\n\n/**\n * @experimental\n *\n * The view an input event belongs to. `id` is `null` for the root view —\n * the whole canvas, when no viewport contains the point.\n */\nexport interface ViewTarget {\n  id: string | null;\n  view: View;\n  /** The point asked about, in that view's world. */\n  world: { x: number; y: number };\n}\n\n/**\n * @experimental\n *\n * Routes client points to views, and holds a captured pointer on the view its\n * gesture started in.\n *\n * Stickiness is the point. A drag that leaves its view's rect — over a\n * neighbouring view, or off the canvas — must keep reporting coordinates in\n * the space it began in, or a marquee crossing a panel edge silently starts\n * measuring against the wrong camera.\n */\nexport interface ViewResolver {\n  /** Resolve and pin `pointerId`. Call on pointerdown. */\n  begin(pointerId: number, clientX: number, clientY: number): ViewTarget;\n  /**\n   * The view for a point. A pinned `pointerId` gets its pinned view, looked\n   * up fresh so a rect that moved mid-gesture is honored. Pass `null` for\n   * input with no pointer to capture — wheel, hover, keys.\n   */\n  at(pointerId: number | null, clientX: number, clientY: number): ViewTarget;\n  /** Release `pointerId`. Call on pointerup and pointercancel. */\n  end(pointerId: number): void;\n  /** Release every pin. */\n  clear(): void;\n}\n\n/**\n * @experimental\n *\n * Options for `createViewResolver`. Each field is a function called afresh on\n * every query, so views and the canvas may move between events.\n */\nexport interface CreateViewResolverOpts {\n  /** Candidate views in paint order — the last one containing a point wins. */\n  views: () => readonly ResolvableView[];\n  /** The camera for points no view claims. */\n  root: () => View;\n  /** A client point in the canvas's own CSS pixels, from its top-left. */\n  toLocal: (clientX: number, clientY: number) => { x: number; y: number };\n  /**\n   * Whether something painted over every view claims a canvas-local point —\n   * chrome on the surface's own frame. Such a point resolves to the root even\n   * inside a view's rect. Asked only where a view would otherwise win.\n   */\n  occluded?: (x: number, y: number) => boolean;\n}\n\n/** @experimental Build a `ViewResolver` over `opts.views`, falling back to `opts.root`. */\nexport function createViewResolver(opts: CreateViewResolverOpts): ViewResolver {\n  const { views, root, toLocal, occluded } = opts;\n  const pinned = new Map<number, string | null>();\n\n  type Local = { x: number; y: number };\n  /** `at`, a canvas point `from` its surface's top-left, through `view`. */\n  const worldOf = (at: Local, from: Local, view: View): Local => ({\n    x: (at.x - from.x) / view.scale.x + view.x,\n    y: (at.y - from.y) / view.scale.y + view.y,\n  });\n\n  function rootTarget(at: Local): ViewTarget {\n    const view = root();\n    return { id: null, view, world: worldOf(at, { x: 0, y: 0 }, view) };\n  }\n\n  function target(v: ResolvableView, at: Local): ViewTarget {\n    return { id: v.id, view: v.view, world: worldOf(at, v.rect, v.view) };\n  }\n\n  /** Right and bottom edges are exclusive, so neighbouring views never both\n   *  claim a pixel. */\n  function hit({ x, y }: Local): ResolvableView | undefined {\n    const list = views();\n    for (let i = list.length - 1; i >= 0; i--) {\n      const { rect } = list[i]!;\n      if (x >= rect.x && x < rect.x + rect.w && y >= rect.y && y < rect.y + rect.h) {\n        return occluded?.(x, y) ? undefined : list[i];\n      }\n    }\n    return undefined;\n  }\n\n  function fresh(at: Local): ViewTarget {\n    const v = hit(at);\n    return v ? target(v, at) : rootTarget(at);\n  }\n\n  return {\n    begin(pointerId, clientX, clientY) {\n      const t = fresh(toLocal(clientX, clientY));\n      pinned.set(pointerId, t.id);\n      return t;\n    },\n    at(pointerId, clientX, clientY) {\n      const at = toLocal(clientX, clientY);\n      if (pointerId !== null && pinned.has(pointerId)) {\n        const id = pinned.get(pointerId)!;\n        if (id === null) return rootTarget(at);\n        const v = views().find((c) => c.id === id);\n        if (v) return target(v, at);\n        pinned.delete(pointerId);\n      }\n      return fresh(at);\n    },\n    end(pointerId) {\n      pinned.delete(pointerId);\n    },\n    clear() {\n      pinned.clear();\n    },\n  };\n}\n"],"mappings":";AA4EA,SAAgBA,EAAmB,GAA4C;CAC7E,IAAM,EAAE,UAAO,SAAM,YAAS,gBAAaC,GACrCC,oBAAS,IAAI,IAA2B,GAIxCC,KAAW,GAAW,GAAa,OAAuB;EAC9D,IAAIC,EAAG,IAAIC,EAAK,KAAKC,EAAK,MAAM,IAAIA,EAAK;EACzC,IAAIF,EAAG,IAAIC,EAAK,KAAKC,EAAK,MAAM,IAAIA,EAAK;CAC3C;CAEA,SAASC,EAAW,GAAuB;EACzC,IAAMD,IAAOE,EAAK;EAClB,OAAO;GAAE,IAAI;GAAM;GAAM,OAAOL,EAAQC,GAAI;IAAE,GAAG;IAAG,GAAG;GAAE,GAAGE,CAAI;EAAE;CACpE;CAEA,SAASG,EAAO,GAAmB,GAAuB;EACxD,OAAO;GAAE,IAAIC,EAAE;GAAI,MAAMA,EAAE;GAAM,OAAOP,EAAQC,GAAIM,EAAE,MAAMA,EAAE,IAAI;EAAE;CACtE;CAIA,SAASC,EAAI,EAAE,MAAG,QAAwC;EACxD,IAAMC,IAAOC,EAAM;EACnB,KAAK,IAAIC,IAAIF,EAAK,SAAS,GAAGE,KAAK,GAAG,KAAK;GACzC,IAAM,EAAE,YAASF,EAAKE;GACtB,IAAIC,KAAKC,EAAK,KAAKD,IAAIC,EAAK,IAAIA,EAAK,KAAKC,KAAKD,EAAK,KAAKC,IAAID,EAAK,IAAIA,EAAK,GACzE,OAAOE,IAAWH,GAAGE,CAAC,IAAI,KAAA,IAAYL,EAAKE;EAE/C;CAEF;CAEA,SAASK,EAAM,GAAuB;EACpC,IAAMT,IAAIC,EAAIP,CAAE;EAChB,OAAOM,IAAID,EAAOC,GAAGN,CAAE,IAAIG,EAAWH,CAAE;CAC1C;CAEA,OAAO;EACL,MAAM,GAAW,GAAS,GAAS;GACjC,IAAMgB,IAAID,EAAME,EAAQC,GAASC,CAAO,CAAC;GAEzC,OADArB,EAAO,IAAIsB,GAAWJ,EAAE,EAAE,GACnBA;EACT;EACA,GAAG,GAAW,GAAS,GAAS;GAC9B,IAAMhB,IAAKiB,EAAQC,GAASC,CAAO;GACnC,IAAIC,MAAc,QAAQtB,EAAO,IAAIsB,CAAS,GAAG;IAC/C,IAAMC,IAAKvB,EAAO,IAAIsB,CAAS;IAC/B,IAAIC,MAAO,MAAM,OAAOlB,EAAWH,CAAE;IACrC,IAAMM,IAAIG,EAAM,CAAC,CAAC,MAAM,MAAMa,EAAE,OAAOD,CAAE;IACzC,IAAIf,GAAG,OAAOD,EAAOC,GAAGN,CAAE;IAC1B,EAAO,OAAOoB,CAAS;GACzB;GACA,OAAOL,EAAMf,CAAE;EACjB;EACA,IAAI,GAAW;GACb,EAAO,OAAOoB,CAAS;EACzB;EACA,QAAQ;GACN,EAAO,MAAM;EACf;CACF;AACF"}

package/dist/features/viewports/viewportLayer.js

@@ -1,58 +1,47 @@
-import { mat3 as e } from "../../renderer/math/mat3.js";
-import { drawOneLayer as t, subscribeToSources as n } from "../../core/layers/render.js";
+import { drawOneLayer as e, subscribeToSources as t } from "../../core/layers/render.js";
+import { backgroundFillCommands as n } from "../../core/layers/backgroundFill.js";
 import { normalizeView as r } from "../../core/viewport/view.js";
+import { mat3 as i } from "@weasel-js/geom";
 //#region src/features/viewports/viewportLayer.ts
-function i(i) {
-	let { id: a, label: o, source: s, view: c, bounds: l, background: u, data: d } = i, f = typeof c == "function" ? null : r(c), p = (e, t) => f ?? r(c(e, t)), m = typeof s == "function" ? s : () => s;
+function a(a) {
+	let { id: o, label: s, source: c, view: l, bounds: u, background: d, data: f } = a, p = typeof l == "function" ? null : r(l), m = (e, t) => p ?? r(l(e, t)), h = typeof c == "function" ? c : () => c;
 	return {
-		id: a,
-		label: o,
+		id: o,
+		label: s,
 		space: "screen",
-		subscribe: n(m),
+		subscribe: t(h),
 		resolvable(e, t) {
 			return {
-				id: a,
-				view: p(e, t),
-				rect: l(e, t)
+				id: o,
+				view: m(e, t),
+				rect: u(e, t)
 			};
 		},
-		draw: (n, r, i) => {
-			let a = l(r, i), o = [];
-			u && o.push({
-				kind: "path",
-				path: {
-					kind: "rect",
-					x: 0,
-					y: 0,
-					width: a.w,
-					height: a.h
-				},
-				fill: {
-					fill: "solid",
-					color: u
-				}
-			});
-			let s = {
-				width: a.w,
-				height: a.h
-			}, c = d ? d(n) : n, f = p(r, i);
-			for (let e of m()) for (let n of t(e, c, f, s)) o.push(n);
+		draw: (t, r, a) => {
+			let o = u(r, a), s = {
+				width: o.w,
+				height: o.h
+			}, c = d ? n({
+				kind: "solid",
+				color: d
+			}, s) : [], l = f ? f(t) : t, p = m(r, a);
+			for (let t of h()) for (let n of e(t, l, p, s)) c.push(n);
 			return [{
 				kind: "group",
-				transform: e.translated(e.identity(), a.x, a.y),
+				transform: i.translated(i.identity(), o.x, o.y),
 				clip: {
 					kind: "rect",
 					x: 0,
 					y: 0,
-					width: a.w,
-					height: a.h
+					width: o.w,
+					height: o.h
 				},
-				children: o
+				children: c
 			}];
 		}
 	};
 }
 //#endregion
-export { i as createViewportLayer };
+export { a as createViewportLayer };
 
 //# sourceMappingURL=viewportLayer.js.map

package/dist/features/viewports/viewportLayer.js.map

@@ -1 +1 @@
-{"version":3,"file":"viewportLayer.js","names":["createViewportLayer","sourceData","opts","fixedView","view","normalizeView","viewAt","outer","dims","sourceAt","source","subscribeToSources","bounds","b","outerView","children","background","innerDims","innerData","data","v","layer","c","drawOneLayer","mat3"],"sources":["../../../src/features/viewports/viewportLayer.ts"],"sourcesContent":["import type { DrawCommand, GroupDrawCommand } from '../../renderer';\nimport { drawOneLayer, subscribeToSources, type Dims, type RenderLayer } from 'core/layers/render';\nimport { normalizeView, type View } from 'core/viewport/view';\nimport { mat3, type GlMat3 } from '../../renderer/math/mat3';\nimport type { ResolvableView } from './viewResolver';\n\n/**\n * @experimental\n *\n * A \"viewport node\" — a screen-space rectangle on the outer canvas that\n * re-renders one or more `source` layers through an *inner* `View`, then\n * clips them to its rect.\n *\n * Use cases: picture-in-picture, minimap, scrolling container, multi-angle\n * preview. The same source layer can be rendered through multiple viewports\n * (different inner views) without duplicating data — viewports are pure\n * lenses on the source.\n *\n * **Inner view semantics.** The source layers draw as if the inner view\n * filled the screen at world-origin — each is wrapped in `viewToMat3(view)`\n * by the same `drawOneLayer` the outer canvas uses. The viewport then\n * translates the result so that the inner view's origin lands at `bounds.x,\n * bounds.y` and clips to `(bounds.w, bounds.h)`. Caller chooses\n * `innerView.{x,y,scale}` to control which slice of source-world is shown.\n *\n * **This layer paints; it does not take input.** `<CanvasView>` is built on\n * it and routes the pointer stream through the kit's gesture dispatcher —\n * declare one of those for a viewport that should be clickable. `resolvable`\n * is the seam it uses: feed it to `createViewResolver` to route input to a\n * raw viewport yourself.\n *\n * **Screen-space source layers** (e.g., debug overlays, selection chrome)\n * draw in the viewport's own CSS-pixel space: their coords are relative to\n * the rect's top-left, and they clip to it, rather than to the outer canvas.\n */\nexport interface CreateViewportLayerOpts<TData, TSource = TData> {\n  id: string;\n  label: string;\n  /** Layers re-rendered through `view`. Each receives `(data, view, dims)`\n   *  exactly as the outer Canvas would call it.\n   *\n   *  Pass a thunk for a stack that is assembled elsewhere — it is read fresh\n   *  on every `draw`, the same way a thunked `view` is. */\n  source: readonly RenderLayer<TSource>[] | (() => readonly RenderLayer<TSource>[]);\n  /**\n   * The `data` the source layers receive, derived from what the outer canvas\n   * passed down. Omit and they get the outer canvas's own.\n   *\n   * A viewport showing the same scene through a second camera wants its own\n   * per-view helpers here — selection, chrome state and gesture previews that\n   * belong to *this* view rather than the one hosting it.\n   */\n  data?: (outer: TData) => TSource;\n  /**\n   * The inner view. Pass a thunk for a camera that moves — it is read fresh\n   * on every `draw` and `resolvable`, so the two cannot\n   * disagree about where the viewport is looking mid-gesture.\n   *\n   * The thunk receives the outer view and dims, so a derived camera\n   * (parallax, node-anchored scroll) is a function of the one hosting it.\n   */\n  view: View | ((outer: View, dims: Dims) => View);\n  /** Where on the outer canvas this viewport is painted, in screen-space\n   *  CSS pixels. Recomputed every frame so the rect can track an outer\n   *  pose, follow a corner, etc. */\n  bounds: (outer: View, dims: Dims) => { x: number; y: number; w: number; h: number };\n  /** Optional opaque background painted before the source layers. Useful\n   *  to keep the underlying outer canvas from showing through when the\n   *  inner view leaves part of the viewport empty. */\n  background?: string;\n}\n\n/**\n * @experimental\n *\n * A {@link RenderLayer} that can also describe itself as a routing target.\n * Returned by {@link createViewportLayer}.\n */\nexport interface ViewportLayer<TData> extends RenderLayer<TData> {\n  /**\n   * This viewport as a routing candidate for {@link createViewResolver} —\n   * its inner view and the rect it paints into for the given outer frame.\n   *\n   * Pass the `outer` view and `dims` the frame was drawn with: `bounds` is a\n   * pure function of those, so this reproduces the exact rect that was\n   * painted rather than a remembered one.\n   */\n  resolvable(outer: View, dims: Dims): ResolvableView;\n}\n\n/** Build a layer that renders other layers through a second view, inside a\n *  sub-region of the canvas — a minimap, an inset, a magnifier. */\nexport function createViewportLayer<TData, TSource = TData>(\n  opts: CreateViewportLayerOpts<TData, TSource>,\n): ViewportLayer<TData> {\n  const { id, label, source, view, bounds, background, data: sourceData } = opts;\n  const fixedView = typeof view === 'function' ? null : normalizeView(view);\n  const viewAt = (outer: View, dims: Dims): View =>\n    fixedView ?? normalizeView((view as (outer: View, dims: Dims) => View)(outer, dims));\n  const sourceAt = typeof source === 'function' ? source : () => source;\n  return {\n    id,\n    label,\n    space: 'screen',\n    subscribe: subscribeToSources(sourceAt),\n    resolvable(outer, dims) {\n      return { id, view: viewAt(outer, dims), rect: bounds(outer, dims) };\n    },\n    draw: (data, outerView, dims): DrawCommand[] => {\n      const b = bounds(outerView, dims);\n      // Inner content drawn through `view`, then translated so the inner\n      // view's screen origin lines up with the viewport top-left.\n      const children: DrawCommand[] = [];\n      if (background) {\n        children.push({\n          kind: 'path',\n          path: { kind: 'rect', x: 0, y: 0, width: b.w, height: b.h },\n          fill: { fill: 'solid', color: background },\n        });\n      }\n      const innerDims = { width: b.w, height: b.h };\n      // The cast holds up because `TSource` defaults to `TData`: without a\n      // thunk the two are the same type by construction.\n      const innerData = sourceData ? sourceData(data) : (data as unknown as TSource);\n      const v = viewAt(outerView, dims);\n      for (const layer of sourceAt()) {\n        for (const c of drawOneLayer(layer, innerData, v, innerDims)) children.push(c);\n      }\n      const transform: GlMat3 = mat3.translated(mat3.identity(), b.x, b.y);\n      const group: GroupDrawCommand = {\n        kind: 'group',\n        transform,\n        clip: { kind: 'rect', x: 0, y: 0, width: b.w, height: b.h },\n        children,\n      };\n      return [group];\n    },\n  };\n}\n"],"mappings":";;;;AA4FA,SAAgBA,EACd,GACsB;CACtB,IAAM,EAAE,OAAI,UAAO,WAAQ,SAAM,WAAQ,eAAY,MAAMC,MAAeC,GACpEC,IAAY,OAAOC,KAAS,aAAa,OAAOC,EAAcD,CAAI,GAClEE,KAAU,GAAa,MAC3BH,KAAaE,EAAeD,EAA2CG,GAAOC,CAAI,CAAC,GAC/EC,IAAW,OAAOC,KAAW,aAAaA,UAAeA;CAC/D,OAAO;EACL;EACA;EACA,OAAO;EACP,WAAWC,EAAmBF,CAAQ;EACtC,WAAW,GAAO,GAAM;GACtB,OAAO;IAAE;IAAI,MAAMH,EAAOC,GAAOC,CAAI;IAAG,MAAMI,EAAOL,GAAOC,CAAI;GAAE;EACpE;EACA,OAAO,GAAM,GAAW,MAAwB;GAC9C,IAAMK,IAAID,EAAOE,GAAWN,CAAI,GAG1BO,IAA0B,CAAC;GACjC,AAAIC,KACFD,EAAS,KAAK;IACZ,MAAM;IACN,MAAM;KAAE,MAAM;KAAQ,GAAG;KAAG,GAAG;KAAG,OAAOF,EAAE;KAAG,QAAQA,EAAE;IAAE;IAC1D,MAAM;KAAE,MAAM;KAAS,OAAOG;IAAW;GAC3C,CAAC;GAEH,IAAMC,IAAY;IAAE,OAAOJ,EAAE;IAAG,QAAQA,EAAE;GAAE,GAGtCK,IAAYjB,IAAaA,EAAWkB,CAAI,IAAKA,GAC7CC,IAAId,EAAOQ,GAAWN,CAAI;GAChC,KAAK,IAAMa,KAASZ,EAAS,GAC3B,KAAK,IAAMa,KAAKC,EAAaF,GAAOH,GAAWE,GAAGH,CAAS,GAAG,EAAS,KAAKK,CAAC;GAS/E,OAAO,CAAC;IALN,MAAM;IACN,WAHwBE,EAAK,WAAWA,EAAK,SAAS,GAAGX,EAAE,GAAGA,EAAE,CAGhE;IACA,MAAM;KAAE,MAAM;KAAQ,GAAG;KAAG,GAAG;KAAG,OAAOA,EAAE;KAAG,QAAQA,EAAE;IAAE;IAC1D;GAEM,CAAK;EACf;CACF;AACF"}
+{"version":3,"file":"viewportLayer.js","names":["createViewportLayer","sourceData","opts","fixedView","view","normalizeView","viewAt","outer","dims","sourceAt","source","subscribeToSources","bounds","b","outerView","innerDims","children","background","backgroundFillCommands","innerData","data","v","layer","c","drawOneLayer","mat3"],"sources":["../../../src/features/viewports/viewportLayer.ts"],"sourcesContent":["import type { DrawCommand, GroupDrawCommand } from '@weasel-js/renderer';\nimport { drawOneLayer, subscribeToSources, type Dims, type RenderLayer } from 'core/layers/render';\nimport { backgroundFillCommands } from 'core/layers/backgroundFill';\nimport { normalizeView, type View } from 'core/viewport/view';\nimport { mat3, type GlMat3 } from '@weasel-js/geom';\nimport type { ResolvableView } from './viewResolver';\n\n/**\n * @experimental\n *\n * A \"viewport node\" — a screen-space rectangle on the outer canvas that\n * re-renders one or more `source` layers through an *inner* `View`, then\n * clips them to its rect. The same source layer can be rendered through\n * multiple viewports without duplicating data.\n *\n * **Inner view semantics.** The source layers draw as if the inner view\n * filled the screen at world-origin. The viewport then translates the result\n * so that the inner view's origin lands at `bounds.x, bounds.y` and clips to\n * `(bounds.w, bounds.h)`.\n *\n * **This layer paints; it does not take input.** `<CanvasView>` is built on\n * it and routes the pointer stream through the kit's gesture dispatcher —\n * declare one of those for a viewport that should be clickable. `resolvable`\n * is the seam it uses: feed it to `createViewResolver` to route input to a\n * raw viewport yourself.\n *\n * **Screen-space source layers** (e.g., debug overlays, selection chrome)\n * draw in the viewport's own CSS-pixel space: their coords are relative to\n * the rect's top-left, and they clip to it, rather than to the outer canvas.\n */\nexport interface CreateViewportLayerOpts<TData, TSource = TData> {\n  id: string;\n  label: string;\n  /** Layers re-rendered through `view`. Each receives `(data, view, dims)`\n   *  exactly as the outer Canvas would call it.\n   *\n   *  Pass a thunk for a stack that is assembled elsewhere — it is read fresh\n   *  on every `draw`, the same way a thunked `view` is. */\n  source: readonly RenderLayer<TSource>[] | (() => readonly RenderLayer<TSource>[]);\n  /**\n   * The `data` the source layers receive, derived from what the outer canvas\n   * passed down. Omit and they get the outer canvas's own. A viewport showing\n   * the same scene through a second camera wants its own per-view helpers\n   * here — selection, chrome state and gesture previews.\n   */\n  data?: (outer: TData) => TSource;\n  /**\n   * The inner view. Pass a thunk for a camera that moves — it is read fresh\n   * on every `draw` and `resolvable`, so the two cannot\n   * disagree about where the viewport is looking mid-gesture.\n   *\n   * The thunk receives the outer view and dims, so a derived camera\n   * (parallax, node-anchored scroll) is a function of the one hosting it.\n   */\n  view: View | ((outer: View, dims: Dims) => View);\n  /** Where on the outer canvas this viewport is painted, in screen-space\n   *  CSS pixels. Recomputed every frame. */\n  bounds: (outer: View, dims: Dims) => { x: number; y: number; w: number; h: number };\n  /** Optional opaque background painted before the source layers. */\n  background?: string;\n}\n\n/**\n * @experimental\n *\n * A {@link RenderLayer} that can also describe itself as a routing target.\n * Returned by {@link createViewportLayer}.\n */\nexport interface ViewportLayer<TData> extends RenderLayer<TData> {\n  /**\n   * This viewport as a routing candidate for {@link createViewResolver} —\n   * its inner view and the rect it paints into for the given outer frame.\n   *\n   * Pass the `outer` view and `dims` the frame was drawn with: `bounds` is a\n   * pure function of those, so this reproduces the exact rect that was\n   * painted rather than a remembered one.\n   */\n  resolvable(outer: View, dims: Dims): ResolvableView;\n}\n\n/** Build a layer that renders other layers through a second view, inside a\n *  sub-region of the canvas — a minimap, an inset, a magnifier. */\nexport function createViewportLayer<TData, TSource = TData>(\n  opts: CreateViewportLayerOpts<TData, TSource>,\n): ViewportLayer<TData> {\n  const { id, label, source, view, bounds, background, data: sourceData } = opts;\n  const fixedView = typeof view === 'function' ? null : normalizeView(view);\n  const viewAt = (outer: View, dims: Dims): View =>\n    fixedView ?? normalizeView((view as (outer: View, dims: Dims) => View)(outer, dims));\n  const sourceAt = typeof source === 'function' ? source : () => source;\n  return {\n    id,\n    label,\n    space: 'screen',\n    subscribe: subscribeToSources(sourceAt),\n    resolvable(outer, dims) {\n      return { id, view: viewAt(outer, dims), rect: bounds(outer, dims) };\n    },\n    draw: (data, outerView, dims): DrawCommand[] => {\n      const b = bounds(outerView, dims);\n      // Inner content drawn through `view`, then translated so the inner\n      // view's screen origin lines up with the viewport top-left.\n      const innerDims = { width: b.w, height: b.h };\n      const children: DrawCommand[] = background\n        ? backgroundFillCommands({ kind: 'solid', color: background }, innerDims)\n        : [];\n      // The cast holds up because `TSource` defaults to `TData`: without a\n      // thunk the two are the same type by construction.\n      const innerData = sourceData ? sourceData(data) : (data as unknown as TSource);\n      const v = viewAt(outerView, dims);\n      for (const layer of sourceAt()) {\n        for (const c of drawOneLayer(layer, innerData, v, innerDims)) children.push(c);\n      }\n      const transform: GlMat3 = mat3.translated(mat3.identity(), b.x, b.y);\n      const group: GroupDrawCommand = {\n        kind: 'group',\n        transform,\n        clip: { kind: 'rect', x: 0, y: 0, width: b.w, height: b.h },\n        children,\n      };\n      return [group];\n    },\n  };\n}\n"],"mappings":";;;;;AAkFA,SAAgBA,EACd,GACsB;CACtB,IAAM,EAAE,OAAI,UAAO,WAAQ,SAAM,WAAQ,eAAY,MAAMC,MAAeC,GACpEC,IAAY,OAAOC,KAAS,aAAa,OAAOC,EAAcD,CAAI,GAClEE,KAAU,GAAa,MAC3BH,KAAaE,EAAeD,EAA2CG,GAAOC,CAAI,CAAC,GAC/EC,IAAW,OAAOC,KAAW,aAAaA,UAAeA;CAC/D,OAAO;EACL;EACA;EACA,OAAO;EACP,WAAWC,EAAmBF,CAAQ;EACtC,WAAW,GAAO,GAAM;GACtB,OAAO;IAAE;IAAI,MAAMH,EAAOC,GAAOC,CAAI;IAAG,MAAMI,EAAOL,GAAOC,CAAI;GAAE;EACpE;EACA,OAAO,GAAM,GAAW,MAAwB;GAC9C,IAAMK,IAAID,EAAOE,GAAWN,CAAI,GAG1BO,IAAY;IAAE,OAAOF,EAAE;IAAG,QAAQA,EAAE;GAAE,GACtCG,IAA0BC,IAC5BC,EAAuB;IAAE,MAAM;IAAS,OAAOD;GAAW,GAAGF,CAAS,IACtE,CAAC,GAGCI,IAAYlB,IAAaA,EAAWmB,CAAI,IAAKA,GAC7CC,IAAIf,EAAOQ,GAAWN,CAAI;GAChC,KAAK,IAAMc,KAASb,EAAS,GAC3B,KAAK,IAAMc,KAAKC,EAAaF,GAAOH,GAAWE,GAAGN,CAAS,GAAG,EAAS,KAAKQ,CAAC;GAS/E,OAAO,CAAC;IALN,MAAM;IACN,WAHwBE,EAAK,WAAWA,EAAK,SAAS,GAAGZ,EAAE,GAAGA,EAAE,CAGhE;IACA,MAAM;KAAE,MAAM;KAAQ,GAAG;KAAG,GAAG;KAAG,OAAOA,EAAE;KAAG,QAAQA,EAAE;IAAE;IAC1D;GAEM,CAAK;EACf;CACF;AACF"}

package/dist/icons/SliceIcon.js

@@ -0,0 +1,24 @@
+import { ICON_SVG_BASE as e } from "./_base.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/icons/SliceIcon.tsx
+function r({ className: r, size: i = 20 }) {
+	return /* @__PURE__ */ n("svg", {
+		...e,
+		className: r,
+		width: i,
+		height: i,
+		children: [/* @__PURE__ */ t("path", {
+			d: "M 8.5 10.5 L 14.5 4.5 L 16.5 6.5 L 10.5 12.5",
+			strokeLinejoin: "round",
+			strokeLinecap: "round"
+		}), /* @__PURE__ */ t("path", {
+			d: "M 8.5 10.5 L 3.5 15.5 L 10.5 12.5 Z",
+			fill: "currentColor",
+			strokeLinejoin: "round"
+		})]
+	});
+}
+//#endregion
+export { r as default };
+
+//# sourceMappingURL=SliceIcon.js.map

package/dist/icons/SliceIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SliceIcon.js","names":["SliceIcon","ICON_SVG_BASE","size"],"sources":["../../src/icons/SliceIcon.tsx"],"sourcesContent":["import { ICON_SVG_BASE } from './_base';\nimport type { IconProps } from './types';\n\n/** Knife — an outlined handle on the diagonal with a filled blade whose\n *  spine continues the handle's upper edge to the tip at lower-left. Used\n *  for `useSliceTool`. */\nexport default function SliceIcon({ className, size = 20 }: IconProps) {\n  return (\n    <svg\n      {...ICON_SVG_BASE}\n      className={className}\n      width={size}\n      height={size}\n    >\n      {/* Handle, open where the blade seats */}\n      <path d=\"M 8.5 10.5 L 14.5 4.5 L 16.5 6.5 L 10.5 12.5\" strokeLinejoin=\"round\" strokeLinecap=\"round\" />\n      {/* Blade */}\n      <path d=\"M 8.5 10.5 L 3.5 15.5 L 10.5 12.5 Z\" fill=\"currentColor\" strokeLinejoin=\"round\" />\n    </svg>\n  );\n}\n"],"mappings":";;;AAMA,SAAwBA,EAAU,EAAE,cAAW,UAAO,MAAiB;CACrE,OACE,kBAAC,OAAD;EACE,GAAIC;EACO;EACX,OAAOC;EACP,QAAQA;EAJV,UAAA,CAOE,kBAAC,QAAD;GAAM,GAAE;GAA+C,gBAAe;GAAQ,eAAc;EAAS,CAAA,GAErG,kBAAC,QAAD;GAAM,GAAE;GAAsC,MAAK;GAAe,gBAAe;EAAS,CAAA,CACvF;;AAET"}