"use client";

import * as React from "react";
import { ScribbleStrikeChecklist, type ScribbleStrikeChecklistHandle, type ScribbleTask } from "./index";

export interface DemoProps {
  strokeMs?: number;
  accent?: string;
  wobble?: number;
  dimCompleted?: boolean;
}

const TASKS: ScribbleTask[] = [
  { id: "notes", label: "Draft the release notes" },
  { id: "spacing", label: "Sync with design on card spacing" },
  { id: "legal", label: "Ping legal about the updated terms" },
  { id: "flaky", label: "Merge the flaky checkout test fix" },
];

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({ strokeMs = 1000, accent = "#9BE15D", wobble = 1, dimCompleted = true }: DemoProps) {
  const listRef = React.useRef<ScribbleStrikeChecklistHandle>(null);

  React.useEffect(() => {
    const timer = window.setTimeout(() => listRef.current?.toggle("notes"), 650);
    return () => window.clearTimeout(timer);
  }, []);

  return (
    <div className="flex w-full items-center justify-center p-8">
      <ScribbleStrikeChecklist
        ref={listRef}
        tasks={TASKS}
        strokeMs={strokeMs}
        accent={accent}
        wobble={wobble}
        dimCompleted={dimCompleted}
      />
    </div>
  );
}

1e:T1da0, 1f:T171a6,

<script setup lang="ts">
import { reactive, ref, onMounted, onBeforeUnmount } from "vue";

interface Task {
  id: string;
  label: string;
  checked?: boolean;
}

const props = withDefaults(
  defineProps<{
    tasks?: Task[];
    strokeMs?: number;
    accent?: string;
    wobble?: number;
    dimCompleted?: boolean;
  }>(),
  {
    tasks: () => [
      { id: "notes", label: "Draft the release notes" },
      { id: "spacing", label: "Sync with design on card spacing" },
      { id: "legal", label: "Ping legal about the updated terms" },
    ],
    strokeMs: 1000,
    accent: "#9BE15D",
    wobble: 1,
    dimCompleted: true,
  },
);

const emit = defineEmits<{ (e: "toggle", id: string, checked: boolean): void }>();

/** Checked is uncontrolled after mount; `tasks[].checked` only seeds the initial values. */
const checkedIds = reactive(new Set<string>(props.tasks.filter((task) => task.checked).map((task) => task.id)));
function isChecked(id: string): boolean {
  return checkedIds.has(id);
}

const TICK_PATH = "M4.5 10.2 L8.3 14 L15.5 6.3";
const TICK_LENGTH = 16;

/**
 * A smooth, hand-drawn-looking path through a row of points (viewBox 0 0 100 40, baseline y 20),
 * built the same way as its length estimate so both stay in sync without touching the DOM.
 */
function buildScribble(seed: number, amplitude: number): { d: string; length: number } {
  const xs = [0, 17, 34, 51, 68, 84, 100];
  const phase = seed * 1.83;
  const points = xs.map((x, i) => {
    const edgeSoften = i === 0 || i === xs.length - 1 ? 0.35 : 1;
    const y = 20 + Math.sin(i * 1.87 + phase) * amplitude * edgeSoften;
    return { x, y };
  });
  let d = `M ${points[0].x} ${points[0].y}`;
  let length = 0;
  for (let i = 0; i < points.length - 1; i++) {
    const p0 = points[i - 1] ?? points[i];
    const p1 = points[i];
    const p2 = points[i + 1];
    const p3 = points[i + 2] ?? p2;
    const c1x = p1.x + (p2.x - p0.x) / 6;
    const c1y = p1.y + (p2.y - p0.y) / 6;
    const c2x = p2.x - (p3.x - p1.x) / 6;
    const c2y = p2.y - (p3.y - p1.y) / 6;
    d += ` C ${c1x} ${c1y} ${c2x} ${c2y} ${p2.x} ${p2.y}`;
    let prev = p1;
    const steps = 16;
    for (let s = 1; s <= steps; s++) {
      const t = s / steps;
      const mt = 1 - t;
      const x = mt * mt * mt * p1.x + 3 * mt * mt * t * c1x + 3 * mt * t * t * c2x + t * t * t * p2.x;
      const y = mt * mt * mt * p1.y + 3 * mt * mt * t * c1y + 3 * mt * t * t * c2y + t * t * t * p2.y;
      length += Math.hypot(x - prev.x, y - prev.y);
      prev = { x, y };
    }
  }
  return { d, length };
}

const reducedMotion = ref(false);
let mql: MediaQueryList | null = null;
const onMqlChange = () => {
  reducedMotion.value = mql ? mql.matches : false;
};

