@contractspec/lib.example-shared-ui 6.0.16 → 6.0.18

package/dist/node/PersonalizationInsights.js

@@ -1,455 +1 @@
-// 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 { Button } from "@contractspec/lib.design-system";
-import { Badge } from "@contractspec/lib.ui-kit-web/ui/badge";
-import { Card } from "@contractspec/lib.ui-kit-web/ui/card";
-import { useCallback as useCallback2, useMemo as useMemo2, useState as useState2 } from "react";
-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-blue-500/20 border-b 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: "p-1 text-muted-foreground hover:text-foreground",
-                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 font-semibold text-blue-400 text-xs 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 font-semibold text-blue-400 text-xs 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-blue-500/10 border-t 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: "font-bold text-lg",
-        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-blue-500/10 border-t pt-4",
-    children: [
-      summary.mostUsedTemplates.length > 0 && /* @__PURE__ */ jsxDEV("div", {
-        children: [
-          /* @__PURE__ */ jsxDEV("h4", {
-            className: "mb-2 font-semibold text-blue-400 text-xs 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 font-semibold text-blue-400 text-xs 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 font-semibold text-blue-400 text-xs 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
-};
+import{useCallback as A,useEffect as b,useMemo as p,useRef as y,useState as I}from"react";var k="contractspec-behavior-data",f=["playground","specs","builder","markdown","evolution","canvas_add","canvas_delete","spec_save","spec_validate","ai_suggestions"];function T(P){let[J,W]=I([]),Z=y(new Date),[H,O]=I(0);b(()=>{try{let K=localStorage.getItem(k);if(K){let V=JSON.parse(K);W(V.events.map((L)=>({...L,timestamp:new Date(L.timestamp)}))),Z.current=new Date(V.sessionStart)}}catch{}},[]),b(()=>{if(J.length>0)try{localStorage.setItem(k,JSON.stringify({events:J.map((K)=>({...K,timestamp:K.timestamp.toISOString()})),sessionStart:Z.current.toISOString()}))}catch{}},[J]);let M=A((K,V)=>{let L={type:K,timestamp:new Date,templateId:P,metadata:V};W((N)=>[...N,L]),O((N)=>N+1)},[P]),w=A((K)=>{return J.filter((V)=>V.type===K)},[J]),_=A(()=>{let V=new Date().getTime()-Z.current.getTime(),L=new Map;for(let z of J){let X=L.get(z.templateId)??0;L.set(z.templateId,X+1)}let N=Array.from(L.entries()).map(([z,X])=>({templateId:z,count:X})).sort((z,X)=>X.count-z.count).slice(0,3),G=new Map;for(let z of J)if(z.type==="mode_change"&&z.metadata?.mode){let X=z.metadata.mode,g=G.get(X)??0;G.set(X,g+1)}let D=Array.from(G.entries()).map(([z,X])=>({mode:z,count:X})).sort((z,X)=>X.count-z.count),Y=new Set;for(let z of J){if(z.type==="mode_change"&&z.metadata?.mode)Y.add(z.metadata.mode);if(z.type==="feature_usage"&&z.metadata?.feature)Y.add(z.metadata.feature);if(z.type==="canvas_interaction"){let X=z.metadata?.action;if(X==="add")Y.add("canvas_add");if(X==="delete")Y.add("canvas_delete")}if(z.type==="spec_edit"){let X=z.metadata?.action;if(X==="save")Y.add("spec_save");if(X==="validate")Y.add("spec_validate")}}let R=f.filter((z)=>!Y.has(z)),E=J.filter((z)=>z.type==="error").length,S=j(Array.from(Y),R,D,J.length);return{totalEvents:J.length,sessionDuration:V,mostUsedTemplates:N,mostUsedModes:D,featuresUsed:Array.from(Y),unusedFeatures:R,errorCount:E,recommendations:S}},[J]),$=A(()=>{W([]),O(0),Z.current=new Date,localStorage.removeItem(k)},[]);return p(()=>({trackEvent:M,getSummary:_,getEventsByType:w,eventCount:H,sessionStart:Z.current,clear:$}),[M,_,w,H,$])}function j(P,J,W,Z){let H=[];if(J.includes("evolution"))H.push("Try the AI Evolution mode to get automated improvement suggestions");if(J.includes("markdown"))H.push("Use Markdown preview to see documentation for your specs");if(J.includes("builder"))H.push("Explore the Visual Builder to design your UI components");if(!P.includes("spec_validate")&&P.includes("specs"))H.push("Don't forget to validate your specs before saving");if(P.includes("evolution")&&!P.includes("ai_suggestions"))H.push("Generate AI suggestions to get actionable improvement recommendations");if(Z>50)H.push("Great engagement! Consider saving your work regularly");if(W.length===1)H.push("Try different modes to explore all sandbox capabilities");return H}import{Button as U}from"@contractspec/lib.design-system";import{Badge as B}from"@contractspec/lib.ui-kit-web/ui/badge";import{Card as v}from"@contractspec/lib.ui-kit-web/ui/card";import{useCallback as C,useMemo as x,useState as i}from"react";import{jsx as q,jsxs as Q}from"react/jsx-runtime";function t({templateId:P,collapsed:J=!1,onToggle:W}){let{getSummary:Z,eventCount:H,clear:O,sessionStart:M}=T(P),[w,_]=i(!1),$=x(()=>Z(),[Z]),K=C((L)=>{let N=Math.floor(L/1000),G=Math.floor(N/60),D=Math.floor(G/60);if(D>0)return`${D}h ${G%60}m`;if(G>0)return`${G}m ${N%60}s`;return`${N}s`},[]),V=C(()=>{O()},[O]);if(J)return Q("button",{onClick:W,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:[q("span",{children:"\uD83D\uDCCA"}),q("span",{children:"Insights"}),q(B,{variant:"secondary",children:H})]});return Q(v,{className:"overflow-hidden",children:[Q("div",{className:"flex items-center justify-between border-blue-500/20 border-b bg-blue-500/5 px-4 py-3",children:[Q("div",{className:"flex items-center gap-2",children:[q("span",{children:"\uD83D\uDCCA"}),q("span",{className:"font-semibold",children:"Personalization Insights"})]}),Q("div",{className:"flex items-center gap-2",children:[q(U,{variant:"ghost",size:"sm",onPress:()=>_(!w),children:w?"Hide Details":"Show Details"}),W&&q("button",{onClick:W,className:"p-1 text-muted-foreground hover:text-foreground",type:"button",title:"Collapse",children:"✕"})]})]}),Q("div",{className:"p-4",children:[Q("div",{className:"mb-4 grid grid-cols-2 gap-3 md:grid-cols-4",children:[q(h,{label:"Session Time",value:K($.sessionDuration),icon:"⏱️"}),q(h,{label:"Events Tracked",value:$.totalEvents.toString(),icon:"\uD83D\uDCC8"}),q(h,{label:"Features Used",value:`${$.featuresUsed.length}/${$.featuresUsed.length+$.unusedFeatures.length}`,icon:"✨"}),q(h,{label:"Errors",value:$.errorCount.toString(),icon:"⚠️",variant:$.errorCount>0?"warning":"success"})]}),$.recommendations.length>0&&Q("div",{className:"mb-4",children:[q("h4",{className:"mb-2 font-semibold text-blue-400 text-xs uppercase",children:"Recommendations"}),q("ul",{className:"space-y-1",children:$.recommendations.map((L,N)=>Q("li",{className:"flex items-start gap-2 text-sm",children:[q("span",{className:"text-blue-400",children:"\uD83D\uDCA1"}),q("span",{children:L})]},N))})]}),$.unusedFeatures.length>0&&Q("div",{className:"mb-4",children:[q("h4",{className:"mb-2 font-semibold text-blue-400 text-xs uppercase",children:"Try These Features"}),q("div",{className:"flex flex-wrap gap-2",children:$.unusedFeatures.slice(0,5).map((L)=>q(B,{variant:"secondary",children:F(L)},L))})]}),w&&q(l,{summary:$,sessionStart:M}),q("div",{className:"mt-4 flex justify-end border-blue-500/10 border-t pt-4",children:q(U,{variant:"ghost",size:"sm",onPress:V,children:"Clear Data"})})]})]})}function h({label:P,value:J,icon:W,variant:Z="default"}){return Q("div",{className:`rounded-lg border p-3 text-center ${{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"}[Z]}`,children:[q("div",{className:"mb-1 text-lg",children:W}),q("div",{className:"font-bold text-lg",children:J}),q("div",{className:"text-muted-foreground text-xs",children:P})]})}function l({summary:P,sessionStart:J}){return Q("div",{className:"mt-4 space-y-4 border-blue-500/10 border-t pt-4",children:[P.mostUsedTemplates.length>0&&Q("div",{children:[q("h4",{className:"mb-2 font-semibold text-blue-400 text-xs uppercase",children:"Most Used Templates"}),q("div",{className:"space-y-1",children:P.mostUsedTemplates.map(({templateId:W,count:Z})=>Q("div",{className:"flex items-center justify-between text-sm",children:[q("span",{children:c(W)}),Q("span",{className:"text-muted-foreground",children:[Z," events"]})]},W))})]}),P.mostUsedModes.length>0&&Q("div",{children:[q("h4",{className:"mb-2 font-semibold text-blue-400 text-xs uppercase",children:"Mode Usage"}),q("div",{className:"space-y-1",children:P.mostUsedModes.map(({mode:W,count:Z})=>Q("div",{className:"flex items-center justify-between text-sm",children:[q("span",{children:F(W)}),Q("span",{className:"text-muted-foreground",children:[Z," switches"]})]},W))})]}),Q("div",{children:[q("h4",{className:"mb-2 font-semibold text-blue-400 text-xs uppercase",children:"Features Used"}),q("div",{className:"flex flex-wrap gap-2",children:P.featuresUsed.map((W)=>Q(B,{variant:"default",className:"border-green-500/30 bg-green-500/20 text-green-400",children:["✓ ",F(W)]},W))})]}),Q("div",{className:"text-muted-foreground text-xs",children:["Session started: ",J.toLocaleString()]})]})}function F(P){return P.replace(/_/g," ").replace(/\b\w/g,(J)=>J.toUpperCase())}function c(P){return P.replace(/-/g," ").replace(/\b\w/g,(J)=>J.toUpperCase())}export{t as PersonalizationInsights};

package/dist/node/SaveToStudioButton.js

@@ -1,73 +1 @@
-// 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 { Sparkles } from "lucide-react";
-import { useState } from "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-emerald-400 text-xs",
-        children: "Template sent to Studio."
-      }, undefined, false, undefined, this) : null
-    ]
-  }, undefined, true, undefined, this);
-}
-export {
-  SaveToStudioButton
-};
+import{createContext as f,useContext as b}from"react";var i=Symbol.for("@contractspec/lib.example-shared-ui/template-runtime-context");function h(){let e=globalThis;return e[i]??=f(null),e[i]}var k=h();function l(){let e=b(k);if(!e)throw Error("useTemplateRuntime must be used within a TemplateRuntimeProvider");return e}import{Sparkles as y}from"lucide-react";import{useState as d}from"react";import{jsx as r,jsxs as u}from"react/jsx-runtime";function $({organizationId:e="demo-org",projectName:m,endpoint:p,token:c}){let{installer:v,templateId:S,template:g}=l(),[t,a]=d("idle"),[o,n]=d(null);return u("div",{className:"flex flex-col items-end gap-1",children:[u("button",{type:"button",className:"btn-primary inline-flex items-center gap-2 text-sm",onClick:async()=>{a("saving"),n(null);try{await v.saveToStudio({templateId:S,projectName:m??`${g.name} demo`,organizationId:e,endpoint:p,token:c}),a("saved"),setTimeout(()=>a("idle"),3000)}catch(s){a("error"),n(s instanceof Error?s.message:"Unknown error")}},disabled:t==="saving",children:[r(y,{className:"h-4 w-4"}),t==="saving"?"Publishing…":"Save to Studio"]}),t==="error"&&o?r("p",{className:"text-destructive text-xs",children:o}):null,t==="saved"?r("p",{className:"text-emerald-400 text-xs",children:"Template sent to Studio."}):null]})}export{$ as SaveToStudioButton};