@stateglyph/cli 0.1.0 → 0.2.0

package/README.md

@@ -21,4 +21,9 @@ The generated components are TypeScript React files. They are self-contained
 and depend only on `react` and `lucide-react`, so you can edit them freely in
 your own project.
 
+Each copied component includes animated outgoing/incoming glyph transitions,
+continuous rotation where defined, and live reduced-motion support. Customize
+`animated`, `duration`, `spinDuration`, and `transition` without installing a
+StateGlyph runtime package.
+
 MIT licensed. The source icons from Lucide use the ISC License.

package/dist/index.js

@@ -1,6 +1,7 @@
 #!/usr/bin/env node
 
 // src/index.ts
+import { readFileSync } from "fs";
 import { Command } from "commander";
 
 // src/add.ts
@@ -8,6 +9,9 @@ import { access, mkdir, writeFile } from "fs/promises";
 import path from "path";
 import { stateIconCatalog } from "@stateglyph/core";
 
+// src/animation-source.ts
+var animationSource = '"use client";\n\nimport {\n  useEffect,\n  useRef,\n  useState,\n  useSyncExternalStore,\n  type SVGProps,\n} from "react";\nimport type { LucideIcon } from "lucide-react";\n\ntype TransitionName = "crossfade" | "scale-fade" | "rotate" | "slide" | "morph";\n\ntype AnimatedIconProps = Omit<\n  SVGProps<SVGSVGElement>,\n  "children" | "dangerouslySetInnerHTML"\n> & {\n  icon: LucideIcon;\n  iconName: string;\n  iconId: string;\n  state: string;\n  transition?: TransitionName;\n  duration?: number;\n  spinDuration?: number;\n  animated?: boolean;\n  continuous?: boolean;\n  decorative?: boolean;\n  label?: string;\n  size?: number | string;\n  strokeWidth?: number;\n};\n\ntype Snapshot = Pick<\n  AnimatedIconProps,\n  "icon" | "iconName" | "iconId" | "state" | "continuous"\n>;\ntype Frame = { current: Snapshot; previous: Snapshot | null; revision: number };\n\nconst defaultDurations = {\n  crossfade: 180,\n  "scale-fade": 200,\n  rotate: 240,\n  slide: 220,\n  morph: 240,\n};\n\nfunction motionPreference() {\n  return (\n    typeof window !== "undefined" &&\n    !!window.matchMedia?.("(prefers-reduced-motion: reduce)").matches\n  );\n}\n\nfunction subscribeToMotion(callback: () => void) {\n  if (typeof window === "undefined" || !window.matchMedia) return () => {};\n  const query = window.matchMedia("(prefers-reduced-motion: reduce)");\n  query.addEventListener("change", callback);\n  return () => query.removeEventListener("change", callback);\n}\n\nfunction milliseconds(value: string, fallback: number) {\n  const parsed = Number.parseFloat(value);\n  if (!Number.isFinite(parsed)) return fallback;\n  return Math.max(\n    0,\n    value.trim().endsWith("ms")\n      ? parsed\n      : value.trim().endsWith("s")\n        ? parsed * 1000\n        : parsed,\n  );\n}\n\nfunction transitionFrames(transition: TransitionName): {\n  incoming: Keyframe[];\n  outgoing: Keyframe[];\n} {\n  const rest = {\n    opacity: 1,\n    transform: "translateY(0) scale(1) rotate(0deg)",\n    filter: "blur(0px)",\n  };\n  const poses = {\n    crossfade: [{ opacity: 0 }, { opacity: 0 }],\n    "scale-fade": [\n      { opacity: 0, transform: "scale(0.65)" },\n      { opacity: 0, transform: "scale(1.2)" },\n    ],\n    rotate: [\n      { opacity: 0, transform: "rotate(-60deg) scale(0.8)" },\n      { opacity: 0, transform: "rotate(60deg) scale(0.8)" },\n    ],\n    slide: [\n      { opacity: 0, transform: "translateY(6px)" },\n      { opacity: 0, transform: "translateY(-6px)" },\n    ],\n    morph: [\n      {\n        opacity: 0,\n        transform: "scale(0.75) rotate(-18deg)",\n        filter: "blur(2px)",\n      },\n      {\n        opacity: 0,\n        transform: "scale(0.75) rotate(18deg)",\n        filter: "blur(2px)",\n      },\n    ],\n  } satisfies Record<TransitionName, [Keyframe, Keyframe]>;\n  const [start, end] = poses[transition];\n  return { incoming: [start, rest], outgoing: [rest, end] };\n}\n\nfunction AnimatedIcon({\n  icon,\n  iconName,\n  iconId,\n  state,\n  continuous = false,\n  transition = "crossfade",\n  duration,\n  spinDuration,\n  animated = true,\n  decorative = true,\n  label,\n  size = 24,\n  strokeWidth = 2,\n  className,\n  style,\n  ...svgProps\n}: AnimatedIconProps) {\n  const reducedMotion = useSyncExternalStore(\n    subscribeToMotion,\n    motionPreference,\n    () => false,\n  );\n  const rootRef = useRef<SVGSVGElement>(null);\n  const incomingRef = useRef<SVGGElement>(null);\n  const outgoingRef = useRef<SVGGElement>(null);\n  const spinRef = useRef<SVGGElement>(null);\n  const [frame, setFrame] = useState<Frame>(() => ({\n    current: { icon, iconName, iconId, state, continuous },\n    previous: null,\n    revision: 0,\n  }));\n\n  // Keep the outgoing glyph until its exit completes. Updating a guarded snapshot\n  // during render avoids an intermediate paint with the new state and old glyph.\n  if (\n    frame.current.state !== state ||\n    frame.current.iconId !== iconId ||\n    frame.current.icon !== icon ||\n    frame.current.continuous !== continuous\n  ) {\n    setFrame({\n      current: { icon, iconName, iconId, state, continuous },\n      previous: frame.current.iconId === iconId ? frame.current : null,\n      revision: frame.revision + 1,\n    });\n  }\n\n  useEffect(() => {\n    let active = true;\n    const animations: Animation[] = [];\n    const root = rootRef.current;\n    const incoming = incomingRef.current;\n    const outgoing = outgoingRef.current;\n    const finish = () => {\n      if (!active) return;\n      setFrame((current) =>\n        current.revision === frame.revision && current.previous\n          ? { ...current, previous: null }\n          : current,\n      );\n    };\n    const computed = root ? getComputedStyle(root) : null;\n    const timing = Number.isFinite(duration)\n      ? Math.max(0, duration!)\n      : milliseconds(\n          (computed?.getPropertyValue("--stateglyph-duration") ||\n            computed?.getPropertyValue("--stateglyph-preset-duration")) ??\n            "",\n          defaultDurations[transition],\n        );\n    const easing =\n      computed?.getPropertyValue("--stateglyph-easing").trim() ||\n      computed?.getPropertyValue("--stateglyph-preset-easing").trim() ||\n      "cubic-bezier(0.22, 1, 0.36, 1)";\n    const canAnimate =\n      animated && !reducedMotion && typeof incoming?.animate === "function";\n\n    if (frame.previous && outgoing && incoming && canAnimate && timing > 0) {\n      const frames = transitionFrames(transition);\n      try {\n        const exit = outgoing.animate(frames.outgoing, {\n          duration: timing,\n          easing,\n          fill: "both",\n        });\n        animations.push(exit);\n        const enter = incoming.animate(frames.incoming, {\n          duration: timing,\n          easing,\n          fill: "both",\n        });\n        animations.push(enter);\n        enter.onfinish = finish;\n      } catch {\n        // Invalid consumer-provided CSS timing must never hide an icon.\n        for (const animation of animations) animation.cancel();\n        queueMicrotask(finish);\n      }\n    } else if (frame.previous) {\n      queueMicrotask(finish);\n    }\n\n    return () => {\n      active = false;\n      for (const animation of animations) {\n        animation.onfinish = null;\n        animation.cancel();\n      }\n    };\n  }, [frame, animated, reducedMotion, duration, transition]);\n\n  // Continuous motion has a separate lifecycle so finishing an entrance does\n  // not reset the spinner\'s rotation phase.\n  useEffect(() => {\n    const spin = spinRef.current;\n    if (\n      !animated ||\n      reducedMotion ||\n      !frame.current.continuous ||\n      !spin ||\n      typeof spin.animate !== "function"\n    )\n      return;\n    const computed = rootRef.current ? getComputedStyle(rootRef.current) : null;\n    const timing = Number.isFinite(spinDuration)\n      ? Math.max(0, spinDuration!)\n      : milliseconds(\n          (computed?.getPropertyValue("--stateglyph-spin-duration") ||\n            computed?.getPropertyValue("--stateglyph-preset-spin-duration")) ??\n            "",\n          900,\n        );\n    if (timing <= 0) return;\n    const animation = spin.animate(\n      [{ transform: "rotate(0deg)" }, { transform: "rotate(360deg)" }],\n      { duration: timing, iterations: Infinity, easing: "linear" },\n    );\n    return () => animation.cancel();\n  }, [\n    frame.revision,\n    frame.current.continuous,\n    animated,\n    reducedMotion,\n    spinDuration,\n  ]);\n\n  const CurrentIcon = frame.current.icon;\n  const PreviousIcon = frame.previous?.icon;\n  const layerStyle = {\n    transformBox: "view-box",\n    transformOrigin: "12px 12px",\n  } as const;\n\n  return (\n    <svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={strokeWidth}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...svgProps}\n      ref={rootRef}\n      className={`lucide lucide-${iconName}${className ? ` ${className}` : ""}`}\n      style={{\n        display: "inline-block",\n        verticalAlign: "middle",\n        flexShrink: 0,\n        overflow: "visible",\n        ...style,\n      }}\n      data-state-icon={iconId}\n      data-state={state}\n      data-transition={transition}\n      data-state-continuous={continuous ? "true" : undefined}\n      aria-hidden={decorative ? true : undefined}\n      aria-label={decorative ? undefined : label}\n      role={decorative ? undefined : "img"}\n      focusable="false"\n    >\n      {PreviousIcon && animated && !reducedMotion && duration !== 0 ? (\n        <g\n          key={`outgoing-${frame.revision}`}\n          ref={outgoingRef}\n          data-state-layer="outgoing"\n          aria-hidden="true"\n          style={layerStyle}\n        >\n          <PreviousIcon\n            size={24}\n            strokeWidth={strokeWidth}\n            stroke="inherit"\n            fill="inherit"\n            aria-hidden="true"\n            focusable="false"\n          />\n        </g>\n      ) : null}\n      <g\n        key={`incoming-${frame.revision}`}\n        ref={incomingRef}\n        data-state-layer="incoming"\n        style={{\n          ...layerStyle,\n          opacity:\n            PreviousIcon && animated && !reducedMotion && duration !== 0\n              ? 0\n              : 1,\n        }}\n      >\n        <g ref={spinRef} data-state-layer="glyph" style={layerStyle}>\n          <CurrentIcon\n            size={24}\n            strokeWidth={strokeWidth}\n            stroke="inherit"\n            fill="inherit"\n            aria-hidden="true"\n            focusable="false"\n          />\n        </g>\n      </g>\n    </svg>\n  );\n}\n';
+
 // src/template.ts
 function toPascalCase(value) {
   return value.split("-").map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join("");
@@ -17,85 +21,42 @@ function renderIconComponent(definition) {
   const stateTypeName = `${toPascalCase(definition.id)}State`;
   const propsTypeName = `${componentName}Props`;
   const states = Object.entries(definition.states);
-  const lucideComponents = [
-    ...new Set(states.map(([, stateDefinition]) => stateDefinition.icon))
-  ].map(toPascalCase).sort();
-  const continuousStates = states.filter(([, stateDefinition]) => stateDefinition.continuous).map(([name]) => name);
-  const animationName = `stateglyph-${definition.id}-spin`;
+  const glyphs = [...new Set(states.map(([, value]) => value.icon))];
+  const imports = glyphs.map(toPascalCase).sort();
+  const runtime = animationSource.replace(
+    'import type { LucideIcon } from "lucide-react";',
+    `import { ${imports.join(", ")}, type LucideIcon } from "lucide-react";`
+  );
   const stateUnion = states.map(([name]) => JSON.stringify(name)).join(" | ");
   const iconRows = states.map(
-    ([name, stateDefinition]) => `  ${JSON.stringify(name)}: ${toPascalCase(stateDefinition.icon)},`
+    ([name, value]) => `  ${JSON.stringify(name)}: ${toPascalCase(value.icon)},`
+  ).join("\n");
+  const nameRows = states.map(
+    ([name, value]) => `  ${JSON.stringify(name)}: ${JSON.stringify(value.icon)},`
   ).join("\n");
   const labelRows = states.map(
-    ([name, stateDefinition]) => `  ${JSON.stringify(name)}: ${JSON.stringify(stateDefinition.label)},`
+    ([name, value]) => `  ${JSON.stringify(name)}: ${JSON.stringify(value.label)},`
   ).join("\n");
-  return `import type { SVGProps } from "react";
-import {
-${lucideComponents.map((name) => `  ${name},`).join("\n")}
-  type LucideIcon,
-} from "lucide-react";
-
+  const continuous = states.filter(([, value]) => value.continuous).map(([name]) => name);
+  return `${runtime}
 export type ${stateTypeName} = ${stateUnion};
-
-export type ${propsTypeName} = Omit<SVGProps<SVGSVGElement>, "children"> & {
-  state: ${stateTypeName};
-  size?: number | string;
-  strokeWidth?: number;
-  duration?: number;
-  decorative?: boolean;
-  label?: string;
-};
-
+export type ${propsTypeName} = Omit<AnimatedIconProps, "icon" | "iconName" | "iconId" | "state" | "continuous"> & { state: ${stateTypeName}; };
 const iconByState = {
 ${iconRows}
 } satisfies Record<${stateTypeName}, LucideIcon>;
-
+const nameByState = {
+${nameRows}
+} satisfies Record<${stateTypeName}, string>;
 const labelByState = {
 ${labelRows}
 } satisfies Record<${stateTypeName}, string>;
+const continuousStates = new Set<${stateTypeName}>(${JSON.stringify(continuous)});
 
-const continuousStates = new Set<${stateTypeName}>(${JSON.stringify(continuousStates)});
-
-export function ${componentName}({
-  state,
-  size = 24,
-  strokeWidth = 2,
-  duration = 900,
-  decorative = true,
-  label,
-  style,
-  ...svgProps
-}: ${propsTypeName}) {
+export function ${componentName}({ state, label, transition = ${JSON.stringify(definition.transition ?? "crossfade")}, ...props }: ${propsTypeName}) {
   const Icon = iconByState[state];
-  const isContinuous = continuousStates.has(state);
-  const accessibleLabel = label ?? labelByState[state];
-
-  return (
-    <>
-      {isContinuous ? (
-        <style>{\`@keyframes ${animationName} { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { [data-state-icon="${definition.id}"] { animation: none !important; } }\`}</style>
-      ) : null}
-      <Icon
-        {...svgProps}
-        size={size}
-        strokeWidth={strokeWidth}
-        data-state-icon="${definition.id}"
-        data-state={state}
-        aria-hidden={decorative ? true : undefined}
-        aria-label={decorative ? undefined : accessibleLabel}
-        role={decorative ? undefined : "img"}
-        focusable="false"
-        style={{
-          ...style,
-          animation:
-            style?.animation ??
-            (isContinuous
-              ? \`${animationName} \${duration}ms linear infinite\`
-              : undefined),
-        }}
-      />
-    </>
-  );
+  if (!Icon) return null;
+  return <AnimatedIcon {...props} icon={Icon} iconName={nameByState[state]} iconId=${JSON.stringify(definition.id)}
+    state={state} label={label ?? labelByState[state]} transition={transition} continuous={continuousStates.has(state)} />;
 }
 `;
 }
@@ -153,7 +114,14 @@ var categoryLabels = {
   device: "Device and connection",
   form: "Form states",
   commerce: "Commerce",
-  notification: "Notifications"
+  notification: "Notifications",
+  connectivity: "Connectivity",
+  security: "Security and privacy",
+  appearance: "Appearance",
+  editing: "Editing tools",
+  files: "Files and folders",
+  weather: "Weather and time",
+  productivity: "Productivity"
 };
 function formatIconList() {
   const sections = Object.entries(categoryLabels).flatMap(
@@ -180,8 +148,11 @@ function formatIconList() {
 }
 
 // src/index.ts
+var { version } = JSON.parse(
+  readFileSync(new URL("../package.json", import.meta.url), "utf8")
+);
 var program = new Command();
-program.name("stateglyph").description("Browse and add StateGlyph components to a React project.").version("0.1.0").showHelpAfterError();
+program.name("stateglyph").description("Browse and add StateGlyph components to a React project.").version(version).showHelpAfterError();
 program.command("list").description("List every available icon, grouped by category.").action(() => {
   process.stdout.write(`${formatIconList()}
 `);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stateglyph/cli",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Copy StateGlyph components into React projects.",
   "license": "MIT",
   "author": "Kamalveer Singh",
@@ -41,7 +41,7 @@
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
-    "@stateglyph/core": "0.1.0",
+    "@stateglyph/core": "0.2.0",
     "commander": "^15.0.0"
   },
   "engines": {