@tangle-network/sandbox-ui 0.8.4 → 0.10.0

package/dist/dashboard.d.ts

@@ -1,8 +1,8 @@
-export { B as Backend, a as BackendSelector, b as BackendSelectorProps, C as ClusterStatusBar, c as ClusterStatusBarProps, d as ClusterStatusItem, e as CreditBalance, f as CreditBalanceProps, D as DashboardLayout, g as DashboardLayoutProps, P as DashboardProfile, h as DashboardUser, I as Invoice, i as InvoiceTable, j as InvoiceTableProps, N as NavItem, k as NewSandboxCard, l as NewSandboxCardProps, m as PlanCardData, n as PlanCards, o as PlanCardsProps, p as PlanFeature, q as ProductVariant, r as ProfileAvatar, s as ProfileAvatarProps, t as ProfileComparison, u as ProfileComparisonProps, v as ProfileSelector, w as ProfileSelectorProps, R as RailButton, x as RailButtonProps, y as RailModeButton, z as RailModeButtonProps, A as RailSeparator, E as RailSeparatorProps, F as ResourceMeter, G as ResourceMeterProps, S as SIDEBAR_PANEL_WIDTH, H as SIDEBAR_RAIL_WIDTH, J as SIDEBAR_TOTAL_WIDTH, K as SandboxCard, L as SandboxCardData, M as SandboxCardProps, O as SandboxStatus, Q as SandboxTable, T as SandboxTableProps, U as Sidebar, V as SidebarContent, W as SidebarContentProps, X as SidebarPanel, Y as SidebarPanelContent, Z as SidebarPanelContentProps, _ as SidebarPanelHeader, $ as SidebarPanelHeaderProps, a0 as SidebarPanelProps, a1 as SidebarProps, a2 as SidebarProvider, a3 as SidebarProviderProps, a4 as SidebarRail, a5 as SidebarRailFooter, a6 as SidebarRailFooterProps, a7 as SidebarRailHeader, a8 as SidebarRailHeaderProps, a9 as SidebarRailNav, aa as SidebarRailNavProps, ab as SidebarRailProps, ac as SidebarUser, ad as Variant, ae as VariantList, af as VariantListProps, ag as VariantOutcome, ah as VariantStatus, ai as useSidebar } from './variant-list-C8wx2TqF.js';
+export { B as Backend, a as BackendSelector, b as BackendSelectorProps, C as ClusterStatusBar, c as ClusterStatusBarProps, d as ClusterStatusItem, e as CreditBalance, f as CreditBalanceProps, D as DashboardLayout, g as DashboardLayoutProps, ag as DashboardProfile, h as DashboardUser, I as Invoice, i as InvoiceTable, j as InvoiceTableProps, N as NavItem, k as NewSandboxCard, l as NewSandboxCardProps, m as PlanCardData, n as PlanCards, o as PlanCardsProps, ah as PlanFeature, p as ProductVariant, q as ProfileAvatar, r as ProfileAvatarProps, s as ProfileComparison, t as ProfileComparisonProps, u as ProfileSelector, v as ProfileSelectorProps, R as RailButton, w as RailButtonProps, x as RailModeButton, y as RailModeButtonProps, z as RailSeparator, A as RailSeparatorProps, E as ResourceMeter, F as ResourceMeterProps, S as SIDEBAR_PANEL_WIDTH, G as SIDEBAR_RAIL_WIDTH, H as SIDEBAR_TOTAL_WIDTH, J as SandboxCard, K as SandboxCardData, L as SandboxCardProps, M as SandboxStatus, O as SandboxTable, Q as SandboxTableProps, T as Sidebar, U as SidebarContent, V as SidebarContentProps, W as SidebarPanel, X as SidebarPanelContent, Y as SidebarPanelContentProps, Z as SidebarPanelHeader, _ as SidebarPanelHeaderProps, $ as SidebarPanelProps, a0 as SidebarProps, a1 as SidebarProvider, a2 as SidebarProviderProps, a3 as SidebarRail, a4 as SidebarRailFooter, a5 as SidebarRailFooterProps, a6 as SidebarRailHeader, a7 as SidebarRailHeaderProps, a8 as SidebarRailNav, a9 as SidebarRailNavProps, aa as SidebarRailProps, ab as SidebarUser, ai as Variant, ad as VariantList, ae as VariantListProps, aj as VariantOutcome, ak as VariantStatus, af as useSidebar } from './variant-list-BNwUOSgz.js';
 export { a as BillingBalance, c as BillingDashboard, d as BillingDashboardProps, B as BillingSubscription, b as BillingUsage, e as PricingPage, f as PricingPageProps, P as PricingTier, g as UsageChart, h as UsageChartProps, U as UsageDataPoint } from './usage-chart-SSiOgeQI.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 export { a as TemplateCard, T as TemplateCardData, b as TemplateCardProps } from './template-card-BAtvcAkU.js';
