# Bone Flow #023 - Flow Editor
Version: 1.0.80
Status: Release Ready Candidate
Standard: Bone Flow Development Standard v1.0 / Documentation Standard v1.0
## 1. 目的
Flow Editor は `.bflow` Source を正本として、Source / Working Definition / Canonical Definition / Preview を同期編集する #023 コンポーネントです。#021 Bone Shape と #002 Bone Joint は変更せず、共有RuntimeのVersion系統・必要API・Registry互換性を確認して利用します。
## 2. 実装構成
実装は frozen Implementation Checklist の 01〜37 順で構成されています。Lexer → Parser/AST → Working Definition → SourceMap → Validation → Shape/Joint Adapter → Layout → Renderer → Editor → File/Workspace/Recovery → Test/Delivery の順です。
主要モジュール:
- `bone-flow-lexer.js`: LF 正規化、line/column、UTF-16 SourceRef
- `bone-flow-parser.js`: 2-pass Parser、continuation grammar、AST
- `bone-flow-definition.js`: Draft/Working/Canonical Definition、generator
- `bone-flow-validation.js`: semantic validation、defaults/requested/resolved
- `bone-flow-shape-adapter.js`: #021 actual API/DOM/Port adapter
- `bone-flow-joint-adapter.js`: #002 rendering adapter
- `bone-flow-layout.js`: deterministic layout
- `bone-flow-renderer.js`: incremental Preview / partial error Preview
- `bone-flow-workspace.js`: IndexedDB Workspace / Recovery
- `bone-flow-editor.js`: UI、transaction、file、import/export
## 3. Dependency 契約
Runtime 必須依存は #021 Bone Shape と #002 Bone Jointです。#020 Bone Label は UI baseline のみで runtime/install dependency ではありません。
Editor 起動時は #021 Bone Shape 1.0.x / #002 Bone Joint 1.1.x のVersion系統、必要API、#021 Registry構成を確認してから Preview を開始します。依存ファイルのSHA-256固定やComponent専用Dependency Lockは使用しません。Installerは必要Runtimeファイルの存在のみ確認し、#023自身のMANIFEST整合性は従来どおり検証します。
#021 と #002 の CSS には global selector があるため、Shape と Joint は別 Shadow Root に隔離します。依存 CSS を editor HTML に global `` してはいけません。
## 4. UI
画面は Toolbar / Source Editor / Preview / Mini Map / Property Panel / Validation / Definition-JSON / Console-Log / Runtime QA で構成されます。
Property editing は Source partial patch を通して反映し、Source を無視した Definition 直接改変は行いません。Node ID / TABLE_DETAIL Field ID rename は declaration と参照を同一 transaction で更新します。
### Read-only
- Shape TYPE
- Shape Port
- Joint From / To
- Joint From Port / To Port
- global Joint `lineStyle=solid`
- global Joint `lineWidth=4`
### Editable
Flow metadata/settings、Shape ID/Text/Theme/Scale/position/comment/tooltip、TABLE_DETAIL fields、Joint line/label/branch/animation/speed/per-joint style/width/color/clearance/intersection を編集できます。
## 5. Preview
#021 actual Bounds/Ports と #002 actual draw API を利用します。TABLE_DETAIL FIELD Port は `data-port-role`, `data-port-scope`, `data-field-key` を実DOMから取得します。
Joint source は OUT、target は IN です。Decision branch はSource記述順で、第1branch=RIGHT OUT、第2branch=BOTTOM OUTを解決します。branch key文字列はYES/NO固定ではありません。
Intersection は `BoneJoint.renderIntersections()` が対象SVGを clear する実挙動のため、**1 style batch = 1 dedicated SVG** で描画します。
Validation ERROR があっても解決可能な Shape/Joint は partial Preview します。片側だけ解決する Error Joint は diagnostic stub/marker を使用します。
## 6. Workspace / Recovery
IndexedDB database: `BoneFlowEditor`
Stores:
- `flowRecovery`
- `workspace`
Autosave debounce:
- Recovery: 1000 ms
- Workspace: 500 ms
Shape の UI 上の位置は `workspace.shapeUiPositions` のみが正本です。Mini Map visibility は `workspace.panelVisibility.miniMap` のみです。
Flow ID / Save As の flowKey re-key は Workspace と Recovery を同一 IndexedDB transaction で更新します。Collision suffix は次の1式のみです。
`first8(SHA-256(oldFlowKey + LF + candidate + LF + currentSourceHash))`
## 7. File / Export
- New / Open / Save / Save As
- UTF-8 fatal decode
- LF normalize
- Canonical JSON import/export
- Workspace JSON import/export
- SVG export
- PNG export
JSON Import は parse → Schema → semantics → Source generation → full validation → Canonical regeneration → semantic equality → commit の 8-step gate を通過した場合だけ確定します。
## 8. 実行URL
`http://localhost/boneflow/test/bone-flow-editor.html`
Query string `?v=` は不要です。
## 9. Release gate
Package は v1.0.37 implementation candidate です。正式 `Release Ready` 判定には Windows `install.ps1` / `install.bat`、実 localhost、IndexedDBを含む Smoke/Validation 全項目の実環境 PASS が必要です。未実行項目を PASS として扱いません。
## v1.0.1 Installer修正
`install.ps1` の `Resolve-BoneFlowTarget` で PowerShell の読み取り専用自動変数 `$HOME` と衝突する `$Home` parameter を使用していたため、`$PreferredHome` へ変更しました。依存SHA-256検証、コピー対象、Flow構文・Canonical仕様は変更していません。
## v1.0.2 Installer/ZIP形式修正
従来のBone Flow配布形式へ戻し、ZIP直下を `install.bat` / `install.ps1` / `boneflow/` とします。自動検出候補も #021 の実Installerと同じ既存候補（`C:\work\pcsr\pcsr.net\public\BoneFlow` / `boneflow`、IIS候補、親/現在ディレクトリ）を使用し、locked #021/#002 critical hash確認後に #023 のみを配置します。正常終了時は `http://localhost/boneflow/test/bone-flow-editor.html` を表示します。
## v1.0.5 UI enhancement
- Source Editor code font family / font size selection
- English / Japanese UI switching
- Five official sample flows selectable from the toolbar
- Bilingual sample names and bilingual sample guide text
- Error sample explicitly identified as intentional validation-error data
## v1.0.5 Layout correction
- Auto layout no longer uses SCC groups directly for visual rank placement.
- Visual back-edges are excluded from rank computation so loop samples keep readable upstream/downstream order.
- Rank centering and minimum spacing were increased to reduce shape/joint overlap.
## v1.0.6 Installer version synchronization
- install.ps1 / install.bat / DEPENDENCY-LOCK implementationTarget / HTML / Editor API の現在バージョンを 1.0.6 に統一。
- v1.0.5 のレイアウト修正内容は変更していません。
## v1.0.7 preview correction
- Auto endpoint selection now chooses IN/OUT ports by relative node geometry, reducing visually reversed connections.
- Default global Joint animation is now true.
- Global Joint intersection default remains jump (bridge).
- Loop flows use readable node ranking while semantic LOOP_DETECTED validation remains unchanged.
## v1.0.8 preview routing and pan improvement
- Orthogonal preview routing now uses a minimal L-shaped route to avoid unnecessary extra bends and overlap with target shapes.
- Preview pan is now available by dragging the preview area directly.
- Fit now scales content to the visible preview viewport instead of resetting to fixed zoom/pan values.
## v1.0.9 #002 v1.1.6 integration
- Locked Joint dependency updated from #002 v1.1.4 to #002 v1.1.6.
- v1.0.8 custom orthogonal SVG path generation was removed.
- Orthogonal routing, animation, bridge/intersection, label, and markers are delegated to #002 public APIs.
- Shape IN/OUT port labels are visible by default.
- Preview supports direct drag pan, wheel zoom around the pointer, toolbar zoom, and Fit.
## v1.0.10 dependency runtime loading correction
- #021/#002 and #023 runtime scripts are loaded with `fetch(..., {cache: "no-store"})` and the fetched bytes are executed directly.
- This prevents a stale browser script cache from executing an older BoneJoint version after the installed dependency files have already been updated.
- Dependency SHA-256 verification remains mandatory and is not relaxed.
## v1.0.11 interaction correction
- Workspace object identity is preserved across sample/new/open/import operations so Preview pan/zoom remains active.
- Preview canvas pans on background drag and Shape clicks are reserved for Shape selection.
- Validation, Definition / JSON, and Console / Log are collapsible accordion panels with UI preference persistence.
## v1.0.12 #002 v1.1.7 integration
- Locked Joint dependency updated to Bone Joint v1.1.7.
- #023 passes actual #021 TOP/BOTTOM/LEFT/RIGHT Port positions into #002 routing.
- Orthogonal routing uses #002 Port Clearance 40px by default, Corner Radius 10px, Lane Gap 12px and Auto Lane Separation. Per-Joint Clearance can be adjusted from 0..120px.
- Static Direction Marker is enabled by #002.
- #023 does not generate a custom Joint path.
## v1.0.13 Runtime version comparison correction
- Runtime dependency version checks now compare a normalized version string against DEPENDENCY-LOCK instead of a duplicated hard-coded literal.
- Only BOM, zero-width formatting characters and whitespace are ignored; the semantic version digits must still match exactly.
- Mismatch errors now report raw, normalized and expected values for diagnosis.
### v1.0.14 interaction fix
Startup QA is isolated from interactive editor confirmation. Automated sample-switch checks no longer surface discard dialogs to the operator. Event binding is idempotent and sample loading is guarded against re-entry so one user action produces at most one discard confirmation.
## v1.0.14 QA interaction isolation
- Automated Runtime QA no longer opens user-facing unsaved-change dialogs.
- Event binding is idempotent and sample loading is single-flight.
## v1.0.34 Shape move / Joint endpoint editing
- A Shape can be dragged directly by its body. The move is previewed without reparsing on every pointer move; Joint geometry is refreshed live.
- On release, the final Shape position is written to Source as `manual, x, y`, so reload/export preserves the layout.
- Clicking a Joint selects it and exposes two endpoint handles in a #023 interaction layer above the dependency-isolated Shape/Joint render layers.
- Dragging the source handle accepts compatible `OUT` Ports; dragging the target handle accepts compatible `IN` Ports. Shape-position Ports and TABLE_DETAIL field Ports are supported.
- Reconnection preview and state semantics continue to use #002 v1.1.7; #023 does not replace #002 routing.
- If the edited endpoint is a declaration or is shared by continuation syntax, #023 first normalizes the valid Definition to independent canonical Joint statements, then patches exactly one endpoint. This prevents a single drag from accidentally changing the next Joint in a chain.
- #021 Shape remains unchanged. #023 only reads #021 Port metadata and coordinates.
## v1.0.34 Joint selection interaction
- Hover alone does not expose edit controls. Clicking either a Joint route or its connection endpoint selects the Joint.
- A selected Joint is shown with a bright selection overlay, two endpoint reconnect handles, and one persistent `≡` quick-menu affordance. The full interaction host remains pointer-transparent, while the actual Joint hit path, endpoint handles, and `≡` explicitly opt into pointer targeting.
- Pointer dispatch first uses the actual target metadata from `composedPath()`, then falls back to geometry. This prevents a visible `≡` or endpoint circle from degrading into Preview pan.
- A pointer-down on a selected endpoint handle takes priority over Preview pan and starts #002 reconnect handling. An endpoint click on an unselected Joint selects it first.
- During reconnect, all compatible OUT or IN Ports are highlighted. The dragged endpoint's old circle is hidden and a moving reconnect grip follows the pointer; the nearest compatible Port receives a stronger drop-target highlight.
- Right-clicking a Joint opens the same quick menu beside the persistent `≡`. Selection persists independently of pointer movement.
### v1.0.34 Joint interaction correction
- The selected Joint hit path, endpoint circles and ≡ affordance are real pointer targets inside the isolated interaction Shadow Root; coordinate fallback remains secondary only.
- Right-clicking a Joint opens the same mini menu used by ≡ and anchors it beside the selected Joint.
- Reconnect hides the original dragged endpoint control and corresponding #002 endpoint marker, then shows one moving grip at the pointer.
- All compatible #021 OUT/IN Ports are highlighted during reconnect; the current snap target receives a stronger highlight. Port snap tolerance is enlarged for editing.
- The moving grip displays `OUT Portへ` / `IN Portへ` and changes to a valid state when snapped. Pointer-up performs a final target lookup before commit.
- Runtime Smoke interaction tests restore the pre-test selection/menu state so QA does not leave editor controls selected after execution.
## v1.0.34 Joint endpoint gesture
- 最初のJointクリックはJoint選択のみを行う。
- 選択済みJointの線を押すと、押下位置から近い端点を `FROM` / `TO` として選択する。
- 選択端点は黄色の強調ハンドルで表示する。
- 5px以上ドラッグした時点で再接続モードへ遷移する。クリックのみでは接続は変更しない。
- 再接続中は元Jointのmarkerを隠し、カーソル追従グリップと互換Port候補を表示する。
- ボタンを離した位置が互換Portなら、その時点で再接続を確定する。候補外なら元接続を維持する。
- Joint endpoint gesture はPreview PanおよびShape選択より優先する。
## v1.0.34 reconnect endpoint display correction
- 再接続ドラッグ中は通常のJoint endpoint handleを全て非表示にする。
- 再接続Previewレイヤーだけが固定端点1個と移動端点1個を描画する。
- 固定端点は元の実Port中心へ固定し、移動端点はpointerへ追従し、候補Portへ入った場合はその実Port中心へ吸着する。
- ドラッグPreviewではDirection Markerを出さず、操作点と方向Markerを混同させない。
- 未吸着の移動端点には旧Port方向を流用せず、候補Portへ吸着した時だけそのPort方向をroutingへ渡す。
## v1.0.34 reconnect screen-space alignment
- Reconnect drag preview is rendered in a dedicated untransformed screen-space SVG, separate from the normal logical/zoomed interaction world.
- The fixed grip uses the actual #021 Port DOM center. The moving grip uses the pointer client position, or the actual candidate Port DOM center while snapped.
- This removes zoom/pan-dependent endpoint drift at non-100% preview zoom while keeping normal Shape/Joint rendering in Workspace logical coordinates.
## v1.0.34 Joint Source patch correction
- Multiline/chained Source now stores absolute connector SourceRef ranges in Parser output.
- Joint quick-menu and property-panel edits patch the exact connector token regardless of whether the connector is on the same line as an endpoint.
- A patch is rejected if the absolute SourceRef no longer matches the connector raw token.
- Joint quick-menu refreshes from the rebuilt Working Definition after a successful edit.
- Reconnect remains role-safe: FROM may attach only to OUT ports; TO may attach only to IN ports.
### v1.0.34 Runtime QA state isolation
起動時 Runtime QA は本番エディタ状態を直接残さない。QA開始前に Source / Workspace / selection / zoom-pan / history / dirty state / sample identity を退避し、Smoke / Validation 完了後に必ず復元する。QA中は Workspace / Recovery 永続化を停止する。
## v1.0.34 Joint reconnect role guide
- #021 Shape の実4ポートを再接続候補として走査する。
- `TO` 側を選択した場合、実 #021 `IN` ポートのみを候補化し、通常Shapeでは `TOP / LEFT` を強調する。
- `FROM` 側を選択した場合、実 #021 `OUT` ポートのみを候補化し、通常Shapeでは `RIGHT / BOTTOM` を強調する。
- 互換Portは明るく、非互換Portは薄く表示して、4点のうちどこへ接続可能かを視覚化する。
- 選択済みJointのFROM/TOハンドル、またはJoint線の各端点に近い位置をクリックすると、移動対象側を切り替えられる。
- 端点選択時のガイド文言は固定値ではなく、#021から実際に取得したPort role / positionを使用する。
## v1.0.34 #002 v1.1.29 RETURN / Shape Avoidance integration
- Locked Joint dependency is updated to **#002 Bone Joint v1.1.29** after user localhost Runtime QA reported ALL PASS.
- #023 passes the actual source/target Shape bounds to #002. Orthogonal Joint routing therefore avoids drawing through the connected Shape body and keeps the #002 avoidance padding outside the Shape.
- #023 does not draw a replacement route and does not clip a bad route visually; the route remains a #002 responsibility.
- For normal TB Shapes the four visible physical ports are interpreted as `TOP=IN`, `BOTTOM=OUT`, `LEFT=RETURN`, `RIGHT=RETURN`.
- RETURN is a real Joint role, not a display alias. Valid pairs are `OUT -> IN`, `OUT -> RETURN`, and `RETURN -> RETURN`. `OUT -> OUT` and `RETURN -> IN` are rejected.
- The Decision component retains its formal branch behavior: YES uses RIGHT OUT and NO uses BOTTOM OUT. Its unused side can still act as RETURN.
- The Decision sample's loop is expressed explicitly as `[ng].LEFT => [request].LEFT`, demonstrating a `RETURN -> RETURN` connection. `OUT -> RETURN` is also a valid difference-return path when the source remains an OUT port.
- Reconnect candidate highlighting is based on the effective role derived through #002 v1.1.29 rather than #021's legacy raw side-role attribute.
## v1.0.34 #002 v1.1.29 再統合
- #002 Bone Joint v1.1.29 はユーザー localhost Runtime QA **ALL PASS** を正式な依存確認として採用する。
- Shape Avoidance / Curve Port法線進入 / 未接続Straight固定 / Bridge Jump実Geometry / Orthogonal Path Animation / RETURN方向は #002 の実装をそのまま使用し、#023で独自Joint Pathを作らない。
- `OUT -> RETURN` を正式な差戻しとして追加し、`RETURN -> RETURN` と併用できる。
- Reconnect候補は移動側の固定Roleを基準に `BoneJoint.validatePortConnection()` で組合せを算出する。TargetがRETURNならSource候補はOUTまたはRETURN、SourceがOUTならTarget候補はINまたはRETURNとなる。
- Curveの選択・ヒットテストも #002 `resolveRoute().points` を使用し、旧Bezier近似を持たない。
- Intersection batchは Straight / Orthogonal / Curve の全てを #002 `renderIntersections()` へ委譲する。
- Runtime QA FAILは Test ID / Expected / Actual / Error / Stack を表示し、`window.BONE_FLOW_023_LAST_FAILURES` と「FAIL JSONコピー」から取得できる。
## v1.0.34 Flow Settings mini menu / Runtime QA accordion
Source先頭の `@id / @title / @version / @flow direction / @theme / @joint line / @joint animate / @layout mode / @layout gap` は、Source直編集に加えて日本語の「フロー設定」ミニメニューから一括編集できます。「適用」は9項目を1回の履歴単位でSourceへ反映し、再parse・Preview・Validation・dirty/recoveryへ同期します。Runtime QA結果はアコーディオン化し、既定ではサマリーのみ表示します。
## v1.0.34 Shape drag cleanup
- Connected Joint endpoint circles are represented only by actual #021 Shape ports; duplicate #002 endpoint markers are suppressed in #023.
- Shape drag start clears armed reconnect candidates, drop-target state and reconnect preview.
- Pending drag preview frames are cancelled before committing manual position to prevent stale geometry artifacts.
## v1.0.34 可変パネル幅 / 文字サイズ / Mini Map
- Source / Preview / Inspector の縦境界をドラッグして幅変更できます。初期比率は 40 / 44 / 16 です。Workspace.panelSizes に保存します。
- 境界をダブルクリックすると 40 / 44 / 16 に戻します。
- Source Editor と Property Panel はそれぞれ独立した − / ＋ 文字サイズ操作を持ちます。表示だけを変更し、.bflow / Property値は変更しません。
- Mini Map は新規Workspaceで既定OFFです。SettingsからON/OFFできます。OFF時は右InspectorのMini Map説明領域も隠します。
- v1.0.30のShape drag回帰を修正し、Pointer Capture後に一時Reconnect表示をクリアします。
## v1.0.34 Direction-aware Auto Layout
`@layout mode=auto` で `@flow direction` を TB / BT / LR / RL に変更した場合、旧方向の手動座標を自動レイアウトへ戻し、非Decision Shapeの明示Port位置を意味（IN / OUT / RETURN）を保ったまま新方向へ回転し、Previewを自動Fitします。LR / RL は横方向用の rank gap / branch gap 下限を使います。Decisionの第1branch=RIGHT / 第2branch=BOTTOMという物理branch位置は維持し、branch key文字列そのものはSource定義値をそのまま表示します。
## v1.0.34 Error Flow partial Preview correction
Error Flow の4 root-causeは、通常接続へ見せかけず、#002の異常系表現規則に合わせて原因別に描画します。
- `UNKNOWN_NODE_ID`: 実在側 endpoint から不存在Node予定方向へ直線stubを描画し、終端を `×` で示す。
- `UNKNOWN_FIELD_ID`: Source Field不存在の場合は実在するTarget Fieldを起点に逆方向stubを描画し、途中終端を `×` で示す。通常JointとしてTargetへ結線しない。
- `INVALID_FIELD_PORT`: Field自体は実在するため、そのFieldの実在OUT/IN Portを起点に短いstubを描画し、不正Port位置を `×` で示す。
- `FIELD_TYPE_MISMATCH`: #002 v1.1.29 の方向付きCompatibility判定へ委譲する。INT→STRING系は接続を保持してSource側を異常色のまま線上に黄色の輪郭 `△` Warningを表示し、STRING→INT系は接続不可として赤 `×` Errorを表示する。
Error Flow の正式Definition（Nodes=4 / Joints=4）やSourceRefは変更しません。診断は CASE1-3 がERROR、CASE4 INT→VARCHARがWARNINGです。
## v1.0.34 Error Flow CASE表示
Error Flow のPreviewは、4つのroot-causeを一つの通常Flowとして混在表示せず、`# CASE n - EXPECT ...` をケース見出しとして表示し、その直下にケース固有の部分Previewを配置します。LR/RLではケースを左から右、TB/BTでは上から下へ並べます。`customers` など複数ケースで参照されるNodeは表示コピーを使いますが、Definition上のNode/Joints数は `4 / 4` のままです。診断線・診断Markerは #002 Bone Joint v1.1.29へ委譲します。
## v1.0.35 Error Flow Joint endpoint correction (#002 v1.1.29)
v1.0.34 の CASE-oriented Preview と LR/RL・TB/BT のCASE配置は維持し、Error Flow の Joint endpoint生成だけを #002 Bone Joint v1.1.29 の実挙動へ合わせて修正する。
- `UNKNOWN_NODE_ID` / missing target: 実在Source endpointを `x1/y1` とし、実Portの外向きへ missing-target stub を生成する。
- `UNKNOWN_FIELD_ID` / missing source: 実在Target Field endpointを `x1/y1` とし、`origin=target` で実Portの外向きへ missing-source stub を生成する。不在側を起点にしない。
- `INVALID_FIELD_PORT`: Field自体は実在するため #021 が生成した実Field Portを起点とし、そのPortの外向きへ短いerror stubを生成する。`SIDEWAYS` 等の不存在Portを実在Portとして捏造しない。
- `FIELD_TYPE_MISMATCH`: Source/Targetの実Field endpointを両方保持し、#002へ `sourcePortPosition / targetPortPosition / sourceShapeBounds / targetShapeBounds` を渡す。Compatibility markerは座標中点ではなく #002 が生成した最終SVG pathの中点へ配置する。INT→STRING/VARCHARは黄色の輪郭△、STRING→INTは赤×とする。
- Error Flowでも `@joint animate=true/false` と speed/style を #002へ伝播する。接続未成立Jointのrouteは #002仕様に従いStraightへフォールバックする。
- #023はEndpoint解決を担当し、Joint Path / Curve / Orthogonal / Shape Avoidance / Animation / Error・Compatibility marker描画は #002へ委譲する。
Working Definition (`nodes=4 / joints=4`) と SourceRef、CASE見出し、表示コピー方式は変更しない。
## v1.0.36 Error Flow TB/BT layout correction
TB/BT does not rotate the internal FIELD connection image. It only stacks CASE blocks top-to-bottom. Within each CASE, TABLE_DETAIL Shapes stay left-to-right because FIELD ports are fixed as left=IN / right=OUT by #021. This keeps the Error Flow preview equivalent to the LR image while changing only the CASE-group axis.
Direction transitions wait for two animation frames before and after CASE placement so #021 ResizeObserver / port geometry is settled before #002 Joint endpoints are resolved.
## v1.0.37 Direction transition geometry synchronization
Direction change no longer performs redundant full Renderer passes after Source synchronization. The Source patch performs the full rebuild once; after Fit, #023 waits for the rendered #021 DOM to settle, re-resolves the current actual Port geometry, then redraws #002 Joint geometry. This applies to LR / RL / TB / BT transitions.
TABLE_DETAIL FIELD geometry is a fixed contract: FIELD IN = LEFT and FIELD OUT = RIGHT in every flow direction. TB/BT changes CASE-group placement only; it does not rotate FIELD endpoints.
## v1.0.39 FIELD diagnostic visual attachment correction
Error Flow の FIELD 系 Diagnostic は #021 Shape の CSS / Font / ResizeObserver による遅延レイアウトが安定してから実 Port を再取得し、#002 Joint を描画します。CASE2 UNKNOWN_FIELD_ID、CASE3 INVALID_FIELD_PORT、CASE4 FIELD_TYPE_MISMATCH の線は、論理座標だけでなく実際に表示された Port のピクセル位置へ接続されることを Runtime QA で確認します。
## v1.0.40 Joint attachment correction at non-100% zoom
The previous Error Flow diagnostics were logically correct but visually detached when Fit produced e.g. 25% or 72% zoom. The cause was #002 `drawLine()` resetting its SVG viewBox from an already transformed bounding box. The #023 Joint Adapter now applies a zoom-aware compatibility conversion only at the #002 pixel drawing boundary. #021 Port geometry remains the canonical endpoint and #002 remains the line/error renderer.
## v1.0.48 Error × is part of the Joint
The Error Flow × marker is not an independent #023 decoration.
#023 resolves the diagnostic endpoint and delegates the line and diagnostic marker to #002 v1.1.29. CASE1-3 use `drawError()` with #002 marker settings; compatibility diagnostics use `drawCompatibilityMarker()`. Both target the same Joint base SVG, so #023 does not choose `cross` / `question` or create a separate marker SVG.
## v1.0.48 #002 v1.1.29 formal follow-up
- #002 Bone Joint dependency is locked to v1.1.29 after user localhost ALL PASS.
- Curve routing, including RIGHT→TOP and the other orthogonal Port pairs, is delegated to #002; #023 does not synthesize its own Curve.
- Error marker shape is not fixed by #023. CASE1-3 call #002 `drawError()` with the current marker settings.
- FIELD_TYPE_MISMATCH uses #002 directional compatibility: INT→STRING/VARCHAR is a connected Warning with hollow yellow △ on the Joint path; STRING→INT is a disconnected Error with red ×.
- RETURN→RETURN keeps the physical RETURN pair, while the active RETURN source is displayed as OUT and the former OUT becomes RETURN without displaying RETURN text.
- Error Flow Fit has a 65% floor so the four CASE previews are not reduced to unreadable miniature shapes.
- Per-Joint `curveSide=auto|left|right` is represented as `curve-side:` in Source and delegated to #002 v1.1.29.
## v1.0.51 #002 v1.1.32 formal follow-up
- #002 Bone Joint dependency is locked to **v1.1.32** after user localhost Runtime QA **ALL PASS**.
- Decision Flow `承認? RIGHT -> 実行 TOP` Curve remains fully delegated to `BoneJoint.drawLine()` / `BoneJoint.resolveRoute()` with actual Port coordinates, Source/Target Shape bounds, Port positions, and `curveSide`.
- The near-placement regression gate requires one natural Cubic, `curveHandle < 52`, `shapeAvoidanceSafe=true`, and forbids the old 4x fallback detour.
- RETURN physical roles remain unchanged. When a RETURN position becomes the active send position, only that position is displayed as `OUT`; other RETURN labels remain hidden.
- Error Flow CASE4 remains the adopted #002 Warning contract: INT -> VARCHAR stays connected, Source FIELD port remains red, and the hollow yellow `△` is placed on the final Joint path.
## v1.0.51 physical Shape Bounds correction
#023 must pass #002 the physical #021 Shape boundary, not the outer SVG/viewBox rectangle. For Shape-level geometry the Adapter derives left/right/top/bottom from actual non-FIELD Port centers, so a RIGHT/TOP/BOTTOM/LEFT Port lies on the corresponding avoidance bound. This prevents Decision RIGHT→TOP near Curves from being falsely classified as travelling inside the Shape because of #021 viewBox padding. Layout bounds remain unchanged.
## v1.0.51 physical Bounds alias contract
- `BoneFlowShapeAdapter` physical/logical bounds now expose both coordinate aliases: `x === left` and `y === top`, together with `right` and `bottom`.
- This fixes the v1.0.50 Runtime QA mismatch where Decision Target TOP was physically corrected (`y` matched the TOP Port center) but `top` was absent, causing S107/V37 to fail despite the corrected Curve geometry.
- Curve routing remains delegated to #002 Bone Joint v1.1.32; no #023-specific Curve algorithm was added.
## v1.0.52 active RETURN OUT label correction
- RETURN→RETURNの物理selector / Roleは変更しない。
- 実際に送り出すRETURN位置を表示上の`OUT`へ切り替える際、Port色だけでなく、その物理Port位置に可視の`OUT`文字を表示する。
- 元のOUT位置はRETURN扱いとなり、元OUTラベルは非表示。`RETURN`文字は表示しない。
- Decision sampleの`[ng].LEFT => [request].LEFT`を正式回帰条件とする。
## v1.0.53 installer restoration
- Distribution ZIP again includes the established top-level `install.bat` / `install.ps1` pair.
- Installer behavior is not reimplemented: it follows the v1.0.48 target detection, dependency SHA verification, backup, #023-only copy, and post-copy dependency verification flow.
## v1.0.55 Decision arbitrary branch key / label offset
- RIGHTにはSource内の第1 `branchKey`、BOTTOMには第2 `branchKey` をそのまま表示する。YES / NOへの固定変換は禁止。
- `はい / いいえ`、`営業日 / 休日` など任意の一意なbranch keyを表示できる。
- 線上コメント（例：`承認` / `否認`）はbranch keyとは別表示のまま維持する。
- branch key文字はJoint Path上へ重ねず、RIGHTは出口線より上、BOTTOMは出口線より右へオフセットする。
- Decisionでは汎用`OUT`文字をbranch keyの代わりに表示しない。
## v1.0.57 UI Theme visibility correction
- Toolbar `Theme` is Editor UI Theme only; it does not modify Flow `@theme light/dark/neon`.
- The old pseudo-Light implementation using whole-app `brightness()` / `filter` is prohibited. UI Light uses explicit high-contrast background/text/token/property colors.
- Source textarea remains transparent over the syntax-highlight layer, so text selection must use a translucent overlay; an opaque selection background is prohibited because it hides the highlighted characters.
- Runtime QA adds S113-S114 and V42-V43. Definition count: Smoke S01-S114 + Validation V01-V43 = **157 checks**.
- Browser localhost Runtime QA remains the final user-side gate when this build environment cannot execute the page.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■ v1.0.57 Source / Image Export
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
- Save / Save As keeps the editable `.bflow` document workflow.
- `Export Source` downloads the current normalized Source as `.bflow` without changing the editor save point.
- SVG export downloads the currently rendered flow chart as `.svg`.
- PNG export rasterizes the same export snapshot at 2x resolution as `.png`.
- SVG export preserves the current Joint animation and embeds resolved Shape/Joint paint styles so the standalone SVG renders like Preview.
- PNG export MUST be static: animation elements and moving flow indicators are excluded from the raster export source snapshot.
- Export does not change the live Preview `Animation Preview` workspace setting.
## v1.0.60 QA harness correction
Validation V42-V45 now use the existing same-origin `text()` loader instead of an undefined `loadText()` helper. Runtime editor/export behavior is unchanged from v1.0.57.
## v1.0.60 Export controls visibility
- `Source保存`, `SVG保存`, `PNG保存` are permanent controls in the sticky top toolbar, next to the normal Save controls.
- Image export no longer depends on expanding `Definition / JSON`; that accordion contains JSON/Workspace operations only.
- SVG uses animated serialization (`animation:true`); PNG uses a separate static serialization (`animation:false`).
- Source save continues to export normalized `.bflow` without changing the editor save point.
## v1.0.62 Transparent SVG / PNG export background
- SVG / PNG export background is always transparent, independent of Flow Theme and Editor UI Theme.
- `BoneFlowRenderer.serializeSvg()` no longer emits a full-canvas background ``.
- Exported SVG declares `data-bf023-export-background="transparent"`; only actual Flow Shapes, Joint lines, labels, and related Flow artwork are serialized.
- PNG rasterization uses an alpha-enabled canvas, clears it to transparent pixels, and draws the static SVG snapshot without any background fill.
- The Preview canvas background remains an Editor-only visual surface and is not part of exported SVG / PNG artwork.
## v1.0.65 Error Flow SVG / PNG export correction
- `error-flow` のCASE分離Previewで使用するDiagnostic Shape copyをSVG / PNG Export対象へ追加。
- `# CASE n - EXPECT ...` 見出しをSVG要素としてExportへ含める。
- Diagnostic Joint / error markerを含む実描画範囲をExport viewBoxへ反映し、赤い×や切断線のクリップを防止。
- 通常Shapeは従来どおり `Shape.get()`、Diagnostic Shapeは `Shape.getDiagnostic()` を使用し、表示PreviewとExportのShape解決経路を一致させる。
- SVGは透明背景 + Animation保持、PNGは透明背景 + Staticの既存契約を維持する。
## v1.0.62 入力ガイド
Source Editorヘッダーへ「入力ガイド」を追加しました。#021 Bone Shape Registryの実ShapeをShadow Root内で生成してTYPE一覧を画像表示し、Shapeカードまたはコード例から `.bflow` Sourceへコードを挿入できます。詳細は `023-Input-Guide.md` を参照してください。
## v1.0.65 Server Deployment Path
Runtime dependency URLs are resolved from the actual editor URL (`../` from `test/bone-flow-editor.html`) instead of hard-coding `/BoneFlow/`. Therefore `/boneflow/`, `/BoneFlow/`, or a nested deployment path keep their exact server-side casing and base path. This is required for case-sensitive Linux/Unix web servers.
## v1.0.65 SVG export coordinate regression fix
- Preview zoom / pan is a CSS viewport transform only. SVG Export must serialize Shape and Joint in the original logical coordinate space.
- Joint SVG `getBBox()` values are already logical coordinates and must never be divided by Preview zoom.
- SVG keeps animation; PNG uses the same logical geometry with animation disabled.
- Basic / Decision / Data / Table / Error export geometry remains on the same Port endpoints as Preview.
## v1.0.66 SVG / PNG export regression correction
- `v1.0.65` で誤って外した Joint の zoom 正規化を復元する。#002 Joint は Preview 描画時に zoom 倍された SVG 座標を保持するため、Export 時は Joint layer のみ `1 / zoom` で論理座標へ戻す。
- #021 Shape の内部 SVG は `overflow: visible` を Export copy に明示し、IN / OUT / Decision branch key など Shape 外周に出る Port Label を切り落とさない。
- Export content bounds は Shape 本体の DOM bounds だけでなく Shape SVG graphics bounds も含める。`YES / NO` および任意 branch key の右側・下側欠けを禁止する。
- #002 の Direction Marker は Preview では変更しない。透明背景 SVG / PNG の Export copy だけ dark outline stroke を除去し、黒い縁取り線が出ないようにする。
- Error Flow CASE1-4 の Joint / Error Marker / Warning △ は同一の zoom 正規化を通し、diagnostic Shape と論理座標を一致させる。
## v1.0.69 SVG / PNG Joint geometry correction
- v1.0.66 の「Export Joint layer に一律 `1 / zoom` を掛ける」方式は廃止する。#002 が Preview 描画時に保持する Joint SVG の `viewBox` / `width` / `height` 自体を表示座標変換の正本として扱う。
- Export は Preview の Joint SVG を子要素だけへ分解せず、完成済みの `