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

package/dist/components/prompt-templates/prompt-templates.js

@@ -0,0 +1,403 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef,
+  useCallback,
+  useId,
+  useMemo,
+  useState
+} from "react";
+import { Search, Sparkles } from "lucide-react";
+import { cn } from "../../lib/utils";
+import { Badge } from "../badge/badge";
+import { Button } from "../button/button";
+import { Input } from "../input/input";
+const VARIABLE_PATTERN = /{{\s*([\w-]+)\s*}}/g;
+const ALL_CATEGORY_VALUE = "__all__";
+const DEFAULT_LABELS = {
+  allCategory: "All",
+  cancel: "Cancel",
+  empty: "No prompts found.",
+  insert: "Insert",
+  searchPlaceholder: "Search prompts\u2026",
+  use: "Use template",
+  variablesHeading: "Fill in the placeholders"
+};
+function detectVariables(template) {
+  if (template.variables) return template.variables;
+  const matches = [...template.template.matchAll(VARIABLE_PATTERN)];
+  const seen = /* @__PURE__ */ new Set();
+  return matches.reduce((accumulator, match) => {
+    const name = match[1];
+    if (name && !seen.has(name)) {
+      seen.add(name);
+      accumulator.push(name);
+    }
+    return accumulator;
+  }, []);
+}
+function fillTemplate(template, values) {
+  return template.replaceAll(
+    VARIABLE_PATTERN,
+    (_match, name) => values[name] ?? `{{${name}}}`
+  );
+}
+function matchesCategory(template, selected) {
+  if (selected === ALL_CATEGORY_VALUE) return true;
+  return template.category === selected;
+}
+function matchesQuery(template, query) {
+  if (!query) return true;
+  const lowered = query.toLowerCase();
+  const title = typeof template.title === "string" ? template.title.toLowerCase() : "";
+  const description = typeof template.description === "string" ? template.description.toLowerCase() : "";
+  return title.includes(lowered) || description.includes(lowered);
+}
+function FilterBar({
+  categories,
+  labels,
+  onCategoryChange,
+  onQueryChange,
+  query,
+  searchId,
+  selectedCategory
+}) {
+  const handleSearch = (event) => {
+    onQueryChange(event.target.value);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx(
+        Search,
+        {
+          "aria-hidden": "true",
+          className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          "aria-label": labels.searchPlaceholder,
+          className: "pl-9",
+          id: searchId,
+          onChange: handleSearch,
+          placeholder: labels.searchPlaceholder,
+          type: "search",
+          value: query
+        }
+      )
+    ] }),
+    categories.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-1.5", role: "tablist", children: [
+      /* @__PURE__ */ jsx(
+        CategoryChip,
+        {
+          active: selectedCategory === ALL_CATEGORY_VALUE,
+          label: labels.allCategory,
+          onClick: () => {
+            onCategoryChange(ALL_CATEGORY_VALUE);
+          },
+          value: ALL_CATEGORY_VALUE
+        }
+      ),
+      categories.map((category) => /* @__PURE__ */ jsx(
+        CategoryChip,
+        {
+          active: selectedCategory === category.name,
+          icon: category.icon,
+          label: category.name,
+          onClick: () => {
+            onCategoryChange(category.name);
+          },
+          value: category.name
+        },
+        category.name
+      ))
+    ] }) : null
+  ] });
+}
+function CategoryChip({
+  active,
+  icon,
+  label,
+  onClick,
+  value
+}) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      "aria-selected": active,
+      className: cn(
+        "inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+        active ? "border-primary bg-primary text-primary-foreground" : "border-border bg-background text-foreground hover:bg-accent"
+      ),
+      "data-value": value,
+      onClick,
+      role: "tab",
+      type: "button",
+      children: [
+        icon ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "[&>svg]:h-3.5 [&>svg]:w-3.5", children: icon }) : null,
+        label
+      ]
+    }
+  );
+}
+function CardHeader({
+  category,
+  description,
+  title
+}) {
+  return /* @__PURE__ */ jsxs("header", { className: "flex flex-col gap-1", children: [
+    /* @__PURE__ */ jsx("h4", { className: "text-sm font-semibold tracking-tight text-foreground", children: title }),
+    description ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: description }) : null,
+    category ? /* @__PURE__ */ jsx(Badge, { className: "self-start", variant: "outline", children: category }) : null
+  ] });
+}
+function CardActions({
+  onUse,
+  useLabel,
+  variableCount
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+    variableCount > 0 ? /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
+      variableCount.toString(),
+      " variable",
+      variableCount === 1 ? "" : "s"
+    ] }) : /* @__PURE__ */ jsx("span", { "aria-hidden": "true" }),
+    /* @__PURE__ */ jsxs(
+      Button,
+      {
+        onClick: onUse,
+        size: "sm",
+        type: "button",
+        variant: variableCount > 0 ? "outline" : "default",
+        children: [
+          /* @__PURE__ */ jsx(Sparkles, { "aria-hidden": "true", className: "mr-2 h-3.5 w-3.5" }),
+          useLabel
+        ]
+      }
+    )
+  ] });
+}
+function PromptTemplateCard({
+  active,
+  labels,
+  onActivate,
+  onCancel,
+  onResolve,
+  onValueChange,
+  template,
+  values
+}) {
+  const variables = detectVariables(template);
+  const handleUse = useCallback(() => {
+    if (variables.length === 0) {
+      onResolve(template.template, template);
+      return;
+    }
+    if (active) {
+      onResolve(fillTemplate(template.template, values), template);
+      return;
+    }
+    onActivate(template);
+  }, [active, onActivate, onResolve, template, values, variables.length]);
+  return /* @__PURE__ */ jsxs(
+    "article",
+    {
+      className: "flex flex-col gap-3 rounded-xl border border-border bg-background p-4 shadow-sm",
+      "data-template-id": template.id,
+      children: [
+        /* @__PURE__ */ jsx(
+          CardHeader,
+          {
+            category: template.category,
+            description: template.description,
+            title: template.title
+          }
+        ),
+        active && variables.length > 0 ? /* @__PURE__ */ jsx(
+          VariableForm,
+          {
+            fieldIdPrefix: template.id,
+            labels,
+            onCancel,
+            onSubmit: handleUse,
+            onValueChange,
+            values,
+            variables
+          }
+        ) : /* @__PURE__ */ jsx(
+          CardActions,
+          {
+            onUse: handleUse,
+            useLabel: labels.use,
+            variableCount: variables.length
+          }
+        )
+      ]
+    }
+  );
+}
+function VariableField({
+  fieldId,
+  name,
+  onValueChange,
+  value
+}) {
+  const handleChange = useCallback(
+    (event) => {
+      onValueChange(name, event.target.value);
+    },
+    [name, onValueChange]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1 text-xs", children: [
+    /* @__PURE__ */ jsx("label", { className: "font-medium text-foreground", htmlFor: fieldId, children: name }),
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        id: fieldId,
+        onChange: handleChange,
+        placeholder: `Value for ${name}`,
+        value
+      }
+    )
+  ] });
+}
+function VariableForm({
+  fieldIdPrefix,
+  labels,
+  onCancel,
+  onSubmit,
+  onValueChange,
+  values,
+  variables
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 rounded-lg border border-dashed border-border bg-muted/30 p-3", children: [
+    /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: labels.variablesHeading }),
+    /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: variables.map((name) => /* @__PURE__ */ jsx(
+      VariableField,
+      {
+        fieldId: `${fieldIdPrefix}-${name}`,
+        name,
+        onValueChange,
+        value: values[name] ?? ""
+      },
+      name
+    )) }),
+    /* @__PURE__ */ jsxs("div", { className: "mt-1 flex justify-end gap-2", children: [
+      /* @__PURE__ */ jsx(Button, { onClick: onCancel, size: "sm", type: "button", variant: "ghost", children: labels.cancel }),
+      /* @__PURE__ */ jsx(Button, { onClick: onSubmit, size: "sm", type: "button", children: labels.insert })
+    ] })
+  ] });
+}
+function usePromptTemplatesController(templates, onSelect) {
+  const searchId = useId();
+  const [query, setQuery] = useState("");
+  const [selectedCategory, setSelectedCategory] = useState(ALL_CATEGORY_VALUE);
+  const [activeId, setActiveId] = useState(null);
+  const [values, setValues] = useState({});
+  const filtered = useMemo(
+    () => templates.filter(
+      (template) => matchesCategory(template, selectedCategory) && matchesQuery(template, query)
+    ),
+    [query, selectedCategory, templates]
+  );
+  const handleActivate = useCallback((template) => {
+    setActiveId(template.id);
+    setValues({});
+  }, []);
+  const handleCancel = useCallback(() => {
+    setActiveId(null);
+    setValues({});
+  }, []);
+  const handleResolve = useCallback(
+    (resolved, template) => {
+      onSelect?.(resolved, template);
+      setActiveId(null);
+      setValues({});
+    },
+    [onSelect]
+  );
+  const handleValueChange = useCallback((name, value) => {
+    setValues((current) => ({ ...current, [name]: value }));
+  }, []);
+  return {
+    activeId,
+    filtered,
+    handleActivate,
+    handleCancel,
+    handleCategoryChange: setSelectedCategory,
+    handleQueryChange: setQuery,
+    handleResolve,
+    handleValueChange,
+    query,
+    searchId,
+    selectedCategory,
+    values
+  };
+}
+function TemplateGrid({ controller, labels }) {
+  if (controller.filtered.length === 0) {
+    return /* @__PURE__ */ jsx("p", { className: "rounded-lg border border-dashed border-border p-6 text-center text-sm text-muted-foreground", children: labels.empty });
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "grid grid-cols-1 gap-3 md:grid-cols-2 xl:grid-cols-3",
+      role: "tabpanel",
+      children: controller.filtered.map((template) => /* @__PURE__ */ jsx(
+        PromptTemplateCard,
+        {
+          active: controller.activeId === template.id,
+          labels,
+          onActivate: controller.handleActivate,
+          onCancel: controller.handleCancel,
+          onResolve: controller.handleResolve,
+          onValueChange: controller.handleValueChange,
+          template,
+          values: controller.values
+        },
+        template.id
+      ))
+    }
+  );
+}
+const PromptTemplates = forwardRef(
+  (props, ref) => {
+    const { categories, className, labels, onSelect, templates, ...rest } = props;
+    const resolvedLabels = useMemo(
+      () => ({ ...DEFAULT_LABELS, ...labels }),
+      [labels]
+    );
+    const controller = usePromptTemplatesController(templates, onSelect);
+    return /* @__PURE__ */ jsxs(
+      "section",
+      {
+        className: cn(
+          "flex flex-col gap-4 rounded-2xl border bg-background p-4",
+          className
+        ),
+        ref,
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx(
+            FilterBar,
+            {
+              categories: categories ?? [],
+              labels: resolvedLabels,
+              onCategoryChange: controller.handleCategoryChange,
+              onQueryChange: controller.handleQueryChange,
+              query: controller.query,
+              searchId: controller.searchId,
+              selectedCategory: controller.selectedCategory
+            }
+          ),
+          /* @__PURE__ */ jsx(TemplateGrid, { controller, labels: resolvedLabels })
+        ]
+      }
+    );
+  }
+);
+PromptTemplates.displayName = "PromptTemplates";
+export {
+  PromptTemplates
+};

