# #121 Timeline Guide ## Overview #121 Timeline manages time **after a start request is received**. It owns Delay / Duration / Sequence / Parallel / Repeat / Loop for multiple Motions. It does not choose the absolute clock time or event that starts execution. Its formal responsibilities are exactly: - Delay - Duration - Loop - Repeat - Sequence - Parallel #021 TIME JOB owns schedule-start definitions, #120 Trigger owns event-start conditions, #122 KeyFrame owns intermediate states/values, #117 Animation owns single-Animation behavior, and #054 Display Timeline owns display UI. None of those responsibilities are implemented by #121. ## Property ### Mode Use `sequence` or `parallel`. - `sequence`: starts the next Motion after the previous Motion ends. - `parallel`: places multiple Motions on the same time axis. ### Delay Milliseconds. Integer from 0 to 600000. Waiting time before Timeline execution. ### Duration Milliseconds. Integer from 0 to 600000. Time each Motion is held. ### Repeat Integer from 1 to 1000. Finite repeat count for the whole Timeline. ### Loop Boolean. When ON, the whole Timeline repeats until it is stopped. ## Execution Test The Execution Test does **not** reimplement #054 Display Timeline. It shows only the calculated start/end/duration values and actual callbacks from #121 Runtime. 1. Set the Property values. 2. Click **Apply Property** to inspect the plan. 3. Click **Run Timeline** to execute real callbacks. 4. Confirm Motion A / B / C move through READY → RUNNING → DONE. 5. Confirm Sequence starts the next Motion after the previous one ends, while Parallel schedules Motions on the same time axis. ## Start-source UI / Components that invoke #121 #121 does not select an absolute clock time or start event by itself. An upstream Component issues the start request. - **#021 Shape / TIME JOB / SCHEDULE_TRIGGER**: starts from schedule conditions such as date, weekday, clock time, or Cron. The CLOCK / MANUAL / API / JOINT start contract belongs to #021. #021 does not run its own resident timer; Runtime / Flow Editor evaluates `matchesSchedule(date)` and calls `triggerSchedule(...)` on a match. - **#120 Trigger**: starts from event conditions such as Click, Focus, Change, Runtime Event, or Command. - **#121 Timeline**: after the request arrives, manages Delay / Duration / Sequence / Parallel / Repeat / Loop. The page adds only two **normal** #002 BoneJoint connection images for this relationship: 1. `#021 TIME JOB / SCHEDULE_TRIGGER → #121 Timeline → Target` 2. `#120 Trigger / Event callback → #121 Timeline → Target` No missing-field or type-mismatch cards are added to this start-source UI. These examples are separate from the existing five IN/OUT connection-test cases. ## Connection Image — #002 BoneJoint v1.1.36 This is independent from the Security Test. Following the #017 Text presentation, the page draws five cases through the formal #002 Joint path: - normal connection (IN / OUT); - IN: Target Field missing; - OUT: Target Field missing; - type mismatch (IN); - type mismatch (OUT). Lines, endpoints, and abnormal markers use the formal BoneJoint v1.1.36 APIs. No private SVG marker, CSS fake Joint, or private abnormal icon is used. ## Security The Untrusted IN / Security Test verifies that the Runtime: - rejects an invalid Mode; - rejects negative Delay / Duration; - rejects duplicate Motion IDs; - rejects getter/setter properties without executing them; - preserves the normal Execution Test view. ## OUT WAIT / BLOCKED - #002 Joint v1.1.36 Integration This is one wide card using the formal BoneJoint v1.1.36 `createDeliveryChannel()` / `drawLine()` path. WAIT and BLOCKED are not split into separate cards. The four visible state fields are Joint State / Target / Queue / Delivered. The three operations are WAIT/FIFO, BLOCKED, and Reset. WAIT keeps the connection established while Target is BUSY, queues A/B, then automatically delivers A→B after Target becomes READY. BLOCKED keeps connectionEstablished while delivering nothing to Target. The operations are followed by one log and two visual confirmations only. No Target READY/BUSY selector, payload selector, or standalone FIFO button is added. ## Smoke Test / Validation Every test row explains what it checks in Japanese or English. Switching language does not change the test ID or pass/fail condition. Smoke Test checks normal Runtime behavior, actual callbacks, and the #002 Delivery Channel. Validation checks invalid-input rejection, responsibility boundaries, I18N, duplicate DOM IDs, and Completion gates. ## Completion Completion is enabled only after Smoke and Validation both pass and the following are visually confirmed: - actual Sequence / Parallel / Repeat callbacks; - WAIT → READY → FIFO; - BLOCKED does not reach Target. The component is not formally Completed or Specification Frozen until the user confirms it on localhost. ## HTML Functional Class The single normal-use class is `bf-timeline`. ```html
``` ## Public API The Runtime global is `BoneTimeline`. Main APIs: - `create(options)` - `run(instance, handlers)` - `stop(instance)` - `update(instance, patch)` - `buildPlan(options)` - `normalizeOptions(options)` - `validateOptions(options)` - `getOptions(instance)` - `getPlan(instance)` - `getState(instance)` - `getHistory(instance)` - `destroy(instance)` - `complete(instance, evidence)` - `reopen(instance)` ## Property Display Language Use **Japanese / English** at the top of the Property panel. The selection changes the Property heading, every Property label, Mode options, Preview explanation, WAIT/BLOCKED explanation, Smoke / Validation check names and descriptions, and Completion explanation. Language selection never changes Runtime values or pass/fail conditions. ## QA Check Catalog ### Smoke Test - S01 Runtime identity — BoneTimeline 1.0.0 / #121 / TIMELINE - S02 Formal responsibilities — exactly Delay / Duration / Loop / Repeat / Sequence / Parallel - S03 Sequence plan — next Motion starts after the previous Motion ends - S04 Parallel plan — Motions share the same time axis - S05 Repeat — finite repeat count - S06 Loop — repeat whole Timeline until explicitly stopped - S07 `bf-timeline` Functional Class Runtime - S08 #002 BoneJoint 1.1.36 Delivery Channel - S09 Connection Image — five cases drawn through the formal #002 Joint - S10 FIFO — automatic A → B delivery after READY - S11 BLOCKED — connection established, zero Target delivery - S12 Security — reject getter/invalid options and preserve Preview - S13 Responsibility boundary — no Trigger / KeyFrame / Display Timeline APIs - S14 Actual callbacks — start → stop order - S15 Guide / I18N — DOC-0121 Japanese / English routes ### Validation - V01 Reject invalid Mode - V02 Reject negative Delay - V03 Reject negative Duration - V04 Repeat range 1–1000 - V05 Reject duplicate Motion IDs - V06 Reject getter without evaluating it - V07 Five formal Properties + Japanese/English display - V08 #120 Trigger responsibility boundary - V09 #122 KeyFrame responsibility boundary - V10 No #054 Display Timeline axis/bar UI - V11 Five connection-image cases + one OUT WAIT / BLOCKED card - V12 Completion gate - V13 Single `bf-timeline` class - V14 No duplicate HTML ids - V15 Runtime remains Development - V16 Property and test explanations switch Japanese/English - V17 Formal DOC-0121 ja.md / en.md sources - V18 #002 native WAIT/BLOCKED marker foreground (line z=1 / node z=2 / marker z=3)