@togo-framework/ui 0.1.7 → 0.1.9

package/dist/index.d.ts

@@ -3957,22 +3957,39 @@ declare namespace PillButton {
     var displayName: string;
 }
 
+interface BrandGlyph {
+    path: string;
+    hex: string;
+}
+/** A provider plugin nested under a base card (auth → auth-dev, auth-firebase…). */
+interface ProviderChip {
+    name: string;
+    href: string;
+    icon?: LucideIcon;
+    brand?: BrandGlyph;
+    color?: string;
+}
 interface MarketplaceCardProps {
     name: string;
     href: string;
     category?: string;
-    /** Hex that drives the cover gradient + icon tint. */
+    /** Hex driving the cover gradient + glyph tint (per-plugin). */
+    color?: string;
+    /** Back-compat alias for `color`. */
     categoryColor?: string;
     icon?: LucideIcon;
+    /** Real brand SVG (path + hex). Wins over `icon`. */
+    brandIcon?: BrandGlyph;
     description?: string;
-    /** Owner/org, e.g. "togo-framework". */
     author?: string;
     stars?: number;
     downloads?: number;
     enabled?: boolean;
+    /** Providers nested under a base card. Renders a "providers" chip row. */
+    providers?: ProviderChip[];
     className?: string;
 }
-declare function MarketplaceCard({ name, href, category, categoryColor, icon: Icon, description, author, stars, downloads, enabled, className, }: MarketplaceCardProps): React$1.JSX.Element;
+declare function MarketplaceCard({ name, href, category, color, categoryColor, icon: Icon, brandIcon, description, author, stars, downloads, enabled, providers, className, }: MarketplaceCardProps): React$1.JSX.Element;
 declare namespace MarketplaceCard {
     var displayName: string;
 }
@@ -4108,12 +4125,56 @@ interface TypingTerminalProps {
     loop?: boolean;
     /** Fixed body height (px). The window never grows/jumps while typing. */
     height?: number;
+    /** Fired once when the playback (or the static frame) completes. */
+    onComplete?: () => void;
 }
-declare function TypingTerminal({ steps, endSlot, title, className, typeMs, lineMs, loop, height }: TypingTerminalProps): React$1.JSX.Element;
+declare function TypingTerminal({ steps, endSlot, title, className, typeMs, lineMs, loop, height, onComplete }: TypingTerminalProps): React$1.JSX.Element;
 declare namespace TypingTerminal {
     var displayName: string;
 }
 
