@toolr/ui-design 0.1.0

package/dist/diagrams.js

@@ -0,0 +1,702 @@
+// components/diagrams/diagram-utils.tsx
+import { motion } from "motion/react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var VB_W = 420;
+var VB_H = { compact: 200, standard: 240, tall: 280, extended: 340, large: 420, xlarge: 520, xxlarge: 580 };
+var viewBox = {
+  compact: `0 0 ${VB_W} ${VB_H.compact}`,
+  standard: `0 0 ${VB_W} ${VB_H.standard}`,
+  tall: `0 0 ${VB_W} ${VB_H.tall}`,
+  extended: `0 0 ${VB_W} ${VB_H.extended}`,
+  large: `0 0 ${VB_W} ${VB_H.large}`,
+  xlarge: `0 0 ${VB_W} ${VB_H.xlarge}`,
+  xxlarge: `0 0 ${VB_W} ${VB_H.xxlarge}`
+};
+var font = {
+  icon: 10,
+  // 30px at 3× scale – decorative icon-text inside circles
+  primary: 5.33,
+  // 16px at 3× scale
+  secondary: 4.67,
+  // 14px at 3× scale
+  small: 4,
+  // 12px at 3× scale
+  micro: 3
+  // 9px at 3× scale – constrained layouts (multi-line in tiny boxes)
+};
+var box = {
+  nodeMain: { w: 120, h: 55 },
+  nodeCard: { w: 95, h: 50 },
+  nodeSmall: { w: 80, h: 32 },
+  infoBox: { w: 360, h: 28 },
+  codeBlock: { w: 360, h: 28 }
+};
+var spacing = {
+  margin: 20,
+  gapSm: 10,
+  gapMd: 20,
+  gapLg: 35,
+  centerX: 210,
+  titleY: 18
+};
+var radius = { lg: 8, md: 6, sm: 4 };
+var stroke = {
+  bold: 2,
+  normal: 1.5,
+  thin: 1,
+  hairline: 0.5
+};
+var color = {
+  textBright: "#e5e7eb",
+  textMedium: "#9ca3af",
+  textDim: "#6b7280",
+  bgDark: "#1f2937",
+  bgDarker: "#0f172a",
+  border: "#374151"
+};
+var tint = {
+  red: "#7f1d1d",
+  emerald: "#064e3b",
+  blue: "#1e3a5f"
+};
+var accent = {
+  cyan: "#22d3ee",
+  teal: "#2dd4bf",
+  blue: "#60a5fa",
+  purple: "#a78bfa",
+  violet: "#c084fc",
+  green: "#34d399",
+  lime: "#4ade80",
+  yellow: "#fbbf24",
+  orange: "#fb923c",
+  red: "#ef4444",
+  redLight: "#f87171",
+  pink: "#f472b6",
+  pinkLight: "#fda4af",
+  indigo: "#a5b4fc",
+  emerald: "#10b981",
+  amber: "#f59e0b",
+  fuchsia: "#d946ef",
+  rose: "#fb7185",
+  sky: "#38bdf8"
+};
+var D = {
+  viewBox,
+  font,
+  box,
+  spacing,
+  radius,
+  stroke,
+  color,
+  tint,
+  accent
+};
+function DiagramWrapper({ children }) {
+  return /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      className: "relative flex flex-col h-full",
+      initial: { opacity: 0 },
+      animate: { opacity: 1 },
+      transition: { duration: 0.3, ease: "easeOut" },
+      children: /* @__PURE__ */ jsx("div", { className: "flex-1 max-w-[1260px] mx-auto w-full", children })
+    }
+  );
+}
+function stagger(staggerDelay = 0.05, delayStart = 0) {
+  return {
+    hidden: {},
+    visible: {
+      transition: {
+        delayChildren: delayStart,
+        staggerChildren: staggerDelay
+      }
+    }
+  };
+}
+var item = {
+  hidden: { opacity: 0, y: 8 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    transition: { duration: 0.35, ease: "easeOut" }
+  }
+};
+var slideInItem = {
+  hidden: { opacity: 0, x: -10 },
+  visible: {
+    opacity: 1,
+    x: 0,
+    transition: { duration: 0.35, ease: "easeOut" }
+  }
+};
+var scaleItem = {
+  hidden: { opacity: 0, scale: 0.85 },
+  visible: {
+    opacity: 1,
+    scale: 1,
+    transition: { duration: 0.3, ease: "easeOut" }
+  }
+};
+function AnimatedDashPath({
+  d,
+  stroke: stroke2,
+  strokeWidth = 1.5,
+  dashArray = "4 3",
+  opacity = 0.6,
+  duration = 1.2,
+  delay = 0
+}) {
+  return /* @__PURE__ */ jsx(
+    motion.path,
+    {
+      d,
+      stroke: stroke2,
+      strokeWidth,
+      strokeDasharray: dashArray,
+      opacity,
+      fill: "none",
+      initial: { strokeDashoffset: 0 },
+      animate: { strokeDashoffset: -14 },
+      transition: {
+        duration,
+        delay,
+        ease: "linear",
+        repeat: Infinity
+      }
+    }
+  );
+}
+function DiagramTitle({ children, y = spacing.titleY }) {
+  return /* @__PURE__ */ jsx(
+    "text",
+    {
+      x: spacing.centerX,
+      y,
+      fill: color.textDim,
+      fontSize: font.primary,
+      textAnchor: "middle",
+      fontWeight: "600",
+      letterSpacing: "0.5",
+      children
+    }
+  );
+}
+function DiagramNode({
+  x,
+  y,
+  width,
+  height,
+  heading,
+  body,
+  body2,
+  accentColor,
+  rx = radius.md,
+  fill: bgFill = color.bgDark,
+  strokeWidth: sw = stroke.normal,
+  headingWeight = "600",
+  headingColor,
+  bodyColor = color.textDim,
+  headingY: explicitHeadingY,
+  bodyY: explicitBodyY,
+  body2Y: explicitBody2Y
+}) {
+  const cx = x + width / 2;
+  const hasBody2 = body2 != null;
+  const hasBody = body != null;
+  const headingY = explicitHeadingY ?? (hasBody ? y + height * 0.38 : y + height / 2 + font.primary / 3);
+  const bodyY = explicitBodyY ?? (hasBody2 ? y + height * 0.6 : y + height * 0.7);
+  const body2Y = explicitBody2Y ?? y + height * 0.82;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "rect",
+      {
+        x,
+        y,
+        width,
+        height,
+        rx,
+        fill: bgFill,
+        stroke: accentColor,
+        strokeWidth: sw
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "text",
+      {
+        x: cx,
+        y: headingY,
+        fill: headingColor ?? accentColor,
+        fontSize: font.primary,
+        textAnchor: "middle",
+        fontWeight: headingWeight,
+        children: heading
+      }
+    ),
+    hasBody && /* @__PURE__ */ jsx("text", { x: cx, y: bodyY, fill: bodyColor, fontSize: font.secondary, textAnchor: "middle", children: body }),
+    hasBody2 && /* @__PURE__ */ jsx("text", { x: cx, y: body2Y, fill: bodyColor, fontSize: font.small, textAnchor: "middle", children: body2 })
+  ] });
+}
+function DiagramInfoBox({
+  y,
+  height = box.infoBox.h,
+  children,
+  borderColor = color.border,
+  fill: bgFill = color.bgDark,
+  rx = radius.md
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "rect",
+      {
+        x: "30",
+        y,
+        width: box.infoBox.w,
+        height,
+        rx,
+        fill: bgFill,
+        stroke: borderColor,
+        strokeWidth: stroke.thin
+      }
+    ),
+    children
+  ] });
+}
+function DiagramCodeBlock({
+  x = 30,
+  y,
+  width = box.codeBlock.w,
+  height = box.codeBlock.h,
+  children,
+  borderColor = color.border,
+  rx = radius.sm
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "rect",
+      {
+        x,
+        y,
+        width,
+        height,
+        rx,
+        fill: color.bgDarker,
+        stroke: borderColor,
+        strokeWidth: stroke.thin
+      }
+    ),
+    children
+  ] });
+}
+function DiagramBadge({
+  x,
+  y,
+  width,
+  height = 14,
+  label,
+  accentColor,
+  fillOpacity = 0.1,
+  rx = radius.sm
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "rect",
+      {
+        x,
+        y,
+        width,
+        height,
+        rx,
+        fill: accentColor,
+        fillOpacity,
+        stroke: accentColor,
+        strokeWidth: stroke.hairline
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "text",
+      {
+        x: x + width / 2,
+        y: y + height / 2 + font.small / 3,
+        fill: accentColor,
+        fontSize: font.small,
+        textAnchor: "middle",
+        children: label
+      }
+    )
+  ] });
+}
+function StepMarker({
+  cx,
+  cy,
+  n,
+  accentColor,
+  connectorToY,
+  r = 10
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "circle",
+      {
+        cx,
+        cy,
+        r,
+        fill: accentColor,
+        fillOpacity: 0.15,
+        stroke: accentColor,
+        strokeWidth: stroke.thin
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "text",
+      {
+        x: cx,
+        y: cy + font.primary / 3,
+        fill: accentColor,
+        fontSize: font.primary,
+        textAnchor: "middle",
+        fontWeight: "600",
+        children: n
+      }
+    ),
+    connectorToY != null && /* @__PURE__ */ jsx(
+      "line",
+      {
+        x1: cx,
+        y1: cy + r + 2,
+        x2: cx,
+        y2: connectorToY,
+        stroke: color.border,
+        strokeWidth: stroke.thin,
+        strokeDasharray: "3 3"
+      }
+    )
+  ] });
+}
+function ArrowMarker({
+  id,
+  color: fill,
+  opacity = 0.7
+}) {
+  return /* @__PURE__ */ jsx(
+    "marker",
+    {
+      id,
+      markerWidth: "5",
+      markerHeight: "4",
+      refX: "4",
+      refY: "2",
+      orient: "auto",
+      children: /* @__PURE__ */ jsx("path", { d: "M 0 0 L 5 2 L 0 4 Z", fill, fillOpacity: opacity })
+    }
+  );
+}
+function ArrowPath({
+  d,
+  color: strokeColor,
+  dashed = false,
+  strokeWidth: sw = stroke.normal,
+  markerEnd,
+  opacity: op = 1
+}) {
+  return /* @__PURE__ */ jsx(
+    "path",
+    {
+      d,
+      stroke: strokeColor,
+      strokeWidth: sw,
+      fill: "none",
+      opacity: op,
+      ...dashed ? { strokeDasharray: "4 3" } : {},
+      ...markerEnd ? { markerEnd: `url(#${markerEnd})` } : {}
+    }
+  );
+}
+function LayerBar({
+  x,
+  y,
+  width,
+  label,
+  detail,
+  accentColor,
+  opacity: op = 1,
+  height = 30
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "rect",
+      {
+        x,
+        y,
+        width,
+        height,
+        rx: radius.md,
+        fill: color.bgDark,
+        stroke: accentColor,
+        strokeWidth: stroke.normal,
+        opacity: op
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "rect",
+      {
+        x,
+        y,
+        width: 5,
+        height,
+        rx: 2,
+        fill: accentColor,
+        opacity: op
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "text",
+      {
+        x: x + 15,
+        y: y + (detail ? height * 0.42 : height / 2 + font.primary / 3),
+        fill: accentColor,
+        fontSize: font.primary,
+        fontWeight: "600",
+        opacity: op,
+        children: label
+      }
+    ),
+    detail && /* @__PURE__ */ jsx(
+      "text",
+      {
+        x: x + 15,
+        y: y + height * 0.78,
+        fill: color.textDim,
+        fontSize: font.small,
+        opacity: op,
+        children: detail
+      }
+    )
+  ] });
+}
+function GridCard({
+  x,
+  y,
+  width,
+  icon,
+  label,
+  desc,
+  codeHint,
+  accentColor
+}) {
+  const height = codeHint ? 48 : 38;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "rect",
+      {
+        x,
+        y,
+        width,
+        height,
+        rx: radius.md,
+        fill: color.bgDark,
+        stroke: accentColor,
+        strokeWidth: stroke.normal
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "circle",
+      {
+        cx: x + 22,
+        cy: y + 18,
+        r: 10,
+        fill: accentColor,
+        fillOpacity: 0.15,
+        stroke: accentColor,
+        strokeWidth: stroke.hairline
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "text",
+      {
+        x: x + 22,
+        y: y + 22,
+        fill: accentColor,
+        fontSize: font.primary,
+        textAnchor: "middle",
+        fontWeight: "600",
+        children: icon
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "text",
+      {
+        x: x + 42,
+        y: y + 16,
+        fill: color.textBright,
+        fontSize: font.primary,
+        fontWeight: "500",
+        children: label
+      }
+    ),
+    desc && /* @__PURE__ */ jsx("text", { x: x + 42, y: y + 28, fill: color.textDim, fontSize: font.small, children: desc }),
+    codeHint && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "rect",
+        {
+          x: x + 8,
+          y: y + 34,
+          width: width - 16,
+          height: 10,
+          rx: 2,
+          fill: color.bgDarker
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "text",
+        {
+          x: x + width / 2,
+          y: y + 42,
+          fill: accentColor,
+          fontSize: font.small,
+          textAnchor: "middle",
+          fontFamily: "monospace",
+          opacity: 0.7,
+          children: codeHint
+        }
+      )
+    ] })
+  ] });
+}
+function ActorNode({
+  cx,
+  cy,
+  r = 12,
+  label,
+  labelPos = "below",
+  accentColor
+}) {
+  const labelOffset = r + 8;
+  const labelProps = {
+    above: { x: cx, y: cy - labelOffset, textAnchor: "middle" },
+    below: { x: cx, y: cy + labelOffset, textAnchor: "middle" },
+    left: { x: cx - labelOffset, y: cy + font.small / 3, textAnchor: "end" },
+    right: { x: cx + labelOffset, y: cy + font.small / 3, textAnchor: "start" }
+  }[labelPos];
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "circle",
+      {
+        cx,
+        cy,
+        r,
+        fill: accentColor,
+        fillOpacity: 0.15,
+        stroke: accentColor,
+        strokeWidth: stroke.normal
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "text",
+      {
+        ...labelProps,
+        fill: accentColor,
+        fontSize: font.small,
+        fontWeight: "500",
+        children: label
+      }
+    )
+  ] });
+}
+function KeyValueRow({
+  x,
+  y,
+  field,
+  value,
+  fieldColor
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "text",
+      {
+        x,
+        y,
+        fill: fieldColor,
+        fontSize: font.secondary,
+        fontFamily: "monospace",
+        children: field
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "text",
+      {
+        x: x + field.length * 4.2,
+        y,
+        fill: color.textDim,
+        fontSize: font.secondary,
+        fontFamily: "monospace",
+        children: value
+      }
+    )
+  ] });
+}
+function WarningIndicator({
+  cx,
+  cy,
+  color: fillColor,
+  size = 10
+}) {
+  const half = size / 2;
+  const top = cy - half;
+  const bottom = cy + half;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: `M ${cx} ${top} L ${cx + half} ${bottom} L ${cx - half} ${bottom} Z`,
+        fill: "none",
+        stroke: fillColor,
+        strokeWidth: stroke.normal
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "text",
+      {
+        x: cx,
+        y: bottom - 2,
+        fill: fillColor,
+        fontSize: font.primary,
+        textAnchor: "middle",
+        fontWeight: "700",
+        children: "!"
+      }
+    )
+  ] });
+}
+export {
+  ActorNode,
+  AnimatedDashPath,
+  ArrowMarker,
+  ArrowPath,
+  D,
+  DiagramBadge,
+  DiagramCodeBlock,
+  DiagramInfoBox,
+  DiagramNode,
+  DiagramTitle,
+  DiagramWrapper,
+  GridCard,
+  KeyValueRow,
+  LayerBar,
+  StepMarker,
+  WarningIndicator,
+  accent,
+  box,
+  color,
+  font,
+  item,
+  motion,
+  radius,
+  scaleItem,
+  slideInItem,
+  spacing,
+  stagger,
+  stroke,
+  tint,
+  viewBox
+};