@iloveagents/foundry-web-ui 0.3.1 → 0.4.0

package/dist/lib/nav-config.js

@@ -0,0 +1,162 @@
+/**
+ * Navigation Configuration — types, default config, and lookup utility.
+ *
+ * This is the single source of truth for the sidebar and agent context projection.
+ * The sidebar and app-layout read from the nav store (nav-store.ts), which is
+ * initialized with DEFAULT_NAV_CONFIG. Dynamic items (e.g., from a database)
+ * can be merged at runtime via useNavStore.getState().addGroup().
+ */
+import { MessageSquare,
+// FileEdit,
+// FolderOpen,
+// BarChart3,
+// ClipboardList,
+// FileText,
+ } from "lucide-react";
+/** Static default config — the template ships with these pages. */
+export const DEFAULT_NAV_CONFIG = [
+    {
+        label: "Pages",
+        hideLabel: true,
+        items: [
+            {
+                to: "/",
+                label: "Chat",
+                icon: MessageSquare,
+                description: "Chat with the AI assistant",
+            },
+            // {
+            //   to: "/dashboard",
+            //   label: "Dashboard",
+            //   icon: BarChart3,
+            //   description: "Overview and analytics",
+            // },
+        ],
+    },
+    // {
+    //   label: "Demos",
+    //   description: "Demo pages for the Acme Corp engagement",
+    //   meta: {
+    //     workspaceId: "ws-acme-2026",
+    //     client: "Acme Corp",
+    //     region: "eu-west",
+    //     permissions: ["read", "write", "comment"],
+    //   },
+    //   contextInstructions:
+    //     "This is the Acme Corp demo workspace. Always address the user professionally. " +
+    //     "When referencing documents or drafts, mention they belong to the Acme Corp project.",
+    //   items: [
+    //     {
+    //       to: "/workspace",
+    //       label: "Form",
+    //       icon: ClipboardList,
+    //       description:
+    //         "Draft form with fields: title, description, category " +
+    //         "(Bug/Feature/Task/Improvement), priority (Low/Medium/High/Critical), " +
+    //         "assignee. Use ui_update_content to fill fields.",
+    //       meta: { type: "form", formId: "default" },
+    //       contextInstructions:
+    //         "Always use ui_update_content to fill all fields in a single call. " +
+    //         "Ask for confirmation before clearing the form. " +
+    //         "Suggest appropriate category and priority based on the description.",
+    //     },
+    //     {
+    //       to: "/documents",
+    //       label: "Documents",
+    //       icon: FolderOpen,
+    //       description: "Browse and manage documents",
+    //       children: [
+    //         {
+    //           to: "/documents",
+    //           label: "All Documents",
+    //           icon: FolderOpen,
+    //           description: "Browse all documents",
+    //         },
+    //         {
+    //           to: "/documents",
+    //           label: "Engineering",
+    //           icon: FileText,
+    //           description: "Engineering documents",
+    //           meta: { category: "Engineering" },
+    //         },
+    //         {
+    //           to: "/documents",
+    //           label: "Planning",
+    //           icon: FileEdit,
+    //           description: "Planning documents",
+    //           meta: { category: "Planning" },
+    //         },
+    //       ],
+    //     },
+    //   ],
+    // },
+];
+function findExactNavItem(items, path) {
+    for (const item of items) {
+        if (item.to === path) {
+            return item;
+        }
+        if (item.children) {
+            const nested = findExactNavItem(item.children, path);
+            if (nested)
+                return nested;
+        }
+    }
+    return null;
+}
+function findBestPrefixNavItem(items, path, currentBest = null) {
+    let best = currentBest;
+    for (const item of items) {
+        if (path.startsWith(item.to + "/") && item.to.length > (best?.length ?? 0)) {
+            best = { item, length: item.to.length };
+        }
+        if (item.children) {
+            best = findBestPrefixNavItem(item.children, path, best);
+        }
+    }
+    return best;
+}
+export function findNavItem(config, path) {
+    // Pass 1: exact match on items
+    for (const group of config) {
+        const base = {
+            group: group.label,
+            groupMeta: group.meta,
+            groupDescription: group.description,
+            groupInstructions: group.contextInstructions,
+        };
+        const match = findExactNavItem(group.items, path);
+        if (match) {
+            return { ...base, item: match };
+        }
+    }
+    // Pass 2: group-level `to` match (e.g. /spaces matches Workspaces group)
+    for (const group of config) {
+        if (group.to && group.to === path) {
+            return {
+                group: group.label,
+                groupMeta: group.meta,
+                groupDescription: group.description,
+                groupInstructions: group.contextInstructions,
+                item: { to: group.to, label: group.label, icon: MessageSquare },
+            };
+        }
+    }
+    // Pass 3: longest-prefix match (for dynamic/parameterized routes)
+    let best = null;
+    let bestLen = 0;
+    for (const group of config) {
+        const base = {
+            group: group.label,
+            groupMeta: group.meta,
+            groupDescription: group.description,
+            groupInstructions: group.contextInstructions,
+        };
+        const match = findBestPrefixNavItem(group.items, path);
+        if (match && match.length > bestLen) {
+            best = { ...base, item: match.item };
+            bestLen = match.length;
+        }
+    }
+    return best;
+}