+type ClaudeStep = {
+    kind: "user";
+    text: string;
+} | {
+    kind: "assistant";
+    text: string;
+} | {
+    kind: "tool";
+    tool: string;
+    arg: string;
+    result?: string;
+};
+interface ClaudeSessionProps {
+    steps: ClaudeStep[];
+    /** Revealed after the last step finishes (e.g. a BrowserFrame with the running app). */
+    endSlot?: React$1.ReactNode;
+    title?: string;
+    className?: string;
+    typeMs?: number;
+    lineMs?: number;
+    loop?: boolean;
+    /** Fixed body height (px). The window never grows/jumps while playing. */
+    height?: number;
+    /** Fired once when the playback (or the static frame) completes. */
+    onComplete?: () => void;
+}
+declare function ClaudeSession({ steps, endSlot, title, className, typeMs, lineMs, loop, height, onComplete }: ClaudeSessionProps): React$1.JSX.Element;
+declare namespace ClaudeSession {
+    var displayName: string;
+}
+
+interface BrowserFrameProps {
+    /** URL shown in the address bar. */
+    url?: string;
+    children: React$1.ReactNode;
+    className?: string;
+}
+declare function BrowserFrame({ url, children, className }: BrowserFrameProps): React$1.JSX.Element;
+declare namespace BrowserFrame {
+    var displayName: string;
+}
+
 interface MascotMarkProps {
     /** Source of the head mark SVG (defaults to /togo-mark.svg). */
     src?: string;
@@ -4125,4 +4186,4 @@ declare namespace MascotMark {
     var displayName: string;
 }
 
-export { type A2UIActionItem, type A2UIActionsData, type A2UIArtifact$1 as A2UIArtifact, type A2UICardData, type A2UICardField, type A2UIChartData, type A2UIChartSeries, type A2UIClientCandidate, type A2UIClientCandidatesData, type A2UIClientDiffConfirmData, type A2UIClientDiffRow, type A2UIClientField, type A2UIClientFieldPickerData, type A2UIKind, type A2UIMarkdownData, type A2UIPersonaStarter, type A2UIPersonaStartersData, type A2UITableColumn, type A2UITableData, type ActivityBucket, AdminLayout, type AdminLayoutProps, type AdminSubNavItem, AgentSteps, type AlertMapItem, type AlertSeverity, type AppBrand, AppHeader, type AppHeaderProps, AppLayout, type AppLayoutProps, type AppNavGroup, type AppNavItem, AppPageShell, type AppPageShellProps, AppSidebar, type AppSidebarProps, type AppearanceMode, ArtifactActions, type ArtifactActionsProps, ArtifactCard, type ArtifactCardProps, ArtifactChart, type ArtifactChartProps, ArtifactClientCandidates, type ArtifactClientCandidatesProps, ArtifactClientDiffConfirm, type ArtifactClientDiffConfirmProps, ArtifactClientFieldPicker, type ArtifactClientFieldPickerProps, type ArtifactInteraction, ArtifactMarkdown, type ArtifactMarkdownProps, ArtifactPersonaStarters, type ArtifactPersonaStartersProps, ArtifactRenderer, type ArtifactRendererProps, ArtifactTable, type ArtifactTableProps, ArtifactViewer, AuroraBackground, type AuroraBackgroundProps, AuthCard, type AuthCardBrand, type AuthClient, AuthErrorAlert, AuthFlow, type AuthLayout, AuthStepHeader, type BarPoint, Callout, type CardFilter, CardGrid, type CardGridLabels, ChatThread, CodeBlock, CodeShowcase, type CodeShowcaseProps, type CodeShowcaseTab, ColorPicker, type ColorPickerProps, CommandPalette, ContextualSkeleton, type CopilotClient, type CopilotEvent, CopilotLauncher, CopilotProvider, type CopilotQuickAction, type CopilotRequest, CopilotSelectionTrigger, type CopilotSelectionTriggerProps, DEFAULT_LAYERS, DEFAULT_LEGEND_GROUPS, DEFAULT_REGION_PRESETS, DataState, type DataStateLabels, type DataStateProps, DataTable, type DataTableBulkAction, type DataTableColumnFilter, type DataTableColumnMeta, type DataTableDensity, type DataTableFilterType, type DataTableLanguage, type DataTableProps, type DataTableSelectOption, type DataTableServerCallbacks, type DataTableServerState, type DockPosition, DocsLayout, type DocsLayoutProps, type DocsNavGroup, type DocsNavItem, DocsSidebar, DocsTOC, DynamicIcon, DynamicSection, type DynamicSectionProps, EmptyState, type EmptyStateProps, EntityNetworkGraph, type EntityNetworkGraphProps, type ErrorFilter, ErrorTrackingPage, type ErrorTrackingPageProps, EventMapPanel, type EventMapPanelProps, Eyebrow, type EyebrowProps, FeatureCard, type FeatureCardProps, type FeedbackAttachment, FeedbackButton, type FeedbackButtonProps, FeedbackHub, type FeedbackHubProps, type FeedbackItem, type FeedbackKind, FeedbackWidget, type FeedbackWidgetProps, FilterBar, type FilterBarProps, type FilterChip, ForgotForm, GlassCard, type GlassCardProps, type GraphLink, type GraphNode, IconPicker, type IconPickerProps, type Issue$1 as Issue, type IssueAssignee, type IssueBreadcrumb, IssueDetail, type IssueDetailProps, type IssueLevel, type IssueSort, type IssueTag, IssuesList, type IssuesListProps, LANG_COOKIE_NAME, type LanguageContextValue, LanguageProvider, type LanguageProviderProps, type LegendGroup, type LegendItem, type LegendShapeType, LockScreen, type LockScreenProps, type LockScreenUser, type LogLevel, LoginForm, type LoginResult, Logo, type LogoProps, type LogoTone, type LogoVariant, type LogsFilter, LogsView, type LogsViewProps, MARKER_COLORS, MARKER_LABELS, type MapLayer, MapLayersPanel, type MapLayersPanelProps, MapLegend, type MapLegendProps, type MapMarker$1 as MapMarker, type MapMarkerType, MapPanel, type MapPanelProps, type MapRegionPreset, MapView, type MapViewProps, MarkdownContent, MarkdownEditor, type MarkdownEditorProps, MarkdownRenderer, type MarkdownRendererProps, MarkdownTable, type MarkdownView, MarketplaceCard, type MarketplaceCardProps, MascotMark, type MascotMarkProps, MiniBarChart, MockupWindow, type MockupWindowProps, type ModelOption, MotorFeedbackLauncher, type MotorFeedbackLauncherProps, NestedStepsEditor, type NestedStepsEditorProps, NetworkGraph, type NetworkGraphProps, type NewFeedback, OTPBoxGroup, type OtpResult, PIPELINE_STAGES, PageHeader, type PageHeaderProps, Pager, type PaletteItem, PasswordInput, PasswordLockScreen, type PasswordLockScreenProps, type PasswordLockScreenUser, type PasswordRule, PasswordStrengthMeter, type PickedLocation, PillButton, type PillButtonProps, type PipelineCard, type PipelineLane, type PipelineModel, type PluginActivitySummary, type PluginAppearanceFields, PluginAppearanceSection, type PluginAppearanceSectionProps, PluginCard, type PluginCatalogEntry, type PluginDetailIdentity, PluginDetailLayout, type PluginDetailLayoutProps, type PluginDetailTab, PluginHero, PluginHeroSkeleton, PluginPageHeader, PluginSectionCard, PluginSparkline, type ProfileSession, ProfileView, type ProfileViewProps, type RenderMapContext, ResetForm, type ResolvedIcon, Reveal, type RevealProps, RouteProgress, type RouteProgressProps, STEP_FIELD_REGISTRY, SectionBoard, type SectionBoardProps, SectionHeading, type SectionHeadingProps, type SectionModel, SectionSkeleton, SentraLoading, type ServiceLogRow, ServiceUnavailable, type ServiceUnavailableProps, SessionExpired, type SessionExpiredProps, SeverityChip, type SidebarConversation, type SidebarUser, SourceBadge, type SparklinePoint, type StackFrame, type StackFrameContextLine, StatCard, type StatCardProps, type StatTile, StatsRow, StatusBadge, type StatusBadgeProps, type StatusBadgeTone, type Step, type StepFieldDef, type StepFieldType, type StepMetrics7d, StepOptionsDialog, type StepOptionsDialogProps, StreamingMessage, type TerminalStep, type TestRunCallbacks, type TestRunCompletePayload, TestRunPanel, type TestRunPanelProps, type TestRunSavedItem, type TestRunStep, type TocItem, TwoFAForm, TypingTerminal, type TypingTerminalProps, UnifiedCopilotDock, type UnlockCredentials, type Verify2FAResult, type View, ViewToggle, type ViewToggleProps, Wordmark, type WordmarkProps, Workflow, WorkflowEditor, type WorkflowEditorProps, type WorkflowPalette, WorkflowPipeline, type WorkflowPipelineProps, type WorkflowProps, type WorkflowSource, type WorkflowStep, type WorkflowStepLike, WorkflowStepNode, type WorkflowStepNodeProps, type WorkflowView, cn, computeRules, computeScore, feedbackButtonVariants, levelTone, resolveIcon, statValueVariants, statusBadgeVariants, useCopilot, useLanguage, useT };
+export { type A2UIActionItem, type A2UIActionsData, type A2UIArtifact$1 as A2UIArtifact, type A2UICardData, type A2UICardField, type A2UIChartData, type A2UIChartSeries, type A2UIClientCandidate, type A2UIClientCandidatesData, type A2UIClientDiffConfirmData, type A2UIClientDiffRow, type A2UIClientField, type A2UIClientFieldPickerData, type A2UIKind, type A2UIMarkdownData, type A2UIPersonaStarter, type A2UIPersonaStartersData, type A2UITableColumn, type A2UITableData, type ActivityBucket, AdminLayout, type AdminLayoutProps, type AdminSubNavItem, AgentSteps, type AlertMapItem, type AlertSeverity, type AppBrand, AppHeader, type AppHeaderProps, AppLayout, type AppLayoutProps, type AppNavGroup, type AppNavItem, AppPageShell, type AppPageShellProps, AppSidebar, type AppSidebarProps, type AppearanceMode, ArtifactActions, type ArtifactActionsProps, ArtifactCard, type ArtifactCardProps, ArtifactChart, type ArtifactChartProps, ArtifactClientCandidates, type ArtifactClientCandidatesProps, ArtifactClientDiffConfirm, type ArtifactClientDiffConfirmProps, ArtifactClientFieldPicker, type ArtifactClientFieldPickerProps, type ArtifactInteraction, ArtifactMarkdown, type ArtifactMarkdownProps, ArtifactPersonaStarters, type ArtifactPersonaStartersProps, ArtifactRenderer, type ArtifactRendererProps, ArtifactTable, type ArtifactTableProps, ArtifactViewer, AuroraBackground, type AuroraBackgroundProps, AuthCard, type AuthCardBrand, type AuthClient, AuthErrorAlert, AuthFlow, type AuthLayout, AuthStepHeader, type BarPoint, type BrandGlyph, BrowserFrame, type BrowserFrameProps, Callout, type CardFilter, CardGrid, type CardGridLabels, ChatThread, ClaudeSession, type ClaudeSessionProps, type ClaudeStep, CodeBlock, CodeShowcase, type CodeShowcaseProps, type CodeShowcaseTab, ColorPicker, type ColorPickerProps, CommandPalette, ContextualSkeleton, type CopilotClient, type CopilotEvent, CopilotLauncher, CopilotProvider, type CopilotQuickAction, type CopilotRequest, CopilotSelectionTrigger, type CopilotSelectionTriggerProps, DEFAULT_LAYERS, DEFAULT_LEGEND_GROUPS, DEFAULT_REGION_PRESETS, DataState, type DataStateLabels, type DataStateProps, DataTable, type DataTableBulkAction, type DataTableColumnFilter, type DataTableColumnMeta, type DataTableDensity, type DataTableFilterType, type DataTableLanguage, type DataTableProps, type DataTableSelectOption, type DataTableServerCallbacks, type DataTableServerState, type DockPosition, DocsLayout, type DocsLayoutProps, type DocsNavGroup, type DocsNavItem, DocsSidebar, DocsTOC, DynamicIcon, DynamicSection, type DynamicSectionProps, EmptyState, type EmptyStateProps, EntityNetworkGraph, type EntityNetworkGraphProps, type ErrorFilter, ErrorTrackingPage, type ErrorTrackingPageProps, EventMapPanel, type EventMapPanelProps, Eyebrow, type EyebrowProps, FeatureCard, type FeatureCardProps, type FeedbackAttachment, FeedbackButton, type FeedbackButtonProps, FeedbackHub, type FeedbackHubProps, type FeedbackItem, type FeedbackKind, FeedbackWidget, type FeedbackWidgetProps, FilterBar, type FilterBarProps, type FilterChip, ForgotForm, GlassCard, type GlassCardProps, type GraphLink, type GraphNode, IconPicker, type IconPickerProps, type Issue$1 as Issue, type IssueAssignee, type IssueBreadcrumb, IssueDetail, type IssueDetailProps, type IssueLevel, type IssueSort, type IssueTag, IssuesList, type IssuesListProps, LANG_COOKIE_NAME, type LanguageContextValue, LanguageProvider, type LanguageProviderProps, type LegendGroup, type LegendItem, type LegendShapeType, LockScreen, type LockScreenProps, type LockScreenUser, type LogLevel, LoginForm, type LoginResult, Logo, type LogoProps, type LogoTone, type LogoVariant, type LogsFilter, LogsView, type LogsViewProps, MARKER_COLORS, MARKER_LABELS, type MapLayer, MapLayersPanel, type MapLayersPanelProps, MapLegend, type MapLegendProps, type MapMarker$1 as MapMarker, type MapMarkerType, MapPanel, type MapPanelProps, type MapRegionPreset, MapView, type MapViewProps, MarkdownContent, MarkdownEditor, type MarkdownEditorProps, MarkdownRenderer, type MarkdownRendererProps, MarkdownTable, type MarkdownView, MarketplaceCard, type MarketplaceCardProps, MascotMark, type MascotMarkProps, MiniBarChart, MockupWindow, type MockupWindowProps, type ModelOption, MotorFeedbackLauncher, type MotorFeedbackLauncherProps, NestedStepsEditor, type NestedStepsEditorProps, NetworkGraph, type NetworkGraphProps, type NewFeedback, OTPBoxGroup, type OtpResult, PIPELINE_STAGES, PageHeader, type PageHeaderProps, Pager, type PaletteItem, PasswordInput, PasswordLockScreen, type PasswordLockScreenProps, type PasswordLockScreenUser, type PasswordRule, PasswordStrengthMeter, type PickedLocation, PillButton, type PillButtonProps, type PipelineCard, type PipelineLane, type PipelineModel, type PluginActivitySummary, type PluginAppearanceFields, PluginAppearanceSection, type PluginAppearanceSectionProps, PluginCard, type PluginCatalogEntry, type PluginDetailIdentity, PluginDetailLayout, type PluginDetailLayoutProps, type PluginDetailTab, PluginHero, PluginHeroSkeleton, PluginPageHeader, PluginSectionCard, PluginSparkline, type ProfileSession, ProfileView, type ProfileViewProps, type ProviderChip, type RenderMapContext, ResetForm, type ResolvedIcon, Reveal, type RevealProps, RouteProgress, type RouteProgressProps, STEP_FIELD_REGISTRY, SectionBoard, type SectionBoardProps, SectionHeading, type SectionHeadingProps, type SectionModel, SectionSkeleton, SentraLoading, type ServiceLogRow, ServiceUnavailable, type ServiceUnavailableProps, SessionExpired, type SessionExpiredProps, SeverityChip, type SidebarConversation, type SidebarUser, SourceBadge, type SparklinePoint, type StackFrame, type StackFrameContextLine, StatCard, type StatCardProps, type StatTile, StatsRow, StatusBadge, type StatusBadgeProps, type StatusBadgeTone, type Step, type StepFieldDef, type StepFieldType, type StepMetrics7d, StepOptionsDialog, type StepOptionsDialogProps, StreamingMessage, type TerminalStep, type TestRunCallbacks, type TestRunCompletePayload, TestRunPanel, type TestRunPanelProps, type TestRunSavedItem, type TestRunStep, type TocItem, TwoFAForm, TypingTerminal, type TypingTerminalProps, UnifiedCopilotDock, type UnlockCredentials, type Verify2FAResult, type View, ViewToggle, type ViewToggleProps, Wordmark, type WordmarkProps, Workflow, WorkflowEditor, type WorkflowEditorProps, type WorkflowPalette, WorkflowPipeline, type WorkflowPipelineProps, type WorkflowProps, type WorkflowSource, type WorkflowStep, type WorkflowStepLike, WorkflowStepNode, type WorkflowStepNodeProps, type WorkflowView, cn, computeRules, computeScore, feedbackButtonVariants, levelTone, resolveIcon, statValueVariants, statusBadgeVariants, useCopilot, useLanguage, useT };

package/dist/index.js

@@ -16014,28 +16014,44 @@ import * as React30 from "react";
 import { Search as Search8, Star as Star2, Download as Download2 } from "lucide-react";
 import { jsx as jsx99, jsxs as jsxs87 } from "react/jsx-runtime";
 var DISPLAY3 = { fontFamily: '"Sora", var(--togo-font-body, ui-sans-serif, system-ui, sans-serif)' };
+function Glyph2({ icon: Icon, brand, size = 28 }) {
+  if (brand) {
+    return /* @__PURE__ */ jsx99("svg", { role: "img", viewBox: "0 0 24 24", width: size, height: size, fill: "#fff", "aria-hidden": "true", children: /* @__PURE__ */ jsx99("path", { d: brand.path }) });
+  }
+  return Icon ? /* @__PURE__ */ jsx99(Icon, { size, style: { color: "#fff" } }) : null;
+}
 function MarketplaceCard({
   name,
   href,
   category,
-  categoryColor = "#2D8CE6",
+  color,
+  categoryColor,
   icon: Icon,
+  brandIcon,
   description,
   author,
   stars,
   downloads,
   enabled,
+  providers,
   className
 }) {
+  const tint = color || categoryColor || "#2D8CE6";
+  const shown = (providers || []).slice(0, 5);
+  const extra = (providers || []).length - shown.length;
   return /* @__PURE__ */ jsx99("a", { href, className: cn("group block h-full", className), children: /* @__PURE__ */ jsxs87("div", { className: "rounded-2xl border border-border bg-card/40 overflow-hidden h-full flex flex-col transition-all duration-200 hover:border-foreground/25 hover:-translate-y-0.5", children: [
     /* @__PURE__ */ jsxs87(
       "div",
       {
         className: "relative h-28 flex items-center justify-center overflow-hidden",
-        style: { background: `radial-gradient(120% 140% at 0% 0%, ${categoryColor}55, transparent 62%), linear-gradient(135deg, ${categoryColor}26, #0b1016)` },
+        style: { background: `radial-gradient(120% 140% at 0% 0%, ${tint}55, transparent 62%), linear-gradient(135deg, ${tint}26, #0b1016)` },
         children: [
           /* @__PURE__ */ jsx99("div", { className: "absolute inset-0 opacity-[0.14]", style: { backgroundImage: "radial-gradient(circle at 1px 1px, #fff 1px, transparent 0)", backgroundSize: "16px 16px" } }),
-          Icon && /* @__PURE__ */ jsx99("div", { className: "relative grid place-items-center w-14 h-14 rounded-2xl bg-black/20 ring-1 ring-white/20 transition-transform duration-300 group-hover:scale-105", children: /* @__PURE__ */ jsx99(Icon, { size: 28, style: { color: "#fff" } }) }),
+          (Icon || brandIcon) && /* @__PURE__ */ jsx99("div", { className: "relative grid place-items-center w-14 h-14 rounded-2xl bg-black/20 ring-1 ring-white/20 transition-transform duration-300 group-hover:scale-105", children: /* @__PURE__ */ jsx99(Glyph2, { icon: Icon, brand: brandIcon }) }),
+          typeof providers !== "undefined" && providers.length > 0 && /* @__PURE__ */ jsxs87("span", { className: "absolute top-3 start-3 text-[10px] font-mono px-2 py-0.5 rounded-full bg-black/30 text-white/80 ring-1 ring-white/20", children: [
+            providers.length,
+            " providers"
+          ] }),
           enabled && /* @__PURE__ */ jsx99("span", { className: "absolute top-3 end-3 text-[10px] font-mono px-2 py-0.5 rounded-full bg-black/30 text-emerald-300 ring-1 ring-emerald-400/30", children: "enabled" })
         ]
       }
@@ -16046,6 +16062,28 @@ function MarketplaceCard({
         category && /* @__PURE__ */ jsx99("span", { className: "ms-auto shrink-0 text-[10px] font-mono uppercase tracking-wider px-2 py-0.5 rounded-full border border-border text-muted-foreground", children: category })
       ] }),
       /* @__PURE__ */ jsx99("p", { className: "text-[13px] text-muted-foreground mt-1.5 line-clamp-2 flex-1", children: description || "A togo-framework plugin." }),
+      shown.length > 0 && /* @__PURE__ */ jsxs87("div", { className: "mt-3 flex flex-wrap gap-1.5", children: [
+        shown.map((p) => /* @__PURE__ */ jsxs87(
+          "span",
+          {
+            onClick: (e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              window.location.href = p.href;
+            },
+            className: "inline-flex items-center gap-1.5 rounded-full border border-border bg-background/40 ps-1.5 pe-2.5 py-1 text-[11px] text-muted-foreground hover:text-foreground hover:border-foreground/25 transition-colors cursor-pointer",
+            children: [
+              /* @__PURE__ */ jsx99("span", { className: "grid place-items-center w-4 h-4 rounded-full", style: { background: `${p.color || tint}26` }, children: /* @__PURE__ */ jsx99(Glyph2, { icon: p.icon, brand: p.brand, size: 10 }) }),
+              p.name
+            ]
+          },
+          p.href
+        )),
+        extra > 0 && /* @__PURE__ */ jsxs87("span", { className: "inline-flex items-center rounded-full border border-border px-2.5 py-1 text-[11px] text-muted-foreground", children: [
+          "+",
+          extra
+        ] })
+      ] }),
       /* @__PURE__ */ jsxs87("div", { className: "flex items-center gap-3 mt-3 text-[11px] text-muted-foreground font-mono", children: [
         author && /* @__PURE__ */ jsx99("span", { className: "truncate", children: author }),
         /* @__PURE__ */ jsxs87("span", { className: "ms-auto flex items-center gap-3 shrink-0", children: [
@@ -16285,14 +16323,17 @@ function fullFrame(steps) {
   return { lines, showEnd: true };
 }
 var keepStaticFrame = () => typeof window !== "undefined" && (window.matchMedia?.("(prefers-reduced-motion: reduce)").matches || navigator?.webdriver === true);
-function TypingTerminal({ steps, endSlot, title = "~/myapp \u2014 togo", className, typeMs = 26, lineMs = 110, loop = false, height = 360 }) {
+function TypingTerminal({ steps, endSlot, title = "~/myapp \u2014 togo", className, typeMs = 26, lineMs = 110, loop = false, height = 360, onComplete }) {
   const [frame, setFrame] = React32.useState(() => fullFrame(steps));
   const [done, setDone] = React32.useState(false);
   const [runId, setRunId] = React32.useState(0);
   const scrollRef = React32.useRef(null);
+  const onDone = React32.useRef(onComplete);
+  onDone.current = onComplete;
   React32.useEffect(() => {
     if (keepStaticFrame()) {
       setDone(true);
+      onDone.current?.();
       return;
     }
     let alive = true;
@@ -16338,6 +16379,7 @@ function TypingTerminal({ steps, endSlot, title = "~/myapp \u2014 togo", classNa
         toBottom();
         if (!loop) {
           setDone(true);
+          onDone.current?.();
           return;
         }
         await wait(4200);
@@ -16377,9 +16419,166 @@ function TypingTerminal({ steps, endSlot, title = "~/myapp \u2014 togo", classNa
 }
 TypingTerminal.displayName = "TypingTerminal";
 
-// src/components/marketing/MascotMark.tsx
+// src/components/marketing/ClaudeSession.tsx
 import * as React33 from "react";
+import { RotateCcw as RotateCcw4, Sparkles as Sparkles13 } from "lucide-react";
 import { jsx as jsx102, jsxs as jsxs90 } from "react/jsx-runtime";
+var Tool = ({ tool, arg }) => /* @__PURE__ */ jsxs90("div", { className: "whitespace-pre-wrap break-words", children: [
+  /* @__PURE__ */ jsx102("span", { className: "text-[#28c840]", children: "\u23FA " }),
+  /* @__PURE__ */ jsx102("span", { className: "text-foreground font-semibold", children: tool }),
+  /* @__PURE__ */ jsxs90("span", { className: "text-muted-foreground", children: [
+    "(",
+    arg,
+    ")"
+  ] })
+] });
+var Result = ({ text }) => /* @__PURE__ */ jsxs90("div", { className: "whitespace-pre-wrap break-words text-muted-foreground ps-3", children: [
+  /* @__PURE__ */ jsx102("span", { className: "text-muted-foreground/60", children: "\u23BF  " }),
+  text
+] });
+var User4 = ({ text }) => /* @__PURE__ */ jsxs90("div", { className: "whitespace-pre-wrap break-words", children: [
+  /* @__PURE__ */ jsx102("span", { className: "text-[#5CDDEC]", children: "> " }),
+  /* @__PURE__ */ jsx102("span", { className: "text-foreground", children: text })
+] });
+var Assistant = ({ text }) => /* @__PURE__ */ jsxs90("div", { className: "whitespace-pre-wrap break-words text-foreground/80", children: [
+  /* @__PURE__ */ jsx102("span", { className: "text-[var(--togo-cyan,#5CDDEC)]", children: "\u273B " }),
+  text
+] });
+function fullFrame2(steps) {
+  const out = [];
+  steps.forEach((s, i) => {
+    if (s.kind === "user") out.push(/* @__PURE__ */ jsx102(User4, { text: s.text }, `u${i}`));
+    else if (s.kind === "assistant") out.push(/* @__PURE__ */ jsx102(Assistant, { text: s.text }, `a${i}`));
+    else {
+      out.push(/* @__PURE__ */ jsx102(Tool, { tool: s.tool, arg: s.arg }, `t${i}`));
+      if (s.result) out.push(/* @__PURE__ */ jsx102(Result, { text: s.result }, `r${i}`));
+    }
+  });
+  return out;
+}
+var keepStaticFrame2 = () => typeof window !== "undefined" && (window.matchMedia?.("(prefers-reduced-motion: reduce)").matches || navigator?.webdriver === true);
+function ClaudeSession({ steps, endSlot, title = "\u273B Claude Code \u2014 togo", className, typeMs = 22, lineMs = 320, loop = false, height = 360, onComplete }) {
+  const [lines, setLines] = React33.useState(() => fullFrame2(steps));
+  const [showEnd, setShowEnd] = React33.useState(true);
+  const [done, setDone] = React33.useState(false);
+  const [runId, setRunId] = React33.useState(0);
+  const scrollRef = React33.useRef(null);
+  const onDone = React33.useRef(onComplete);
+  onDone.current = onComplete;
+  React33.useEffect(() => {
+    if (keepStaticFrame2()) {
+      setDone(true);
+      onDone.current?.();
+      return;
+    }
+    let alive = true;
+    const timers = [];
+    const wait = (ms) => new Promise((res) => timers.push(setTimeout(res, ms)));
+    const toBottom = () => {
+      if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    };
+    async function run() {
+      setDone(false);
+      setShowEnd(false);
+      do {
+        const acc = [];
+        setLines([]);
+        for (let i = 0; i < steps.length && alive; i++) {
+          const s = steps[i];
+          if (s.kind === "user") {
+            for (let c = 1; c <= s.text.length && alive; c++) {
+              setLines([...acc, /* @__PURE__ */ jsxs90("div", { className: "whitespace-pre-wrap break-words", children: [
+                /* @__PURE__ */ jsx102("span", { className: "text-[#5CDDEC]", children: "> " }),
+                /* @__PURE__ */ jsx102("span", { className: "text-foreground", children: s.text.slice(0, c) }),
+                /* @__PURE__ */ jsx102("span", { className: "ml-0.5 inline-block w-2 -mb-0.5 h-4 bg-[#5CDDEC] animate-pulse" })
+              ] }, `u${i}`)]);
+              toBottom();
+              await wait(typeMs);
+            }
+            acc.push(/* @__PURE__ */ jsx102(User4, { text: s.text }, `u${i}`));
+            await wait(420);
+          } else if (s.kind === "assistant") {
+            acc.push(/* @__PURE__ */ jsx102(Assistant, { text: s.text }, `a${i}`));
+            setLines([...acc]);
+            toBottom();
+            await wait(lineMs);
+          } else {
+            acc.push(/* @__PURE__ */ jsx102(Tool, { tool: s.tool, arg: s.arg }, `t${i}`));
+            setLines([...acc]);
+            toBottom();
+            await wait(Math.round(lineMs * 0.7));
+            if (s.result) {
+              acc.push(/* @__PURE__ */ jsx102(Result, { text: s.result }, `r${i}`));
+              setLines([...acc]);
+              toBottom();
+              await wait(lineMs);
+            }
+          }
+        }
+        if (!alive) return;
+        setLines([...acc]);
+        setShowEnd(true);
+        setDone(true);
+        toBottom();
+        onDone.current?.();
+        if (!loop) return;
+        await wait(4200);
+      } while (alive);
+    }
+    run();
+    return () => {
+      alive = false;
+      timers.forEach(clearTimeout);
+    };
+  }, [steps, typeMs, lineMs, loop, runId]);
+  return /* @__PURE__ */ jsxs90("div", { className: cn("rounded-2xl border border-border overflow-hidden bg-[#080b0f] shadow-2xl", className), children: [
+    /* @__PURE__ */ jsxs90("div", { className: "flex items-center gap-2 px-4 py-3 border-b border-border", children: [
+      /* @__PURE__ */ jsx102(Sparkles13, { size: 13, className: "text-[var(--togo-cyan,#5CDDEC)]" }),
+      /* @__PURE__ */ jsx102("span", { className: "font-mono text-xs text-muted-foreground", children: title }),
+      done && !loop && /* @__PURE__ */ jsxs90(
+        "button",
+        {
+          type: "button",
+          onClick: () => setRunId((n) => n + 1),
+          className: "ms-auto inline-flex items-center gap-1.5 rounded-md border border-white/12 bg-white/[0.04] px-2.5 py-1 font-mono text-[11px] text-muted-foreground hover:text-foreground hover:bg-white/[0.08] transition-colors",
+          "aria-label": "Replay the Claude Code session",
+          children: [
+            /* @__PURE__ */ jsx102(RotateCcw4, { size: 12 }),
+            " Replay"
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs90("div", { ref: scrollRef, className: "p-5 font-mono text-[12.5px] sm:text-[13px] leading-[1.9] overflow-auto", style: { height }, children: [
+      lines,
+      showEnd && endSlot ? /* @__PURE__ */ jsx102("div", { className: "mt-4 pt-4 border-t border-white/10", children: endSlot }) : null
+    ] })
+  ] });
+}
+ClaudeSession.displayName = "ClaudeSession";
+
+// src/components/marketing/BrowserFrame.tsx
+import { Lock as Lock4 } from "lucide-react";
+import { jsx as jsx103, jsxs as jsxs91 } from "react/jsx-runtime";
+function BrowserFrame({ url = "localhost:8080", children, className }) {
+  return /* @__PURE__ */ jsxs91("div", { className: cn("rounded-2xl border border-border overflow-hidden bg-[#0b0f13] shadow-2xl", className), children: [
+    /* @__PURE__ */ jsxs91("div", { className: "flex items-center gap-2 px-3 py-2.5 border-b border-border bg-white/[0.03]", children: [
+      /* @__PURE__ */ jsx103("span", { className: "w-3 h-3 rounded-full bg-[#ff5f57]" }),
+      /* @__PURE__ */ jsx103("span", { className: "w-3 h-3 rounded-full bg-[#febc2e]" }),
+      /* @__PURE__ */ jsx103("span", { className: "w-3 h-3 rounded-full bg-[#28c840]" }),
+      /* @__PURE__ */ jsxs91("div", { className: "ms-2 flex flex-1 items-center gap-1.5 rounded-md bg-black/30 px-2.5 py-1 min-w-0", children: [
+        /* @__PURE__ */ jsx103(Lock4, { size: 11, className: "text-muted-foreground shrink-0" }),
+        /* @__PURE__ */ jsx103("span", { className: "truncate font-mono text-[11px] text-muted-foreground", children: url })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx103("div", { children })
+  ] });
+}
+BrowserFrame.displayName = "BrowserFrame";
+
+// src/components/marketing/MascotMark.tsx
+import * as React34 from "react";
+import { jsx as jsx104, jsxs as jsxs92 } from "react/jsx-runtime";
 var EYES = [
   { x: 0.405, y: 0.45 },
   { x: 0.595, y: 0.45 }
@@ -16392,10 +16591,10 @@ var KEYFRAMES = `
 .tg-mascot { will-change: transform; animation: tgMascotFloat 6s ease-in-out infinite; }
 @media (prefers-reduced-motion: reduce) { .tg-mascot { animation: none !important; } }`;
 function MascotMark({ src = "/togo-mark.svg", alt = "ToGO", className }) {
-  const ref = React33.useRef(null);
-  const [active, setActive] = React33.useState(false);
-  const [look, setLook] = React33.useState({ dx: 0, dy: 0 });
-  React33.useEffect(() => {
+  const ref = React34.useRef(null);
+  const [active, setActive] = React34.useState(false);
+  const [look, setLook] = React34.useState({ dx: 0, dy: 0 });
+  React34.useEffect(() => {
     if (typeof window === "undefined" || !window.matchMedia) return;
     if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
     if (!window.matchMedia("(hover: hover) and (pointer: fine)").matches) return;
@@ -16424,9 +16623,9 @@ function MascotMark({ src = "/togo-mark.svg", alt = "ToGO", className }) {
     };
   }, []);
   const tilt = active ? look.dx * 4 : 0;
-  return /* @__PURE__ */ jsxs90("div", { ref, className: cn("tg-mascot", className), style: { position: "relative", display: "inline-block" }, children: [
-    /* @__PURE__ */ jsx102("style", { children: KEYFRAMES }),
-    /* @__PURE__ */ jsxs90(
+  return /* @__PURE__ */ jsxs92("div", { ref, className: cn("tg-mascot", className), style: { position: "relative", display: "inline-block" }, children: [
+    /* @__PURE__ */ jsx104("style", { children: KEYFRAMES }),
+    /* @__PURE__ */ jsxs92(
       "div",
       {
         style: {
@@ -16436,8 +16635,8 @@ function MascotMark({ src = "/togo-mark.svg", alt = "ToGO", className }) {
           transition: "transform .25s ease-out"
         },
         children: [
-          /* @__PURE__ */ jsx102("img", { src, alt, draggable: false, style: { display: "block", width: "100%", height: "100%" } }),
-          active && EYES.map((eye, i) => /* @__PURE__ */ jsx102(
+          /* @__PURE__ */ jsx104("img", { src, alt, draggable: false, style: { display: "block", width: "100%", height: "100%" } }),
+          active && EYES.map((eye, i) => /* @__PURE__ */ jsx104(
             "span",
             {
               "aria-hidden": "true",
@@ -16452,7 +16651,7 @@ function MascotMark({ src = "/togo-mark.svg", alt = "ToGO", className }) {
                 background: "rgba(255,255,255,.94)",
                 boxShadow: "inset 0 2px 4px rgba(8,16,40,.28)"
               },
-              children: /* @__PURE__ */ jsx102(
+              children: /* @__PURE__ */ jsx104(
                 "span",
                 {
                   style: {
@@ -16532,6 +16731,7 @@ export {
   BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,
+  BrowserFrame,
   Button,
   Calendar,
   Callout,
@@ -16555,6 +16755,7 @@ export {
   ChartTooltipContent,
   ChatThread_default as ChatThread,
   Checkbox,
+  ClaudeSession,
   CodeBlock,
   CodeShowcase,
   Collapsible,