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

package/dist/node/PersonalizationInsights.js

@@ -0,0 +1,455 @@
+// src/hooks/useBehaviorTracking.ts
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+"use client";
+var BEHAVIOR_STORAGE_KEY = "contractspec-behavior-data";
+var ALL_FEATURES = [
+  "playground",
+  "specs",
+  "builder",
+  "markdown",
+  "evolution",
+  "canvas_add",
+  "canvas_delete",
+  "spec_save",
+  "spec_validate",
+  "ai_suggestions"
+];
+function useBehaviorTracking(templateId) {
+  const [events, setEvents] = useState([]);
+  const sessionStartRef = useRef(new Date);
+  const [eventCount, setEventCount] = useState(0);
+  useEffect(() => {
+    try {
+      const stored = localStorage.getItem(BEHAVIOR_STORAGE_KEY);
+      if (stored) {
+        const data = JSON.parse(stored);
+        setEvents(data.events.map((e) => ({
+          ...e,
+          timestamp: new Date(e.timestamp)
+        })));
+        sessionStartRef.current = new Date(data.sessionStart);
+      }
+    } catch {}
+  }, []);
+  useEffect(() => {
+    if (events.length > 0) {
+      try {
+        localStorage.setItem(BEHAVIOR_STORAGE_KEY, JSON.stringify({
+          events: events.map((e) => ({
+            ...e,
+            timestamp: e.timestamp.toISOString()
+          })),
+          sessionStart: sessionStartRef.current.toISOString()
+        }));
+      } catch {}
+    }
+  }, [events]);
+  const trackEvent = useCallback((type, metadata) => {
+    const event = {
+      type,
+      timestamp: new Date,
+      templateId,
+      metadata
+    };
+    setEvents((prev) => [...prev, event]);
+    setEventCount((prev) => prev + 1);
+  }, [templateId]);
+  const getEventsByType = useCallback((type) => {
+    return events.filter((e) => e.type === type);
+  }, [events]);
+  const getSummary = useCallback(() => {
+    const now = new Date;
+    const sessionDuration = now.getTime() - sessionStartRef.current.getTime();
+    const templateCounts = new Map;
+    for (const event of events) {
+      const count = templateCounts.get(event.templateId) ?? 0;
+      templateCounts.set(event.templateId, count + 1);
+    }
+    const mostUsedTemplates = Array.from(templateCounts.entries()).map(([templateId2, count]) => ({ templateId: templateId2, count })).sort((a, b) => b.count - a.count).slice(0, 3);
+    const modeCounts = new Map;
+    for (const event of events) {
+      if (event.type === "mode_change" && event.metadata?.mode) {
+        const mode = event.metadata.mode;
+        const count = modeCounts.get(mode) ?? 0;
+        modeCounts.set(mode, count + 1);
+      }
+    }
+    const mostUsedModes = Array.from(modeCounts.entries()).map(([mode, count]) => ({ mode, count })).sort((a, b) => b.count - a.count);
+    const featuresUsed = new Set;
+    for (const event of events) {
+      if (event.type === "mode_change" && event.metadata?.mode) {
+        featuresUsed.add(event.metadata.mode);
+      }
+      if (event.type === "feature_usage" && event.metadata?.feature) {
+        featuresUsed.add(event.metadata.feature);
+      }
+      if (event.type === "canvas_interaction") {
+        const action = event.metadata?.action;
+        if (action === "add")
+          featuresUsed.add("canvas_add");
+        if (action === "delete")
+          featuresUsed.add("canvas_delete");
+      }
+      if (event.type === "spec_edit") {
+        const action = event.metadata?.action;
+        if (action === "save")
+          featuresUsed.add("spec_save");
+        if (action === "validate")
+          featuresUsed.add("spec_validate");
+      }
+    }
+    const unusedFeatures = ALL_FEATURES.filter((f) => !featuresUsed.has(f));
+    const errorCount = events.filter((e) => e.type === "error").length;
+    const recommendations = generateRecommendations(Array.from(featuresUsed), unusedFeatures, mostUsedModes, events.length);
+    return {
+      totalEvents: events.length,
+      sessionDuration,
+      mostUsedTemplates,
+      mostUsedModes,
+      featuresUsed: Array.from(featuresUsed),
+      unusedFeatures,
+      errorCount,
+      recommendations
+    };
+  }, [events]);
+  const clear = useCallback(() => {
+    setEvents([]);
+    setEventCount(0);
+    sessionStartRef.current = new Date;
+    localStorage.removeItem(BEHAVIOR_STORAGE_KEY);
+  }, []);
+  return useMemo(() => ({
+    trackEvent,
+    getSummary,
+    getEventsByType,
+    eventCount,
+    sessionStart: sessionStartRef.current,
+    clear
+  }), [trackEvent, getSummary, getEventsByType, eventCount, clear]);
+}
+function generateRecommendations(featuresUsed, unusedFeatures, mostUsedModes, totalEvents) {
+  const recommendations = [];
+  if (unusedFeatures.includes("evolution")) {
+    recommendations.push("Try the AI Evolution mode to get automated improvement suggestions");
+  }
+  if (unusedFeatures.includes("markdown")) {
+    recommendations.push("Use Markdown preview to see documentation for your specs");
+  }
+  if (unusedFeatures.includes("builder")) {
+    recommendations.push("Explore the Visual Builder to design your UI components");
+  }
+  if (!featuresUsed.includes("spec_validate") && featuresUsed.includes("specs")) {
+    recommendations.push("Don't forget to validate your specs before saving");
+  }
+  if (featuresUsed.includes("evolution") && !featuresUsed.includes("ai_suggestions")) {
+    recommendations.push("Generate AI suggestions to get actionable improvement recommendations");
+  }
+  if (totalEvents > 50) {
+    recommendations.push("Great engagement! Consider saving your work regularly");
+  }
+  if (mostUsedModes.length === 1) {
+    recommendations.push("Try different modes to explore all sandbox capabilities");
+  }
+  return recommendations;
+}
+
+// src/PersonalizationInsights.tsx
+import { useCallback as useCallback2, useMemo as useMemo2, useState as useState2 } from "react";
+import { Button } 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 PersonalizationInsights({
+  templateId,
+  collapsed = false,
+  onToggle
+}) {
+  const { getSummary, eventCount, clear, sessionStart } = useBehaviorTracking(templateId);
+  const [showDetails, setShowDetails] = useState2(false);
+  const summary = useMemo2(() => getSummary(), [getSummary]);
+  const formatDuration = useCallback2((ms) => {
+    const seconds = Math.floor(ms / 1000);
+    const minutes = Math.floor(seconds / 60);
+    const hours = Math.floor(minutes / 60);
+    if (hours > 0) {
+      return `${hours}h ${minutes % 60}m`;
+    }
+    if (minutes > 0) {
+      return `${minutes}m ${seconds % 60}s`;
+    }
+    return `${seconds}s`;
+  }, []);
+  const handleClear = useCallback2(() => {
+    clear();
+  }, [clear]);
+  if (collapsed) {
+    return /* @__PURE__ */ jsxDEV("button", {
+      onClick: onToggle,
+      className: "flex items-center gap-2 rounded-lg border border-blue-500/30 bg-blue-500/10 px-3 py-2 text-sm transition hover:bg-blue-500/20",
+      type: "button",
+      children: [
+        /* @__PURE__ */ jsxDEV("span", {
+          children: "\uD83D\uDCCA"
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsxDEV("span", {
+          children: "Insights"
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsxDEV(Badge, {
+          variant: "secondary",
+          children: eventCount
+        }, undefined, false, undefined, this)
+      ]
+    }, undefined, true, undefined, this);
+  }
+  return /* @__PURE__ */ jsxDEV(Card, {
+    className: "overflow-hidden",
+    children: [
+      /* @__PURE__ */ jsxDEV("div", {
+        className: "flex items-center justify-between border-b border-blue-500/20 bg-blue-500/5 px-4 py-3",
+        children: [
+          /* @__PURE__ */ jsxDEV("div", {
+            className: "flex items-center gap-2",
+            children: [
+              /* @__PURE__ */ jsxDEV("span", {
+                children: "\uD83D\uDCCA"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV("span", {
+                className: "font-semibold",
+                children: "Personalization Insights"
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV("div", {
+            className: "flex items-center gap-2",
+            children: [
+              /* @__PURE__ */ jsxDEV(Button, {
+                variant: "ghost",
+                size: "sm",
+                onPress: () => setShowDetails(!showDetails),
+                children: showDetails ? "Hide Details" : "Show Details"
+              }, undefined, false, undefined, this),
+              onToggle && /* @__PURE__ */ jsxDEV("button", {
+                onClick: onToggle,
+                className: "text-muted-foreground hover:text-foreground p-1",
+                type: "button",
+                title: "Collapse",
+                children: "✕"
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV("div", {
+        className: "p-4",
+        children: [
+          /* @__PURE__ */ jsxDEV("div", {
+            className: "mb-4 grid grid-cols-2 gap-3 md:grid-cols-4",
+            children: [
+              /* @__PURE__ */ jsxDEV(StatCard, {
+                label: "Session Time",
+                value: formatDuration(summary.sessionDuration),
+                icon: "⏱️"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV(StatCard, {
+                label: "Events Tracked",
+                value: summary.totalEvents.toString(),
+                icon: "\uD83D\uDCC8"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV(StatCard, {
+                label: "Features Used",
+                value: `${summary.featuresUsed.length}/${summary.featuresUsed.length + summary.unusedFeatures.length}`,
+                icon: "✨"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV(StatCard, {
+                label: "Errors",
+                value: summary.errorCount.toString(),
+                icon: "⚠️",
+                variant: summary.errorCount > 0 ? "warning" : "success"
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          summary.recommendations.length > 0 && /* @__PURE__ */ jsxDEV("div", {
+            className: "mb-4",
+            children: [
+              /* @__PURE__ */ jsxDEV("h4", {
+                className: "mb-2 text-xs font-semibold text-blue-400 uppercase",
+                children: "Recommendations"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV("ul", {
+                className: "space-y-1",
+                children: summary.recommendations.map((rec, index) => /* @__PURE__ */ jsxDEV("li", {
+                  className: "flex items-start gap-2 text-sm",
+                  children: [
+                    /* @__PURE__ */ jsxDEV("span", {
+                      className: "text-blue-400",
+                      children: "\uD83D\uDCA1"
+                    }, undefined, false, undefined, this),
+                    /* @__PURE__ */ jsxDEV("span", {
+                      children: rec
+                    }, undefined, false, undefined, this)
+                  ]
+                }, index, true, undefined, this))
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          summary.unusedFeatures.length > 0 && /* @__PURE__ */ jsxDEV("div", {
+            className: "mb-4",
+            children: [
+              /* @__PURE__ */ jsxDEV("h4", {
+                className: "mb-2 text-xs font-semibold text-blue-400 uppercase",
+                children: "Try These Features"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV("div", {
+                className: "flex flex-wrap gap-2",
+                children: summary.unusedFeatures.slice(0, 5).map((feature) => /* @__PURE__ */ jsxDEV(Badge, {
+                  variant: "secondary",
+                  children: formatFeatureName(feature)
+                }, feature, false, undefined, this))
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          showDetails && /* @__PURE__ */ jsxDEV(DetailedInsights, {
+            summary,
+            sessionStart
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("div", {
+            className: "mt-4 flex justify-end border-t border-blue-500/10 pt-4",
+            children: /* @__PURE__ */ jsxDEV(Button, {
+              variant: "ghost",
+              size: "sm",
+              onPress: handleClear,
+              children: "Clear Data"
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function StatCard({
+  label,
+  value,
+  icon,
+  variant = "default"
+}) {
+  const bgColors = {
+    default: "bg-blue-500/5 border-blue-500/20",
+    warning: "bg-amber-500/5 border-amber-500/20",
+    success: "bg-green-500/5 border-green-500/20"
+  };
+  return /* @__PURE__ */ jsxDEV("div", {
+    className: `rounded-lg border p-3 text-center ${bgColors[variant]}`,
+    children: [
+      /* @__PURE__ */ jsxDEV("div", {
+        className: "mb-1 text-lg",
+        children: icon
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV("div", {
+        className: "text-lg font-bold",
+        children: value
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV("div", {
+        className: "text-muted-foreground text-xs",
+        children: label
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function DetailedInsights({
+  summary,
+  sessionStart
+}) {
+  return /* @__PURE__ */ jsxDEV("div", {
+    className: "mt-4 space-y-4 border-t border-blue-500/10 pt-4",
+    children: [
+      summary.mostUsedTemplates.length > 0 && /* @__PURE__ */ jsxDEV("div", {
+        children: [
+          /* @__PURE__ */ jsxDEV("h4", {
+            className: "mb-2 text-xs font-semibold text-blue-400 uppercase",
+            children: "Most Used Templates"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("div", {
+            className: "space-y-1",
+            children: summary.mostUsedTemplates.map(({ templateId, count }) => /* @__PURE__ */ jsxDEV("div", {
+              className: "flex items-center justify-between text-sm",
+              children: [
+                /* @__PURE__ */ jsxDEV("span", {
+                  children: formatTemplateId(templateId)
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV("span", {
+                  className: "text-muted-foreground",
+                  children: [
+                    count,
+                    " events"
+                  ]
+                }, undefined, true, undefined, this)
+              ]
+            }, templateId, true, undefined, this))
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      summary.mostUsedModes.length > 0 && /* @__PURE__ */ jsxDEV("div", {
+        children: [
+          /* @__PURE__ */ jsxDEV("h4", {
+            className: "mb-2 text-xs font-semibold text-blue-400 uppercase",
+            children: "Mode Usage"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("div", {
+            className: "space-y-1",
+            children: summary.mostUsedModes.map(({ mode, count }) => /* @__PURE__ */ jsxDEV("div", {
+              className: "flex items-center justify-between text-sm",
+              children: [
+                /* @__PURE__ */ jsxDEV("span", {
+                  children: formatFeatureName(mode)
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV("span", {
+                  className: "text-muted-foreground",
+                  children: [
+                    count,
+                    " switches"
+                  ]
+                }, undefined, true, undefined, this)
+              ]
+            }, mode, true, undefined, this))
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV("div", {
+        children: [
+          /* @__PURE__ */ jsxDEV("h4", {
+            className: "mb-2 text-xs font-semibold text-blue-400 uppercase",
+            children: "Features Used"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("div", {
+            className: "flex flex-wrap gap-2",
+            children: summary.featuresUsed.map((feature) => /* @__PURE__ */ jsxDEV(Badge, {
+              variant: "default",
+              className: "border-green-500/30 bg-green-500/20 text-green-400",
+              children: [
+                "✓ ",
+                formatFeatureName(feature)
+              ]
+            }, feature, true, undefined, this))
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV("div", {
+        className: "text-muted-foreground text-xs",
+        children: [
+          "Session started: ",
+          sessionStart.toLocaleString()
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function formatFeatureName(feature) {
+  return feature.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
+}
+function formatTemplateId(id) {
+  return id.replace(/-/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
+}
+export {
+  PersonalizationInsights
+};

package/dist/node/SaveToStudioButton.js

@@ -0,0 +1,73 @@
+// 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/SaveToStudioButton.tsx
+import { useState } from "react";
+import { Sparkles } from "lucide-react";
+import { jsxDEV } from "react/jsx-dev-runtime";
+"use client";
+function SaveToStudioButton({
+  organizationId = "demo-org",
+  projectName,
+  endpoint,
+  token
+}) {
+  const { installer, templateId, template } = useTemplateRuntime();
+  const [status, setStatus] = useState("idle");
+  const [error, setError] = useState(null);
+  const handleSave = async () => {
+    setStatus("saving");
+    setError(null);
+    try {
+      await installer.saveToStudio({
+        templateId,
+        projectName: projectName ?? `${template.name} demo`,
+        organizationId,
+        endpoint,
+        token
+      });
+      setStatus("saved");
+      setTimeout(() => setStatus("idle"), 3000);
+    } catch (err) {
+      setStatus("error");
+      setError(err instanceof Error ? err.message : "Unknown error");
+    }
+  };
+  return /* @__PURE__ */ jsxDEV("div", {
+    className: "flex flex-col items-end gap-1",
+    children: [
+      /* @__PURE__ */ jsxDEV("button", {
+        type: "button",
+        className: "btn-primary inline-flex items-center gap-2 text-sm",
+        onClick: handleSave,
+        disabled: status === "saving",
+        children: [
+          /* @__PURE__ */ jsxDEV(Sparkles, {
+            className: "h-4 w-4"
+          }, undefined, false, undefined, this),
+          status === "saving" ? "Publishing…" : "Save to Studio"
+        ]
+      }, undefined, true, undefined, this),
+      status === "error" && error ? /* @__PURE__ */ jsxDEV("p", {
+        className: "text-destructive text-xs",
+        children: error
+      }, undefined, false, undefined, this) : null,
+      status === "saved" ? /* @__PURE__ */ jsxDEV("p", {
+        className: "text-xs text-emerald-400",
+        children: "Template sent to Studio."
+      }, undefined, false, undefined, this) : null
+    ]
+  }, undefined, true, undefined, this);
+}
+export {
+  SaveToStudioButton
+};