@oh-just-another/react-ui 0.59.0 → 0.61.0

package/CHANGELOG.md

@@ -1,5 +1,94 @@
 # @oh-just-another/react-ui
 
+## 0.61.0
+
+### Minor Changes
+
+- ac128db: Dark theme now restyles the chrome only — the canvas always stays light. Scene colors are raw hex authored against light paper, so a dark canvas silently broke user content; `UI_SURFACE.dark.canvas` and `--du-canvas-bg` are light in every theme, and the bundled color picker always offers the light element palette. Canvas-drawn chrome (selection, handles, anchors, marquee, badges, minimap frame) is unified on the iris accent (`CANVAS_CHROME_ACCENT`, iris9 — the same accent the DOM chrome uses) instead of the ad-hoc `#1a73e8`/`#2563eb` blues. Undeclared CSS variables and stale accent fallbacks in the stylesheet now resolve to the real theme tokens, so the affected popovers follow the active theme.
+
+### Patch Changes
+
+- Updated dependencies [ac128db]
+  - @oh-just-another/tokens@0.58.0
+  - @oh-just-another/state@0.62.0
+  - @oh-just-another/renderer-core@0.60.1
+  - @oh-just-another/templates@0.57.5
+  - @oh-just-another/renderer-canvas@0.61.1
+  - @oh-just-another/renderer-svg@0.57.5
+
+## 0.60.0
+
+### Minor Changes
+
+- 0548ab3: Unify the active tool into a single `editor.activeTool` value object (breaking).
+  - `state`: `editor.activeTool: ActiveTool` (`{ type, locked, lastActiveTool }`)
+    replaces `editor.mode` and `editor.toolLocked`; `setActiveTool(type)` replaces
+    `setMode`. `EditorOptions.initialMode` → `initialTool`. The typed `mode` event
+    is now `tool` and fires with the `ActiveTool` object on a type switch or a
+    lock flip. The action category `"mode"` is now `"tool"`. The vestigial
+    `"eyedropper"` mode is removed from `Mode` — colour sampling is armed from
+    the colour picker (`beginEyedropperPick`) and never was a toolbar tool.
+  - `react-ui`: `useMode()` → `useActiveTool(): ActiveTool`;
+    `DiagramRoot`/`DiagramCanvas` prop `initialMode` → `initialTool`.
+  - `editor`: `EditorAPI.getMode/setMode` → `getActiveTool/setActiveTool`;
+    `initialMode` prop → `initialTool`; re-exports `ActiveTool`.
+  - `diagram` (+ vue/svelte/angular wrappers): element methods and controller
+    `getMode/setMode` → `getActiveTool/setActiveTool`.
+
+  Tool ids are unchanged (`"select"`, `"draw-rect"`, …). There are no visible
+  behaviour changes — this is an API refactor establishing one source of truth
+  for "which tool is active".
+
+- 4722388: Editable width for committed brush strokes. `style.strokeWidth` never
+  affected brushes (their widths are baked per point), so the property panel's
+  Thin/Medium/Thick control silently did nothing for them. A brush-only
+  selection now gets a popover range slider driving the new
+  `Editor.setBrushWidth(ids, width)`, which scales every baked point width by
+  `newWidth / baseWidth` — the stroke keeps its exact pressure profile at the
+  new thickness — and records the new `baseWidth`. Legacy strokes without a
+  recorded base fall back to their widest point. One undo step.
+- 84450bc: Link captions: measured rounded pill, multiline, correct placement and hit-testing.
+  - `scene`: new shared label geometry (`linkLabelAnchor`, `estimateLinkLabelBox`,
+    `linkLabelBounds`, `pointAlongPath`) — one source of truth for the renderer,
+    hit-testing and culling. `findLinkAt` now also hits inside the caption pill.
+    Elbow links place an unpositioned label on the longest segment's midpoint;
+    explicit `label.position` is clamped away from the arrowheads. Tunables in
+    `constants.ts` (`LINK_LABEL_MAX_WIDTH`, paddings, clearance).
+  - `renderer-core`: the caption is a rounded pill sized by real `measureText`
+    word-wrap (multiline, `\n` breaks) instead of a square estimated box; it
+    rides the drawn geometry (flattened curve for bezier, not the chord), and
+    `computeLinkWorldBounds` unions the pill so dirty-rect / viewport culling
+    never clip it. `LABEL_POSITION` / `LABEL_FONT_SIZE` constants moved to
+    `scene` as `LINK_LABEL_DEFAULT_POSITION` / `LINK_LABEL_DEFAULT_FONT_SIZE`.
+  - `state`: `linkLabelWorld` uses the shared anchor, so the inline editor opens
+    exactly over the pill (including bezier and elbow links).
+  - `react-ui`: the inline caption editor is a multiline textarea — Enter
+    commits, Shift+Enter inserts a newline, Escape cancels.
+
+### Patch Changes
+
+- Updated dependencies [0548ab3]
+- Updated dependencies [762dd8a]
+- Updated dependencies [4722388]
+- Updated dependencies [05707ed]
+- Updated dependencies [50a2bd4]
+- Updated dependencies [20af638]
+- Updated dependencies [84450bc]
+- Updated dependencies [acd01dc]
+- Updated dependencies [da9d406]
+- Updated dependencies [3c50ef1]
+- Updated dependencies [f960332]
+- Updated dependencies [99f9ab1]
+- Updated dependencies [f9778a1]
+- Updated dependencies [ea2f4e3]
+  - @oh-just-another/state@0.61.0
+  - @oh-just-another/scene@0.61.0
+  - @oh-just-another/renderer-core@0.60.0
+  - @oh-just-another/renderer-canvas@0.61.0
+  - @oh-just-another/renderer-svg@0.57.4
+  - @oh-just-another/templates@0.57.4
+  - @oh-just-another/versioning@0.57.4
+
 ## 0.59.0
 
 ### Minor Changes

