@devalok/shilp-sutra 0.34.0 → 0.36.0

package/dist/ui/button-processing.js

@@ -1,77 +1,94 @@
 "use client";
+import { a as e, c as t } from "../_chunks/framer.js";
+import { durations as n } from "./lib/motion.js";
+import * as r from "react";
 import { jsx as i } from "react/jsx-runtime";
-import * as e from "react";
-import { A as k, m as w } from "../_chunks/framer.js";
-const v = {
-  accent: "var(--color-accent-11)",
-  error: "var(--color-error-11)",
-  success: "var(--color-success-11)",
-  warning: "var(--color-warning-11)",
-  neutral: "var(--color-surface-fg)"
-}, C = {
-  ambient: 3,
-  working: 2,
-  urgent: 1
+//#region src/ui/button-processing.tsx
+var a = {
+	accent: "var(--color-accent-11)",
+	error: "var(--color-error-11)",
+	success: "var(--color-success-11)",
+	warning: "var(--color-warning-11)",
+	neutral: "var(--color-surface-fg)"
+}, o = {
+	ambient: 3,
+	working: 2,
+	urgent: 1
 };
-function N({ active: t, speed: d, color: r }) {
-  const n = v[r] ?? v.accent, s = D(), x = C[d], l = e.useRef(null), [u, R] = e.useState(8), [f, E] = e.useState({ array: "8 6", cycle: 14 });
-  return e.useEffect(() => {
-    const o = l.current?.closest("span")?.previousElementSibling;
-    if (!o) return;
-    const b = getComputedStyle(o), M = parseFloat(b.borderRadius) || 8, p = o.offsetWidth - 2, h = o.offsetHeight - 2, a = Math.min(M, h / 2, p / 2);
-    R(a);
-    const m = 2 * (p - 2 * a) + 2 * (h - 2 * a) + 2 * Math.PI * a, c = 8, P = c + 6, y = Math.round(m / P), S = (m - y * c) / y, g = Math.max(2, S);
-    E({ array: `${c} ${g.toFixed(1)}`, cycle: c + g });
-  }, [t]), /* @__PURE__ */ i(k, { children: t && /* @__PURE__ */ i(
-    w.span,
-    {
-      initial: { opacity: 0 },
-      animate: { opacity: 1 },
-      exit: { opacity: 0 },
-      transition: { duration: 0.2 },
-      "aria-hidden": "true",
-      className: "absolute inset-0 pointer-events-none",
-      children: /* @__PURE__ */ i(
-        "svg",
-        {
-          className: "absolute inset-0 w-full h-full",
-          style: { overflow: "visible" },
-          children: /* @__PURE__ */ i(
-            w.rect,
-            {
-              ref: l,
-              x: "1",
-              y: "1",
-              width: "calc(100% - 2px)",
-              height: "calc(100% - 2px)",
-              rx: u,
-              ry: u,
-              fill: "none",
-              stroke: n,
-              strokeWidth: "2",
-              strokeDasharray: f.array,
-              style: { transition: "stroke 0.3s ease" },
-              animate: s ? {} : { strokeDashoffset: [0, -f.cycle] },
-              transition: s ? {} : {
-                duration: x,
-                ease: "linear",
-                repeat: 1 / 0
-              }
-            }
-          )
-        }
-      )
-    },
-    "processing-ants"
-  ) });
+function s({ active: s, speed: l, color: u }) {
+	let d = a[u] ?? a.accent, f = c(), p = o[l], m = r.useRef(null), [h, g] = r.useState(8), [_, v] = r.useState({
+		array: "8 6",
+		cycle: 14
+	}), [y, b] = r.useState(null);
+	r.useEffect(() => {
+		let e = m.current?.closest("span")?.previousElementSibling;
+		if (!e) return;
+		let t = () => {
+			let t = getComputedStyle(e), n = parseFloat(t.borderRadius) || 8, r = e.offsetWidth, i = e.offsetHeight;
+			if (r === 0 || i === 0) return;
+			let a = r - 2, o = i - 2, s = Math.min(n, o / 2, a / 2);
+			g(s), b({
+				w: r,
+				h: i
+			});
+			let c = 2 * (a - 2 * s) + 2 * (o - 2 * s) + 2 * Math.PI * s, l = Math.round(c / 14), u = (c - l * 8) / l, d = Math.max(2, u);
+			v({
+				array: `8 ${d.toFixed(1)}`,
+				cycle: 8 + d
+			});
+		};
+		t();
+		let n = typeof ResizeObserver < "u" ? new ResizeObserver(t) : null;
+		return n?.observe(e), () => n?.disconnect();
+	}, [s]);
+	let x = y?.w ?? 0, S = y?.h ?? 0;
+	return /* @__PURE__ */ i(t, { children: s && /* @__PURE__ */ i(e.span, {
+		initial: { opacity: 0 },
+		animate: { opacity: 1 },
+		exit: { opacity: 0 },
+		transition: { duration: n.moderate01b },
+		"aria-hidden": "true",
+		className: "absolute top-0 left-0 pointer-events-none",
+		style: {
+			width: x,
+			height: S
+		},
+		children: /* @__PURE__ */ i("svg", {
+			width: x,
+			height: S,
+			style: {
+				overflow: "visible",
+				display: "block"
+			},
+			children: /* @__PURE__ */ i(e.rect, {
+				ref: m,
+				x: 1,
+				y: 1,
+				width: Math.max(0, x - 2),
+				height: Math.max(0, S - 2),
+				rx: h,
+				ry: h,
+				fill: "none",
+				stroke: d,
+				strokeWidth: 2,
+				strokeDasharray: _.array,
+				style: { transition: "stroke 0.3s ease" },
+				animate: f ? {} : { strokeDashoffset: [0, -_.cycle] },
+				transition: f ? {} : {
+					duration: p,
+					ease: "linear",
+					repeat: Infinity
+				}
+			})
+		})
+	}, "processing-ants") });
 }
-function D() {
-  const [t, d] = e.useState(() => typeof window > "u" ? !1 : window.matchMedia("(prefers-reduced-motion: reduce)").matches);
-  return e.useEffect(() => {
-    const r = window.matchMedia("(prefers-reduced-motion: reduce)"), n = (s) => d(s.matches);
-    return r.addEventListener("change", n), () => r.removeEventListener("change", n);
-  }, []), t;
+function c() {
+	let [e, t] = r.useState(() => typeof window > "u" ? !1 : window.matchMedia("(prefers-reduced-motion: reduce)").matches);
+	return r.useEffect(() => {
+		let e = window.matchMedia("(prefers-reduced-motion: reduce)"), n = (e) => t(e.matches);
+		return e.addEventListener("change", n), () => e.removeEventListener("change", n);
+	}, []), e;
 }
-export {
-  N as ProcessingOverlay
-};
+//#endregion
+export { s as ProcessingOverlay };

package/dist/ui/button-processing.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-processing.js","names":[],"sources":["../../src/ui/button-processing.tsx"],"sourcesContent":["'use client'\n\nimport { motion, AnimatePresence } from 'framer-motion'\nimport * as React from 'react'\nimport { durations } from './lib/motion'\n\n// ── Types ──────────────────────────────────────────────────────────\n\nexport type ProcessingSpeed = 'ambient' | 'working' | 'urgent'\n\ninterface ProcessingOverlayProps {\n  active: boolean\n  speed: ProcessingSpeed\n  /** Resolved color name — maps to CSS token `--color-{name}-9` */\n  color: string\n}\n\n// ── Color mapping ──────────────────────────────────────────────────\n\n// Use text-level color tokens (step 11) so ants match the button's text color.\n// This ensures visibility on all variants — especially neutral where step-9 is too close to the soft bg.\nconst COLOR_MAP: Record<string, string> = {\n  accent:  'var(--color-accent-11)',\n  error:   'var(--color-error-11)',\n  success: 'var(--color-success-11)',\n  warning: 'var(--color-warning-11)',\n  neutral: 'var(--color-surface-fg)',\n}\n\n// ── Speed → duration (seconds) ─────────────────────────────────────\n\nconst SPEED_SECONDS: Record<ProcessingSpeed, number> = {\n  ambient: 3,\n  working: 2,\n  urgent:  1,\n}\n\n// ── Component ──────────────────────────────────────────────────────\n\n/**\n * Internal overlay component for button processing state.\n * Renders marching ants (SVG dashed rect with animated stroke-dashoffset).\n * Not exported from the barrel — used only by Button.\n */\nexport function ProcessingOverlay({ active, speed, color }: ProcessingOverlayProps) {\n  const solidColor = COLOR_MAP[color] ?? COLOR_MAP.accent\n  const prefersReduced = useReducedMotion()\n  const duration = SPEED_SECONDS[speed]\n  const svgRef = React.useRef<SVGRectElement>(null)\n  const [borderRadius, setBorderRadius] = React.useState(8)\n  const [dashInfo, setDashInfo] = React.useState({ array: '8 6', cycle: 14 })\n  // Explicit pixel dimensions of the button — drives BOTH the SVG box and the\n  // rect geometry. Relying on CSS `w-full`/`calc(100% - 2px)` made the ants'\n  // outline depend on the wrapper's rendered size, which can drift from the\n  // button's own size during width transitions — leaving a visible gap\n  // between the button edge and the ants.\n  const [size, setSize] = React.useState<{ w: number; h: number } | null>(null)\n\n  // Read the button's dimensions + border-radius, compute dash pattern\n  React.useEffect(() => {\n    const wrapper = svgRef.current?.closest('span')\n    const btnEl = wrapper?.previousElementSibling as HTMLElement | null\n    if (!btnEl) return\n\n    const measure = () => {\n      const style = getComputedStyle(btnEl)\n      const rawR = parseFloat(style.borderRadius) || 8\n      const btnW = btnEl.offsetWidth\n      const btnH = btnEl.offsetHeight\n      if (btnW === 0 || btnH === 0) return\n      // Inset 1px so the 2px stroke (centered on the edge) lands exactly on\n      // the button's visual border instead of outside it.\n      const w = btnW - 2\n      const h = btnH - 2\n      // Cap radius at half the shorter dimension (pill buttons report 9999px)\n      const r = Math.min(rawR, h / 2, w / 2)\n      setBorderRadius(r)\n      setSize({ w: btnW, h: btnH })\n\n      // Perimeter of a rounded rect:\n      // 4 straight edges + 4 quarter-circle arcs (= one full circle of radius r)\n      const perimeter = 2 * (w - 2 * r) + 2 * (h - 2 * r) + 2 * Math.PI * r\n\n      // Target: 8px dash, 6px gap — adjust gap so dashes fit evenly (no seam)\n      const dashPx = 8\n      const gapPx = 6\n      const approxCycle = dashPx + gapPx\n      const count = Math.round(perimeter / approxCycle)\n      const adjustedGap = (perimeter - count * dashPx) / count\n      const finalGap = Math.max(2, adjustedGap)\n      setDashInfo({ array: `${dashPx} ${finalGap.toFixed(1)}`, cycle: dashPx + finalGap })\n    }\n\n    measure()\n    // Keep the ants glued to the button when it resizes (text change,\n    // async-feedback icon swap, layout animation settling).\n    const ro = typeof ResizeObserver !== 'undefined' ? new ResizeObserver(measure) : null\n    ro?.observe(btnEl)\n    return () => ro?.disconnect()\n  }, [active])\n\n  // Render the overlay even before the first measurement settles — the\n  // aria-hidden anchor must exist for discoverability, and the SVG harmlessly\n  // renders at 0x0 until measurement lands a real size (one animation frame).\n  const w = size?.w ?? 0\n  const h = size?.h ?? 0\n\n  return (\n    <AnimatePresence>\n      {active && (\n        <motion.span\n          key=\"processing-ants\"\n          initial={{ opacity: 0 }}\n          animate={{ opacity: 1 }}\n          exit={{ opacity: 0 }}\n          transition={{ duration: durations.moderate01b }}\n          aria-hidden=\"true\"\n          className=\"absolute top-0 left-0 pointer-events-none\"\n          style={{ width: w, height: h }}\n        >\n          <svg\n            width={w}\n            height={h}\n            style={{ overflow: 'visible', display: 'block' }}\n          >\n            <motion.rect\n              ref={svgRef}\n              x={1}\n              y={1}\n              width={Math.max(0, w - 2)}\n              height={Math.max(0, h - 2)}\n              rx={borderRadius}\n              ry={borderRadius}\n              fill=\"none\"\n              stroke={solidColor}\n              strokeWidth={2}\n              strokeDasharray={dashInfo.array}\n              style={{ transition: 'stroke 0.3s ease' }}\n              animate={prefersReduced ? {} : { strokeDashoffset: [0, -dashInfo.cycle] }}\n              transition={prefersReduced ? {} : {\n                duration,\n                ease: 'linear',\n                repeat: Infinity,\n              }}\n            />\n          </svg>\n        </motion.span>\n      )}\n    </AnimatePresence>\n  )\n}\n\n// ── Reduced motion hook ────────────────────────────────────────────\n\nfunction useReducedMotion(): boolean {\n  const [reduced, setReduced] = React.useState(() => {\n    if (typeof window === 'undefined') return false\n    return window.matchMedia('(prefers-reduced-motion: reduce)').matches\n  })\n\n  React.useEffect(() => {\n    const mql = window.matchMedia('(prefers-reduced-motion: reduce)')\n    const handler = (e: MediaQueryListEvent) => setReduced(e.matches)\n    mql.addEventListener('change', handler)\n    return () => mql.removeEventListener('change', handler)\n  }, [])\n\n  return reduced\n}\n"],"mappings":"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"}