@contractspec/lib.example-shared-ui 1.11.0 → 1.13.0

package/dist/node/MarkdownView.js

@@ -0,0 +1,303 @@
+// src/lib/runtime-context.tsx
+import { createContext, useContext } from "react";
+"use client";
+var TemplateRuntimeContext = createContext(null);
+function useTemplateRuntime() {
+  const context = useContext(TemplateRuntimeContext);
+  if (!context) {
+    throw new Error("useTemplateRuntime must be used within a TemplateRuntimeProvider");
+  }
+  return context;
+}
+
+// src/MarkdownView.tsx
+import { useCallback, useEffect, useState } from "react";
+import {
+  Button,
+  ErrorState,
+  LoaderBlock
+} from "@contractspec/lib.design-system";
+import { Card } from "@contractspec/lib.ui-kit-web/ui/card";
+import { Badge } from "@contractspec/lib.ui-kit-web/ui/badge";
+import { jsxDEV } from "react/jsx-dev-runtime";
+"use client";
+function MarkdownView({
+  templateId: propTemplateId,
+  presentationId,
+  className
+}) {
+  const {
+    engine,
+    template,
+    templateId: contextTemplateId,
+    resolvePresentation,
+    fetchData
+  } = useTemplateRuntime();
+  const templateId = propTemplateId ?? contextTemplateId;
+  const presentations = template?.presentations ?? [];
+  const [selectedPresentation, setSelectedPresentation] = useState("");
+  const [markdownContent, setMarkdownContent] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  useEffect(() => {
+    if (presentationId && presentations.includes(presentationId)) {
+      setSelectedPresentation(presentationId);
+    } else if (presentations.length > 0 && !selectedPresentation) {
+      setSelectedPresentation(presentations[0] ?? "");
+    }
+  }, [presentationId, presentations, selectedPresentation]);
+  const renderMarkdown = useCallback(async () => {
+    if (!selectedPresentation || !engine)
+      return;
+    setLoading(true);
+    setError(null);
+    try {
+      if (!resolvePresentation) {
+        throw new Error("resolvePresentation not available in runtime context");
+      }
+      const descriptor = resolvePresentation(selectedPresentation);
+      if (!descriptor) {
+        throw new Error(`Presentation descriptor not found: ${selectedPresentation}`);
+      }
+      const dataResult = await fetchData(selectedPresentation);
+      const result = await engine.render("markdown", descriptor, { data: dataResult.data });
+      setMarkdownContent(result.body);
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error("Failed to render markdown"));
+    } finally {
+      setLoading(false);
+    }
+  }, [
+    selectedPresentation,
+    templateId,
+    engine,
+    resolvePresentation,
+    fetchData
+  ]);
+  useEffect(() => {
+    renderMarkdown();
+  }, [renderMarkdown]);
+  if (!presentations.length) {
+    return /* @__PURE__ */ jsxDEV(Card, {
+      className,
+      children: /* @__PURE__ */ jsxDEV("div", {
+        className: "p-6 text-center",
+        children: /* @__PURE__ */ jsxDEV("p", {
+          className: "text-muted-foreground",
+          children: "No presentations available for this template."
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this)
+    }, undefined, false, undefined, this);
+  }
+  const handleCopy = useCallback(() => {
+    if (markdownContent) {
+      navigator.clipboard.writeText(markdownContent);
+    }
+  }, [markdownContent]);
+  return /* @__PURE__ */ jsxDEV("div", {
+    className,
+    children: [
+      /* @__PURE__ */ jsxDEV("div", {
+        className: "mb-4 flex flex-wrap items-center gap-2",
+        children: [
+          /* @__PURE__ */ jsxDEV("span", {
+            className: "text-muted-foreground text-sm font-medium",
+            children: "Presentation:"
+          }, undefined, false, undefined, this),
+          presentations.map((name) => /* @__PURE__ */ jsxDEV(Button, {
+            variant: selectedPresentation === name ? "default" : "outline",
+            size: "sm",
+            onPress: () => setSelectedPresentation(name),
+            children: formatPresentationName(name)
+          }, name, false, undefined, this)),
+          /* @__PURE__ */ jsxDEV("div", {
+            className: "ml-auto flex items-center gap-2",
+            children: [
+              /* @__PURE__ */ jsxDEV(Badge, {
+                variant: "secondary",
+                children: "LLM-friendly"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV(Button, {
+                variant: "outline",
+                size: "sm",
+                onPress: handleCopy,
+                disabled: !markdownContent || loading,
+                children: "Copy"
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV(Card, {
+        className: "overflow-hidden",
+        children: [
+          loading && /* @__PURE__ */ jsxDEV(LoaderBlock, {
+            label: "Rendering markdown..."
+          }, undefined, false, undefined, this),
+          error && /* @__PURE__ */ jsxDEV(ErrorState, {
+            title: "Render failed",
+            description: error.message,
+            onRetry: renderMarkdown,
+            retryLabel: "Retry"
+          }, undefined, false, undefined, this),
+          !loading && !error && markdownContent && /* @__PURE__ */ jsxDEV("div", {
+            className: "p-6",
+            children: /* @__PURE__ */ jsxDEV(MarkdownRenderer, {
+              content: markdownContent
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this),
+          !loading && !error && !markdownContent && /* @__PURE__ */ jsxDEV("div", {
+            className: "p-6 text-center",
+            children: /* @__PURE__ */ jsxDEV("p", {
+              className: "text-muted-foreground",
+              children: "Select a presentation to view its markdown output."
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function MarkdownRenderer({ content }) {
+  const lines = content.split(`
+`);
+  const rendered = [];
+  let i = 0;
+  while (i < lines.length) {
+    const line = lines[i] ?? "";
+    if (line.startsWith("|") && lines[i + 1]?.match(/^\|[\s-|]+\|$/)) {
+      const tableLines = [line];
+      i++;
+      while (i < lines.length && (lines[i]?.startsWith("|") ?? false)) {
+        tableLines.push(lines[i] ?? "");
+        i++;
+      }
+      rendered.push(renderTable(tableLines, rendered.length));
+      continue;
+    }
+    if (line.startsWith("# ")) {
+      rendered.push(/* @__PURE__ */ jsxDEV("h1", {
+        className: "mb-4 text-2xl font-bold",
+        children: line.slice(2)
+      }, i, false, undefined, this));
+    } else if (line.startsWith("## ")) {
+      rendered.push(/* @__PURE__ */ jsxDEV("h2", {
+        className: "mt-6 mb-3 text-xl font-semibold",
+        children: line.slice(3)
+      }, i, false, undefined, this));
+    } else if (line.startsWith("### ")) {
+      rendered.push(/* @__PURE__ */ jsxDEV("h3", {
+        className: "mt-4 mb-2 text-lg font-medium",
+        children: line.slice(4)
+      }, i, false, undefined, this));
+    } else if (line.startsWith("> ")) {
+      rendered.push(/* @__PURE__ */ jsxDEV("blockquote", {
+        className: "text-muted-foreground my-2 border-l-4 border-violet-500/50 pl-4 italic",
+        children: line.slice(2)
+      }, i, false, undefined, this));
+    } else if (line.startsWith("- ")) {
+      rendered.push(/* @__PURE__ */ jsxDEV("li", {
+        className: "ml-4 list-disc",
+        children: formatInlineMarkdown(line.slice(2))
+      }, i, false, undefined, this));
+    } else if (line.startsWith("**") && line.includes(":**")) {
+      const [label, ...rest] = line.split(":**");
+      rendered.push(/* @__PURE__ */ jsxDEV("p", {
+        className: "my-1",
+        children: [
+          /* @__PURE__ */ jsxDEV("strong", {
+            children: [
+              label?.slice(2),
+              ":"
+            ]
+          }, undefined, true, undefined, this),
+          rest.join(":**")
+        ]
+      }, i, true, undefined, this));
+    } else if (line.startsWith("_") && line.endsWith("_")) {
+      rendered.push(/* @__PURE__ */ jsxDEV("p", {
+        className: "text-muted-foreground my-1 italic",
+        children: line.slice(1, -1)
+      }, i, false, undefined, this));
+    } else if (!line.trim()) {
+      rendered.push(/* @__PURE__ */ jsxDEV("div", {
+        className: "h-2"
+      }, i, false, undefined, this));
+    } else {
+      rendered.push(/* @__PURE__ */ jsxDEV("p", {
+        className: "my-1",
+        children: formatInlineMarkdown(line)
+      }, i, false, undefined, this));
+    }
+    i++;
+  }
+  return /* @__PURE__ */ jsxDEV("div", {
+    className: "prose prose-sm dark:prose-invert max-w-none",
+    children: rendered
+  }, undefined, false, undefined, this);
+}
+function renderTable(lines, keyPrefix) {
+  if (lines.length < 2)
+    return null;
+  const parseRow = (row) => row.split("|").slice(1, -1).map((cell) => cell.trim());
+  const headers = parseRow(lines[0] ?? "");
+  const dataRows = lines.slice(2).map(parseRow);
+  return /* @__PURE__ */ jsxDEV("div", {
+    className: "my-4 overflow-x-auto",
+    children: /* @__PURE__ */ jsxDEV("table", {
+      className: "border-border min-w-full border-collapse border text-sm",
+      children: [
+        /* @__PURE__ */ jsxDEV("thead", {
+          children: /* @__PURE__ */ jsxDEV("tr", {
+            className: "bg-muted/50",
+            children: headers.map((header, idx) => /* @__PURE__ */ jsxDEV("th", {
+              className: "border-border border px-3 py-2 text-left font-semibold",
+              children: header
+            }, idx, false, undefined, this))
+          }, undefined, false, undefined, this)
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsxDEV("tbody", {
+          children: dataRows.map((row, rowIdx) => /* @__PURE__ */ jsxDEV("tr", {
+            className: "hover:bg-muted/30",
+            children: row.map((cell, cellIdx) => /* @__PURE__ */ jsxDEV("td", {
+              className: "border-border border px-3 py-2",
+              children: formatInlineMarkdown(cell)
+            }, cellIdx, false, undefined, this))
+          }, rowIdx, false, undefined, this))
+        }, undefined, false, undefined, this)
+      ]
+    }, undefined, true, undefined, this)
+  }, `table-${keyPrefix}`, false, undefined, this);
+}
+function formatInlineMarkdown(text) {
+  const parts = text.split(/(\*\*[^*]+\*\*)/g);
+  return parts.map((part, i) => {
+    if (part.startsWith("**") && part.endsWith("**")) {
+      return /* @__PURE__ */ jsxDEV("strong", {
+        children: part.slice(2, -2)
+      }, i, false, undefined, this);
+    }
+    if (part.includes("`")) {
+      const codeParts = part.split(/(`[^`]+`)/g);
+      return codeParts.map((cp, j) => {
+        if (cp.startsWith("`") && cp.endsWith("`")) {
+          return /* @__PURE__ */ jsxDEV("code", {
+            className: "rounded bg-violet-500/10 px-1.5 py-0.5 font-mono text-sm",
+            children: cp.slice(1, -1)
+          }, `${i}-${j}`, false, undefined, this);
+        }
+        return cp;
+      });
+    }
+    return part;
+  });
+}
+function formatPresentationName(name) {
+  const parts = name.split(".");
+  const lastPart = parts[parts.length - 1] ?? name;
+  return lastPart.split("-").map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join(" ");
+}
+export {
+  MarkdownView,
+  MarkdownRenderer
+};

package/dist/node/OverlayContextProvider.js

@@ -0,0 +1,202 @@
+// src/OverlayContextProvider.tsx
+import * as React from "react";
+import { useContext, useMemo } from "react";
+import { jsxDEV } from "react/jsx-dev-runtime";
+"use client";
+var OverlayContext = React.createContext(null);
+function OverlayContextProvider({
+  templateId,
+  role = "user",
+  device = "desktop",
+  children
+}) {
+  const overlays = useMemo(() => getTemplateOverlays(templateId, role), [templateId, role]);
+  const activeOverlays = useMemo(() => {
+    return overlays.filter((overlay) => {
+      const conditions = overlay.conditions;
+      if (!conditions)
+        return true;
+      if (conditions.role && !conditions.role.includes(role)) {
+        return false;
+      }
+      if (conditions.device && conditions.device !== "any" && conditions.device !== device) {
+        return false;
+      }
+      return true;
+    });
+  }, [overlays, role, device]);
+  const overlayMap = useMemo(() => {
+    const map = new Map;
+    for (const overlay of activeOverlays) {
+      map.set(overlay.target, overlay);
+    }
+    return map;
+  }, [activeOverlays]);
+  const applyOverlay = useMemo(() => (path, target) => {
+    const overlay = overlayMap.get(path);
+    if (!overlay)
+      return target;
+    let result = { ...target };
+    for (const mod of overlay.modifications) {
+      switch (mod.op) {
+        case "hide":
+          result = { ...result, hidden: true };
+          break;
+        case "relabel":
+          result = { ...result, label: mod.label };
+          break;
+        case "reorder":
+          result = { ...result, position: mod.position };
+          break;
+        case "restyle":
+          result = {
+            ...result,
+            className: mod.className,
+            variant: mod.variant
+          };
+          break;
+        case "set-default":
+          result = { ...result, defaultValue: mod.value };
+          break;
+      }
+    }
+    return result;
+  }, [overlayMap]);
+  const isHidden = useMemo(() => (path) => {
+    const overlay = overlayMap.get(path);
+    return overlay?.modifications.some((m) => m.op === "hide") ?? false;
+  }, [overlayMap]);
+  const getLabel = useMemo(() => (path, defaultLabel) => {
+    const overlay = overlayMap.get(path);
+    const relabel = overlay?.modifications.find((m) => m.op === "relabel");
+    return relabel && relabel.op === "relabel" ? relabel.label : defaultLabel;
+  }, [overlayMap]);
+  const getPosition = useMemo(() => (path, defaultPosition) => {
+    const overlay = overlayMap.get(path);
+    const reorder = overlay?.modifications.find((m) => m.op === "reorder");
+    return reorder && reorder.op === "reorder" ? reorder.position : defaultPosition;
+  }, [overlayMap]);
+  const getStyle = useMemo(() => (path) => {
+    const overlay = overlayMap.get(path);
+    const restyle = overlay?.modifications.find((m) => m.op === "restyle");
+    if (restyle && restyle.op === "restyle") {
+      return {
+        className: restyle.className,
+        variant: restyle.variant
+      };
+    }
+    return {};
+  }, [overlayMap]);
+  const getDefault = useMemo(() => (path, defaultValue) => {
+    const overlay = overlayMap.get(path);
+    const setDefault = overlay?.modifications.find((m) => m.op === "set-default");
+    return setDefault && setDefault.op === "set-default" ? setDefault.value : defaultValue;
+  }, [overlayMap]);
+  const value = useMemo(() => ({
+    overlays: activeOverlays,
+    applyOverlay,
+    isHidden,
+    getLabel,
+    getPosition,
+    getStyle,
+    getDefault,
+    role,
+    device
+  }), [
+    activeOverlays,
+    applyOverlay,
+    isHidden,
+    getLabel,
+    getPosition,
+    getStyle,
+    getDefault,
+    role,
+    device
+  ]);
+  return /* @__PURE__ */ jsxDEV(OverlayContext.Provider, {
+    value,
+    children
+  }, undefined, false, undefined, this);
+}
+function useOverlayContext() {
+  const context = useContext(OverlayContext);
+  if (!context) {
+    throw new Error("useOverlayContext must be used within an OverlayContextProvider");
+  }
+  return context;
+}
+function useIsInOverlayContext() {
+  return useContext(OverlayContext) !== null;
+}
+function getTemplateOverlays(templateId, _role) {
+  const templateOverlays = {
+    "crm-pipeline": [
+      {
+        id: "crm-hide-internal-fields",
+        target: "deal.internalNotes",
+        modifications: [{ op: "hide" }],
+        conditions: { role: ["viewer", "user"] }
+      },
+      {
+        id: "crm-relabel-value",
+        target: "deal.value",
+        modifications: [{ op: "relabel", label: "Deal Amount" }]
+      }
+    ],
+    "saas-boilerplate": [
+      {
+        id: "saas-hide-billing",
+        target: "settings.billing",
+        modifications: [{ op: "hide" }],
+        conditions: { role: ["viewer"] }
+      },
+      {
+        id: "saas-restyle-plan",
+        target: "settings.plan",
+        modifications: [{ op: "restyle", variant: "premium" }],
+        conditions: { role: ["admin"] }
+      }
+    ],
+    "agent-console": [
+      {
+        id: "agent-hide-cost",
+        target: "run.cost",
+        modifications: [{ op: "hide" }],
+        conditions: { role: ["viewer"] }
+      },
+      {
+        id: "agent-relabel-tokens",
+        target: "run.tokens",
+        modifications: [{ op: "relabel", label: "Token Usage" }]
+      }
+    ],
+    "todos-app": [
+      {
+        id: "todos-hide-assignee",
+        target: "task.assignee",
+        modifications: [{ op: "hide" }],
+        conditions: { device: "mobile" }
+      }
+    ],
+    "messaging-app": [
+      {
+        id: "messaging-reorder-timestamp",
+        target: "message.timestamp",
+        modifications: [{ op: "reorder", position: 0 }]
+      }
+    ],
+    "recipe-app-i18n": [
+      {
+        id: "recipe-relabel-servings",
+        target: "recipe.servings",
+        modifications: [{ op: "relabel", label: "Portions" }]
+      }
+    ]
+  };
+  return templateOverlays[templateId] ?? [];
+}
+export {
+  useOverlayContext,
+  useIsInOverlayContext,
+  OverlayContextProvider
+};