package/dist/lib/nav-dnd.d.ts

@@ -0,0 +1,8 @@
+export declare function hasExternalFilesData(dataTransfer: {
+    types: ArrayLike<string>;
+    files?: {
+        length: number;
+    } | null;
+}): boolean;
+export declare function hasAnyDropTarget(isDropTarget: boolean, isFileDropTarget: boolean): boolean;
+export declare function getContainerDropZoneLabel(hasExternalFiles: boolean): string;

package/dist/lib/nav-dnd.js

@@ -0,0 +1,9 @@
+export function hasExternalFilesData(dataTransfer) {
+    return Array.from(dataTransfer.types).includes("Files") || (dataTransfer.files?.length ?? 0) > 0;
+}
+export function hasAnyDropTarget(isDropTarget, isFileDropTarget) {
+    return isDropTarget || isFileDropTarget;
+}
+export function getContainerDropZoneLabel(hasExternalFiles) {
+    return hasExternalFiles ? "Upload to root" : "Move to root";
+}

package/dist/lib/nav-store.d.ts

@@ -0,0 +1,45 @@
+/**
+ * Navigation Store — Zustand store for the live navigation config.
+ *
+ * Initialized with DEFAULT_NAV_CONFIG (static pages).
+ * Dynamic groups/items (e.g., contract workspaces from a database)
+ * can be merged at runtime via addGroup() or setConfig().
+ *
+ * The sidebar and app-layout both subscribe to this store,
+ * so changes propagate automatically.
+ */
+import { type NavGroup } from "./nav-config.js";
+/** A toggle or action rendered at the bottom of the sidebar. */
+export interface NavFooterAction {
+    id: string;
+    label: string;
+    activeLabel?: string;
+    active: boolean;
+    onToggle: () => void;
+}
+interface NavStoreState {
+    config: NavGroup[];
+    footerActions: NavFooterAction[];
+    /**
+     * True while an integrator's nav sync is loading its first batch of
+     * groups. Optional/defaulted (starts ``false``) so existing consumers
+     * that never set it are unaffected. The sidebar reads it to render
+     * skeleton rows instead of an empty list during the cold fetch —
+     * avoids the "empty sidebar for N seconds" gap on a slow nav sync.
+     */
+    navLoading: boolean;
+    /** Replace the entire config */
+    setConfig: (config: NavGroup[]) => void;
+    /** Toggle the cold-load skeleton state. */
+    setNavLoading: (loading: boolean) => void;
+    /** Add a group (replaces existing group with the same label) */
+    addGroup: (group: NavGroup) => void;
+    /** Remove a group by label */
+    removeGroup: (label: string) => void;
+    /** Register a footer toggle (replaces existing by id) */
+    setFooterAction: (action: NavFooterAction) => void;
+    /** Remove a footer action by id */
+    removeFooterAction: (id: string) => void;
+}
+export declare const useNavStore: import("zustand").UseBoundStore<import("zustand").StoreApi<NavStoreState>>;
+export {};

package/dist/lib/nav-store.js

