// @ts-nocheck import { createEffect, createSignal, onCleanup, onMount } from "solid-js" import { createStore } from "solid-js/store" import { useSpring } from "./motion-spring" import { TextStrikethrough } from "./text-strikethrough" const TEXT_SHORT = "Remove inline measure nodes" const TEXT_MED = "Remove inline measure nodes and keep width morph behavior intact" const TEXT_LONG = "Refactor ToolStatusTitle DOM measurement to offscreen global measurer (unconstrained by timeline layout)" const btn = (active?: boolean) => ({ padding: "8px 18px", "border-radius": "6px", border: "1px solid var(--color-divider, #444)", background: active ? "var(--color-accent, #58f)" : "var(--color-fill-element, #222)", color: "var(--color-text, #eee)", cursor: "pointer", "font-size": "14px", "font-weight": "500", }) as const const heading = { "font-size": "11px", "font-weight": "600", "text-transform": "uppercase" as const, "letter-spacing": "0.05em", color: "var(--text-weak, #888)", "margin-bottom": "4px", } const card = { padding: "16px 20px", "border-radius": "10px", border: "1px solid var(--border-weak-base, #333)", background: "var(--surface-base, #1a1a1a)", } /* ─── Variant A: scaleX pseudo-line at 50% ─── */ function VariantA(props: { active: boolean; text: string }) { const progress = useSpring( () => (props.active ? 1 : 0), () => ({ visualDuration: 0.35, bounce: 0 }), ) return ( {props.text} ) } /* ─── Variant D: background-image line ─── */ function VariantD(props: { active: boolean; text: string }) { const progress = useSpring( () => (props.active ? 1 : 0), () => ({ visualDuration: 0.35, bounce: 0 }), ) return ( {props.text} ) } /* ─── Variant E: grid stacking + clip-path (container %) ─── */ function VariantE(props: { active: boolean; text: string }) { const progress = useSpring( () => (props.active ? 1 : 0), () => ({ visualDuration: 0.35, bounce: 0 }), ) return ( {props.text} ) } /* ─── Variant F: grid stacking + clip-path mapped to text width ─── */ function VariantF(props: { active: boolean; text: string }) { const progress = useSpring( () => (props.active ? 1 : 0), () => ({ visualDuration: 0.35, bounce: 0 }), ) let baseRef: HTMLSpanElement | undefined let containerRef: HTMLSpanElement | undefined const [state, setState] = createStore({ textWidth: 0, containerWidth: 0, }) const textWidth = () => state.textWidth const containerWidth = () => state.containerWidth const measure = () => { if (baseRef) setState("textWidth", baseRef.scrollWidth) if (containerRef) setState("containerWidth", containerRef.offsetWidth) } onMount(measure) createEffect(() => { const el = containerRef if (!el) return const observer = new ResizeObserver(measure) observer.observe(el) onCleanup(() => observer.disconnect()) }) const clipRight = () => { const cw = containerWidth() const tw = textWidth() if (cw <= 0 || tw <= 0) return `${(1 - progress()) * 100}%` const revealed = progress() * tw const remaining = Math.max(0, cw - revealed) return `${remaining}px` } return ( {props.text} ) } export default { title: "UI/Text Strikethrough", id: "components-text-strikethrough", tags: ["autodocs"], parameters: { docs: { description: { component: `### Animated Strikethrough Variants - **A** — scaleX line at 50% (single line only) - **D** — background-image line (single line only) - **E** — grid stacking + clip-path (container %) - **F** — grid stacking + clip-path mapped to text width (the real component)`, }, }, }, } export const Playground = { render: () => { const [active, setActive] = createSignal(false) const toggle = () => setActive((v) => !v) return (

F — grid stacking + clip mapped to text width (THE COMPONENT)

F (inline) — same but just inline variants

E — grid stacking + clip-path (container %)

A — scaleX line at 50%

D — background-image line

) }, }