Bone Flow #001 - Bone Core Guide

1. First: What is Bone Flow?

Bone Flow treats UI not merely as a collection of visual controls, but as a flow of meaning → connection → expression → validation.

2. Why separate these responsibilities?

In conventional UI implementations, data, events, DOM, CSS, connections and error handling can become entangled inside one component. A visual change can then break data processing, connection failures become difficult to diagnose, and reuse across screens becomes harder.

This separation allows the same meaning to be expressed as Text, Icon, or on another screen, while keeping visual concerns separate from meaning.

3. What does #001 Bone Core do?

#001 is the foundational runtime loaded first in Bone Flow. It does not draw later UI components; it defines the unit of meaning handled by Bone Flow and its lifecycle.

4. Minimum Bone structure

{
  "id": "customer-name",
  "type": "text",
  "value": "Yamada Taro"
}

A Bone itself does not own color, font, lines, animation, or DOM. Those belong to the expression layer.

5. How #001 connects to #002 Joint

Creating a Bone with #001 does not yet deliver information to another component. #002 Joint connects Source/Target endpoints and ports, then handles compatibility, state and delivery.

const bone = BoneCore.create({
  id: "title",
  type: "text",
  value: "Hello"
});

// Joint delivers this Bone to the next component,
// where a UI component such as Text expresses value visually.

6. Component QA vs. “000 Development Order Cumulative Regression Test”

Bone Flow separates tests for the component itself from the cumulative regression test for the integrated boneflow.js / boneflow.css.

7. BoneCore Public API

Basic example

const bone = BoneCore.create({ id:"message", type:"text", value:"Hello" });
const cloned = BoneCore.clone(bone);
const updated = BoneCore.update(bone, { value:"Hello Bone Flow" });
const json = BoneCore.serialize(updated);
const restored = BoneCore.deserialize(json);

8. Non-destructive behavior and lifecycle

#001 must not unexpectedly mutate source input or an earlier Bone. Across clone/update/replace/serialize/deserialize, callers must be able to identify which Bone represents the current value.

• Changing a clone does not affect the original Bone.
• update returns a new Bone without damaging the original.
• After destroy, prohibited operations on the destroyed Bone produce classified errors.
• Meaningful structure survives a serialize/deserialize round trip.

9. Core Error / Validation

Core does not silently repair invalid input and continue. It reports classified error codes so the cause can be identified.

The Test page separates normal-path checks into Smoke Test and invalid/rejection checks into Validation. Completion remains unavailable until both pass.

10. What are boneflow.js and boneflow.css?

The common distribution files used by applications are boneflow.js and boneflow.css.

Rule: Do not hand-edit the final bundles. Authoritative sources live under src/; bundles are regenerated by the build process.

11. Source layout of the rebuilt Bone Flow

Later components are added to src only after authoritative-source verification, Smoke/Validation, and browser checks, then accumulated into the bundle.

12. CSS themes: Light / Dark / Neon

Bone Flow provides Light / Dark / Neon. Light and Dark are conventional display themes. Neon is the distinctive Bone Flow visual language based on the existing #002 Joint screen.

• Light: conventional white/light UI.
• Dark: conventional dark gray/black UI.
• Neon: dark navy base, dark panels, cyan/blue borders and selection, with green/red/purple used for state and emphasis.

Neon does not mean making every element glow. It uses neon colors selectively for connections, state, selection and important information.

13. Smoke Test / Validation / Completion

Bone Flow is not complete merely because the runtime loads. The #001 Test page independently shows normal-path Smoke, abnormal-path Validation, reports, Runtime Console and Completion.

1. Run Smoke Test.
2. Run Validation.
3. Check total tests / PASS / FAIL / elapsed time / Version.
4. Save JSON / MD reports when needed.
5. Local completion becomes available only when both pass.
6. Do not mark formal Completed / Specification Frozen before user localhost verification.

14. Recommended learning order after #001

After understanding “meaning” in #001, continue to #002 Joint to understand “connection”. Then look at expression components such as Text / Icon / Image / Shape to see how responsibility separation works across Bone Flow.

15. Position of #001 in Bone Flow

#001 Bone Core is not simply the first small component. It defines the meaning model on which Bone Flow is built. Later components must not move Core responsibility into UI code or alter the Bone structure merely for presentation convenience.

Understanding Bone Flow starts with understanding the #001 rule: keep meaning small and explicit.