package/README.md

@@ -24,7 +24,7 @@ import { installBuiltinTemplates, loadTemplateLibrary } from "@oh-just-another/t
 installBuiltinTemplates();
 
 export const App = () => (
-  <DiagramCanvas initialScene={emptyScene()} initialMode="select">
+  <DiagramCanvas initialScene={emptyScene()} initialTool="select">
     <Toolbar />
     <Palette />
     <PropertyPanel />
@@ -124,7 +124,7 @@ Every component reads the editor from context, so most take no required props.
 | `useDiagram()` / `useDiagramOptional()`                                  | Live `Editor` (imperative; no re-render on change).            |
 | `useDiagramContext()` / `useDiagramContextOptional()`                    | Raw context value.                                             |
 | `useEditorSelector(select)`                                              | Custom selector — re-renders when the projected value changes. |
-| `useScene()` / `useSelection()` / `useMode()`                            | Reactive slices of editor state.                               |
+| `useScene()` / `useSelection()` / `useActiveTool()`                      | Reactive slices of editor state.                               |
 | `useHistory()`                                                           | `canUndo` / `canRedo` + `undo` / `redo`.                       |
 | `useLayers()` / `useActiveLayerId()`                                     | Layer list and active layer.                                   |
 | `useAnnotations()` / `useSelectedAnnotation()` / `useSelectedLink()`     | Annotation and link selection state.                           |
@@ -149,8 +149,8 @@ help, and context-menu modules additionally export their item/section types (`To
 
 ## Design notes
 
-- **`<DiagramCanvas>` owns the editor's lifetime.** Created in `useLayoutEffect` so children's effects see the provider value on first paint; disposed on unmount. `initialScene` and `initialMode` are read once — runtime updates go through the editor API (`editor.loadScene`, `editor.setMode`).
-- **Hooks subscribe via the editor's `subscribe`.** `Editor.setMode` calls `notify()` so `useMode` (and similar bespoke selectors) re-render on mode changes.
+- **`<DiagramCanvas>` owns the editor's lifetime.** Created in `useLayoutEffect` so children's effects see the provider value on first paint; disposed on unmount. `initialScene` and `initialTool` are read once — runtime updates go through the editor API (`editor.loadScene`, `editor.setActiveTool`).
+- **Hooks subscribe via the editor's `subscribe`.** `Editor.setActiveTool` calls `notify()` so `useActiveTool` (and similar bespoke selectors) re-render on tool changes.
 - **No global state.** Every editor instance is independent — composition via context lets multiple canvases live on the same page (useful for diff viewers, presentation modes).
 - **Toolbar item kinds are a discriminated union.** Hosts can mix builtin `mode` / `undo` / `redo` items with arbitrary `action` items in one declarative array.
 - **Palette uses SVG icons through `dangerouslySetInnerHTML`.** Template authors define the icon markup; the same SVG goes through the canvas renderer's SVG parser, so palette and canvas stay visually identical.