@sero-ai/ui 0.3.2 → 0.4.1

package/dist/components/context-editor/use-context-editor-model.js

@@ -0,0 +1,194 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+const NONE_PRESET = {
+  id: "__none__",
+  name: "None",
+  systemPrompt: "",
+  disabledTools: ["__all__"],
+  disabledSkills: ["__all__"]
+};
+const DEFAULT_PRESET = {
+  id: "__default__",
+  name: "Default",
+  systemPrompt: null,
+  disabledTools: [],
+  disabledSkills: []
+};
+const BUILTIN_PRESETS = [DEFAULT_PRESET, NONE_PRESET];
+function normalizeDisabledNames(names, availableNames) {
+  const allowed = new Set(availableNames);
+  return new Set((names ?? []).filter((name) => allowed.has(name)));
+}
+function appliedSystemPrompt(overrides) {
+  if (!overrides || !Object.prototype.hasOwnProperty.call(overrides, "systemPrompt")) return null;
+  return typeof overrides.systemPrompt === "string" ? overrides.systemPrompt : null;
+}
+function enabledCount(items, disabled, allDisabled) {
+  if (allDisabled) return 0;
+  return items.filter((item) => !disabled.has(item.name)).length;
+}
+function useContextEditorModel({
+  open,
+  available,
+  initialOverrides,
+  presets,
+  onSavePreset,
+  onDeletePreset
+}) {
+  const [systemPrompt, setSystemPromptState] = useState(null);
+  const [disabledTools, setDisabledTools] = useState(/* @__PURE__ */ new Set());
+  const [disabledSkills, setDisabledSkills] = useState(/* @__PURE__ */ new Set());
+  const [allToolsDisabled, setAllToolsDisabled] = useState(false);
+  const [allSkillsDisabled, setAllSkillsDisabled] = useState(false);
+  const [activePresetId, setActivePresetId] = useState("__default__");
+  const [showSaveInput, setShowSaveInput] = useState(false);
+  const tools = available?.tools ?? [];
+  const skills = available?.skills ?? [];
+  const seededRef = useRef(false);
+  useEffect(() => {
+    if (!open) {
+      seededRef.current = false;
+      return;
+    }
+    if (seededRef.current || !available) return;
+    seededRef.current = true;
+    const seedDisabledTools = normalizeDisabledNames(
+      initialOverrides?.disabledTools,
+      available.tools.map((t) => t.name)
+    );
+    const seedDisabledSkills = normalizeDisabledNames(
+      initialOverrides?.disabledSkills,
+      available.skills.map((s) => s.name)
+    );
+    const allTools = available.tools.length > 0 && seedDisabledTools.size >= available.tools.length;
+    const allSkills = available.skills.length > 0 && seedDisabledSkills.size >= available.skills.length;
+    setSystemPromptState(appliedSystemPrompt(initialOverrides));
+    setDisabledTools(allTools ? /* @__PURE__ */ new Set() : seedDisabledTools);
+    setDisabledSkills(allSkills ? /* @__PURE__ */ new Set() : seedDisabledSkills);
+    setAllToolsDisabled(allTools);
+    setAllSkillsDisabled(allSkills);
+    setActivePresetId(initialOverrides ? null : "__default__");
+    setShowSaveInput(false);
+  }, [open, available, initialOverrides]);
+  const setSystemPrompt = useCallback((value) => {
+    setSystemPromptState(value);
+    setActivePresetId(null);
+  }, []);
+  const toggleCapability = useCallback(
+    (name, items, disabled, allDisabled, setDisabled, setAll) => {
+      let next;
+      if (allDisabled) {
+        next = new Set(items.map((i) => i.name));
+        next.delete(name);
+      } else {
+        next = new Set(disabled);
+        if (next.has(name)) next.delete(name);
+        else next.add(name);
+      }
+      const total = items.length;
+      const allNowDisabled = total > 0 && next.size >= total;
+      setDisabled(allNowDisabled ? /* @__PURE__ */ new Set() : next);
+      setAll(allNowDisabled);
+      setActivePresetId(null);
+    },
+    []
+  );
+  const loadPreset = useCallback(
+    (presetId) => {
+      const all = [...BUILTIN_PRESETS, ...presets];
+      const preset = all.find((p) => p.id === presetId);
+      if (!preset) return;
+      const allTools = preset.disabledTools.includes("__all__");
+      const allSkills = preset.disabledSkills.includes("__all__");
+      setSystemPromptState(preset.systemPrompt);
+      setDisabledTools(new Set(allTools ? [] : preset.disabledTools));
+      setDisabledSkills(new Set(allSkills ? [] : preset.disabledSkills));
+      setAllToolsDisabled(allTools);
+      setAllSkillsDisabled(allSkills);
+      setActivePresetId(presetId);
+    },
+    [presets]
+  );
+  const resetToDefault = useCallback(() => {
+    setSystemPromptState(null);
+    setDisabledTools(/* @__PURE__ */ new Set());
+    setDisabledSkills(/* @__PURE__ */ new Set());
+    setAllToolsDisabled(false);
+    setAllSkillsDisabled(false);
+    setActivePresetId("__default__");
+    setShowSaveInput(false);
+  }, []);
+  const buildOverrides = useCallback(() => {
+    const toolsToDisable = allToolsDisabled ? tools.map((t) => t.name) : Array.from(disabledTools);
+    const skillsToDisable = allSkillsDisabled ? skills.map((s) => s.name) : Array.from(disabledSkills);
+    const has = systemPrompt !== null || toolsToDisable.length > 0 || skillsToDisable.length > 0;
+    if (!has) return null;
+    return {
+      systemPrompt: systemPrompt ?? void 0,
+      disabledTools: toolsToDisable.length > 0 ? toolsToDisable : void 0,
+      disabledSkills: skillsToDisable.length > 0 ? skillsToDisable : void 0
+    };
+  }, [allToolsDisabled, allSkillsDisabled, tools, skills, disabledTools, disabledSkills, systemPrompt]);
+  const handleSavePreset = useCallback(
+    (name) => {
+      onSavePreset(name, {
+        systemPrompt,
+        disabledTools: allToolsDisabled ? ["__all__"] : Array.from(disabledTools),
+        disabledSkills: allSkillsDisabled ? ["__all__"] : Array.from(disabledSkills)
+      });
+      setShowSaveInput(false);
+    },
+    [onSavePreset, systemPrompt, allToolsDisabled, disabledTools, allSkillsDisabled, disabledSkills]
+  );
+  const allPresets = useMemo(() => [...BUILTIN_PRESETS, ...presets], [presets]);
+  const activeUserPreset = useMemo(
+    () => activePresetId && !activePresetId.startsWith("__") ? allPresets.find((p) => p.id === activePresetId) ?? null : null,
+    [activePresetId, allPresets]
+  );
+  const hasOverrides = systemPrompt !== null || disabledTools.size > 0 || disabledSkills.size > 0 || allToolsDisabled || allSkillsDisabled;
+  return {
+    displayedPrompt: systemPrompt ?? available?.systemPrompt ?? "",
+    systemPrompt,
+    setSystemPrompt,
+    preset: {
+      allPresets,
+      activePresetId,
+      activeUserPreset,
+      hasOverrides,
+      showSaveInput,
+      onPresetChange: loadPreset,
+      onDelete: onDeletePreset,
+      onReset: resetToDefault,
+      onShowSave: () => setShowSaveInput(true),
+      onSave: handleSavePreset,
+      onCancelSave: () => setShowSaveInput(false)
+    },
+    tools: {
+      items: tools,
+      allDisabled: allToolsDisabled,
+      enabledCount: enabledCount(tools, disabledTools, allToolsDisabled),
+      isEnabled: (name) => !allToolsDisabled && !disabledTools.has(name),
+      onToggle: (name) => toggleCapability(name, tools, disabledTools, allToolsDisabled, setDisabledTools, setAllToolsDisabled),
+      onToggleAll: (disabled) => {
+        setAllToolsDisabled(disabled);
+        setDisabledTools(/* @__PURE__ */ new Set());
+        setActivePresetId(null);
+      }
+    },
+    skills: {
+      items: skills,
+      allDisabled: allSkillsDisabled,
+      enabledCount: enabledCount(skills, disabledSkills, allSkillsDisabled),
+      isEnabled: (name) => !allSkillsDisabled && !disabledSkills.has(name),
+      onToggle: (name) => toggleCapability(name, skills, disabledSkills, allSkillsDisabled, setDisabledSkills, setAllSkillsDisabled),
+      onToggleAll: (disabled) => {
+        setAllSkillsDisabled(disabled);
+        setDisabledSkills(/* @__PURE__ */ new Set());
+        setActivePresetId(null);
+      }
+    },
+    buildOverrides
+  };
+}
+export {
+  useContextEditorModel
+};