@@ -0,0 +1,49 @@
+/**
+ * Navigation Store — Zustand store for the live navigation config.
+ *
+ * Initialized with DEFAULT_NAV_CONFIG (static pages).
+ * Dynamic groups/items (e.g., contract workspaces from a database)
+ * can be merged at runtime via addGroup() or setConfig().
+ *
+ * The sidebar and app-layout both subscribe to this store,
+ * so changes propagate automatically.
+ */
+import { create } from "zustand";
+import { DEFAULT_NAV_CONFIG } from "./nav-config.js";
+export const useNavStore = create((set, get) => ({
+    config: DEFAULT_NAV_CONFIG,
+    footerActions: [],
+    navLoading: false,
+    setConfig: (config) => set({ config }),
+    setNavLoading: (navLoading) => set({ navLoading }),
+    addGroup: (group) => {
+        const config = get().config;
+        const idx = config.findIndex((g) => g.label === group.label);
+        if (idx >= 0) {
+            const next = [...config];
+            next[idx] = group;
+            set({ config: next });
+        }
+        else {
+            set({ config: [...config, group] });
+        }
+    },
+    removeGroup: (label) => {
+        set({ config: get().config.filter((g) => g.label !== label) });
+    },
+    setFooterAction: (action) => {
+        const actions = get().footerActions;
+        const idx = actions.findIndex((a) => a.id === action.id);
+        if (idx >= 0) {
+            const next = [...actions];
+            next[idx] = action;
+            set({ footerActions: next });
+        }
+        else {
+            set({ footerActions: [...actions, action] });
+        }
+    },
+    removeFooterAction: (id) => {
+        set({ footerActions: get().footerActions.filter((a) => a.id !== id) });
+    },
+}));

package/dist/lib/selection-context.d.ts

@@ -0,0 +1,21 @@
+import type { ContextItem } from "./app-store.js";
+export type SelectionContextItem = Omit<ContextItem, "id" | "createdAt">;
+export interface SelectionContextInput {
+    text: string;
+    anchorNode: Node;
+    focusNode: Node | null;
+    range: Range;
+    sourcePage: string;
+}
+export interface SelectionContextResult {
+    item: SelectionContextItem;
+    supportsModify?: boolean;
+    formatModifyPrompt?: (prompt: string) => string;
+}
+export interface SelectionContextResolver {
+    id: string;
+    priority?: number;
+    resolve: (input: SelectionContextInput) => SelectionContextResult | null;
+}
+export declare function registerSelectionContextResolver(resolver: SelectionContextResolver): () => void;
+export declare function resolveSelectionContext(input: SelectionContextInput): SelectionContextResult;

package/dist/lib/selection-context.js

@@ -0,0 +1,34 @@
+const resolvers = new Map();
+function defaultSelectionContext(input) {
+    return {
+        item: {
+            type: "selection",
+            label: input.text,
+            payload: { kind: "text", text: input.text },
+            sourcePage: input.sourcePage,
+            persistence: "ephemeral",
+        },
+    };
+}
+export function registerSelectionContextResolver(resolver) {
+    resolvers.set(resolver.id, resolver);
+    return () => {
+        if (resolvers.get(resolver.id) === resolver) {
+            resolvers.delete(resolver.id);
+        }
+    };
+}
+export function resolveSelectionContext(input) {
+    const sortedResolvers = [...resolvers.values()].sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0));
+    for (const resolver of sortedResolvers) {
+        try {
+            const resolved = resolver.resolve(input);
+            if (resolved)
+                return resolved;
+        }
+        catch {
+            // A module resolver must never break the generic selection flow.
+        }
+    }
+    return defaultSelectionContext(input);
+}

package/dist/lib/sidebar-store.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Sidebar State Management
+ *
+ * Zustand store for the collapsible left sidebar.
+ * Persists expanded/collapsed state to localStorage.
+ */
+export declare const SIDEBAR_WIDTH = 272;
+export declare const RAIL_WIDTH = 52;
+export declare const SIDEBAR_MIN_WIDTH = 248;
+export declare const SIDEBAR_MAX_WIDTH = 440;
+interface SidebarState {
+    isOpen: boolean;
+    isMobileOpen: boolean;
+    width: number;
+    toggle: () => void;
+    open: () => void;
+    close: () => void;
+    toggleMobile: () => void;
+    closeMobile: () => void;
+    setWidth: (width: number) => void;
+}
+export declare const useSidebarStore: import("zustand").UseBoundStore<import("zustand").StoreApi<SidebarState>>;
+export {};

package/dist/lib/sidebar-store.js

