# Bone Flow #021 - Shape Version 1.0.63 / Status: Development ## Architecture ### Fixed Shape - `data/bone-shapes.json` のSVG要素・4 Joint Port定義から生成する。 - 固定Shape追加時はRegistry JSONへ定義を追加し、Shape別switchは追加しない。 - 表示文字は最大3行。 ### Composite Shape - 基本Shapeを参照し、2～4枚を左下方向へ重ねる。 - Multiple DocumentはDocumentを参照する。 - CollectionはObjectを参照する。 - 上・右Portは最前面Shapeのアウトライン、左・下Portは最背面Shapeのアウトラインを使用する。 - `TOP.x = BOTTOM.x`、`LEFT.y = RIGHT.y` を維持する。 - 重ね数別PortはRegistry JSONの `portSets` で定義する。 ### Variable Detail Shape - Table Detailをデータ件数に応じて生成する。 - Headerは論理名・テーブル名を表示する。 - Bodyはフィールド名・略名・型を可変行で表示する。 - 各フィールドに独立したIN/OUT Joint Portを提供する。 - テーブル全体にも4 Joint Portを提供する。 ## Basic Property - Flow / IN・OUT表示 - Shape定義には常に TOP / RIGHT / BOTTOM / LEFT の4 Joint Portを保持する。 - Joint Portの接合点はフロー表示方向やIN/OUT文字表示設定にかかわらず、従来どおり常時表示する。 - フロー表示方向を `horizontal` / `vertical` から選択する。 - 横表示ではIN文字をLEFT、OUT文字をRIGHTのJoint Port位置へ表示する。 - 縦表示ではIN文字をTOP、OUT文字をBOTTOMのJoint Port位置へ表示する。 - `IN 表示` と `OUT 表示` はJoint Port自体ではなく、IN/OUT文字ラベルだけを個別にON/OFFする。 - OFFにしてもJoint Port定義・接合点・位置・接続識別情報は変更しない。 - Composite Shapeも同じ表示方向規則を使用し、Registryの重ね数別Port座標を利用する。 - Table DetailのTABLE Portは同じ表示方向規則でIN/OUT文字位置を決める。 - Table DetailのFIELD Portは従来どおり常時表示し、フィールドごとの接続点として保持する。 - JSON OUTは `flow.direction`、`inLabelVisible`、`outLabelVisible`、IN/OUT文字位置、各Joint Portの定義状態を出力する。 ## Basic Property - Display / Text Style - Shape表示率を25～200%で設定できる。Registry/SVG座標自体は変更せず、プレビュー表示率だけを変更する。 - 表示文字は最大3行を維持し、表示文字専用のフォント・フォントサイズを設定できる。 - Tooltip文字はTooltip専用のフォント・フォントサイズを設定できる。 - Comment文字はComment専用のフォント・フォントサイズを設定できる。 - 3種類の文字スタイルは独立しており、互いのフォント設定を共有しない。 - フォントサイズ範囲は8～72px。 - Shape表示率、表示文字スタイル、Tooltipスタイル、CommentスタイルはJSON OUTへ出力する。 ## Tooltip - Tooltip本体はSVGへ含めない。 - Hover / Select / Always / Hiddenを切り替える。 - 親UI領域（`data-shape-ui-boundary`）全体をドラッグ移動できる。 - Shape自身の高さには移動範囲を制限しない。 - 移動位置は親要素基準の正規化座標（0～1）で保持する。 - Shape表示率や親サイズが変化しても、保存位置を親要素基準で復元する。 - JSON OUTの `uiPosition.coordinateSpace` は `parent-normalized`、`reference` は `PARENT` とする。 ## Comment - Comment本体と接続線はSVGへ含めない。 - Shape SVGは `data-comment-anchor="outline"` のアウトライン情報だけを提供する。 - Comment本体は親UI領域全体を独立してドラッグ移動できる。 - Comment本体位置は親要素基準の正規化座標として保存・復元する。 - Comment専用起点はShapeアウトライン上だけを移動する。 - Joint Port付近への起点重複を回避する。 - Comment起点はJoint Portと共有しない。 - Comment起点はShapeアウトライン基準、Comment本体位置は親UI領域基準として別々に保存する。 ## Shape List - Shape List UIは固定Shape・複合Shape・可変詳細Shape・TIME JOBの4分類タブで表示する。 - Registry内部カテゴリ `fixed` / `composite` / `detail` は維持し、TIME JOBはUI上の分類として扱う。 - TIME JOB配下は `SCHEDULE_TRIGGER` / `JOB` / `JOBNET` を表示する。 - 一覧のSVGサムネイルはプレビューの25%サイズで表示する。 - 選択したShapeを右側のプレビューへ表示する。 ## Theme - Light / Dark / NeonをCSS変数で切り替える。 - Shape形状、Joint Port座標、Commentアウトライン情報はテーマ変更の影響を受けない。 ## JSON OUT - `details` / `summary` のアコーディオンで表示する。 - Shapeカテゴリ、フロー方向、IN/OUT文字表示、Joint Port、表示文字、Tooltip、Comment、UI位置、複合Shape重ね数、Table Detailフィールド情報を出力する。 ## v1.0.19 接続イメージ追加 - v1.0.14 Shape Propertyを修正元として維持。 - #020 Label正式接続イメージの5ケースを追加。 - 中央ノード表示のみ「処理」に変更。Shape SVGとは非連動。 - Bone Joint CSS全体は読み込まず、接続イメージに必要なJoint描画スタイルだけを局所適用し、Shape PropertyへのCSS干渉を防止。 ## Smoke Test / Validation Report UI テスト画面は #020 Bone Label の正式構成に合わせ、Smoke Test / Validation / 全テスト実行、結果クリア、JSON/Markdownレポート保存を提供する。 ## コンポーネント完了管理 Smoke Test と Validation が共に ALL PASS の場合のみ #021 Bone Shape を完了可能とする。完了状態では Completion Flag / Status / Validation / 完了日時を表示し、完了解除も可能とする。 ## v1.0.20 #020正式UI基準の上段構成追加 - Dependenciesを追加。 - 使用コンポーネントを追加し、#001 Bone Core / #002 Bone JointのVersion・Status・APIを実行時確認する。 - #020 Bone LabelをUI基準構成として明示する。 - テスト対象説明を追加する。 - 登録済みUI領域を追加する。 - Shape Property、接続イメージ、Smoke Test / Validation Report、コンポーネント完了管理は維持する。 ## v1.0.25 共通Component参照 / Class API - #020 Bone Label v1.0.60 を UI / Class API 表現基準として参照する。Shape内部のSVG文字GeometryはShape固有責務のため、#020内部DOMへ置換しない。 - Shape色Propertyは #040 ColorPicker v1.0.15 Caller APIを使用する。既定はTheme色を維持し、カスタム色ON時のみFill / Stroke / Textを上書きする。 - マウスオーバー時の枠Effectは #022 Hover Border Effect v1.0.5へ委譲する。 - Shape要素の時間Animationは #117 Animation v1.0.9へ委譲し、#021内に独自keyframe / timer / loopを追加しない。 - #022（枠）と#117（要素Motion）は別責務として同時利用可能。 - `BoneShape.Component`、`createInstance()`、`attachInstance()`を公開し、親はinstanceからINPUT / OUT / State / attach / detach / destroyを扱う。 - ガイドはtest画面の「ガイドを開く」へ統合し、Class/Public API、使用方法、操作説明を表示する。 ## v1.0.26 Scheduler / Job Shape - `SCHEDULE_TRIGGER`、`JOB`、`JOBNET` をShape Registryへ追加する。 - `SCHEDULE_TRIGGER` は時間・カレンダー条件を表す起点Shapeで、Semantic Port `OUT` を1個持つ。 - `JOB` は実行処理Shapeで、Semantic Port `IN` / `SUCCESS` / `ERROR` を持つ。 - `JOBNET` は複数Jobをまとめる運用グループ表現で、Semantic Port `IN` / `SUCCESS` / `ERROR` を持つ。 - Shape TYPEと実行状態は分離し、`job.status` は `WAIT` / `READY` / `RUNNING` / `SUCCESS` / `ERROR` / `HOLD` / `SKIPPED` を使用する。 - 既定の状態色は SUCCESS=青、ERROR=赤、RUNNING=黄系、WAIT=灰系とする。カスタムShape色をONにした場合は既存#040 ColorPicker指定を優先する。 - `schedule` は `type` / `text` / `calendar` / `enabled`、`job` は `status` / `scheduleText` / `enabled` / `parallel` をJSON OUTへ出力する。 - Semantic Portは既存Shapeの4方向IN/OUT Portを変更せず、新規3ShapeだけRegistry定義に従って生成する。 - #022は枠Effect、#117は要素Animationのまま維持し、Scheduler / Job状態管理と混在させない。 ## v1.0.28 TIME JOB Shape List - Shape Listへ `TIME JOB` タブを追加する。 - `SCHEDULE_TRIGGER` / `JOB` / `JOBNET` をTIME JOB配下から明確に選択できる。 - 内部TYPE、既存Geometry、Port、既存Registry 3カテゴリは変更しない。 ## v1.0.29 TIME JOB Flow / Data IN / Result Routing - TIME JOBのSemantic Portは `flowDirection` に追従する。横表示はSCHEDULE_TRIGGER OUT=RIGHT、JOB/JOBNET IN=LEFT・SUCCESS=RIGHT・ERROR=BOTTOM。縦表示はSCHEDULE_TRIGGER OUT=BOTTOM、JOB/JOBNET IN=TOP・SUCCESS=BOTTOM・ERROR=RIGHT。Shape本体Geometryは変更しない。 - `JOB` / `JOBNET` は見た目のIN Portだけでなく、`job.input` にBone最小構造 `id / type / value` を受けるデータIN契約を持つ。 - Public API `BoneShape.setJobInput(value, bone)` / `Component#setJobInput(bone)` でIN Boneを設定する。新しいINを設定した時点で以前の実行結果をクリアし、`job.status` を `READY` にする。 - Public API `BoneShape.applyJobResult(value, result)` / `Component#applyJobResult(result)` で戻り値を反映する。戻り値statusは `SUCCESS` / `ERROR` のみを受け付け、`job.status` と `job.returnPort` を同じ値へ同期する。 - 戻り値 `SUCCESS` では既存状態色の青（stroke `#3B82F6`）、`ERROR` では赤（stroke `#EF4444`）を使用する。カスタムShape色ON時の#040 ColorPicker優先規則は維持する。 - #021はJob実行エンジンを内包しない。受け取ったIN Boneと実行結果をShape状態・OUT分岐表現へ反映する責務に限定する。 ## v1.0.30 Display Text linkage / Font Size - `表示文字（最大3行）` のProperty値とPreview内の主表示文字を同一値として扱う。Shape選択時も空欄＋fallback表示にせず、実際に表示する既定文字をPropertyへ同期する。 - SCHEDULE_TRIGGERの既定表示文字は `スケジュール\n起点` とし、既存Shape Geometryを変更せずShape内へ収める。 - `表示文字フォントサイズ` は `.bf-text` の固定CSSに負けないinline styleとしてSVG主表示文字へ反映し、8～72px設定を実描画へ適用する。 - Port / Flow方向 / JOB data IN / SUCCESS・ERROR戻り値・状態色のv1.0.29仕様は変更しない。 ## v1.0.33 JOB Contract / Status Color Property - Shape TYPE `JOB` / `JOBNET` は維持し、処理内容は `job.processType` で表す。対応値は `SQL` / `BAT` / `JS` / `POWERSHELL` / `EXE` / `API` / `SHELL` / `ETL` / `FILE_TRANSFER` / `AI` / `CUSTOM`。 - `job.acceptedInputType` をデータ上のIN受入TYPE契約として追加する。対応値は `ANY` / `JSON` / `TEXT` / `FILE` / `SQL` / `COMMAND` / `JOB_REQUEST`。`ANY` 以外ではIN Boneの `type` と一致しない入力を拒否する。 - `job.statusColors.running` / `success` / `error` を追加し、#040 ColorPicker Caller APIから設定する。既定は RUNNING=`#F59E0B`、SUCCESS=`#3B82F6`、ERROR=`#EF4444`。 - `RUNNING` は処理中色、`SUCCESS` / `ERROR` は戻り値状態色としてShape枠と状態表示へ反映する。 - 既存のカスタムShape色ON時の優先規則は変更しない。Port Geometry / Flow方向 / JOB data IN / SUCCESS・ERROR戻り値分岐は変更しない。 ## v1.0.33 TIME JOB contract additions - Shape Fill and JOB RUNNING / SUCCESS / ERROR paints accept #040 ColorPicker solid or GRADIENT_V1 (2-color linear gradient). - JOB / JOBNET keep Shape TYPE unchanged and add `job.processContent` as actual processing definition TEXT data. #021 stores/returns it but does not execute SQL/BAT/JS/etc. - SCHEDULE_TRIGGER stores source schedule fields: type, triggerMode, month, dayOfMonth, dayOfWeek, hour, minute, calendar, enabled. - triggerMode is CLOCK / MANUAL / API / JOINT. #021 does not own a timer. CLOCK is evaluated by `matchesSchedule(value, date)`; all configured modes can emit a SCHEDULE_EVENT through `triggerSchedule(value, context)`. - Public API: BoneShape.matchesSchedule / triggerSchedule and BoneShape.Component.matchesSchedule / triggerSchedule. - Property cards use accordion UI. ## v1.0.33 Property language / Node Class Public API - test UIへ `日本語 / English` のProperty language切替を追加する。内部TYPE / enum / JSON keyは翻訳せず、表示ラベル・説明・Schedule表示文・ColorPicker caller localeのみ切り替える。 - `BoneShape.Node` をFlow上のShape NodeをClassから生成・描画する主要Public Classとして追加する。 - `new BoneShape.Node(value, options)` / `BoneShape.createNode(value, options)` / `BoneShape.attachNode(parentElement, value, options)` を公開する。 - `BoneShape.Node#render(parentElement)` / `mount(parentElement)` は既存Component attach処理を使用してNode（Shape）をDOMへ描画する。既存描画実装を二重化しない。 - `BoneShape.Node` は `update` / `setJobInput` / `applyJobResult` / `matchesSchedule` / `triggerSchedule` / `getOutput` / `detach` / `destroy` 等の既存Component機能を継承する。 - `BoneShape.Component` / `createInstance` / `attachInstance` は互換APIとして維持する。 - test UIのClassリスト / Public APIにはClass名、constructor/factory、引数、戻り値/役割、Classから実際にNodeを描画するPreviewを常設する。 ## v1.0.34 Property language switch placement - 日本語 / English の Property language switch をヘッダーから `Shape Property` セクション先頭へ移動。 - #022 Hover Border Effect と同じく、Property設定内で言語を切り替える共通配置に揃える。 - 言語切替のID・動作・locale APIは変更しない。 - TIME JOB / Class List / Public API / Shape Geometry / Port / Completion / INDEXは変更しない。 ## v1.0.36 Class リスト / Public API / Guide responsibility separation - 通常TEST画面の `Class リスト` はPublic APIメソッド一覧ではなく、完成済みBoneShape Public APIを利用側Classから使用する実例を表示する。 - `ShapeClassSample` は利用側サンプルClassであり、BoneShape本体のClass設計を変更しない。 - Classリストは `Shape Property / Preview` の後、接続イメージの前へ配置する。 - ClassリストにはClass名、目的、利用Public API、サンプルコード、実行結果、生成UI、Class経由操作、State / OUTを表示する。 - Public API一覧と各APIの責務詳細はGuideの `1. Public API` に集約し、通常ClassリストへAPI表を重複表示しない。 - Guideは `1. Public API` / `2. 使用方法` / `3. 操作説明` を分離する。 - `3. 操作説明` はSmoke / Validation / Completion等のTEST手順ではなく、利用側Classをいつ・どこで使うか、参照データ、Class名/コードの意味、書き方、サンプル、実行結果を説明する。 - Shape Geometry / TYPE / Port / TIME JOB / Property / Joint / #022 / #117 / #040 / Completionの既存責務は変更しない。 ## v1.0.37 Class sample execution result / Guide formal-spec correction - Classリストは正式採用仕様どおり `Public API → 利用側Sample Class → 実UI生成 → 操作 → 結果確認` を実動作させる。 - `ShapeClassSample` のサンプルコード表示だけでPASSにせず、Registry読込後に同じPublic API経路を自動実行し、実Shape UI・State・OUTを常時表示する。 - Classリストには Class名 / 目的 / サンプルコード / コード実行結果 / 実生成UI / Class経由操作 / State・結果を保持する。 - Public API一覧はClassリストへ混在させずGuide `1. Public API` に集約する。Guide一覧は実RuntimeのBoneShape APIと一致させ、各APIで「いつ使う / 引数・参照データ / 使用手順 / サンプル / 実行結果・処理 / 戻り値 / 責務境界」を説明する。 - Guide `2. 使用方法` は通常Shape / Property更新 / JOB・JOBNET / SCHEDULE_TRIGGER / Validation・OUT / #022・#117連携 / destroy の実利用レシピをコードと結果付きで示す。 - Guide `3. 操作説明` は上部Class一覧リンクと、各Classの「いつ使用するか / どこで使用するか / 参照データ / Class名等コード各部の意味 / コードの書き方 / サンプル / 実行結果」を表示する。Smoke/Validation/CompletionのTEST操作順は入れない。 - BoneShape本体のGeometry / TYPE / TIME JOB / Port / Property / Joint / #022 / #117 / #040 / Completion責務は変更しない。 ## v1.0.38 #023準拠 Shape Guide - Guide UIは #023 Flow Editor v1.0.80 の入力ガイド構造に合わせ、左目次 + 右スクロール本文のモーダルとする。 - Shape紹介画像は固定PNG/SVGを別管理せず、`BoneShape.registry.shapes` と #023と同じ `BoneShape.create(value, { onUiChange:()=>{} })` 経路から実ShapeをRuntime生成する。 - Shape紹介はRegistry全39 Shapeを対象に、TYPE / Category / Registry由来説明 / #023専用Nodeコードを表示する。 - IN / OUT詳細は `BoneShape.output(value).ports` / `portLabels` を実Runtimeから取得し、horizontal / vertical / named semantic Port / TABLE_DETAIL FIELD Portを表示する。 - 通常Shapeは横=LEFT IN / RIGHT OUT、縦=TOP IN / BOTTOM OUT。Joint接合点は常時保持する。#023のRETURNは `.RETURN` suffixではなくLEFT / RIGHT等の物理位置selectorを使用する。 - `SCHEDULE_TRIGGER` はSemantic OUT、`JOB` / `JOBNET` はSemantic IN / SUCCESS / ERRORをRegistry `namedPorts` から表示する。 - Classリスト/Guideは v1.0.36/37 の利用側 `ShapeClassSample` を現行表示から外し、`BoneShape.getClassGuide()` の正式契約を使用する。主要Class `BoneShape.Node` と互換Class `BoneShape.Component` を実Class名のまま説明し、`BoneShape.Node` を実際に `render(host)` してState / OUTまで表示する。 - #023専用コードは #023 Parser / Definitionの実Syntaxを使用する。START=`(id:text)`、END=`((id:text))`、PROCESS=`[id:text]`、DECISION=``、INPUT_OUTPUT=`{id:text}`、SUB_PROCESS=`[[id:text]]`、その他=`[id:TYPE:text]`。 - 専用コード一覧は #021 Registry全39 Shapeを列挙し、TIME JOB (`SCHEDULE_TRIGGER` / `JOB` / `JOBNET`) もgeneric TYPE Syntaxで含める。 - TABLE_DETAIL FIELD接続は `[table].field.OUT => [table].field.IN`、物理Port指定は `[source].BOTTOM => [target].TOP` を使用する。 - Public API一覧はGuide内に残し、実Runtime surfaceと一致させる。実装にないAPI/Class/Syntaxは追加しない。 - Shape Geometry / TYPE / TIME JOB / Port実装 / Property / Joint / #022 / #117 / #040 / Completionの既存責務は変更しない。 ## v1.0.52 Runtime-owned Property Schema / HTML Functional Class / DOC Integration - Runtime正式Property所有者をBoneShapeへ固定し、`getPropertySchema()` / `getPropertyDefaults()` / `getPropertyDefinition(key)` を公開する。 - TIME JOBのIN受入TYPE、処理TYPE（SQL/BAT/JS等）、RUNNING/SUCCESS/ERROR色、Scheduleの日/週/月/時/分をSchemaへ含める。 - 正式HTML Functional Classは `bf-shape`。`data-shape-type` とinnerTextを基本契約とし、IN/OUTラベル位置のみ `data-port-label-lr-x/y` と `data-port-label-tb-x/y` で調整できる。その他PropertyはProperty Editor / Public APIを使用する。 - DOC-0021 / TOC-0021を正式Guide経路へ統合し、日本語/Englishを保持する。 - Installerは `C:\work\pcsr\pcsr.net\public` をDocumentRoot既定値とし、Apache/IIS/XAMPP探索、自動backup生成を行わない。 - 既存Shape Geometry / Port / TIME JOB / #040 / #022 / #117 / #002責務は維持し、v1.0.58でJointなし印鑑Shape 5種を追加。 ## v1.0.52 INTERNAL_DETAIL / TABLE_DETAIL Geometry - `TABLE_DETAIL`: 最終フィールド行の下にあった18pxの装飾余白を削除。 - `INTERNAL_DETAIL`: DBメタ情報・保存領域等の内部表現専用Shapeを追加。 - `INTERNAL_DETAIL` は「項目名 / 型」の2列で、略名列を持たない。 - TABLE_DETAILと見分けるため、実線2重フレーム・小さな右上角折り・`INTERNAL` バッジを持つ。 - FIELD IN/OUTとTABLE Portは保持する。 ## v1.0.52 INTERNAL_DETAIL / Port Label Geometry - `INTERNAL_DETAIL` は点線・破線装飾を廃止し、実線2重フレーム＋小さな右上角折りで `TABLE_DETAIL` と区別する。 - IN/OUTラベルはLEFT/RIGHT PortではJoint線の上、TOP/BOTTOM PortではJoint線の右へ配置する。 - `bf-shape` HTML Functional Classでは `data-port-label-lr-x`, `data-port-label-lr-y`, `data-port-label-tb-x`, `data-port-label-tb-y` でラベルオフセットを -80..80px の範囲で調整できる。 ## v1.0.52 Port Label / Detail Grid Geometry - IN/OUTラベルはShape外側へ自動退避する。LEFT/RIGHTはJoint線の上を維持しつつ左右外側へ、TOP/BOTTOMはJoint線の右を維持しつつ上下外側へ配置する。HTML Functional Class offsetは自動退避後に加算する。 - `INTERNAL_DETAIL` のフィールド横罫線は二重外枠の内側で止め、左右端でShape外枠と重ねない。 - `TABLE_DETAIL` / `INTERNAL_DETAIL` の表罫線・Header境界・内部二重線・角折り線はShape外枠と同じ `--stroke` 色を使用する。 ## 印鑑 Shape / `bf-stamp` #021 は Joint を持たない印鑑専用 HTML class `bf-stamp` を提供する。`data-stamp-type` は `circle` / `square` / `oval` / `date` / `correction`。丸印・角印・楕円印・訂正印の文字方向は縦が既定で横へ切替可能。楕円印は縦型が既定で横型へ切替可能。データ印は丸型。要素内文字列を印面文字として使用する。`data-stamp-diameter-mm` で実寸直径（通常15mm、訂正印10mm）、`data-stamp-font-size` で文字サイズ、`data-stamp-font-family` でインストール済み印鑑向けフォントを指定できる。指定サイズは固定し、文字が収まらない場合は文字を圧縮して収める。青柳疎石フォント2（AoyagiSosekiFont2）を既定候補とする。データ印は `data-stamp-date-format="yyyy/MM/dd"` または `yy/MM/dd` 等を使用できる。 ```html サンプル印 サンプル印 サンプル印 ``` 訂正する文字 ## v1.0.58 印鑑表示 / 訂正印 - 印鑑枠線は `stamp.borderWidth` / `data-stamp-border-width` で変更可能。既定2px。 - 通常印鑑の縦書き既定サンプルは「サンプル印」。データ印の日付行はゴシック体固定。 - Shape Property Previewでは印鑑だけ300%表示するが、Runtimeのmm寸法は変更しない。 - 文章中の単体印鑑は `bf-stamp-inline` を使用できる。 - `bf-correction-stamp` は要素自身を訂正範囲として、範囲内だけに1/2本の訂正線を描き、中央へ訂正印を重ねる。`data-correction-line-width` / `data-correction-line-count` / `data-correction-line-offset` で調整可能。 - `STAMP_CORRECTION` Shape UIも訂正対象文字＋訂正線＋縦長訂正印を一体表示する。 ## v1.0.58 文章内Shape / 訂正印中央重ね - `bf-inline-shape`: 通常Shapeを文章内へインライン表示。既定サイズは周囲フォントサイズ+3px、`data-inline-size` / `data-inline-font-size-offset` で調整。 - `bf-correction-stamp`: 訂正対象範囲内へ二重線を引き、範囲中央・二重線中央へ訂正印を重ねる。 - Shape Property Preview直下に「文章表現 Preview」を別枠で表示し、現在選択ShapeのHTML class表現を実描画する。 ## v1.0.58 文章表現 Preview Theme / Font Size Offset - `bf-inline-shape` は `data-theme="dark|light|neon"` を受け取り、文章表現 Preview はメインPreviewのThemeをそのまま渡す。 - `data-inline-font-size-offset` は Property `文章内Shape フォントサイズ補正 (px)` から -8〜32px で調整し、文章表現 Preview とコード表示へ即時反映する。 ## v1.0.59 Guide live Shape / Port visibility / Correction defaults - DOC-0021 `4. Shape List / 40 TYPE` detects the current 40-TYPE section and renders each live BoneShape image in the same table row; stamp rows are included. - DOC-0021 `5. IN / OUT / Port` explains `portLabelVisibility.in/out`, the distinction between text-label visibility and the always-present Joint Port, horizontal/vertical directions, FIELD Ports, and HTML class label-offset attributes. - STAMP_CORRECTION defaults: font size 48px, correction line width 2.5px, narrower double-line gap, correction mark shifted slightly downward. ## v1.0.60 訂正印 / Guide inline Shape / 再描画安定化 - 訂正印Shape UIの訂正線は訂正対象文字の範囲幅に合わせ、印は対象中央から少し下へ配置する。 - `bf-correction-stamp` の二重線は背景塗りなしで2本の線として表示する。 - DOC-0021 Shape List表の実Shape列は `bf-inline-shape` を直接使用して表セル内にRuntime Shapeを描画する。 - DOC IntegrationのMutationObserverは自己生成領域を除外し、debounceを1本化して再帰的再描画を防止する。 ## v1.0.62 DOC Shape List inline-table correction - DOC-0021 `4. Shape List / 40 TYPE` は別カタログを生成せず、表自身の「実Shape」列40セルに `bf-inline-shape` を直接記述してRuntime描画する。 - DOC表示の非同期構築時は表が現れるまで最大20回の短時間retryを行い、表が完成した時点で40/40を描画する。 - `文章内Shape Font Size Offset Property` Smokeは選択カテゴリ（印鑑/通常Shape）に依存せず、Property契約自体を検証する。 ## v1.0.62 DOC table live render / inline Theme trace - DOC-0021 Shape List table replaces markdown placeholder cells with live `bf-inline-shape` DOM after the guide table is actually rendered; raw HTML text is not used as markdown cell content. - Table discovery scans rendered guide tables globally so async guide section IDs are not required. - `bf-inline-shape` records the resolved theme on host and rendered BoneShape root for runtime/theme validation. ## HTML class sentence sample (candidate 1.0.80, NOT COMPLETED) - `bf-inline-shape` is mounted by the BoneShape Runtime. Pages load `bone-shape.js` and `bone-shape.css`; do not add a separate shape chart/script or use the old class bridge. - The original `bone-shapes.json` remains necessary as the existing definition registry. It is not a second sample chart. - Consumer markup example: `処理`. - Sample: `/boneflow/test/bone-shape-sentence.html`, with 40 entries and their actual literal HTML markup. - No separate pass/fail custom JavaScript in the sample; verify rendered shapes visually and with the existing #021 tests. - Candidate only; local installation and USER browser verification pending. ### #021 文章内Shapeの文字FIT (Candidate 1.0.80) `data-inline-text-size="14"` は、Shape内部に表示するラベルの画面上の目標文字サイズ（px、8〜24）。省略すると周囲の CSS font-size を参照し、SVG の viewBox と実際の `data-inline-size`（高さ）に合わせて変換します。文字が長い場合は最大3行に折り返して既存の `displayTextStyle.fit=true` で図形の内側に収めます。外側のShapeサイズは変えず、必要なら `data-inline-size` を大きくしてください。例えば `data-inline-size="120" data-inline-text-size="15"`。通常の #021 Shape のFITアルゴリズムは変更していません。 #### #021 文章内Shape FIT 微調整 v1.0.80 文章内ShapeのラベルのみFIT結果の文字サイズを約10%小さくし、枠内余白を確保。通常のShapeには影響しません。 # #021 文章内Shape 全40種類FIT/サイズ選択 v1.0.80 7種+他33種のSVG文字寸法監査、最小希望文字サイズ、Shapeサイズリスト選択を追加。通常Shapeは変更しません。 # #021 文章内Shape 一括サイズUI v1.0.80 40種類共通の選択リスト1個に統一。最小文字サイズも共通設定。警告用の点線枠は撤去。 ## 文章内の印鑑編集 v1.0.83 印面文字 / データ印 上段・日付・下段・日付形式 / 訂正対象を既存#021スタンプ設定へHTMLクラスで渡す。40件共通サイズUIは維持。