package/dist/components/dashboard/activity-list.cjs

@@ -0,0 +1,59 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});var _jsxruntime = require('react/jsx-runtime');
+var _utils = require('../../lib/utils');
+var _typography = require('./typography');
+var _tone = require('./tone');
+function ActivityListItem({
+  className,
+  label,
+  timestamp,
+  detail,
+  tone = "neutral",
+  icon,
+  ...props
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "li",
+    {
+      "data-slot": "activity-list-item",
+      className: _utils.cn.call(void 0, "flex items-start gap-2 py-1", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "mt-1 flex size-3.5 shrink-0 items-center justify-center", children: icon ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _typography.Icon, { icon, size: "xs", tone: tone === "neutral" ? void 0 : tone }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: _utils.cn.call(void 0, "size-2 rounded-full", _tone.toneDot[tone]) }) }),
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-baseline justify-between gap-2", children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "truncate text-xs text-[var(--text-primary)]", children: label }),
+            timestamp && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "shrink-0 text-[11px] tabular-nums text-[var(--text-muted)]", children: timestamp })
+          ] }),
+          detail && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "line-clamp-1 text-xs text-[var(--text-muted)]", children: detail })
+        ] })
+      ]
+    }
+  );
+}
+function ActivityList({
+  className,
+  overflowCount = 0,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "ul",
+    {
+      "data-slot": "activity-list",
+      className: _utils.cn.call(void 0, "flex min-w-0 flex-col", className),
+      ...props,
+      children: [
+        children,
+        overflowCount > 0 && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "li", { className: "pl-5 pt-0.5 text-[11px] text-[var(--text-muted)]", children: [
+          "+",
+          overflowCount,
+          " more"
+        ] })
+      ]
+    }
+  );
+}
+
+
+
+exports.ActivityList = ActivityList; exports.ActivityListItem = ActivityListItem;