@@ -0,0 +1,98 @@
+/**
+ * Sidebar State Management
+ *
+ * Zustand store for the collapsible left sidebar.
+ * Persists expanded/collapsed state to localStorage.
+ */
+import { create } from "zustand";
+export const SIDEBAR_WIDTH = 272;
+export const RAIL_WIDTH = 52;
+export const SIDEBAR_MIN_WIDTH = 248;
+export const SIDEBAR_MAX_WIDTH = 440;
+const MOBILE_BREAKPOINT = 768;
+const STORAGE_KEY = "sidebar";
+const WIDTH_STORAGE_KEY = "sidebar-width";
+const WIDTH_VERSION_STORAGE_KEY = "sidebar-width-version";
+const WIDTH_PERSIST_DELAY_MS = 120;
+const SIDEBAR_WIDTH_VERSION = "2026-03-27-narrow";
+let persistWidthTimer = null;
+function clampWidth(width) {
+    return Math.min(SIDEBAR_MAX_WIDTH, Math.max(SIDEBAR_MIN_WIDTH, width));
+}
+function getStoredOpen() {
+    if (typeof window === "undefined")
+        return true;
+    const stored = localStorage.getItem(STORAGE_KEY);
+    if (stored === "true" || stored === "false")
+        return stored === "true";
+    // Default: collapsed rail — users expand when they want it
+    return false;
+}
+function getStoredWidth() {
+    if (typeof window === "undefined")
+        return SIDEBAR_WIDTH;
+    const version = localStorage.getItem(WIDTH_VERSION_STORAGE_KEY);
+    if (version !== SIDEBAR_WIDTH_VERSION)
+        return SIDEBAR_WIDTH;
+    const raw = localStorage.getItem(WIDTH_STORAGE_KEY);
+    if (raw === null || raw.trim() === "")
+        return SIDEBAR_WIDTH;
+    const stored = Number(raw);
+    if (!Number.isFinite(stored))
+        return SIDEBAR_WIDTH;
+    return clampWidth(stored);
+}
+function persistWidth(width) {
+    if (typeof window === "undefined")
+        return;
+    if (persistWidthTimer)
+        window.clearTimeout(persistWidthTimer);
+    persistWidthTimer = window.setTimeout(() => {
+        localStorage.setItem(WIDTH_STORAGE_KEY, String(width));
+        localStorage.setItem(WIDTH_VERSION_STORAGE_KEY, SIDEBAR_WIDTH_VERSION);
+        persistWidthTimer = null;
+    }, WIDTH_PERSIST_DELAY_MS);
+}
+export const useSidebarStore = create((set, get) => ({
+    isOpen: getStoredOpen(),
+    isMobileOpen: false,
+    width: getStoredWidth(),
+    toggle: () => {
+        const next = !get().isOpen;
+        localStorage.setItem(STORAGE_KEY, String(next));
+        set({ isOpen: next });
+    },
+    open: () => {
+        localStorage.setItem(STORAGE_KEY, "true");
+        set({ isOpen: true });
+    },
+    close: () => {
+        localStorage.setItem(STORAGE_KEY, "false");
+        set({ isOpen: false });
+    },
+    toggleMobile: () => set({ isMobileOpen: !get().isMobileOpen }),
+    closeMobile: () => set({ isMobileOpen: false }),
+    setWidth: (width) => {
+        const next = clampWidth(width);
+        persistWidth(next);
+        set({ width: next });
+    },
+}));
+// Auto-close mobile drawer when resizing above breakpoint
+if (typeof window !== "undefined") {
+    const version = localStorage.getItem(WIDTH_VERSION_STORAGE_KEY);
+    if (version !== SIDEBAR_WIDTH_VERSION) {
+        localStorage.setItem(WIDTH_STORAGE_KEY, String(SIDEBAR_WIDTH));
+        localStorage.setItem(WIDTH_VERSION_STORAGE_KEY, SIDEBAR_WIDTH_VERSION);
+        useSidebarStore.setState({ width: SIDEBAR_WIDTH });
+    }
+    let timeout;
+    window.addEventListener("resize", () => {
+        clearTimeout(timeout);
+        timeout = setTimeout(() => {
+            if (window.innerWidth >= MOBILE_BREAKPOINT) {
+                useSidebarStore.getState().closeMobile();
+            }
+        }, 100);
+    });
+}

package/dist/lib/theme-runtime.d.ts

