std-text-effects

Level: Atom | Entity: TextContent | Persistence: runtime

3 states, 4 events, 6 transitions

Live Preview

orbital TextContentOrbital {
  entity TextContent [runtime] {
    id : string
    name : string
    description : string
    status : string
    createdAt : string
    content : string
    highlightType : string
    reference : string
  }
  trait TextContentTextEffects -> TextContent [interaction] {
    initial: idle
    state idle {
      INIT -> idle
        (fetch TextContent)
        (render-ui main { type: "stack", direction: "vertical", gap: "lg", children: [{ type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "icon", name: "type", size: "lg" }, { type: "typography", content: "Text Effects", variant: "h2" }] }, { type: "divider" }, { type: "markdown-content", content: ["object/get", ["array/first", "@entity"], "name"] }, { type: "code-block", code: ["object/get", ["array/first", "@entity"], "reference"], language: "text" }, { type: "typography", variant: "body", content: ["object/get", ["array/first", "@entity"], "name"] }, { type: "stack", direction: "horizontal", gap: "sm", justify: "center", children: [{ type: "button", label: "Animate", event: "ANIMATE", variant: "primary", icon: "play" }, { type: "button", label: "Highlight", event: "HIGHLIGHT", variant: "secondary", icon: "highlighter" }] }] })
      ANIMATE -> animating
        (render-ui main { type: "stack", direction: "vertical", gap: "lg", children: [{ type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "icon", name: "type", size: "lg" }, { type: "typography", content: "Text Effects", variant: "h2" }] }, { type: "divider" }, { type: "typewriter-text", text: ["object/get", ["array/first", "@entity"], "name"], speed: 50, cursor: true }, { type: "law-reference-tooltip", reference: ["object/get", ["array/first", "@entity"], "reference"], children: [{ type: "typography", variant: "caption", color: "muted", content: "Hover for reference details" }] }, { type: "button", label: "Highlight", event: "HIGHLIGHT", variant: "secondary", icon: "highlighter" }] })
      HIGHLIGHT -> highlighted
        (render-ui main { type: "stack", direction: "vertical", gap: "lg", children: [{ type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "icon", name: "type", size: "lg" }, { type: "typography", content: "Text Effects", variant: "h2" }] }, { type: "divider" }, { type: "text-highlight", text: ["object/get", ["array/first", "@entity"], "name"], highlightColor: "yellow", pattern: "important" }, { type: "law-reference-tooltip", reference: ["object/get", ["array/first", "@entity"], "reference"], children: [{ type: "typography", variant: "body", content: ["object/get", ["array/first", "@entity"], "name"] }] }, { type: "button", label: "Reset", event: "RESET", variant: "ghost", icon: "rotate-ccw" }] })
    }
    state animating {
      HIGHLIGHT -> highlighted
        (render-ui main { type: "stack", direction: "vertical", gap: "lg", children: [{ type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "icon", name: "type", size: "lg" }, { type: "typography", content: "Text Effects", variant: "h2" }] }, { type: "divider" }, { type: "text-highlight", text: ["object/get", ["array/first", "@entity"], "name"], highlightColor: "yellow", pattern: "important" }, { type: "law-reference-tooltip", reference: ["object/get", ["array/first", "@entity"], "reference"], children: [{ type: "typography", variant: "body", content: ["object/get", ["array/first", "@entity"], "name"] }] }, { type: "button", label: "Reset", event: "RESET", variant: "ghost", icon: "rotate-ccw" }] })
      RESET -> idle
        (render-ui main { type: "stack", direction: "vertical", gap: "lg", children: [{ type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "icon", name: "type", size: "lg" }, { type: "typography", content: "Text Effects", variant: "h2" }] }, { type: "divider" }, { type: "markdown-content", content: ["object/get", ["array/first", "@entity"], "name"] }, { type: "code-block", code: ["object/get", ["array/first", "@entity"], "reference"], language: "text" }, { type: "typography", variant: "body", content: ["object/get", ["array/first", "@entity"], "name"] }, { type: "stack", direction: "horizontal", gap: "sm", justify: "center", children: [{ type: "button", label: "Animate", event: "ANIMATE", variant: "primary", icon: "play" }, { type: "button", label: "Highlight", event: "HIGHLIGHT", variant: "secondary", icon: "highlighter" }] }] })
    }
    state highlighted {
      RESET -> idle
        (render-ui main { type: "stack", direction: "vertical", gap: "lg", children: [{ type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "icon", name: "type", size: "lg" }, { type: "typography", content: "Text Effects", variant: "h2" }] }, { type: "divider" }, { type: "markdown-content", content: ["object/get", ["array/first", "@entity"], "name"] }, { type: "code-block", code: ["object/get", ["array/first", "@entity"], "reference"], language: "text" }, { type: "typography", variant: "body", content: ["object/get", ["array/first", "@entity"], "name"] }, { type: "stack", direction: "horizontal", gap: "sm", justify: "center", children: [{ type: "button", label: "Animate", event: "ANIMATE", variant: "primary", icon: "play" }, { type: "button", label: "Highlight", event: "HIGHLIGHT", variant: "secondary", icon: "highlighter" }] }] })
    }
  }
  page "/textcontents/text-effects" -> TextContentTextEffects
}

Loading preview...

Orbital Visualization

Loading visualization...

Entity Fields

Field	Type	Default
id	string	-
name	string	-
description	string	-
status	string	"active"
createdAt	string	-
content	string	""
highlightType	string	"none"
reference	string	""

States

State	Type
idle	Initial
animating	-
highlighted	-

Events

Event	Payload
INIT	-
ANIMATE	-
HIGHLIGHT	-
RESET	-

Transitions

From	Event	To	Effects
idle	INIT	idle	2 effects
idle	ANIMATE	animating	1 effect
animating	HIGHLIGHT	highlighted	1 effect
highlighted	RESET	idle	1 effect
animating	RESET	idle	1 effect
idle	HIGHLIGHT	highlighted	1 effect