package/dist/components/dashboard/activity-list.d.cts

@@ -0,0 +1,27 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { Tone } from './tone.cjs';
+
+interface ActivityListItemProps extends Omit<React.ComponentProps<"li">, "title"> {
+    label: React.ReactNode;
+    /** Pre-formatted timestamp, e.g. "08:00" or "in 2h". */
+    timestamp?: React.ReactNode;
+    /** Supporting detail under the label. */
+    detail?: React.ReactNode;
+    /** Status marker tone. Ignored when `icon` is provided. */
+    tone?: Tone;
+    /** Leading icon component, used instead of the status dot. */
+    icon?: React.ComponentType<{
+        className?: string;
+    }>;
+}
+/** A single chronological event row. */
+declare function ActivityListItem({ className, label, timestamp, detail, tone, icon, ...props }: ActivityListItemProps): react_jsx_runtime.JSX.Element;
+interface ActivityListProps extends React.ComponentProps<"ul"> {
+    /** Count of events not shown; renders a "+N more" footer when > 0. */
+    overflowCount?: number;
+}
+/** A chronological list of ActivityListItem rows. */
+declare function ActivityList({ className, overflowCount, children, ...props }: ActivityListProps): react_jsx_runtime.JSX.Element;
+
+export { ActivityList, ActivityListItem, type ActivityListItemProps, type ActivityListProps };

package/dist/components/dashboard/activity-list.d.ts