function scribble(index: number) {
  return buildScribble(index + 1, props.wobble * 6);
}

function dashStyle(task: Task, index: number) {
  const len = scribble(index).length;
  const duration = reducedMotion.value ? 10 : props.strokeMs;
  return {
    strokeDasharray: `${len} ${len}`,
    strokeDashoffset: isChecked(task.id) ? "0" : `${len}`,
    transition: `stroke-dashoffset ${duration}ms cubic-bezier(0.5,0.05,0.35,1)`,
  };
}

function tickDuration() {
  return reducedMotion.value ? 10 : Math.min(props.strokeMs, 260);
}

function boxDuration() {
  return reducedMotion.value ? 10 : Math.min(props.strokeMs, 220);
}

function toggle(task: Task) {
  if (checkedIds.has(task.id)) checkedIds.delete(task.id);
  else checkedIds.add(task.id);
  emit("toggle", task.id, checkedIds.has(task.id));
}

onMounted(() => {
  mql = window.matchMedia("(prefers-reduced-motion: reduce)");
  reducedMotion.value = mql.matches;
  mql.addEventListener("change", onMqlChange);
});

onBeforeUnmount(() => {
  mql?.removeEventListener("change", onMqlChange);
});
</script>

<template>
  <div class="ssc-card" :style="{ '--ssc-accent': accent }">
    <label v-for="(task, index) in tasks" :key="task.id" class="ssc-row">
      <span class="ssc-box-wrap">
        <input
          type="checkbox"
          class="ssc-input"
          :checked="isChecked(task.id)"
          @change="toggle(task)"
        />
        <span
          class="ssc-box"
          :style="{
            borderColor: isChecked(task.id) ? accent : undefined,
            backgroundColor: isChecked(task.id) ? accent : 'transparent',
            transitionDuration: boxDuration() + 'ms',
          }"
        ></span>
        <svg class="ssc-tick-svg" viewBox="0 0 20 20" aria-hidden="true">
          <path
            :d="TICK_PATH"
            fill="none"
            stroke="#0B0D10"
            stroke-width="2.4"
            stroke-linecap="round"
            stroke-linejoin="round"
            :style="{
              strokeDasharray: TICK_LENGTH,
              strokeDashoffset: isChecked(task.id) ? 0 : TICK_LENGTH,
              transition: `stroke-dashoffset ${tickDuration()}ms ease-out`,
            }"
          />
        </svg>
      </span>
      <span class="ssc-label-wrap">
        <span
          class="ssc-label"
          :style="{
            opacity: dimCompleted && isChecked(task.id) ? 0.45 : 1,
            transitionDuration: (reducedMotion ? 10 : strokeMs) + 'ms',
          }"
          >{{ task.label }}</span
        >
        <svg
          class="ssc-strike-svg"
          viewBox="0 0 100 40"
          preserveAspectRatio="none"
          aria-hidden="true"
        >
          <path
            :d="scribble(index).d"
            fill="none"
            :stroke="accent"
            stroke-width="2"
            stroke-linecap="round"
            vector-effect="non-scaling-stroke"
            :style="{ opacity: 0.92, ...dashStyle(task, index) }"
          />
        </svg>
      </span>
    </label>
  </div>
</template>

<style scoped>
.ssc-card {
  width: 100%;
  max-width: 400px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
  background: color-mix(in srgb, currentColor 5%, transparent);
  color: inherit;
  overflow: hidden;
}
.ssc-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 14px 16px;
  border-bottom: 1px solid color-mix(in srgb, currentColor 10%, transparent);
  cursor: pointer;
  user-select: none;
}
.ssc-row:last-child {
  border-bottom: none;
}
.ssc-box-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.ssc-input {
  position: absolute;
  inset: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  appearance: none;
  z-index: 2;
}
.ssc-box {
  position: absolute;
  inset: 0;
  border-radius: 4px;
  border: 1.5px solid color-mix(in srgb, currentColor 38%, transparent);
  background: transparent;
  transition-property: background-color, border-color;
  transition-timing-function: ease;
  pointer-events: none;
}
.ssc-input:focus-visible + .ssc-box {
  box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 65%, transparent);
}
.ssc-tick-svg {
  position: relative;
  width: 11px;
  height: 11px;
  pointer-events: none;
}
.ssc-label-wrap {
  position: relative;
  display: inline-block;
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}
.ssc-label {
  position: relative;
  z-index: 0;
  font-size: 15px;
  line-height: 1.5;
  color: inherit;
  transition-property: opacity;
  transition-timing-function: ease;
}
.ssc-strike-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}
</style>

Nearby