@vllnt/ui 0.2.1 → 0.3.0-canary.00b20d6

package/dist/components/chain-of-thought/chain-of-thought.js

@@ -0,0 +1,77 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cva } from "class-variance-authority";
+import { Check, LoaderCircle, X } from "lucide-react";
+import { cn } from "../../lib/utils";
+const markerVariants = cva(
+  "flex size-6 shrink-0 items-center justify-center rounded-full border text-xs font-medium",
+  {
+    defaultVariants: {
+      status: "pending"
+    },
+    variants: {
+      status: {
+        active: "border-primary bg-primary/10 text-primary",
+        complete: "border-transparent bg-primary text-primary-foreground",
+        error: "border-transparent bg-destructive text-destructive-foreground",
+        pending: "border-border bg-muted text-muted-foreground"
+      }
+    }
+  }
+);
+function StepMarkerIcon({
+  index,
+  status
+}) {
+  if (status === "complete") {
+    return /* @__PURE__ */ jsx(Check, { className: "size-3.5" });
+  }
+  if (status === "error") {
+    return /* @__PURE__ */ jsx(X, { className: "size-3.5" });
+  }
+  if (status === "active") {
+    return /* @__PURE__ */ jsx(LoaderCircle, { className: "size-3.5 animate-spin" });
+  }
+  return /* @__PURE__ */ jsx("span", { children: index + 1 });
+}
+function ChainOfThoughtItem({
+  index,
+  isLast,
+  step
+}) {
+  const status = step.status ?? "pending";
+  return /* @__PURE__ */ jsxs("li", { className: "flex gap-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
+      /* @__PURE__ */ jsx("span", { className: markerVariants({ status }), children: /* @__PURE__ */ jsx(StepMarkerIcon, { index, status }) }),
+      isLast ? null : /* @__PURE__ */ jsx("span", { className: "my-1 w-px flex-1 bg-border" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: cn("pb-4", isLast && "pb-0"), children: [
+      /* @__PURE__ */ jsx(
+        "p",
+        {
+          className: cn(
+            "text-sm font-medium",
+            status === "pending" ? "text-muted-foreground" : "text-foreground"
+          ),
+          children: step.title
+        }
+      ),
+      step.description ? /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-xs text-muted-foreground", children: step.description }) : null
+    ] })
+  ] });
+}
+const ChainOfThought = forwardRef(
+  ({ className, steps }, ref) => /* @__PURE__ */ jsx("ol", { className: cn("flex flex-col", className), ref, children: steps.map((step, index) => /* @__PURE__ */ jsx(
+    ChainOfThoughtItem,
+    {
+      index,
+      isLast: index === steps.length - 1,
+      step
+    },
+    `${index}-${step.title}`
+  )) })
+);
+ChainOfThought.displayName = "ChainOfThought";
+export {
+  ChainOfThought
+};

package/dist/components/chain-of-thought/index.js

@@ -0,0 +1,6 @@
+import {
+  ChainOfThought
+} from "./chain-of-thought";
+export {
+  ChainOfThought
+};

package/dist/components/chart/area-chart.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "../../lib/utils";

package/dist/components/chart/line-chart.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "../../lib/utils";

package/dist/components/chat-dock-section/chat-dock-section.js

@@ -0,0 +1,56 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { ArrowUpRight, MessageSquareText } from "lucide-react";
+import { cn } from "../../lib/utils";
+import { Button } from "../button/button";
+const ChatDockSection = forwardRef(
+  ({
+    className,
+    composerPlaceholder = "Ask about runs, errors, or pending work\u2026",
+    contextLabel,
+    messages,
+    title = "Assistant",
+    ...props
+  }, ref) => /* @__PURE__ */ jsxs(
+    "section",
+    {
+      className: cn(
+        "flex flex-col gap-4 rounded-2xl border border-border/70 bg-background/75 p-4 shadow-[0_10px_35px_oklch(var(--foreground)/0.06)] backdrop-blur-xl",
+        className
+      ),
+      ref,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+          /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm font-medium text-foreground", children: [
+              /* @__PURE__ */ jsx(MessageSquareText, { className: "size-4 text-primary" }),
+              title
+            ] }),
+            contextLabel ? /* @__PURE__ */ jsx("div", { className: "text-xs uppercase tracking-[0.24em] text-muted-foreground", children: contextLabel }) : null
+          ] }),
+          /* @__PURE__ */ jsxs(Button, { size: "sm", type: "button", variant: "ghost", children: [
+            "Open thread",
+            /* @__PURE__ */ jsx(ArrowUpRight, { className: "size-4" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "space-y-3", children: messages.map((message) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "rounded-xl border border-border/60 bg-background/85 px-3 py-2",
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "text-[11px] font-medium uppercase tracking-[0.18em] text-muted-foreground", children: message.speaker }),
+              /* @__PURE__ */ jsx("div", { className: "mt-2 text-sm leading-6 text-foreground", children: message.body })
+            ]
+          },
+          message.id
+        )) }),
+        /* @__PURE__ */ jsx("div", { className: "rounded-xl border border-dashed border-border/80 bg-background/70 p-3 text-sm text-muted-foreground", children: composerPlaceholder })
+      ]
+    }
+  )
+);
+ChatDockSection.displayName = "ChatDockSection";
+export {
+  ChatDockSection
+};