package/dist/components/property-section/index.js

@@ -0,0 +1,6 @@
+import {
+  PropertySection
+} from "./property-section";
+export {
+  PropertySection
+};

package/dist/components/property-section/property-section.js

@@ -0,0 +1,101 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef
+} from "react";
+import { cn } from "../../lib/utils";
+const DEFAULT_LABELS = {
+  region: "Properties"
+};
+const Grid = (props) => /* @__PURE__ */ jsx(
+  "dl",
+  {
+    className: "grid grid-cols-[max-content_1fr] gap-x-4 gap-y-1.5 px-3 pb-3 pt-1 text-xs",
+    "data-property-grid": true,
+    children: props.entries.map((entry) => /* @__PURE__ */ jsxs("div", { className: "contents", children: [
+      /* @__PURE__ */ jsxs(
+        "dt",
+        {
+          className: "flex flex-col text-muted-foreground",
+          "data-property-id": entry.id,
+          children: [
+            /* @__PURE__ */ jsx("span", { children: entry.label }),
+            entry.sublabel ? /* @__PURE__ */ jsx("span", { className: "text-[10px] uppercase tracking-wide text-muted-foreground/70", children: entry.sublabel }) : null
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx("dd", { className: "text-right text-foreground", children: entry.value })
+    ] }, entry.id))
+  }
+);
+const Body = (props) => {
+  const grid = /* @__PURE__ */ jsx(Grid, { entries: props.entries });
+  if (!props.title) {
+    return grid;
+  }
+  if (props.collapsible) {
+    return /* @__PURE__ */ jsxs("details", { className: "group", open: true, children: [
+      /* @__PURE__ */ jsxs(
+        "summary",
+        {
+          className: "flex cursor-pointer items-center justify-between gap-2 px-3 py-2 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground",
+          "data-property-summary": true,
+          children: [
+            /* @__PURE__ */ jsx("span", { children: props.title }),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                "aria-hidden": "true",
+                className: "text-muted-foreground/70 group-open:rotate-90",
+                children: "\u203A"
+              }
+            )
+          ]
+        }
+      ),
+      grid
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "header",
+      {
+        className: "flex items-center justify-between gap-2 border-b border-border px-3 py-2 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground",
+        "data-property-header": true,
+        children: props.title
+      }
+    ),
+    grid
+  ] });
+};
+const PropertySection = forwardRef(
+  (props, ref) => {
+    const {
+      className,
+      collapsible = false,
+      entries,
+      labels,
+      title,
+      ...rest
+    } = props;
+    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+    return /* @__PURE__ */ jsx(
+      "section",
+      {
+        "aria-label": resolvedLabels.region,
+        className: cn(
+          "rounded-lg border bg-background text-foreground",
+          className
+        ),
+        "data-property-section": true,
+        ref,
+        ...rest,
+        children: /* @__PURE__ */ jsx(Body, { collapsible, entries, title })
+      }
+    );
+  }
+);
+PropertySection.displayName = "PropertySection";
+export {
+  PropertySection
+};

package/dist/components/relationship-inspector/index.js

@@ -0,0 +1,6 @@
+import {
+  RelationshipInspector
+} from "./relationship-inspector";
+export {
+  RelationshipInspector
+};

package/dist/components/relationship-inspector/relationship-inspector.js

@@ -0,0 +1,102 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef
+} from "react";
+import { cn } from "../../lib/utils";
+const DEFAULT_LABELS = {
+  empty: "No relationships",
+  inbound: "Inbound",
+  outbound: "Outbound",
+  region: "Relationship inspector"
+};
+const ARROW_GLYPH = {
+  inbound: "\u2190",
+  outbound: "\u2192"
+};
+const RowBody = (props) => {
+  const { edge } = props;
+  return /* @__PURE__ */ jsxs("span", { className: "flex flex-1 items-center gap-2", children: [
+    /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-muted-foreground", children: ARROW_GLYPH[edge.direction] }),
+    /* @__PURE__ */ jsxs("span", { className: "flex flex-1 flex-col text-left", children: [
+      /* @__PURE__ */ jsx("span", { className: "truncate text-xs text-foreground", children: edge.target }),
+      edge.targetSublabel ? /* @__PURE__ */ jsx("span", { className: "truncate text-[10px] text-muted-foreground", children: edge.targetSublabel }) : null
+    ] }),
+    /* @__PURE__ */ jsx("span", { className: "rounded-full border border-border bg-background px-1.5 py-0.5 text-[10px] uppercase tracking-wide text-muted-foreground", children: edge.relation })
+  ] });
+};
+const Row = (props) => {
+  const { edge } = props;
+  if (edge.onActivate) {
+    const handleClick = () => {
+      edge.onActivate?.();
+    };
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: "flex w-full items-center gap-2 rounded-md border border-transparent px-2 py-1.5 text-left transition-colors hover:border-border hover:bg-muted/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        "data-relationship-direction": edge.direction,
+        "data-relationship-row": true,
+        onClick: handleClick,
+        type: "button",
+        children: /* @__PURE__ */ jsx(RowBody, { edge })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "flex w-full items-center gap-2 rounded-md px-2 py-1.5",
+      "data-relationship-direction": edge.direction,
+      "data-relationship-row": true,
+      children: /* @__PURE__ */ jsx(RowBody, { edge })
+    }
+  );
+};
+const Group = (props) => {
+  const { edges, heading } = props;
+  if (edges.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-1", "data-relationship-group": heading.toLowerCase(), children: [
+    /* @__PURE__ */ jsx("h4", { className: "px-2 text-[10px] font-medium uppercase tracking-wide text-muted-foreground", children: heading }),
+    /* @__PURE__ */ jsx("ul", { className: "space-y-0.5", children: edges.map((edge) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Row, { edge }) }, edge.id)) })
+  ] });
+};
+const RelationshipInspector = forwardRef((props, ref) => {
+  const { className, edges, labels, title = "Relationships", ...rest } = props;
+  const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+  const inbound = edges.filter((edge) => edge.direction === "inbound");
+  const outbound = edges.filter((edge) => edge.direction === "outbound");
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      "aria-label": resolvedLabels.region,
+      className: cn(
+        "flex w-full flex-col gap-2 rounded-lg border bg-background p-3 text-foreground",
+        className
+      ),
+      "data-relationship-inspector": true,
+      ref,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx("header", { children: /* @__PURE__ */ jsx("h3", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: title }) }),
+        edges.length === 0 ? /* @__PURE__ */ jsx(
+          "p",
+          {
+            className: "px-2 py-3 text-center text-xs text-muted-foreground",
+            "data-relationship-state": "empty",
+            children: resolvedLabels.empty
+          }
+        ) : /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx(Group, { edges: inbound, heading: resolvedLabels.inbound }),
+          /* @__PURE__ */ jsx(Group, { edges: outbound, heading: resolvedLabels.outbound })
+        ] })
+      ]
+    }
+  );
+});
+RelationshipInspector.displayName = "RelationshipInspector";
+export {
+  RelationshipInspector
+};

