@justanarthur/modo-ui 0.0.0-stage → 0.2.0

package/dist/shared/components-7r3etddy.js

@@ -0,0 +1,171 @@
+import {
+  useReduceMotion
+} from "./components-men63rwj.js";
+import {
+  useShape
+} from "./components-cv16mryv.js";
+import {
+  useSizeVariant2
+} from "./components-0sn7ypjw.js";
+import {
+  cn2
+} from "./components-ezxhrmer.js";
+import {
+  spring2
+} from "./components-1v7rxytx.js";
+
+// components/badge/index.tsx
+import { cva } from "class-variance-authority";
+import { AnimatePresence, animate, motion } from "motion/react";
+import { forwardRef, useLayoutEffect, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var badgeColors2 = {
+  gray: "var(--badge-gray)",
+  red: "var(--badge-red)",
+  orange: "var(--badge-orange)",
+  amber: "var(--badge-amber)",
+  yellow: "var(--badge-yellow)",
+  lime: "var(--badge-lime)",
+  green: "var(--badge-green)",
+  emerald: "var(--badge-emerald)",
+  teal: "var(--badge-teal)",
+  cyan: "var(--badge-cyan)",
+  blue: "var(--badge-blue)",
+  indigo: "var(--badge-indigo)",
+  violet: "var(--badge-violet)",
+  purple: "var(--badge-purple)",
+  fuchsia: "var(--badge-fuchsia)",
+  pink: "var(--badge-pink)",
+  rose: "var(--badge-rose)"
+};
+var badgeVariants2 = cva("inline-flex items-center weight-medium whitespace-nowrap", {
+  variants: {
+    variant: {
+      solid: "",
+      dot: "border border-border text-foreground"
+    },
+    size: {
+      default: "h-6 px-2.5 text-caption gap-1.5",
+      compact: "h-5 px-2 text-caption-compact gap-1"
+    }
+  },
+  defaultVariants: {
+    variant: "solid",
+    size: "default"
+  }
+});
+var legacySizeAliases = {
+  sm: "compact",
+  md: "default",
+  lg: "default"
+};
+var { exit: _exit, ...enter } = spring2.moderate;
+function textOf(node) {
+  const parts = Array.isArray(node) ? node : [node];
+  if (parts.every((part) => typeof part === "string" || typeof part === "number"))
+    return parts.join("");
+}
+function useWidthMorph(change) {
+  const content = useRef(null);
+  const rest = useRef(0);
+  const live = useRef(null);
+  const reduced = useReduceMotion();
+  useLayoutEffect(() => {
+    const el = content.current;
+    if (!el)
+      return;
+    const observer = new ResizeObserver(() => {
+      if (live.current === null)
+        rest.current = el.offsetWidth;
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+  useLayoutEffect(() => {
+    const el = content.current;
+    const from = live.current ?? rest.current;
+    if (!el || !from)
+      return;
+    el.style.width = "";
+    const to = el.offsetWidth;
+    rest.current = to;
+    live.current = null;
+    if (reduced || from === to)
+      return;
+    const write = (width) => {
+      live.current = width;
+      el.style.width = `${width}px`;
+    };
+    write(from);
+    const controls = animate(from, to, {
+      ...enter,
+      onUpdate: write,
+      onComplete: () => {
+        live.current = null;
+        el.style.width = "";
+      }
+    });
+    return () => controls.stop();
+  }, [change, reduced]);
+  return content;
+}
+var Badge2 = forwardRef(({ className, variant = "solid", size: sizeProp, color = "gray", children, style, ...props }, ref) => {
+  const shape = useShape();
+  const contextSize = useSizeVariant2();
+  const size = sizeProp ? legacySizeAliases[sizeProp] ?? sizeProp : contextSize === "compact" ? "compact" : "default";
+  const colorValue = badgeColors2[color];
+  const isSolid = variant === "solid";
+  const dotSize = size === "compact" ? 6 : 7;
+  const colorStyle = isSolid ? color === "gray" ? { backgroundColor: "var(--accent)", color: "var(--foreground)" } : {
+    color: "var(--foreground)",
+    backgroundColor: `color-mix(in srgb, ${colorValue} 15%, var(--background))`
+  } : {};
+  const dotColor = color === "gray" ? "var(--muted-foreground)" : colorValue;
+  const label = textOf(children);
+  const content = useWidthMorph(`${variant} ${size} ${label}`);
+  return /* @__PURE__ */ jsx("span", {
+    ref,
+    className: cn2(badgeVariants2({ variant, size }), shape.item, "transition-[background-color] duration-moderate", className),
+    style: { ...colorStyle, ...style },
+    ...props,
+    children: /* @__PURE__ */ jsxs("span", {
+      ref: content,
+      className: "relative inline-flex min-w-0 items-center gap-[inherit] overflow-x-clip",
+      children: [
+        /* @__PURE__ */ jsx(AnimatePresence, {
+          mode: "popLayout",
+          initial: false,
+          children: !isSolid && /* @__PURE__ */ jsx(motion.span, {
+            className: "shrink-0 rounded-full transition-[background-color] duration-moderate",
+            style: {
+              width: dotSize,
+              height: dotSize,
+              backgroundColor: dotColor
+            },
+            initial: { opacity: 0, scale: 0 },
+            animate: { opacity: 1, scale: 1 },
+            exit: { opacity: 0, scale: 0, transition: spring2.moderate.exit },
+            transition: enter
+          }, "dot")
+        }),
+        /* @__PURE__ */ jsx(AnimatePresence, {
+          mode: "popLayout",
+          initial: false,
+          children: /* @__PURE__ */ jsx(motion.span, {
+            layout: "position",
+            className: "[text-box:trim-both_cap_alphabetic]",
+            initial: { opacity: 0, filter: "blur(4px)" },
+            animate: { opacity: 1, filter: "blur(0px)", transitionEnd: { filter: "none" } },
+            exit: { opacity: 0, filter: "blur(4px)", transition: spring2.moderate.exit },
+            transition: enter,
+            children
+          }, label ?? "label")
+        })
+      ]
+    })
+  });
+});
+Badge2.displayName = "Badge";
+var badge_default = Badge2;
+
+export { badgeColors2, badgeVariants2, Badge2, badge_default };

package/dist/shared/components-7x9kawxv.js

@@ -0,0 +1,152 @@
+import {
+  useReduceMotion
+} from "./components-men63rwj.js";
+import {
+  GooFilter
+} from "./components-0q0sqfh4.js";
+import {
+  GOO_BLUR_RATIO
+} from "./components-hqeq3w9q.js";
+import {
+  cn2
+} from "./components-ezxhrmer.js";
+import {
+  useSize2
+} from "./components-0sn7ypjw.js";
+import {
+  spring2
+} from "./components-1v7rxytx.js";
+
+// components/thinking-indicator/index.tsx
+import { AnimatePresence, motion } from "motion/react";
+import { forwardRef, useEffect, useId, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var circleA = "M 12 8 C 14.21 8 16 9.79 16 12 C 16 14.21 14.21 16 12 16 C 9.79 16 8 14.21 8 12 C 8 9.79 9.79 8 12 8 Z";
+var infinity = "M 12 12 C 14 8.5 19 8.5 19 12 C 19 15.5 14 15.5 12 12 C 10 8.5 5 8.5 5 12 C 5 15.5 10 15.5 12 12 Z";
+var circleB = "M 12 16 C 14.21 16 16 14.21 16 12 C 16 9.79 14.21 8 12 8 C 9.79 8 8 9.79 8 12 C 8 14.21 9.79 16 12 16 Z";
+var words = ["Thinking", "Moonwalking", "Planning", "Refining"];
+var DOTS = {
+  default: { box: "h-5 w-[26px]", dot: "size-1.5", radius: 3, gap: 10 },
+  compact: { box: "h-[18px] w-[23px]", dot: "size-[5px]", radius: 2.5, gap: 9 }
+};
+var MERGED = Math.sqrt(3);
+function GooDots({ step, still }) {
+  const gooId = `thinking-goo-${useId().replace(/:/g, "")}`;
+  const { box, dot, radius, gap } = DOTS[step];
+  const loop = { duration: spring2.slow.duration * 8, ease: "easeInOut", repeat: Infinity };
+  return /* @__PURE__ */ jsxs("span", {
+    "aria-hidden": true,
+    className: cn2("relative shrink-0", box),
+    children: [
+      /* @__PURE__ */ jsx(GooFilter, {
+        id: gooId,
+        blur: radius * GOO_BLUR_RATIO
+      }),
+      /* @__PURE__ */ jsx("span", {
+        className: "absolute inset-0 flex items-center justify-center",
+        style: { filter: `url(#${gooId})` },
+        children: [-1, 0, 1].map((side) => /* @__PURE__ */ jsx(motion.span, {
+          className: cn2("absolute rounded-full bg-muted-foreground", dot),
+          animate: still ? { x: side * gap } : side ? { x: [side * gap, 0, side * gap] } : { scale: [1, MERGED, 1] },
+          transition: still ? { duration: 0 } : loop
+        }, side))
+      })
+    ]
+  });
+}
+var ThinkingIndicator2 = forwardRef(({ className, variant = "shimmer", showIcon = true, size, ...props }, ref) => {
+  const step = useSize2(size).variant;
+  const compactStep = step === "compact";
+  const [index, setIndex] = useState(0);
+  const reduceMotion = useReduceMotion();
+  const label = variant === "goo" ? "text-muted-foreground" : "shimmer-text";
+  useEffect(() => {
+    if (reduceMotion)
+      return;
+    const interval = setInterval(() => {
+      setIndex((i) => (i + 1) % words.length);
+    }, 4000);
+    return () => clearInterval(interval);
+  }, [reduceMotion]);
+  return /* @__PURE__ */ jsxs("div", {
+    ref,
+    role: "status",
+    className: cn2("flex items-center gap-2 px-3 py-2", className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("span", {
+        className: "sr-only",
+        children: "Thinking…"
+      }),
+      showIcon && variant === "goo" && /* @__PURE__ */ jsx(GooDots, {
+        step,
+        still: reduceMotion
+      }),
+      showIcon && variant === "shimmer" && /* @__PURE__ */ jsx(motion.svg, {
+        "aria-hidden": true,
+        width: compactStep ? 18 : 20,
+        height: compactStep ? 18 : 20,
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: 1.5,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        className: "text-muted-foreground shrink-0",
+        children: reduceMotion ? /* @__PURE__ */ jsx("path", {
+          d: infinity
+        }) : /* @__PURE__ */ jsx(motion.path, {
+          d: circleA,
+          initial: { d: circleA },
+          animate: {
+            d: [circleA, infinity, circleB, infinity, circleA]
+          },
+          transition: {
+            d: {
+              duration: 6,
+              ease: "easeInOut",
+              repeat: Infinity,
+              times: [0, 0.25, 0.5, 0.75, 1]
+            }
+          }
+        })
+      }),
+      /* @__PURE__ */ jsxs("span", {
+        "aria-hidden": "true",
+        className: cn2("inline-grid overflow-hidden", compactStep ? "text-body-compact" : "text-body", "weight-medium"),
+        children: [
+          /* @__PURE__ */ jsx("span", {
+            className: cn2("col-start-1 row-start-1 invisible", label),
+            children: words.reduce((a, b) => a.length >= b.length ? a : b)
+          }),
+          reduceMotion ? /* @__PURE__ */ jsx("span", {
+            className: cn2("col-start-1 row-start-1", label),
+            children: words[0]
+          }) : /* @__PURE__ */ jsx(AnimatePresence, {
+            mode: "popLayout",
+            initial: false,
+            children: /* @__PURE__ */ jsx(motion.span, {
+              className: cn2("col-start-1 row-start-1", label),
+              initial: { y: "80%", opacity: 0 },
+              animate: {
+                y: 0,
+                opacity: 1,
+                transition: { duration: spring2.slow.duration, ease: [0.4, 0, 0.2, 1] }
+              },
+              exit: {
+                y: "-80%",
+                opacity: 0,
+                transition: { duration: spring2.slow.exit.duration, ease: [0.4, 0, 0.2, 1] }
+              },
+              children: words[index]
+            }, words[index])
+          })
+        ]
+      })
+    ]
+  });
+});
+ThinkingIndicator2.displayName = "ThinkingIndicator";
+var thinking_indicator_default = ThinkingIndicator2;
+
+export { ThinkingIndicator2, thinking_indicator_default };

package/dist/shared/components-8fpr3s4p.js

@@ -0,0 +1,292 @@
+import {
+  cn2
+} from "./components-ezxhrmer.js";
+import {
+  FluidHoverHighlight2
+} from "./components-kvr7f9hy.js";
+import {
+  useIcon
+} from "./components-zrkzcayz.js";
+import {
+  shapeMap
+} from "./components-cv16mryv.js";
+import {
+  useSize2
+} from "./components-0sn7ypjw.js";
+import {
+  useFluidHover2,
+  useRegisterFluidHoverItem2
+} from "./components-59efxjd9.js";
+import {
+  ScrollArea2
+} from "./components-hawvy2qz.js";
+import {
+  DialogTrigger2,
+  DialogContent2,
+  DialogState2
+} from "./components-zfnmn5d4.js";
+import {
+  popupScrollAreaClass,
+  popupViewportClass,
+  isDisabledRow
+} from "./components-vynjtrk6.js";
+
+// components/overlays/command/index.tsx
+import { Autocomplete } from "@base-ui/react/autocomplete";
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
+import {
+  createContext,
+  forwardRef,
+  useContext,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var listShape = shapeMap.rounded;
+var CommandContext = createContext({
+  trigger: { current: null },
+  close: () => {},
+  session: 0
+});
+var CommandHighlight = createContext(null);
+var CommandRows = createContext(undefined);
+var isGrouped = (items) => items[0] !== undefined && ("items" in items[0]);
+function CommandListRoot2({ items, ...props }) {
+  const [highlight, setHighlight] = useState(null);
+  const { contains } = Autocomplete.useFilter();
+  return /* @__PURE__ */ jsx(CommandHighlight.Provider, {
+    value: highlight,
+    children: /* @__PURE__ */ jsx(Autocomplete.Root, {
+      ...props,
+      items,
+      itemToStringValue: (item) => item.label,
+      filter: (item, query) => contains([item.label, ...item.keywords ?? []].join(" "), query),
+      onItemHighlighted: (item, details) => setHighlight(item ? details.index : null)
+    })
+  });
+}
+function CommandShortcut2({ className, ...props }) {
+  return /* @__PURE__ */ jsx("kbd", {
+    className: cn2("ml-auto shrink-0 font-sans text-caption text-muted-foreground", className),
+    ...props
+  });
+}
+function CommandRow({
+  item,
+  index,
+  onPick
+}) {
+  const registerItem = useContext(CommandRows);
+  const active = useContext(CommandHighlight) === index;
+  const ref = useRef(null);
+  const size = useSize2();
+  useRegisterFluidHoverItem2(registerItem, index, ref);
+  const Icon = item.icon;
+  return /* @__PURE__ */ jsxs(Autocomplete.Item, {
+    ref,
+    value: item,
+    disabled: item.disabled,
+    onClick: () => onPick(item),
+    className: cn2("relative z-10 flex shrink-0 cursor-pointer select-none items-center outline-none transition-[color] duration-fast", "data-[disabled]:pointer-events-none data-[disabled]:opacity-50", size.control, size.gap, size.itemPx, size.text, listShape.item, active ? "text-foreground" : "text-muted-foreground"),
+    children: [
+      Icon && /* @__PURE__ */ jsx(Icon, {
+        size: size.icon,
+        strokeWidth: active ? 2 : 1.5,
+        className: "shrink-0 transition-[color,stroke-width] duration-fast"
+      }),
+      /* @__PURE__ */ jsx("span", {
+        className: "min-w-0 flex-1 truncate [text-box:trim-both_cap_alphabetic] py-1 -my-1",
+        children: item.label
+      }),
+      item.shortcut && /* @__PURE__ */ jsx(CommandShortcut2, {
+        children: item.shortcut
+      })
+    ]
+  });
+}
+function CommandList2({ onPick, emptyMessage, className }) {
+  const filtered = Autocomplete.useFilteredItems();
+  const highlight = useContext(CommandHighlight);
+  const compact = useSize2().variant === "compact";
+  const containerRef = useRef(null);
+  const { itemRects, isMeasured, registerItem } = useFluidHover2(containerRef, { isItemDisabled: isDisabledRow });
+  const rect = isMeasured && highlight !== null ? itemRects[highlight] ?? null : null;
+  const rows = (items, start) => items.map((item, i) => /* @__PURE__ */ jsx(CommandRow, {
+    item,
+    index: start + i,
+    onPick
+  }, item.label));
+  let start = 0;
+  return /* @__PURE__ */ jsx(CommandRows.Provider, {
+    value: registerItem,
+    children: /* @__PURE__ */ jsxs(ScrollArea2, {
+      className: cn2(popupScrollAreaClass, className),
+      viewportClassName: cn2(popupViewportClass, "scroll-fade"),
+      children: [
+        /* @__PURE__ */ jsx(Autocomplete.Empty, {
+          className: "px-4 py-6 text-center text-body text-muted-foreground empty:hidden",
+          children: emptyMessage
+        }),
+        /* @__PURE__ */ jsxs(Autocomplete.List, {
+          ref: containerRef,
+          className: "relative flex flex-col p-1 outline-none data-[empty]:p-0",
+          children: [
+            /* @__PURE__ */ jsx(FluidHoverHighlight2, {
+              rect,
+              session: 0,
+              className: listShape.bg
+            }),
+            isGrouped(filtered) ? filtered.map((group) => {
+              const first = start;
+              start += group.items.length;
+              return /* @__PURE__ */ jsxs(Autocomplete.Group, {
+                className: "flex flex-col",
+                children: [
+                  /* @__PURE__ */ jsx(Autocomplete.GroupLabel, {
+                    className: cn2("shrink-0 px-2 pt-2 pb-1 text-muted-foreground", compact ? "text-caption-compact" : "text-caption"),
+                    children: group.label
+                  }),
+                  rows(group.items, first)
+                ]
+              }, group.label);
+            }) : rows(filtered, 0)
+          ]
+        })
+      ]
+    })
+  });
+}
+function CommandPalette2({
+  items,
+  placeholder = "Type a command or search…",
+  emptyMessage = "No results found.",
+  className
+}) {
+  const { close } = useContext(CommandContext);
+  const SearchIcon = useIcon("search");
+  const size = useSize2();
+  const [query, setQuery] = useState("");
+  return /* @__PURE__ */ jsx(CommandListRoot2, {
+    items,
+    inline: true,
+    open: true,
+    autoHighlight: "always",
+    keepHighlight: true,
+    value: query,
+    onValueChange: (next, details) => {
+      if (details.reason === "item-press")
+        return;
+      setQuery(next);
+    },
+    children: /* @__PURE__ */ jsxs("div", {
+      className: cn2("flex flex-col", className),
+      children: [
+        /* @__PURE__ */ jsxs("div", {
+          className: "flex h-12 shrink-0 items-center gap-2 border-b border-border px-4",
+          children: [
+            /* @__PURE__ */ jsx(SearchIcon, {
+              size: size.icon,
+              strokeWidth: 1.5,
+              className: "shrink-0 text-muted-foreground"
+            }),
+            /* @__PURE__ */ jsx(Autocomplete.Input, {
+              placeholder,
+              className: cn2("h-full min-w-0 flex-1 bg-transparent text-foreground outline-none placeholder:text-muted-foreground", size.text)
+            })
+          ]
+        }),
+        /* @__PURE__ */ jsx(CommandList2, {
+          emptyMessage,
+          className: "max-h-80",
+          onPick: (item) => {
+            item.onSelect?.();
+            close();
+          }
+        })
+      ]
+    })
+  });
+}
+var CommandTrigger2 = forwardRef((props, ref) => {
+  const { trigger } = useContext(CommandContext);
+  useImperativeHandle(ref, () => trigger.current);
+  return /* @__PURE__ */ jsx(DialogTrigger2, {
+    ref: trigger,
+    ...props
+  });
+});
+CommandTrigger2.displayName = "CommandTrigger";
+var CommandContent2 = forwardRef(({ items, placeholder, emptyMessage, className, label = "Command menu", ...morph }, ref) => {
+  const { session } = useContext(CommandContext);
+  return /* @__PURE__ */ jsx(DialogContent2, {
+    ref,
+    position: "top",
+    size: "lg",
+    showCloseButton: false,
+    "aria-label": label,
+    className: "p-0",
+    ...morph,
+    children: /* @__PURE__ */ jsx(CommandPalette2, {
+      items,
+      placeholder,
+      emptyMessage,
+      className
+    }, session)
+  });
+});
+CommandContent2.displayName = "CommandContent";
+function CommandScope({ open, onOpenChange, hotkey, children }) {
+  const trigger = useRef(null);
+  const change = useRef(onOpenChange);
+  change.current = onOpenChange;
+  const [session, setSession] = useState(0);
+  const [wasOpen, setWasOpen] = useState(open);
+  if (open !== wasOpen) {
+    setWasOpen(open);
+    if (open)
+      setSession(session + 1);
+  }
+  useEffect(() => {
+    if (!hotkey)
+      return;
+    const onKey = (event) => {
+      if (event.defaultPrevented || !(event.metaKey || event.ctrlKey) || event.key.toLowerCase() !== hotkey)
+        return;
+      event.preventDefault();
+      change.current(!open, { trigger: trigger.current ?? undefined });
+    };
+    window.addEventListener("keydown", onKey, open);
+    return () => window.removeEventListener("keydown", onKey, open);
+  }, [hotkey, open]);
+  const ctx = useMemo(() => ({ trigger, close: () => change.current(false, {}), session }), [session]);
+  return /* @__PURE__ */ jsx(CommandContext.Provider, {
+    value: ctx,
+    children: /* @__PURE__ */ jsx(DialogPrimitive.Root, {
+      open,
+      onOpenChange,
+      children
+    })
+  });
+}
+function Command2({ open, defaultOpen, onOpenChange, hotkey = "k", children }) {
+  return /* @__PURE__ */ jsx(DialogState2, {
+    open,
+    defaultOpen,
+    onOpenChange,
+    children: (root) => /* @__PURE__ */ jsx(CommandScope, {
+      ...root,
+      hotkey,
+      children
+    })
+  });
+}
+Command2.Trigger = CommandTrigger2;
+Command2.Content = CommandContent2;
+Command2.Palette = CommandPalette2;
+Command2.Shortcut = CommandShortcut2;
+var command_default = Command2;
+
+export { CommandListRoot2, CommandShortcut2, CommandList2, CommandPalette2, CommandTrigger2, CommandContent2, Command2, command_default };