@@ -0,0 +1,130 @@
+import type { CSSProperties } from "react";
+import type { ThemeMode } from "./theme-store.js";
+export interface ThemeColorSlots {
+    background?: string;
+    foreground?: string;
+    card?: string;
+    cardForeground?: string;
+    popover?: string;
+    popoverForeground?: string;
+    primary?: string;
+    primaryForeground?: string;
+    secondary?: string;
+    secondaryForeground?: string;
+    muted?: string;
+    mutedForeground?: string;
+    accent?: string;
+    accentForeground?: string;
+    destructive?: string;
+    destructiveForeground?: string;
+    border?: string;
+    input?: string;
+    ring?: string;
+}
+export interface ThemeSidebarSlots {
+    sidebar?: string;
+    sidebarForeground?: string;
+    sidebarPrimary?: string;
+    sidebarPrimaryForeground?: string;
+    sidebarAccent?: string;
+    sidebarAccentForeground?: string;
+    sidebarSelected?: string;
+    sidebarSelectedForeground?: string;
+    sidebarBorder?: string;
+    sidebarRing?: string;
+}
+export interface ThemeStatusSlots {
+    success?: string;
+    successForeground?: string;
+    warning?: string;
+    warningForeground?: string;
+    info?: string;
+    infoForeground?: string;
+    syntaxKey?: string;
+    syntaxString?: string;
+    syntaxNumber?: string;
+    syntaxBoolean?: string;
+}
+export interface ThemeChartSlots {
+    chart1?: string;
+    chart2?: string;
+    chart3?: string;
+    chart4?: string;
+    chart5?: string;
+}
+export interface ThemeTypographySlots {
+    bodyFont?: string;
+    headingFont?: string;
+    monoFont?: string;
+}
+export interface ThemeRadiusSlots {
+    radius?: string;
+}
+export interface ThemeAppSlots {
+    codeBlock?: string;
+    codeBlockForeground?: string;
+    workflowDiagramSurface?: string;
+    workflowDiagramLine?: string;
+    workflowDiagramText?: string;
+    workflowDiagramBorder?: string;
+    workflowDiagramCompletedStroke?: string;
+    workflowDiagramCompletedText?: string;
+    workflowDiagramActiveFill?: string;
+    workflowDiagramActiveStroke?: string;
+    workflowDiagramActiveText?: string;
+    workflowDiagramFailedFill?: string;
+    workflowDiagramFailedStroke?: string;
+    workflowDiagramFailedText?: string;
+    workflowDiagramSkippedFill?: string;
+    workflowDiagramSkippedStroke?: string;
+    workflowDiagramSkippedText?: string;
+    workflowDiagramGlow?: string;
+    workflowDiagramShell?: string;
+}
+export interface ThemeBranding {
+    appName?: string;
+    appTitle?: string;
+    logoUrl?: string;
+    darkLogoUrl?: string;
+}
+export interface ThemeDefinition {
+    light?: ThemeColorSlots;
+    dark?: ThemeColorSlots;
+    sidebar?: {
+        light?: ThemeSidebarSlots;
+        dark?: ThemeSidebarSlots;
+    };
+    status?: {
+        light?: ThemeStatusSlots;
+        dark?: ThemeStatusSlots;
+    };
+    charts?: {
+        light?: ThemeChartSlots;
+        dark?: ThemeChartSlots;
+    };
+    typography?: ThemeTypographySlots;
+    radius?: ThemeRadiusSlots;
+    app?: {
+        light?: ThemeAppSlots;
+        dark?: ThemeAppSlots;
+    };
+    branding?: ThemeBranding;
+}
+export interface ThemeLayer {
+    id?: string;
+    name?: string;
+    basePreset?: string | null;
+    definition?: ThemeDefinition | null;
+}
+export interface ResolvedThemeRuntime {
+    mode: "light" | "dark";
+    definition: ThemeDefinition;
+    branding: ThemeBranding;
+    variables: CSSProperties;
+    sources: ThemeLayer[];
+}
+export declare function mergeThemeDefinitions(...definitions: (ThemeDefinition | null | undefined)[]): ThemeDefinition;
+export declare function getEffectiveThemeMode(mode: ThemeMode): "light" | "dark";
+export declare const FOUNDRY_VIOLET_THEME: ThemeDefinition;
+export declare function getThemePreset(name?: string | null): ThemeDefinition;
+export declare function resolveThemeRuntime(layers: ThemeLayer[], mode: ThemeMode): ResolvedThemeRuntime;