package/dist/components/chat-dock-section/index.js

@@ -0,0 +1,6 @@
+import {
+  ChatDockSection
+} from "./chat-dock-section";
+export {
+  ChatDockSection
+};

package/dist/components/checkbox/checkbox.js

@@ -8,7 +8,7 @@ const Checkbox = React.forwardRef(({ className, ...props }, reference) => /* @__
   CheckboxPrimitive.Root,
   {
     className: cn(
-      "peer h-4 w-4 shrink-0 rounded border border-input bg-background ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary",
+      "peer size-4 shrink-0 rounded border border-input bg-background ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary",
       className
     ),
     ref: reference,
@@ -17,7 +17,7 @@ const Checkbox = React.forwardRef(({ className, ...props }, reference) => /* @__
       CheckboxPrimitive.Indicator,
       {
         className: cn("flex items-center justify-center text-current"),
-        children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" })
+        children: /* @__PURE__ */ jsx(Check, { className: "size-4" })
       }
     )
   }

package/dist/components/checkbox-group/checkbox-group.js

@@ -0,0 +1,92 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+import { Checkbox } from "../checkbox/checkbox";
+import { Label } from "../label/label";
+const CheckboxGroupContext = React.createContext(null);
+function useCheckboxGroupContext() {
+  const context = React.useContext(CheckboxGroupContext);
+  if (!context) {
+    throw new Error("CheckboxGroupItem must be used within a CheckboxGroup");
+  }
+  return context;
+}
+function useCheckboxGroupValue(value, defaultValue, onValueChange) {
+  const [internalValue, setInternalValue] = React.useState(defaultValue);
+  const values = value ?? internalValue;
+  const toggle = React.useCallback(
+    (item) => {
+      const nextValues = values.includes(item) ? values.filter((entry) => entry !== item) : [...values, item];
+      if (value === void 0) {
+        setInternalValue(nextValues);
+      }
+      onValueChange?.(nextValues);
+    },
+    [onValueChange, value, values]
+  );
+  return { toggle, values };
+}
+const CheckboxGroup = React.forwardRef(
+  ({
+    children,
+    className,
+    defaultValue = [],
+    disabled = false,
+    name,
+    onValueChange,
+    orientation = "vertical",
+    value
+  }, ref) => {
+    const { toggle, values } = useCheckboxGroupValue(
+      value,
+      defaultValue,
+      onValueChange
+    );
+    const context = React.useMemo(
+      () => ({ disabled, name, toggle, values }),
+      [disabled, name, toggle, values]
+    );
+    return /* @__PURE__ */ jsx(CheckboxGroupContext.Provider, { value: context, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "flex gap-3",
+          orientation === "vertical" ? "flex-col" : "flex-row flex-wrap",
+          className
+        ),
+        ref,
+        role: "group",
+        children
+      }
+    ) });
+  }
+);
+CheckboxGroup.displayName = "CheckboxGroup";
+const CheckboxGroupItem = React.forwardRef(({ children, className, disabled = false, id, value }, ref) => {
+  const generatedId = React.useId();
+  const itemId = id ?? generatedId;
+  const group = useCheckboxGroupContext();
+  const checked = group.values.includes(value);
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2", className), ref, children: [
+    /* @__PURE__ */ jsx(
+      Checkbox,
+      {
+        checked,
+        disabled: disabled || group.disabled,
+        id: itemId,
+        name: group.name,
+        onCheckedChange: () => {
+          group.toggle(value);
+        },
+        value
+      }
+    ),
+    children ? /* @__PURE__ */ jsx(Label, { htmlFor: itemId, children }) : null
+  ] });
+});
+CheckboxGroupItem.displayName = "CheckboxGroupItem";
+export {
+  CheckboxGroup,
+  CheckboxGroupItem
+};

package/dist/components/checkbox-group/index.js

@@ -0,0 +1,8 @@
+import {
+  CheckboxGroup,
+  CheckboxGroupItem
+} from "./checkbox-group";
+export {
+  CheckboxGroup,
+  CheckboxGroupItem
+};

package/dist/components/checklist/checklist.js