-import 'react';
+import * as React from 'react';
 
 interface SystemLogsViewerProps {
     apiUrl: string;
@@ -128,9 +128,30 @@ interface SnapshotListProps {
     snapshots: SnapshotInfo[];
     onCreate: (tags?: string[]) => void;
     onRestore: (snapshotId: string) => void;
+    onSaveAsTemplate?: (snapshotId: string) => void;
     loading?: boolean;
     className?: string;
 }
-declare function SnapshotList({ snapshots, onCreate, onRestore, loading, className }: SnapshotListProps): react_jsx_runtime.JSX.Element;
+declare function SnapshotList({ snapshots, onCreate, onRestore, onSaveAsTemplate, loading, className }: SnapshotListProps): react_jsx_runtime.JSX.Element;
 
-export { BackendConfig, type BackendConfigProps, type BackendStatusData, type SnapshotInfo as DashboardSnapshotInfo, type ExposedPort, type GitCommitData, GitPanel, type GitPanelProps, type GitStatusData, type McpServer, NetworkConfig, type NetworkConfigData, type NetworkConfigProps, PortsList, type PortsListProps, type ProcessInfo, ProcessList, type ProcessListProps, SnapshotList, type SnapshotListProps, SystemLogsViewer, type SystemLogsViewerProps, UsageSummary, type UsageSummaryData, type UsageSummaryProps };
+interface PromoBannerProps {
+    title: string;
+    description: string;
+    buttonLabel: string;
+    href?: string;
+    onClick?: () => void;
+    icon?: React.ReactNode;
+    disabled?: boolean;
+    className?: string;
+}
+declare function PromoBanner({ title, description, buttonLabel, href, onClick, icon, disabled, className, }: PromoBannerProps): react_jsx_runtime.JSX.Element;
+
+interface InfoPanelProps {
+    label: string;
+    title: string;
+    description: string;
+    className?: string;
+}
+declare function InfoPanel({ label, title, description, className }: InfoPanelProps): react_jsx_runtime.JSX.Element;
+
+export { BackendConfig, type BackendConfigProps, type BackendStatusData, type SnapshotInfo as DashboardSnapshotInfo, type ExposedPort, type GitCommitData, GitPanel, type GitPanelProps, type GitStatusData, InfoPanel, type InfoPanelProps, type McpServer, NetworkConfig, type NetworkConfigData, type NetworkConfigProps, PortsList, type PortsListProps, type ProcessInfo, ProcessList, type ProcessListProps, PromoBanner, type PromoBannerProps, SnapshotList, type SnapshotListProps, SystemLogsViewer, type SystemLogsViewerProps, UsageSummary, type UsageSummaryData, type UsageSummaryProps };

package/dist/dashboard.js

@@ -1,6 +1,7 @@
 import {
+  InfoPanel,
   TemplateCard
-} from "./chunk-7U2Z23NE.js";
+} from "./chunk-VX3XOUEB.js";
 import {
   BackendSelector,
   ClusterStatusBar,
@@ -33,12 +34,12 @@ import {
   SidebarRailNav,
   VariantList,
   useSidebar
-} from "./chunk-XXDFEF72.js";
+} from "./chunk-2XCOGNZP.js";
 import {
   BillingDashboard,
   PricingPage,
   UsageChart
-} from "./chunk-UXQMIR3D.js";
+} from "./chunk-OHPW55EV.js";
 import {
   StatCard
 } from "./chunk-OKLQVY3Y.js";
@@ -47,7 +48,7 @@ import {
   Skeleton
 } from "./chunk-66EZOYZR.js";
 import "./chunk-ZMNSRDMH.js";
-import "./chunk-2QZ6G7NM.js";
+import "./chunk-MKTSMWVD.js";
 import {
   cn
 } from "./chunk-RQHJBTEU.js";
@@ -768,7 +769,7 @@ function formatDate(dateStr) {
   if (Number.isNaN(d.getTime())) return dateStr;
   return d.toLocaleDateString(void 0, { month: "short", day: "numeric", hour: "2-digit", minute: "2-digit" });
 }
-function SnapshotList({ snapshots, onCreate, onRestore, loading = false, className }) {
+function SnapshotList({ snapshots, onCreate, onRestore, onSaveAsTemplate, loading = false, className }) {
   const [showCreate, setShowCreate] = React6.useState(false);
   const [tags, setTags] = React6.useState("");
   const handleCreate = () => {
@@ -852,19 +853,31 @@ function SnapshotList({ snapshots, onCreate, onRestore, loading = false, classNa
           formatBytes(s.sizeBytes)
         ] }) }),
         /* @__PURE__ */ jsx8("td", { className: "px-4 py-3", children: s.tags?.length ? /* @__PURE__ */ jsx8("div", { className: "flex items-center gap-1 flex-wrap", children: s.tags.map((tag) => /* @__PURE__ */ jsx8("span", { className: "rounded-full bg-muted px-2 py-0.5 text-[10px] font-medium text-muted-foreground border border-border", children: tag }, tag)) }) : /* @__PURE__ */ jsx8("span", { className: "text-xs text-muted-foreground", children: "-" }) }),