@@ -0,0 +1,27 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { Tone } from './tone.js';
+
+interface ActivityListItemProps extends Omit<React.ComponentProps<"li">, "title"> {
+    label: React.ReactNode;
+    /** Pre-formatted timestamp, e.g. "08:00" or "in 2h". */
+    timestamp?: React.ReactNode;
+    /** Supporting detail under the label. */
+    detail?: React.ReactNode;
+    /** Status marker tone. Ignored when `icon` is provided. */
+    tone?: Tone;
+    /** Leading icon component, used instead of the status dot. */
+    icon?: React.ComponentType<{
+        className?: string;
+    }>;
+}
+/** A single chronological event row. */
+declare function ActivityListItem({ className, label, timestamp, detail, tone, icon, ...props }: ActivityListItemProps): react_jsx_runtime.JSX.Element;
+interface ActivityListProps extends React.ComponentProps<"ul"> {
+    /** Count of events not shown; renders a "+N more" footer when > 0. */
+    overflowCount?: number;
+}
+/** A chronological list of ActivityListItem rows. */
+declare function ActivityList({ className, overflowCount, children, ...props }: ActivityListProps): react_jsx_runtime.JSX.Element;
+
+export { ActivityList, ActivityListItem, type ActivityListItemProps, type ActivityListProps };

package/dist/components/dashboard/activity-list.js

@@ -0,0 +1,59 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/utils";
+import { Icon } from "./typography";
+import { toneDot } from "./tone";
+function ActivityListItem({
+  className,
+  label,
+  timestamp,
+  detail,
+  tone = "neutral",
+  icon,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "li",
+    {
+      "data-slot": "activity-list-item",
+      className: cn("flex items-start gap-2 py-1", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "mt-1 flex size-3.5 shrink-0 items-center justify-center", children: icon ? /* @__PURE__ */ jsx(Icon, { icon, size: "xs", tone: tone === "neutral" ? void 0 : tone }) : /* @__PURE__ */ jsx("span", { className: cn("size-2 rounded-full", toneDot[tone]) }) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between gap-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "truncate text-xs text-[var(--text-primary)]", children: label }),
+            timestamp && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[11px] tabular-nums text-[var(--text-muted)]", children: timestamp })
+          ] }),
+          detail && /* @__PURE__ */ jsx("span", { className: "line-clamp-1 text-xs text-[var(--text-muted)]", children: detail })
+        ] })
+      ]
+    }
+  );
+}
+function ActivityList({
+  className,
+  overflowCount = 0,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "ul",
+    {
+      "data-slot": "activity-list",
+      className: cn("flex min-w-0 flex-col", className),
+      ...props,
+      children: [
+        children,
+        overflowCount > 0 && /* @__PURE__ */ jsxs("li", { className: "pl-5 pt-0.5 text-[11px] text-[var(--text-muted)]", children: [
+          "+",
+          overflowCount,
+          " more"
+        ] })
+      ]
+    }
+  );
+}
+export {
+  ActivityList,
+  ActivityListItem
+};

package/dist/components/dashboard/catalog.cjs

@@ -0,0 +1 @@
+"use strict";

package/dist/components/dashboard/catalog.d.cts

@@ -0,0 +1,13 @@
+interface DashboardComponentCatalogEntry {
+    name: string;
+    category: "layout" | "typography" | "data-display" | "state" | "action" | "filter";
+    /** `primitive` = existing @sero-ai/ui primitive; `composite` = new dashboard component. */
+    kind: "primitive" | "composite";
+    summary: string;
+    useWhen: string;
+    related?: string[];
+    status: "stable" | "experimental";
+    example?: string;
+}
+
+export type { DashboardComponentCatalogEntry };

package/dist/components/dashboard/catalog.d.ts

@@ -0,0 +1,13 @@
+interface DashboardComponentCatalogEntry {
+    name: string;
+    category: "layout" | "typography" | "data-display" | "state" | "action" | "filter";
+    /** `primitive` = existing @sero-ai/ui primitive; `composite` = new dashboard component. */
+    kind: "primitive" | "composite";
+    summary: string;
+    useWhen: string;
+    related?: string[];
+    status: "stable" | "experimental";
+    example?: string;
+}
+
+export type { DashboardComponentCatalogEntry };