@@ -2,6 +2,32 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { cn } from "../../lib/utils";
+const CHECKLIST_PROGRESS_EVENT = "vllnt:checklist-progress-change";
+const CHECKLIST_STORAGE_VERSION = 1;
+function stringItemsFromUnknown(value) {
+  return Array.isArray(value) ? value.filter((item) => typeof item === "string") : [];
+}
+function parseChecklistStorageValue(saved) {
+  try {
+    const parsed = JSON.parse(saved);
+    if (Array.isArray(parsed)) {
+      return stringItemsFromUnknown(parsed);
+    }
+    if (typeof parsed === "object" && parsed !== null && "version" in parsed && "checked" in parsed && parsed.version === CHECKLIST_STORAGE_VERSION) {
+      return stringItemsFromUnknown(parsed.checked);
+    }
+  } catch {
+    return [];
+  }
+  return [];
+}
+function createChecklistStorageValue(ids) {
+  const payload = {
+    checked: [...ids],
+    version: CHECKLIST_STORAGE_VERSION
+  };
+  return JSON.stringify(payload);
+}
 function ChecklistItemRow({
   isChecked,
   item,
@@ -20,7 +46,7 @@ function ChecklistItemRow({
         isChecked ? /* @__PURE__ */ jsx(
           "svg",
           {
-            className: "h-5 w-5 text-green-500 flex-shrink-0 mt-0.5",
+            className: "size-5 text-green-500 flex-shrink-0 mt-0.5",
             fill: "none",
             stroke: "currentColor",
             viewBox: "0 0 24 24",
@@ -37,7 +63,7 @@ function ChecklistItemRow({
         ) : /* @__PURE__ */ jsx(
           "svg",
           {
-            className: "h-5 w-5 text-muted-foreground flex-shrink-0 mt-0.5",
+            className: "size-5 text-muted-foreground flex-shrink-0 mt-0.5",
             fill: "none",
             stroke: "currentColor",
             viewBox: "0 0 24 24",
@@ -66,17 +92,18 @@ function ChecklistItemRow({
 }
 function ChecklistHeader({
   checked,
+  Heading,
   progress,
   title,
   total
 }) {
   if (!title) return null;
   return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-3", children: [
-    /* @__PURE__ */ jsxs("h4", { className: "font-semibold flex items-center gap-2", children: [
+    /* @__PURE__ */ jsxs(Heading, { className: "font-semibold flex items-center gap-2", children: [
       /* @__PURE__ */ jsx(
         "svg",
         {
-          className: "h-5 w-5 text-primary",
+          className: "size-5 text-primary",
           fill: "none",
           stroke: "currentColor",
           viewBox: "0 0 24 24",
@@ -104,6 +131,7 @@ function ChecklistHeader({
   ] });
 }
 function Checklist({
+  as: Heading = "h4",
   className,
   items,
   onComplete,
@@ -114,10 +142,7 @@ function Checklist({
     if (typeof window !== "undefined" && persistKey) {
       const saved = localStorage.getItem(`checklist:${persistKey}`);
       if (saved) {
-        try {
-          return new Set(JSON.parse(saved));
-        } catch {
-        }
+        return new Set(parseChecklistStorageValue(saved));
       }
     }
     return /* @__PURE__ */ new Set();
@@ -131,7 +156,12 @@ function Checklist({
       try {
         localStorage.setItem(
           `checklist:${persistKey}`,
-          JSON.stringify([...newChecked])
+          createChecklistStorageValue(newChecked)
+        );
+        window.dispatchEvent(
+          new CustomEvent(CHECKLIST_PROGRESS_EVENT, {
+            detail: { persistKey }
+          })
         );
       } catch {
       }
@@ -147,6 +177,7 @@ function Checklist({
       ChecklistHeader,
       {
         checked: checked.size,
+        Heading,
         progress,
         title,
         total: items.length
@@ -177,5 +208,9 @@ function Checklist({
   ] });
 }
 export {
-  Checklist
+  CHECKLIST_PROGRESS_EVENT,
+  CHECKLIST_STORAGE_VERSION,
+  Checklist,
+  createChecklistStorageValue,
+  parseChecklistStorageValue
 };

package/dist/components/checklist/index.js

@@ -1,6 +1,14 @@
 import {
-  Checklist
+  Checklist,
+  CHECKLIST_PROGRESS_EVENT,
+  CHECKLIST_STORAGE_VERSION,
+  createChecklistStorageValue,
+  parseChecklistStorageValue
 } from "./checklist";
 export {
-  Checklist
+  CHECKLIST_PROGRESS_EVENT,
+  CHECKLIST_STORAGE_VERSION,
+  Checklist,
+  createChecklistStorageValue,
+  parseChecklistStorageValue
 };