-        /* @__PURE__ */ jsx8("td", { className: "px-4 py-3 text-right", children: /* @__PURE__ */ jsxs8(
-          "button",
-          {
-            type: "button",
-            onClick: () => onRestore(s.id),
-            className: "inline-flex items-center gap-1.5 rounded-md bg-muted px-2.5 py-1 text-xs font-medium text-foreground hover:bg-muted/80 transition-colors border border-border",
-            title: "Restore to new sandbox",
-            children: [
-              /* @__PURE__ */ jsx8(RotateCcw, { className: "h-3 w-3" }),
-              "Restore"
-            ]
-          }
-        ) })
+        /* @__PURE__ */ jsx8("td", { className: "px-4 py-3 text-right", children: /* @__PURE__ */ jsxs8("div", { className: "flex items-center justify-end gap-2", children: [
+          /* @__PURE__ */ jsxs8(
+            "button",
+            {
+              type: "button",
+              onClick: () => onRestore(s.id),
+              className: "inline-flex items-center gap-1.5 rounded-md bg-muted px-2.5 py-1 text-xs font-medium text-foreground hover:bg-muted/80 transition-colors border border-border",
+              title: "Restore to new sandbox",
+              children: [
+                /* @__PURE__ */ jsx8(RotateCcw, { className: "h-3 w-3" }),
+                "Restore"
+              ]
+            }
+          ),
+          onSaveAsTemplate && /* @__PURE__ */ jsx8(
+            "button",
+            {
+              type: "button",
+              onClick: () => onSaveAsTemplate(s.id),
+              className: "inline-flex items-center gap-1.5 rounded-md bg-primary/10 px-2.5 py-1 text-xs font-medium text-primary hover:bg-primary/20 transition-colors border border-primary/20",
+              title: "Save as reusable template",
+              children: "Save as Template"
+            }
+          )
+        ] }) })
       ] }, s.id)) })
     ] }) }) : /* @__PURE__ */ jsxs8("div", { className: "rounded-lg border border-border bg-muted/20 p-6 text-center", children: [
       /* @__PURE__ */ jsx8(Camera, { className: "mx-auto h-8 w-8 text-muted-foreground mb-2" }),
@@ -873,6 +886,40 @@ function SnapshotList({ snapshots, onCreate, onRestore, loading = false, classNa
     ] })
   ] });
 }
+
+// src/dashboard/promo-banner.tsx
+import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
+function PromoBanner({
+  title,
+  description,
+  buttonLabel,
+  href,
+  onClick,
+  icon,
+  disabled = false,
+  className
+}) {
+  const buttonClasses = cn(
+    "mt-6 inline-flex items-center gap-2 rounded-md border border-white/20 bg-[var(--btn-primary-bg)] px-4 py-2 text-sm font-medium text-[var(--btn-primary-text)] transition-colors",
+    disabled ? "opacity-50 cursor-not-allowed" : "hover:bg-[var(--btn-primary-hover)]"
+  );
+  const buttonContent = /* @__PURE__ */ jsxs9(Fragment2, { children: [
+    buttonLabel,
+    /* @__PURE__ */ jsxs9("svg", { "aria-hidden": "true", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "h-4 w-4", children: [
+      /* @__PURE__ */ jsx9("path", { d: "M5 12h14" }),
+      /* @__PURE__ */ jsx9("path", { d: "m12 5 7 7-7 7" })
+    ] })
+  ] });
+  return /* @__PURE__ */ jsxs9("div", { className: cn("relative overflow-hidden rounded-xl bg-[var(--brand-strong)] p-8 md:flex md:items-center md:justify-between", className), children: [
+    /* @__PURE__ */ jsxs9("div", { className: "relative z-10", children: [
+      /* @__PURE__ */ jsx9("h3", { className: "text-xl font-bold text-[var(--brand-strong-text)]", children: title }),
+      /* @__PURE__ */ jsx9("p", { className: "mt-2 max-w-md text-sm text-[var(--brand-strong-text-muted)]", children: description }),
+      href && !disabled ? /* @__PURE__ */ jsx9("a", { href, target: "_blank", rel: "noopener noreferrer", onClick, className: buttonClasses, children: buttonContent }) : /* @__PURE__ */ jsx9("button", { type: "button", onClick, disabled, className: buttonClasses, children: buttonContent })
+    ] }),
+    icon && /* @__PURE__ */ jsx9("div", { className: "relative z-10 mt-6 flex items-center md:mt-0", children: /* @__PURE__ */ jsx9("div", { className: "flex h-16 w-16 items-center justify-center rounded-2xl border border-white/10 bg-white/10", children: icon }) }),
+    /* @__PURE__ */ jsx9("div", { className: "pointer-events-none absolute inset-y-0 right-0 w-1/3 bg-gradient-to-l from-white/5 to-transparent" })
+  ] });
+}
 export {
   BackendConfig,
   BackendSelector,
@@ -881,6 +928,7 @@ export {
   CreditBalance,
   DashboardLayout,
   GitPanel,
+  InfoPanel,
   InvoiceTable,
   NetworkConfig,
   NewSandboxCard,
@@ -891,6 +939,7 @@ export {
   ProfileAvatar,
   ProfileComparison,
   ProfileSelector,
+  PromoBanner,
   RailButton,
   RailModeButton,
   RailSeparator,