@vllnt/ui 0.2.0 → 0.2.1-canary.06f0e84

package/dist/components/story-map/story-map.js

@@ -0,0 +1,414 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  Children,
+  createContext,
+  forwardRef,
+  isValidElement,
+  useCallback,
+  useContext,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { cn } from "../../lib/utils";
+const VIEWBOX_WIDTH = 1e3;
+const VIEWBOX_HEIGHT = 500;
+const PALETTE = {
+  amber: "fill-amber-500",
+  blue: "fill-blue-500",
+  emerald: "fill-emerald-500",
+  purple: "fill-purple-500",
+  red: "fill-red-500",
+  rose: "fill-rose-500"
+};
+const DEFAULT_LABELS = {
+  narrative: "Narrative",
+  progress: "Story progress",
+  region: "Story map"
+};
+const StoryMapContext = createContext(null);
+function useStoryMapContext() {
+  const ctx = useContext(StoryMapContext);
+  if (!ctx) {
+    throw new Error("StoryMap subcomponent used outside its root.");
+  }
+  return ctx;
+}
+function projectEquirectangular(position) {
+  const [lng, lat] = position;
+  return {
+    x: (lng + 180) / 360 * VIEWBOX_WIDTH,
+    y: (90 - lat) / 180 * VIEWBOX_HEIGHT
+  };
+}
+function ChapterMedia({ media }) {
+  return /* @__PURE__ */ jsxs("figure", { className: "overflow-hidden rounded-xl border bg-muted", children: [
+    /* @__PURE__ */ jsx(
+      "img",
+      {
+        alt: media.alt,
+        className: "aspect-video w-full object-cover",
+        loading: "lazy",
+        src: media.src
+      }
+    ),
+    media.caption ? /* @__PURE__ */ jsx("figcaption", { className: "border-t bg-background px-3 py-2 text-xs text-muted-foreground", children: media.caption }) : null
+  ] });
+}
+function ChapterHeader({ subtitle, title }) {
+  return /* @__PURE__ */ jsxs("header", { className: "space-y-1", children: [
+    /* @__PURE__ */ jsx("h3", { className: "text-xl font-semibold tracking-tight text-foreground", children: title }),
+    subtitle ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: subtitle }) : null
+  ] });
+}
+const StoryMapChapter = forwardRef(
+  (props, forwardedRef) => {
+    const {
+      center,
+      children,
+      className,
+      color = "red",
+      id,
+      media,
+      subtitle,
+      title,
+      zoom = 2,
+      ...rest
+    } = props;
+    const generatedId = useId();
+    const chapterId = id ?? generatedId;
+    const localRef = useRef(null);
+    const { registerChapter, registerMarker, unregisterMarker } = useStoryMapContext();
+    useEffect(() => {
+      registerMarker({ center, color, id: chapterId, zoom });
+      return () => {
+        unregisterMarker(chapterId);
+      };
+    }, [center, chapterId, color, registerMarker, unregisterMarker, zoom]);
+    const refCallback = useCallback(
+      (node) => {
+        localRef.current = node;
+        registerChapter(chapterId, node);
+        if (typeof forwardedRef === "function") forwardedRef(node);
+        else if (forwardedRef) forwardedRef.current = node;
+      },
+      [chapterId, forwardedRef, registerChapter]
+    );
+    return /* @__PURE__ */ jsxs(
+      "article",
+      {
+        className: cn(
+          "flex min-h-screen flex-col justify-center gap-3 py-12",
+          className
+        ),
+        "data-chapter-id": chapterId,
+        id: chapterId,
+        ref: refCallback,
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx(ChapterHeader, { subtitle, title }),
+          media ? /* @__PURE__ */ jsx(ChapterMedia, { media }) : null,
+          children ? /* @__PURE__ */ jsx("div", { className: "space-y-2 text-sm leading-relaxed text-foreground [&_blockquote]:my-3 [&_blockquote]:border-l-2 [&_blockquote]:border-primary [&_blockquote]:pl-3 [&_blockquote]:italic [&_blockquote]:text-muted-foreground", children }) : null
+        ]
+      }
+    );
+  }
+);
+StoryMapChapter.displayName = "StoryMapChapter";
+function Stage({
+  activeId,
+  backdrop,
+  backdropAlt,
+  markers
+}) {
+  const active = markers.find((marker) => marker.id === activeId);
+  const zoom = active?.zoom ?? 1;
+  const innerWidth = VIEWBOX_WIDTH / zoom;
+  const innerHeight = VIEWBOX_HEIGHT / zoom;
+  const center = active ? projectEquirectangular(active.center) : { x: VIEWBOX_WIDTH / 2, y: VIEWBOX_HEIGHT / 2 };
+  const viewX = center.x - innerWidth / 2;
+  const viewY = center.y - innerHeight / 2;
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      "aria-hidden": "true",
+      className: "block h-full w-full transition-[viewBox] duration-500",
+      "data-active-chapter-id": activeId ?? "",
+      "data-active-zoom": zoom,
+      preserveAspectRatio: "xMidYMid slice",
+      viewBox: `${viewX.toString()} ${viewY.toString()} ${innerWidth.toString()} ${innerHeight.toString()}`,
+      children: [
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            className: "fill-muted",
+            height: VIEWBOX_HEIGHT,
+            width: VIEWBOX_WIDTH,
+            x: "0",
+            y: "0"
+          }
+        ),
+        backdrop ? /* @__PURE__ */ jsx(
+          "image",
+          {
+            "aria-label": backdropAlt,
+            height: VIEWBOX_HEIGHT,
+            href: backdrop,
+            preserveAspectRatio: "xMidYMid slice",
+            width: VIEWBOX_WIDTH,
+            x: "0",
+            y: "0"
+          }
+        ) : null,
+        markers.map((marker) => {
+          const point = projectEquirectangular(marker.center);
+          const isActive = marker.id === activeId;
+          return /* @__PURE__ */ jsxs(
+            "g",
+            {
+              "data-marker-active": isActive ? "true" : void 0,
+              "data-marker-id": marker.id,
+              transform: `translate(${point.x.toString()}, ${point.y.toString()})`,
+              children: [
+                /* @__PURE__ */ jsx(
+                  "circle",
+                  {
+                    className: cn("stroke-background", PALETTE[marker.color]),
+                    r: isActive ? 12 : 6,
+                    strokeWidth: 2
+                  }
+                ),
+                isActive ? /* @__PURE__ */ jsx(
+                  "circle",
+                  {
+                    className: cn("opacity-30", PALETTE[marker.color]),
+                    r: 24
+                  }
+                ) : null
+              ]
+            },
+            marker.id
+          );
+        })
+      ]
+    }
+  );
+}
+function chapterIdsFromChildren(children) {
+  const ids = [];
+  Children.forEach(children, (child) => {
+    if (!isValidElement(child)) return;
+    const element = child;
+    if (typeof element.props.id === "string") ids.push(element.props.id);
+  });
+  return ids;
+}
+function ProgressStrip({
+  activeId,
+  ids,
+  label
+}) {
+  if (ids.length === 0) return null;
+  const activeIndex = activeId ? ids.indexOf(activeId) : -1;
+  const ratio = activeIndex < 0 ? 0 : (activeIndex + 1) / ids.length;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-label": label,
+      "aria-valuemax": 100,
+      "aria-valuemin": 0,
+      "aria-valuenow": Math.round(ratio * 100),
+      className: "sticky top-0 z-20 h-1 w-full bg-border",
+      role: "progressbar",
+      children: /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "block h-full bg-primary transition-[width] duration-200",
+          style: { width: `${(ratio * 100).toString()}%` }
+        }
+      )
+    }
+  );
+}
+function useChapterRegistry() {
+  const chapterMapRef = useRef(/* @__PURE__ */ new Map());
+  const markersRef = useRef(/* @__PURE__ */ new Map());
+  const [chapterIds, setChapterIds] = useState([]);
+  const [markerEntries, setMarkerEntries] = useState([]);
+  const [activeId, setActiveId] = useState();
+  const registerChapter = useCallback(
+    (id, node) => {
+      const map = chapterMapRef.current;
+      if (node) map.set(id, node);
+      else map.delete(id);
+      setChapterIds([...map.keys()]);
+    },
+    []
+  );
+  const registerMarker = useCallback((entry) => {
+    markersRef.current.set(entry.id, entry);
+    setMarkerEntries([...markersRef.current.values()]);
+  }, []);
+  const unregisterMarker = useCallback((id) => {
+    markersRef.current.delete(id);
+    setMarkerEntries([...markersRef.current.values()]);
+  }, []);
+  useEffect(() => {
+    if (typeof IntersectionObserver === "undefined") return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const visible = entries.filter((entry) => entry.isIntersecting).sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top);
+        const first = visible[0];
+        if (first?.target instanceof HTMLElement) {
+          const id = first.target.dataset.chapterId;
+          if (id) setActiveId(id);
+        }
+      },
+      { rootMargin: "-30% 0px -50% 0px", threshold: 0.1 }
+    );
+    [...chapterMapRef.current.values()].forEach((node) => {
+      observer.observe(node);
+    });
+    return () => {
+      observer.disconnect();
+    };
+  }, [chapterIds]);
+  return {
+    activeId,
+    markerEntries,
+    registerChapter,
+    registerMarker,
+    setActiveId,
+    unregisterMarker
+  };
+}
+const Shell = forwardRef(function Shell2(props, ref) {
+  const {
+    activeId,
+    backdrop,
+    backdropAlt,
+    children,
+    className,
+    labels,
+    markers,
+    orderedIds,
+    titleId
+  } = props;
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      "aria-labelledby": titleId,
+      className: cn(
+        "relative flex w-full flex-col overflow-hidden rounded-2xl border bg-background text-foreground md:flex-row",
+        className
+      ),
+      ref,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "sr-only", id: titleId, children: labels.region }),
+        /* @__PURE__ */ jsx(
+          ProgressStrip,
+          {
+            activeId,
+            ids: orderedIds,
+            label: labels.progress
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "sticky top-0 hidden h-[80vh] flex-1 self-start md:block",
+            "data-story-map-stage": true,
+            children: /* @__PURE__ */ jsx(
+              Stage,
+              {
+                activeId,
+                backdrop,
+                backdropAlt,
+                markers
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-label": labels.narrative,
+            className: "flex-1 px-6 md:max-w-xl",
+            role: "region",
+            children
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "block aspect-[2/1] w-full border-t border-border md:hidden",
+            "data-story-map-stage-mobile": true,
+            children: /* @__PURE__ */ jsx(
+              Stage,
+              {
+                activeId,
+                backdrop,
+                backdropAlt,
+                markers
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+});
+const StoryMap = forwardRef((props, ref) => {
+  const { backdrop, backdropAlt, children, className, labels, ...rest } = props;
+  const titleId = useId();
+  const resolvedLabels = useMemo(
+    () => ({ ...DEFAULT_LABELS, ...labels }),
+    [labels]
+  );
+  const {
+    activeId,
+    markerEntries,
+    registerChapter,
+    registerMarker,
+    setActiveId,
+    unregisterMarker
+  } = useChapterRegistry();
+  const ctx = useMemo(
+    () => ({
+      activeId,
+      registerChapter,
+      registerMarker,
+      setActiveId,
+      unregisterMarker
+    }),
+    [activeId, registerChapter, registerMarker, setActiveId, unregisterMarker]
+  );
+  const orderedIds = useMemo(
+    () => chapterIdsFromChildren(children),
+    [children]
+  );
+  return /* @__PURE__ */ jsx(StoryMapContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
+    Shell,
+    {
+      activeId,
+      backdrop,
+      backdropAlt,
+      className,
+      labels: resolvedLabels,
+      markers: markerEntries,
+      orderedIds,
+      ref,
+      titleId,
+      ...rest,
+      children
+    }
+  ) });
+});
+StoryMap.displayName = "StoryMap";
+export {
+  StoryMap,
+  StoryMapChapter
+};

package/dist/components/tags-input/index.js

@@ -0,0 +1,4 @@
+import { TagsInput } from "./tags-input";
+export {
+  TagsInput
+};

package/dist/components/tags-input/tags-input.js

@@ -0,0 +1,178 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { X } from "lucide-react";
+import { cn } from "../../lib/utils";
+function normalizeTag(tag) {
+  return tag.trim();
+}
+function getNormalizedTags(tags) {
+  return tags.map(normalizeTag).filter(
+    (tag, index, values) => tag.length > 0 && values.indexOf(tag) === index
+  );
+}
+function shouldAddTagFromKey(key) {
+  return key === "Enter" || key === ",";
+}
+function useTagsInputState({
+  defaultValue,
+  onValueChange,
+  value
+}) {
+  const [uncontrolledValue, setUncontrolledValue] = React.useState(
+    () => getNormalizedTags(defaultValue)
+  );
+  const isControlled = value !== void 0;
+  const tags = React.useMemo(
+    () => getNormalizedTags(value ?? uncontrolledValue),
+    [uncontrolledValue, value]
+  );
+  const updateTags = React.useCallback(
+    (nextTags) => {
+      const normalizedTags = getNormalizedTags(nextTags);
+      if (!isControlled) {
+        setUncontrolledValue(normalizedTags);
+      }
+      onValueChange?.(normalizedTags);
+    },
+    [isControlled, onValueChange]
+  );
+  return { tags, updateTags };
+}
+function useTagsInputHandlers({
+  disabled,
+  inputValue,
+  onKeyDown,
+  setInputValue,
+  tags,
+  updateTags
+}) {
+  const removeTag = React.useCallback(
+    (tagToRemove) => {
+      updateTags(tags.filter((tag) => tag !== tagToRemove));
+    },
+    [tags, updateTags]
+  );
+  const commitTag = React.useCallback(() => {
+    const nextTag = normalizeTag(inputValue);
+    if (nextTag.length === 0 || tags.includes(nextTag)) {
+      setInputValue("");
+      return;
+    }
+    updateTags([...tags, nextTag]);
+    setInputValue("");
+  }, [inputValue, setInputValue, tags, updateTags]);
+  const handleKeyDown = React.useCallback(
+    (event) => {
+      onKeyDown?.(event);
+      if (event.defaultPrevented || disabled) {
+        return;
+      }
+      if (shouldAddTagFromKey(event.key)) {
+        event.preventDefault();
+        commitTag();
+        return;
+      }
+      if ((event.key === "Backspace" || event.key === "Delete") && inputValue.length === 0) {
+        const lastTag = tags.at(-1);
+        if (lastTag) {
+          event.preventDefault();
+          removeTag(lastTag);
+        }
+      }
+    },
+    [commitTag, disabled, inputValue.length, onKeyDown, removeTag, tags]
+  );
+  return { handleKeyDown, removeTag };
+}
+function TagList({ disabled, onRemove, tags }) {
+  return /* @__PURE__ */ jsx("ul", { className: "flex flex-wrap items-center gap-2", children: tags.map((tag) => /* @__PURE__ */ jsxs(
+    "li",
+    {
+      className: "flex items-center gap-1 rounded-md border bg-muted px-2 py-1 text-sm text-foreground",
+      children: [
+        /* @__PURE__ */ jsx("span", { children: tag }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            "aria-label": `Remove ${tag}`,
+            className: "rounded-sm text-muted-foreground outline-none ring-offset-background transition-colors hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+            disabled,
+            onClick: (event) => {
+              event.stopPropagation();
+              onRemove(tag);
+            },
+            type: "button",
+            children: /* @__PURE__ */ jsx(X, { className: "h-3.5 w-3.5" })
+          }
+        )
+      ]
+    },
+    tag
+  )) });
+}
+const TagsInput = React.forwardRef(
+  ({
+    className,
+    defaultValue = [],
+    disabled = false,
+    onBlur,
+    onKeyDown,
+    onValueChange,
+    placeholder = "Add a tag",
+    value,
+    ...props
+  }, ref) => {
+    const [inputValue, setInputValue] = React.useState("");
+    const { tags, updateTags } = useTagsInputState({
+      defaultValue,
+      onValueChange,
+      value
+    });
+    const { handleKeyDown, removeTag } = useTagsInputHandlers({
+      disabled,
+      inputValue,
+      onKeyDown,
+      setInputValue,
+      tags,
+      updateTags
+    });
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "aria-disabled": disabled || void 0,
+        className: cn(
+          "flex min-h-10 w-full flex-wrap items-center gap-2 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background transition-colors focus-within:outline-none focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
+          disabled && "cursor-not-allowed opacity-50",
+          className
+        ),
+        "data-disabled": disabled ? "true" : void 0,
+        role: "group",
+        children: [
+          /* @__PURE__ */ jsx(TagList, { disabled, onRemove: removeTag, tags }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ...props,
+              className: "min-w-[8rem] flex-1 border-0 bg-transparent p-0 text-sm placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed",
+              disabled,
+              onBlur,
+              onChange: (event) => {
+                setInputValue(event.target.value);
+              },
+              onKeyDown: handleKeyDown,
+              placeholder,
+              ref,
+              type: "text",
+              value: inputValue
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+TagsInput.displayName = "TagsInput";
+export {
+  TagsInput
+};

package/dist/components/thread-bubble/index.js

@@ -0,0 +1,6 @@
+import {
+  ThreadBubble
+} from "./thread-bubble";
+export {
+  ThreadBubble
+};

package/dist/components/thread-bubble/thread-bubble.js

@@ -0,0 +1,85 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef
+} from "react";
+import { cn } from "../../lib/utils";
+const DEFAULT_LABELS = {
+  empty: "No replies yet",
+  region: "Comment thread"
+};
+const Message = (props) => {
+  const { message } = props;
+  return /* @__PURE__ */ jsxs("li", { className: "space-y-0.5", "data-thread-bubble-message": message.id, children: [
+    /* @__PURE__ */ jsxs("header", { className: "flex items-baseline justify-between gap-2 text-[10px]", children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "font-semibold",
+          "data-thread-bubble-author": true,
+          style: message.authorColor ? { color: message.authorColor } : void 0,
+          children: message.author
+        }
+      ),
+      message.ts ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", "data-thread-bubble-ts": true, children: message.ts }) : null
+    ] }),
+    /* @__PURE__ */ jsx("p", { className: "text-xs text-foreground", "data-thread-bubble-body": true, children: message.body })
+  ] });
+};
+const ThreadBubble = forwardRef(
+  (props, ref) => {
+    const { className, footer, labels, messages, onResolve, title, ...rest } = props;
+    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+    const handleResolve = () => {
+      onResolve?.();
+    };
+    return /* @__PURE__ */ jsxs(
+      "section",
+      {
+        "aria-label": resolvedLabels.region,
+        className: cn(
+          "flex w-72 flex-col gap-2 rounded-lg border border-border bg-background p-3 text-foreground shadow-md",
+          className
+        ),
+        "data-thread-bubble": true,
+        ref,
+        ...rest,
+        children: [
+          title || onResolve ? /* @__PURE__ */ jsxs("header", { className: "flex items-center justify-between gap-2 text-[11px] uppercase tracking-wide text-muted-foreground", children: [
+            title ? /* @__PURE__ */ jsx("span", { className: "truncate font-semibold", "data-thread-bubble-title": true, children: title }) : /* @__PURE__ */ jsx("span", { "aria-hidden": "true" }),
+            onResolve ? /* @__PURE__ */ jsx(
+              "button",
+              {
+                className: "rounded-full border border-border px-2 py-0.5 text-[10px] font-medium text-muted-foreground transition-colors hover:bg-muted/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                "data-thread-bubble-resolve": true,
+                onClick: handleResolve,
+                type: "button",
+                children: "Resolve"
+              }
+            ) : null
+          ] }) : null,
+          messages.length === 0 ? /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: "px-1 py-2 text-center text-[11px] text-muted-foreground",
+              "data-thread-bubble-state": "empty",
+              children: resolvedLabels.empty
+            }
+          ) : /* @__PURE__ */ jsx("ul", { className: "space-y-2 overflow-y-auto", "data-thread-bubble-list": true, children: messages.map((message) => /* @__PURE__ */ jsx(Message, { message }, message.id)) }),
+          footer ? /* @__PURE__ */ jsx(
+            "footer",
+            {
+              className: "border-t border-border pt-2",
+              "data-thread-bubble-footer": true,
+              children: footer
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+ThreadBubble.displayName = "ThreadBubble";
+export {
+  ThreadBubble
+};

package/dist/components/threshold-ring/index.js

@@ -0,0 +1,6 @@
+import {
+  ThresholdRing
+} from "./threshold-ring";
+export {
+  ThresholdRing
+};