package/dist/components/right-dock/index.js

@@ -0,0 +1,4 @@
+import { RightDock } from "./right-dock";
+export {
+  RightDock
+};

package/dist/components/right-dock/right-dock.js

@@ -0,0 +1,28 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../lib/utils";
+const RightDock = forwardRef(
+  ({ children, className, footer, header, title, ...props }, ref) => /* @__PURE__ */ jsxs(
+    "aside",
+    {
+      className: cn(
+        "flex h-full min-w-[18rem] max-w-[24rem] shrink-0 flex-col border-l border-border bg-background",
+        className
+      ),
+      ref,
+      ...props,
+      children: [
+        header || title ? /* @__PURE__ */ jsxs("div", { className: "border-b border-border/60 px-4 py-3", children: [
+          title ? /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-foreground", children: title }) : null,
+          header ? /* @__PURE__ */ jsx("div", { className: "mt-2", children: header }) : null
+        ] }) : null,
+        /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-auto p-4", children }),
+        footer ? /* @__PURE__ */ jsx("div", { className: "border-t border-border/60 p-4", children: footer }) : null
+      ]
+    }
+  )
+);
+RightDock.displayName = "RightDock";
+export {
+  RightDock
+};

package/dist/components/route-map/index.js

@@ -0,0 +1,6 @@
+import {
+  RouteMap
+} from "./route-map";
+export {
+  RouteMap
+};