@leanmcp/ui 0.1.0

package/dist/index.mjs

@@ -0,0 +1,762 @@
+import 'reflect-metadata';
+import React7, { forwardRef, useState, useEffect, useCallback, createContext, useContext, useMemo, useRef } from 'react';
+import { PostMessageTransport, App } from '@modelcontextprotocol/ext-apps';
+import { Slot } from '@radix-ui/react-slot';
+import { clsx } from 'clsx';
+import { useReactTable, getFilteredRowModel, getSortedRowModel, getCoreRowModel, flexRender } from '@tanstack/react-table';
+import { Chart as Chart$1, CategoryScale, LinearScale, PointElement, LineElement, BarElement, ArcElement, Title, Tooltip, Legend } from 'chart.js';
+import { Chart as Chart$2 } from 'react-chartjs-2';
+import { Highlight, themes } from 'prism-react-renderer';
+
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var UI_APP_COMPONENT_KEY = "ui:app:component";
+var UI_APP_URI_KEY = "ui:app:uri";
+var UI_APP_OPTIONS_KEY = "ui:app:options";
+function UIApp(options) {
+  return (target, propertyKey, descriptor) => {
+    const methodName = String(propertyKey);
+    const className = target.constructor.name.toLowerCase().replace("service", "");
+    const uri = options.uri ?? `ui://${className}/${methodName}`;
+    Reflect.defineMetadata(UI_APP_COMPONENT_KEY, options.component, descriptor.value);
+    Reflect.defineMetadata(UI_APP_URI_KEY, uri, descriptor.value);
+    Reflect.defineMetadata(UI_APP_OPTIONS_KEY, options, descriptor.value);
+    const existingMeta = Reflect.getMetadata("tool:meta", descriptor.value) || {};
+    Reflect.defineMetadata("tool:meta", {
+      ...existingMeta,
+      "ui/resourceUri": uri
+    }, descriptor.value);
+    return descriptor;
+  };
+}
+__name(UIApp, "UIApp");
+function getUIAppMetadata(target) {
+  const component = Reflect.getMetadata(UI_APP_COMPONENT_KEY, target);
+  if (!component) return void 0;
+  return {
+    component,
+    uri: Reflect.getMetadata(UI_APP_URI_KEY, target),
+    ...Reflect.getMetadata(UI_APP_OPTIONS_KEY, target)
+  };
+}
+__name(getUIAppMetadata, "getUIAppMetadata");
+function getUIAppUri(target) {
+  return Reflect.getMetadata(UI_APP_URI_KEY, target);
+}
+__name(getUIAppUri, "getUIAppUri");
+var McpAppContext = /* @__PURE__ */ createContext(null);
+function AppProvider({ appInfo, capabilities = {}, options = {
+  autoResize: true
+}, children }) {
+  const [app, setApp] = useState(null);
+  const [isConnected, setIsConnected] = useState(false);
+  const [error, setError] = useState(null);
+  const [hostContext, setHostContext] = useState({});
+  const [toolInput, setToolInput] = useState(null);
+  const [toolInputPartial, setToolInputPartial] = useState(null);
+  const [toolResult, setToolResult] = useState(null);
+  useEffect(() => {
+    let mounted = true;
+    let appInstance = null;
+    async function connect() {
+      try {
+        const transport = new PostMessageTransport(window.parent);
+        appInstance = new App(appInfo, capabilities, options);
+        appInstance.ontoolinput = (params) => {
+          if (mounted) {
+            setToolInput(params.arguments);
+          }
+        };
+        appInstance.ontoolinputpartial = (params) => {
+          if (mounted) {
+            setToolInputPartial(params.arguments);
+          }
+        };
+        appInstance.ontoolresult = (params) => {
+          if (mounted) {
+            setToolResult(params);
+          }
+        };
+        appInstance.onhostcontextchanged = (params) => {
+          if (mounted) {
+            setHostContext((prev) => ({
+              ...prev,
+              ...params
+            }));
+          }
+        };
+        await appInstance.connect(transport);
+        if (mounted) {
+          setApp(appInstance);
+          setIsConnected(true);
+          setError(null);
+        }
+      } catch (err) {
+        if (mounted) {
+          setError(err instanceof Error ? err : new Error(String(err)));
+          setIsConnected(false);
+        }
+      }
+    }
+    __name(connect, "connect");
+    connect();
+    return () => {
+      mounted = false;
+      if (appInstance) {
+        appInstance.close();
+      }
+    };
+  }, [
+    appInfo.name,
+    appInfo.version
+  ]);
+  const callTool = useCallback(async (name, args = {}) => {
+    if (!app) {
+      throw new Error("Not connected to host");
+    }
+    const result = await app.callServerTool({
+      name,
+      arguments: args
+    });
+    setToolResult(result);
+    return result;
+  }, [
+    app
+  ]);
+  const sendMessage = useCallback(async (text) => {
+    if (!app) {
+      console.warn("[AppProvider] Not connected - cannot send message");
+      return;
+    }
+    await app.sendMessage({
+      role: "user",
+      content: [
+        {
+          type: "text",
+          text
+        }
+      ]
+    });
+  }, [
+    app
+  ]);
+  const sendLog = useCallback(async (level, data) => {
+    if (!app) {
+      console.log(`[MCP App] ${level}:`, data);
+      return;
+    }
+    await app.sendLog({
+      level,
+      data
+    });
+  }, [
+    app
+  ]);
+  const openLink = useCallback(async (url) => {
+    if (!app) {
+      window.open(url, "_blank", "noopener,noreferrer");
+      return;
+    }
+    await app.sendOpenLink({
+      url
+    });
+  }, [
+    app
+  ]);
+  const value = {
+    app,
+    isConnected,
+    error,
+    hostContext,
+    toolInput,
+    toolInputPartial,
+    toolResult,
+    callTool,
+    sendMessage,
+    sendLog,
+    openLink
+  };
+  const theme = hostContext.theme ?? "light";
+  return /* @__PURE__ */ React7.createElement(McpAppContext.Provider, {
+    value
+  }, /* @__PURE__ */ React7.createElement("div", {
+    className: "lui-root",
+    "data-theme": theme
+  }, children));
+}
+__name(AppProvider, "AppProvider");
+var ssrDefaultContext = {
+  app: null,
+  isConnected: false,
+  error: null,
+  hostContext: {},
+  toolInput: null,
+  toolInputPartial: null,
+  toolResult: null,
+  callTool: /* @__PURE__ */ __name(async () => {
+    throw new Error("callTool not available during SSR");
+  }, "callTool"),
+  sendMessage: /* @__PURE__ */ __name(async () => {
+    console.warn("sendMessage not available during SSR");
+  }, "sendMessage"),
+  sendLog: /* @__PURE__ */ __name(async () => {
+    console.warn("sendLog not available during SSR");
+  }, "sendLog"),
+  openLink: /* @__PURE__ */ __name(async () => {
+    console.warn("openLink not available during SSR");
+  }, "openLink")
+};
+function useMcpApp() {
+  const context = useContext(McpAppContext);
+  if (!context) {
+    return ssrDefaultContext;
+  }
+  return context;
+}
+__name(useMcpApp, "useMcpApp");
+function useTool(toolName) {
+  const { callTool } = useMcpApp();
+  const [loading, setLoading] = useState(false);
+  const [result, setResult] = useState(null);
+  const [error, setError] = useState(null);
+  const call = useCallback(async (args = {}) => {
+    setLoading(true);
+    setError(null);
+    try {
+      const response = await callTool(toolName, args);
+      const data = response?.structuredContent ?? response;
+      setResult(data);
+      return data;
+    } catch (err) {
+      const error2 = err instanceof Error ? err : new Error(String(err));
+      setError(error2);
+      throw error2;
+    } finally {
+      setLoading(false);
+    }
+  }, [
+    callTool,
+    toolName
+  ]);
+  const reset = useCallback(() => {
+    setResult(null);
+    setError(null);
+  }, []);
+  return {
+    call,
+    loading,
+    result,
+    error,
+    reset
+  };
+}
+__name(useTool, "useTool");
+
+// src/mcp/useToolResult.ts
+function useToolResult() {
+  const { toolResult } = useMcpApp();
+  let result = null;
+  let textContent = null;
+  if (toolResult) {
+    if ("structuredContent" in toolResult && toolResult.structuredContent) {
+      result = toolResult.structuredContent;
+    }
+    if (!result && toolResult.content) {
+      const textItem = toolResult.content.find((c) => c.type === "text");
+      if (textItem) {
+        textContent = textItem.text;
+        try {
+          result = JSON.parse(textItem.text);
+        } catch {
+        }
+      }
+    }
+  }
+  return {
+    result,
+    rawResult: toolResult,
+    hasResult: toolResult !== null,
+    textContent
+  };
+}
+__name(useToolResult, "useToolResult");
+
+// src/mcp/useToolInput.ts
+function useToolInput() {
+  const { toolInput } = useMcpApp();
+  return {
+    input: toolInput,
+    hasInput: toolInput !== null
+  };
+}
+__name(useToolInput, "useToolInput");
+
+// src/mcp/useToolInputPartial.ts
+function useToolInputPartial() {
+  const { toolInputPartial } = useMcpApp();
+  return {
+    partialArgs: toolInputPartial,
+    isStreaming: toolInputPartial !== null
+  };
+}
+__name(useToolInputPartial, "useToolInputPartial");
+
+// src/mcp/useHostContext.ts
+function useHostContext() {
+  const { hostContext } = useMcpApp();
+  return {
+    theme: hostContext.theme ?? "light",
+    displayMode: hostContext.displayMode ?? "inline",
+    viewport: hostContext.viewport ?? null,
+    locale: hostContext.locale ?? null,
+    timeZone: hostContext.timeZone ?? null,
+    platform: hostContext.platform ?? null,
+    rawContext: hostContext
+  };
+}
+__name(useHostContext, "useHostContext");
+var Button = /* @__PURE__ */ forwardRef(({ className, variant = "primary", size = "md", loading = false, disabled, asChild = false, leftIcon, rightIcon, children, ...props }, ref) => {
+  const Comp = asChild ? Slot : "button";
+  return /* @__PURE__ */ React7.createElement(Comp, {
+    ref,
+    className: clsx("lui-button", `lui-button--${variant}`, `lui-button--${size}`, loading && "lui-button--loading", className),
+    disabled: disabled || loading,
+    ...props
+  }, loading && /* @__PURE__ */ React7.createElement("span", {
+    className: "lui-button__spinner",
+    "aria-hidden": "true"
+  }, /* @__PURE__ */ React7.createElement("svg", {
+    viewBox: "0 0 24 24",
+    fill: "none",
+    className: "lui-spinner-icon"
+  }, /* @__PURE__ */ React7.createElement("circle", {
+    cx: "12",
+    cy: "12",
+    r: "10",
+    stroke: "currentColor",
+    strokeWidth: "3",
+    strokeLinecap: "round",
+    strokeDasharray: "32",
+    strokeDashoffset: "12"
+  }))), leftIcon && !loading && /* @__PURE__ */ React7.createElement("span", {
+    className: "lui-button__icon"
+  }, leftIcon), /* @__PURE__ */ React7.createElement("span", {
+    className: "lui-button__content"
+  }, children), rightIcon && /* @__PURE__ */ React7.createElement("span", {
+    className: "lui-button__icon"
+  }, rightIcon));
+});
+Button.displayName = "Button";
+
+// src/mcp/ActionButton.tsx
+function ActionButton({ toolName, toolArgs = {}, onToolSuccess, onToolError, showResult = false, renderResult, children, ...buttonProps }) {
+  const { call, loading, result, error } = useTool(toolName);
+  const [hasResult, setHasResult] = useState(false);
+  const handleClick = /* @__PURE__ */ __name(async () => {
+    try {
+      const res = await call(toolArgs);
+      setHasResult(true);
+      onToolSuccess?.(res);
+    } catch (err) {
+      onToolError?.(err instanceof Error ? err : new Error(String(err)));
+    }
+  }, "handleClick");
+  return /* @__PURE__ */ React7.createElement("div", {
+    className: "lui-action-button-wrapper"
+  }, /* @__PURE__ */ React7.createElement(Button, {
+    ...buttonProps,
+    loading,
+    onClick: handleClick
+  }, children), showResult && hasResult && result !== null && /* @__PURE__ */ React7.createElement("div", {
+    className: "lui-action-button-result"
+  }, renderResult ? renderResult(result) : /* @__PURE__ */ React7.createElement("pre", null, JSON.stringify(result, null, 2))), error && /* @__PURE__ */ React7.createElement("div", {
+    className: "lui-action-button-error"
+  }, error.message));
+}
+__name(ActionButton, "ActionButton");
+var Input = /* @__PURE__ */ forwardRef(({ className, label, helperText, error, size = "md", leftElement, rightElement, fullWidth = false, id, ...props }, ref) => {
+  const inputId = id || `input-${Math.random().toString(36).substr(2, 9)}`;
+  const hasError = Boolean(error);
+  return /* @__PURE__ */ React7.createElement("div", {
+    className: clsx("lui-input-wrapper", fullWidth && "lui-input-wrapper--full-width", className)
+  }, label && /* @__PURE__ */ React7.createElement("label", {
+    htmlFor: inputId,
+    className: "lui-input-label"
+  }, label), /* @__PURE__ */ React7.createElement("div", {
+    className: clsx("lui-input-container", `lui-input-container--${size}`, hasError && "lui-input-container--error", leftElement && "lui-input-container--has-left", rightElement && "lui-input-container--has-right")
+  }, leftElement && /* @__PURE__ */ React7.createElement("span", {
+    className: "lui-input-element lui-input-element--left"
+  }, leftElement), /* @__PURE__ */ React7.createElement("input", {
+    ref,
+    id: inputId,
+    className: "lui-input",
+    "aria-invalid": hasError,
+    "aria-describedby": error ? `${inputId}-error` : helperText ? `${inputId}-helper` : void 0,
+    ...props
+  }), rightElement && /* @__PURE__ */ React7.createElement("span", {
+    className: "lui-input-element lui-input-element--right"
+  }, rightElement)), (error || helperText) && /* @__PURE__ */ React7.createElement("p", {
+    id: error ? `${inputId}-error` : `${inputId}-helper`,
+    className: clsx("lui-input-message", error && "lui-input-message--error")
+  }, error || helperText));
+});
+Input.displayName = "Input";
+function ToolForm({ toolName, fields, submitText = "Submit", onSuccess, onError, showResult = false, className }) {
+  const { call, loading, result, error } = useTool(toolName);
+  const [formData, setFormData] = useState(() => {
+    const initial = {};
+    fields.forEach((field) => {
+      if (field.defaultValue !== void 0) {
+        initial[field.name] = field.defaultValue;
+      }
+    });
+    return initial;
+  });
+  const handleSubmit = /* @__PURE__ */ __name(async (e) => {
+    e.preventDefault();
+    const args = {};
+    fields.forEach((field) => {
+      const value = formData[field.name];
+      if (field.type === "number" && value !== void 0) {
+        args[field.name] = Number(value);
+      } else {
+        args[field.name] = value;
+      }
+    });
+    try {
+      const res = await call(args);
+      onSuccess?.(res);
+    } catch (err) {
+      onError?.(err instanceof Error ? err : new Error(String(err)));
+    }
+  }, "handleSubmit");
+  const handleChange = /* @__PURE__ */ __name((name, value) => {
+    setFormData((prev) => ({
+      ...prev,
+      [name]: value
+    }));
+  }, "handleChange");
+  return /* @__PURE__ */ React7.createElement("form", {
+    className: clsx("lui-tool-form", className),
+    onSubmit: handleSubmit
+  }, /* @__PURE__ */ React7.createElement("div", {
+    className: "lui-tool-form-fields"
+  }, fields.map((field) => /* @__PURE__ */ React7.createElement("div", {
+    key: field.name,
+    className: "lui-tool-form-field"
+  }, field.type === "textarea" ? /* @__PURE__ */ React7.createElement("div", {
+    className: "lui-input-wrapper lui-input-wrapper--full-width"
+  }, /* @__PURE__ */ React7.createElement("label", {
+    className: "lui-input-label"
+  }, field.label), /* @__PURE__ */ React7.createElement("textarea", {
+    className: "lui-tool-form-textarea",
+    name: field.name,
+    placeholder: field.placeholder,
+    required: field.required,
+    value: formData[field.name] ?? "",
+    onChange: /* @__PURE__ */ __name((e) => handleChange(field.name, e.target.value), "onChange")
+  }), field.helperText && /* @__PURE__ */ React7.createElement("p", {
+    className: "lui-input-message"
+  }, field.helperText)) : /* @__PURE__ */ React7.createElement(Input, {
+    fullWidth: true,
+    label: field.label,
+    type: field.type ?? "text",
+    name: field.name,
+    placeholder: field.placeholder,
+    required: field.required,
+    helperText: field.helperText,
+    value: formData[field.name] ?? "",
+    onChange: /* @__PURE__ */ __name((e) => handleChange(field.name, e.target.value), "onChange")
+  })))), /* @__PURE__ */ React7.createElement("div", {
+    className: "lui-tool-form-actions"
+  }, /* @__PURE__ */ React7.createElement(Button, {
+    type: "submit",
+    loading
+  }, submitText)), error && /* @__PURE__ */ React7.createElement("div", {
+    className: "lui-tool-form-error"
+  }, error.message), showResult && result !== null && /* @__PURE__ */ React7.createElement("div", {
+    className: "lui-tool-form-result"
+  }, /* @__PURE__ */ React7.createElement("pre", null, JSON.stringify(result, null, 2))));
+}
+__name(ToolForm, "ToolForm");
+var Card = /* @__PURE__ */ forwardRef(({ className, variant = "default", padding = "md", interactive = false, children, ...props }, ref) => {
+  return /* @__PURE__ */ React7.createElement("div", {
+    ref,
+    className: clsx("lui-card", `lui-card--${variant}`, `lui-card--padding-${padding}`, interactive && "lui-card--interactive", className),
+    ...props
+  }, children);
+});
+Card.displayName = "Card";
+var CardHeader = /* @__PURE__ */ forwardRef(({ className, title, description, action, children, ...props }, ref) => {
+  return /* @__PURE__ */ React7.createElement("div", {
+    ref,
+    className: clsx("lui-card-header", className),
+    ...props
+  }, (title || description) && /* @__PURE__ */ React7.createElement("div", {
+    className: "lui-card-header__text"
+  }, title && /* @__PURE__ */ React7.createElement("h3", {
+    className: "lui-card-header__title"
+  }, title), description && /* @__PURE__ */ React7.createElement("p", {
+    className: "lui-card-header__description"
+  }, description)), action && /* @__PURE__ */ React7.createElement("div", {
+    className: "lui-card-header__action"
+  }, action), children);
+});
+CardHeader.displayName = "CardHeader";
+var CardContent = /* @__PURE__ */ forwardRef(({ className, children, ...props }, ref) => {
+  return /* @__PURE__ */ React7.createElement("div", {
+    ref,
+    className: clsx("lui-card-content", className),
+    ...props
+  }, children);
+});
+CardContent.displayName = "CardContent";
+var CardFooter = /* @__PURE__ */ forwardRef(({ className, children, ...props }, ref) => {
+  return /* @__PURE__ */ React7.createElement("div", {
+    ref,
+    className: clsx("lui-card-footer", className),
+    ...props
+  }, children);
+});
+CardFooter.displayName = "CardFooter";
+function DataGrid({ data, columns, searchable = false, searchPlaceholder = "Search...", onRowClick, loading = false, emptyMessage = "No data", className }) {
+  const [sorting, setSorting] = useState([]);
+  const [globalFilter, setGlobalFilter] = useState("");
+  const tableColumns = useMemo(() => columns.map((col) => ({
+    id: String(col.key),
+    accessorKey: col.key,
+    header: col.header,
+    cell: col.cell ? ({ getValue, row }) => col.cell(getValue(), row.original) : ({ getValue }) => String(getValue() ?? ""),
+    enableSorting: col.sortable ?? true,
+    size: typeof col.width === "number" ? col.width : void 0
+  })), [
+    columns
+  ]);
+  const table = useReactTable({
+    data,
+    columns: tableColumns,
+    state: {
+      sorting,
+      globalFilter
+    },
+    onSortingChange: setSorting,
+    onGlobalFilterChange: setGlobalFilter,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel()
+  });
+  return /* @__PURE__ */ React7.createElement("div", {
+    className: clsx("lui-datagrid", className)
+  }, searchable && /* @__PURE__ */ React7.createElement("div", {
+    className: "lui-datagrid-search"
+  }, /* @__PURE__ */ React7.createElement("input", {
+    type: "text",
+    value: globalFilter,
+    onChange: /* @__PURE__ */ __name((e) => setGlobalFilter(e.target.value), "onChange"),
+    placeholder: searchPlaceholder,
+    className: "lui-datagrid-search-input"
+  })), /* @__PURE__ */ React7.createElement("div", {
+    className: "lui-datagrid-container"
+  }, /* @__PURE__ */ React7.createElement("table", {
+    className: "lui-datagrid-table"
+  }, /* @__PURE__ */ React7.createElement("thead", null, table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ React7.createElement("tr", {
+    key: headerGroup.id
+  }, headerGroup.headers.map((header) => /* @__PURE__ */ React7.createElement("th", {
+    key: header.id,
+    className: clsx("lui-datagrid-th", header.column.getCanSort() && "lui-datagrid-th--sortable"),
+    onClick: header.column.getToggleSortingHandler(),
+    style: {
+      width: header.column.getSize()
+    }
+  }, /* @__PURE__ */ React7.createElement("div", {
+    className: "lui-datagrid-th-content"
+  }, flexRender(header.column.columnDef.header, header.getContext()), header.column.getIsSorted() && /* @__PURE__ */ React7.createElement("span", {
+    className: "lui-datagrid-sort-icon"
+  }, header.column.getIsSorted() === "asc" ? "\u2191" : "\u2193"))))))), /* @__PURE__ */ React7.createElement("tbody", null, loading ? /* @__PURE__ */ React7.createElement("tr", null, /* @__PURE__ */ React7.createElement("td", {
+    colSpan: columns.length,
+    className: "lui-datagrid-loading"
+  }, "Loading...")) : table.getRowModel().rows.length === 0 ? /* @__PURE__ */ React7.createElement("tr", null, /* @__PURE__ */ React7.createElement("td", {
+    colSpan: columns.length,
+    className: "lui-datagrid-empty"
+  }, emptyMessage)) : table.getRowModel().rows.map((row) => /* @__PURE__ */ React7.createElement("tr", {
+    key: row.id,
+    className: clsx("lui-datagrid-row", onRowClick && "lui-datagrid-row--clickable"),
+    onClick: /* @__PURE__ */ __name(() => onRowClick?.(row.original), "onClick")
+  }, row.getVisibleCells().map((cell) => /* @__PURE__ */ React7.createElement("td", {
+    key: cell.id,
+    className: "lui-datagrid-td"
+  }, flexRender(cell.column.columnDef.cell, cell.getContext())))))))));
+}
+__name(DataGrid, "DataGrid");
+Chart$1.register(CategoryScale, LinearScale, PointElement, LineElement, BarElement, ArcElement, Title, Tooltip, Legend);
+function Chart({ type, data, options, height = 300, width = "100%", className }) {
+  const defaultOptions = {
+    responsive: true,
+    maintainAspectRatio: false,
+    plugins: {
+      legend: {
+        display: true,
+        position: "top",
+        labels: {
+          usePointStyle: true,
+          padding: 16
+        }
+      },
+      tooltip: {
+        mode: "index",
+        intersect: false,
+        backgroundColor: "rgba(15, 23, 42, 0.9)",
+        titleColor: "#f1f5f9",
+        bodyColor: "#cbd5e1",
+        borderColor: "#334155",
+        borderWidth: 1,
+        cornerRadius: 8,
+        padding: 12
+      }
+    },
+    scales: type !== "pie" && type !== "doughnut" ? {
+      x: {
+        grid: {
+          color: "rgba(226, 232, 240, 0.5)"
+        },
+        ticks: {
+          color: "#64748b"
+        }
+      },
+      y: {
+        grid: {
+          color: "rgba(226, 232, 240, 0.5)"
+        },
+        ticks: {
+          color: "#64748b"
+        }
+      }
+    } : void 0
+  };
+  const mergedOptions = {
+    ...defaultOptions,
+    ...options,
+    plugins: {
+      ...defaultOptions.plugins,
+      ...options?.plugins
+    }
+  };
+  return /* @__PURE__ */ React7.createElement("div", {
+    className: clsx("lui-chart", className),
+    style: {
+      height,
+      width
+    }
+  }, /* @__PURE__ */ React7.createElement(Chart$2, {
+    type,
+    data,
+    options: mergedOptions
+  }));
+}
+__name(Chart, "Chart");
+function AppShell({ header, sidebar, footer, sidebarPosition = "left", sidebarWidth = 240, autoResize = true, padding = "md", className, children, ...props }) {
+  const containerRef = useRef(null);
+  useEffect(() => {
+    if (!autoResize || !containerRef.current) return;
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const { height } = entry.contentRect;
+        window.parent.postMessage({
+          type: "resize",
+          height: Math.ceil(height)
+        }, "*");
+      }
+    });
+    resizeObserver.observe(containerRef.current);
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [
+    autoResize
+  ]);
+  const sidebarStyle = {
+    width: typeof sidebarWidth === "number" ? `${sidebarWidth}px` : sidebarWidth,
+    flexShrink: 0
+  };
+  return /* @__PURE__ */ React7.createElement("div", {
+    ref: containerRef,
+    className: clsx("lui-app-shell", `lui-app-shell--padding-${padding}`, className),
+    ...props
+  }, header && /* @__PURE__ */ React7.createElement("header", {
+    className: "lui-app-shell-header"
+  }, header), /* @__PURE__ */ React7.createElement("div", {
+    className: "lui-app-shell-body"
+  }, sidebar && sidebarPosition === "left" && /* @__PURE__ */ React7.createElement("aside", {
+    className: "lui-app-shell-sidebar",
+    style: sidebarStyle
+  }, sidebar), /* @__PURE__ */ React7.createElement("main", {
+    className: "lui-app-shell-main"
+  }, children), sidebar && sidebarPosition === "right" && /* @__PURE__ */ React7.createElement("aside", {
+    className: "lui-app-shell-sidebar",
+    style: sidebarStyle
+  }, sidebar)), footer && /* @__PURE__ */ React7.createElement("footer", {
+    className: "lui-app-shell-footer"
+  }, footer));
+}
+__name(AppShell, "AppShell");
+function CodeBlock({ code, language = "text", showLineNumbers = false, copyable = true, className }) {
+  const [copied, setCopied] = React7.useState(false);
+  const handleCopy = /* @__PURE__ */ __name(async () => {
+    await navigator.clipboard.writeText(code);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2e3);
+  }, "handleCopy");
+  return /* @__PURE__ */ React7.createElement("div", {
+    className: clsx("lui-code-block", className)
+  }, copyable && /* @__PURE__ */ React7.createElement("button", {
+    type: "button",
+    className: "lui-code-block-copy",
+    onClick: handleCopy,
+    "aria-label": copied ? "Copied!" : "Copy code"
+  }, copied ? /* @__PURE__ */ React7.createElement("svg", {
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2"
+  }, /* @__PURE__ */ React7.createElement("polyline", {
+    points: "20,6 9,17 4,12"
+  })) : /* @__PURE__ */ React7.createElement("svg", {
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2"
+  }, /* @__PURE__ */ React7.createElement("rect", {
+    x: "9",
+    y: "9",
+    width: "13",
+    height: "13",
+    rx: "2",
+    ry: "2"
+  }), /* @__PURE__ */ React7.createElement("path", {
+    d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"
+  }))), /* @__PURE__ */ React7.createElement(Highlight, {
+    theme: themes.nightOwl,
+    code: code.trim(),
+    language
+  }, ({ className: hlClassName, style, tokens, getLineProps, getTokenProps }) => /* @__PURE__ */ React7.createElement("pre", {
+    className: clsx("lui-code-block-pre", hlClassName),
+    style
+  }, tokens.map((line, i) => /* @__PURE__ */ React7.createElement("div", {
+    key: i,
+    ...getLineProps({
+      line
+    })
+  }, showLineNumbers && /* @__PURE__ */ React7.createElement("span", {
+    className: "lui-code-block-line-number"
+  }, i + 1), line.map((token, key) => /* @__PURE__ */ React7.createElement("span", {
+    key,
+    ...getTokenProps({
+      token
+    })
+  })))))));
+}
+__name(CodeBlock, "CodeBlock");
+
+export { ActionButton, AppProvider, AppShell, Button, Card, CardContent, CardFooter, CardHeader, Chart, CodeBlock, DataGrid, Input, ToolForm, UIApp, getUIAppMetadata, getUIAppUri, useHostContext, useMcpApp, useTool, useToolInput, useToolInputPartial, useToolResult };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map