@tangle-network/sandbox-ui 0.9.0 → 0.10.0

package/dist/{chunk-7YWFOGKQ.js → chunk-2XCOGNZP.js}

@@ -516,6 +516,10 @@ function XIcon({ className }) {
     /* @__PURE__ */ jsx7("path", { d: "m6 6 12 12" })
   ] });
 }
+function formatNotifDate(raw) {
+  const d = new Date(raw);
+  return Number.isNaN(d.getTime()) ? raw : d.toLocaleString(void 0, { month: "short", day: "numeric", hour: "2-digit", minute: "2-digit" });
+}
 function DefaultLink2({
   href,
   to,
@@ -546,10 +550,30 @@ function DashboardLayoutInner({
   LinkComponent = DefaultLink2,
   footer,
   railFooter,
-  profileMenuItems
+  profileMenuItems,
+  notifications: notifData
 }) {
   const Link = LinkComponent;
   const [mobileMenuOpen, setMobileMenuOpen] = React3.useState(false);
+  const [notificationsOpen, setNotificationsOpen] = React3.useState(false);
+  const notifRef = React3.useRef(null);
+  React3.useEffect(() => {
+    if (!notificationsOpen) return;
+    const handler = (e) => {
+      if (notifRef.current && !notifRef.current.contains(e.target)) {
+        setNotificationsOpen(false);
+      }
+    };
+    const keyHandler = (e) => {
+      if (e.key === "Escape") setNotificationsOpen(false);
+    };
+    document.addEventListener("mousedown", handler);
+    document.addEventListener("keydown", keyHandler);
+    return () => {
+      document.removeEventListener("mousedown", handler);
+      document.removeEventListener("keydown", keyHandler);
+    };
+  }, [notificationsOpen]);
   const { contentMargin, hidden, mode, hasPanels, panelOpen } = useSidebar();
   const modeSet = React3.useMemo(() => new Set(modeItems), [modeItems]);
   const sidebarUser = user ? { email: user.email, name: user.name, tier: user.tier, avatarUrl: user.avatarUrl } : void 0;
@@ -640,7 +664,61 @@ function DashboardLayoutInner({
                 ]
               }
             ),
-            /* @__PURE__ */ jsx7("button", { type: "button", className: "text-muted-foreground hover:text-foreground transition-colors p-2 rounded-lg hover:bg-muted/50", children: /* @__PURE__ */ jsx7(Bell, { className: "h-4 w-4" }) })
+            /* @__PURE__ */ jsxs6("div", { className: "relative", ref: notifRef, children: [
+              /* @__PURE__ */ jsxs6(
+                "button",
+                {
+                  type: "button",
+                  className: "relative text-muted-foreground hover:text-foreground transition-colors p-2 rounded-lg hover:bg-muted/50",
+                  onClick: () => setNotificationsOpen(!notificationsOpen),
+                  "aria-label": "Notifications",
+                  "aria-expanded": notificationsOpen,
+                  children: [
+                    /* @__PURE__ */ jsx7(Bell, { className: "h-4 w-4" }),
+                    (notifData?.unreadCount ?? 0) > 0 && /* @__PURE__ */ jsx7("span", { className: "absolute top-1 right-1 h-2 w-2 rounded-full bg-destructive" })
+                  ]
+                }
+              ),
+              notificationsOpen && /* @__PURE__ */ jsxs6("div", { className: "absolute right-0 top-full mt-2 w-80 rounded-lg border border-border bg-card shadow-lg z-50", children: [
+                /* @__PURE__ */ jsxs6("div", { className: "flex items-center justify-between border-b border-border px-4 py-3", children: [
+                  /* @__PURE__ */ jsx7("p", { className: "font-bold text-foreground text-sm", children: "Notifications" }),
+                  (notifData?.unreadCount ?? 0) > 0 && notifData?.onMarkAllRead && /* @__PURE__ */ jsx7(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => {
+                        notifData.onMarkAllRead?.();
+                      },
+                      className: "text-primary text-xs font-medium hover:underline",
+                      children: "Mark all read"
+                    }
+                  )
+                ] }),
+                !notifData?.items || notifData.items.length === 0 ? /* @__PURE__ */ jsxs6("div", { className: "flex flex-col items-center justify-center px-4 py-8 text-center", children: [
+                  /* @__PURE__ */ jsx7(Bell, { className: "h-8 w-8 text-muted-foreground/40 mb-2" }),
+                  /* @__PURE__ */ jsx7("p", { className: "text-muted-foreground text-sm", children: "No notifications yet" }),
+                  /* @__PURE__ */ jsx7("p", { className: "text-muted-foreground/60 text-xs mt-1", children: "We'll notify you about important updates" })
+                ] }) : /* @__PURE__ */ jsx7("div", { className: "max-h-80 overflow-y-auto", children: notifData.items.map((n) => /* @__PURE__ */ jsxs6(
+                  "button",
+                  {
+                    type: "button",
+                    className: cn(
+                      "w-full text-left px-4 py-3 border-b border-border last:border-0 transition-colors",
+                      n.read ? "cursor-default" : "bg-primary/5 hover:bg-muted/50"
+                    ),
+                    onClick: () => {
+                      if (!n.read) notifData.onMarkRead?.(n.id);
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx7("p", { className: cn("text-sm", !n.read ? "font-semibold text-foreground" : "text-muted-foreground"), children: n.title }),
+                      /* @__PURE__ */ jsx7("p", { className: "text-xs text-muted-foreground mt-0.5 line-clamp-2", children: n.message }),
+                      /* @__PURE__ */ jsx7("p", { className: "text-[10px] text-muted-foreground/50 mt-1", children: formatNotifDate(n.createdAt) })
+                    ]
+                  },
+                  n.id
+                )) })
+              ] })
+            ] })
           ] }),
           /* @__PURE__ */ jsx7(
             "button",

package/dist/dashboard.d.ts

@@ -1,4 +1,4 @@
-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-CsS6ydgm.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';
@@ -128,10 +128,11 @@ 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;
 
 interface PromoBannerProps {
     title: string;

package/dist/dashboard.js

@@ -34,7 +34,7 @@ import {
   SidebarRailNav,
   VariantList,
   useSidebar
-} from "./chunk-7YWFOGKQ.js";
+} from "./chunk-2XCOGNZP.js";
 import {
   BillingDashboard,
   PricingPage,
@@ -769,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 = () => {
@@ -853,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" }),

package/dist/globals.css

@@ -720,6 +720,9 @@
   .top-0\.5 {
     top: calc(var(--spacing) * 0.5);
   }
+  .top-1 {
+    top: calc(var(--spacing) * 1);
+  }
   .top-1\/2 {
     top: calc(1 / 2 * 100%);
   }
@@ -735,12 +738,18 @@
   .top-\[50\%\] {
     top: 50%;
   }
+  .top-full {
+    top: 100%;
+  }
   .-right-1 {
     right: calc(var(--spacing) * -1);
   }
   .right-0 {
     right: calc(var(--spacing) * 0);
   }
+  .right-1 {
+    right: calc(var(--spacing) * 1);
+  }
   .right-2 {
     right: calc(var(--spacing) * 2);
   }
@@ -2479,6 +2488,9 @@
   .py-5 {
     padding-block: calc(var(--spacing) * 5);
   }
+  .py-8 {
+    padding-block: calc(var(--spacing) * 8);
+  }
   .py-12 {
     padding-block: calc(var(--spacing) * 12);
   }
@@ -3400,6 +3412,12 @@
       }
     }
   }
+  .last\:border-0 {
+    &:last-child {
+      border-style: var(--tw-border-style);
+      border-width: 0px;
+    }
+  }
   .focus-within\:border-\[var\(--border-accent-hover\)\] {
     &:focus-within {
       border-color: var(--border-accent-hover);

package/dist/index.d.ts

@@ -15,7 +15,7 @@ import { b as ToolPart } from './parts-CyGkM6Fp.js';
 export { R as ReasoningPart, S as SessionMessage, a as SessionPart, T as TextPart, c as ToolState, d as ToolStatus, e as ToolTime } from './parts-CyGkM6Fp.js';
 export { F as FileNode, a as FileTabData, b as FileTabs, c as FileTabsProps, d as FileTree, e as FileTreeProps, f as FileTreeVisibilityOptions, g as filterFileTree } from './file-tabs-BLfxfmAH.js';
 export { FileArtifactPane, FileArtifactPaneProps, FilePreview, FilePreviewProps } from './files.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, h as DashboardUser, I as Invoice, i as InvoiceTable, j as InvoiceTableProps, N as NavItem, k as NewSandboxCard, l as NewSandboxCardProps, P as PanelConfig, m as PlanCardData, n as PlanCards, o as PlanCardsProps, 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, ac as TopNavLink, ad as VariantList, ae as VariantListProps, af as useSidebar } from './variant-list-CsS6ydgm.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, h as DashboardUser, I as Invoice, i as InvoiceTable, j as InvoiceTableProps, N as NavItem, k as NewSandboxCard, l as NewSandboxCardProps, P as PanelConfig, m as PlanCardData, n as PlanCards, o as PlanCardsProps, 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, ac as TopNavLink, ad as VariantList, ae as VariantListProps, af as useSidebar } from './variant-list-BNwUOSgz.js';
 export { c as BillingDashboard, d as BillingDashboardProps, e as PricingCards, f as PricingPageProps, g as UsageChart, h as UsageChartProps, U as UsageDataPoint } from './usage-chart-SSiOgeQI.js';
 export { AuthHeader, GitHubLoginButton, LoginLayout, LoginLayoutProps, UserMenu } from './auth.js';
 export { CodeBlock, CodeBlock as CodeBlockDisplay, CopyButton, Markdown, MarkdownProps } from './markdown.js';

package/dist/index.js

@@ -209,7 +209,7 @@ import {
   SidebarRailNav,
   VariantList,
   useSidebar
-} from "./chunk-7YWFOGKQ.js";
+} from "./chunk-2XCOGNZP.js";
 import {
   BillingDashboard,
   PricingPage,

package/dist/pages.d.ts

@@ -34,6 +34,11 @@ interface EnvironmentEntry {
     description?: string;
     version?: string;
 }
+interface ResourceLimits {
+    cpuMax?: number;
+    ramMaxGB?: number;
+    storageMaxGB?: number;
+}
 interface ProvisioningWizardProps {
     environments?: EnvironmentOption[];
     onLoadEnvironments?: () => Promise<EnvironmentEntry[]>;
@@ -49,6 +54,8 @@ interface ProvisioningWizardProps {
     skipToReview?: boolean;
     /** Load user's startup scripts for the advanced options selector */
     onLoadStartupScripts?: () => Promise<StartupScriptEntry[]>;
+    /** Plan-based resource limits — caps the slider maximums */
+    resourceLimits?: ResourceLimits;
 }
 interface StartupScriptEntry {
     id: string;
@@ -75,7 +82,7 @@ interface ProvisioningConfig {
     startupScriptIds?: string[];
 }
 declare function resolveEnvironment(env: EnvironmentEntry): EnvironmentOption;
-declare function ProvisioningWizard({ environments: environmentsProp, onLoadEnvironments, onSubmit, onBack, className, variant, defaultEnvironment, defaultConfig, skipToReview, onLoadStartupScripts, }: ProvisioningWizardProps): react_jsx_runtime.JSX.Element;
+declare function ProvisioningWizard({ environments: environmentsProp, onLoadEnvironments, onSubmit, onBack, className, variant, defaultEnvironment, defaultConfig, skipToReview, onLoadStartupScripts, resourceLimits, }: ProvisioningWizardProps): react_jsx_runtime.JSX.Element;
 
 type ProductVariant = "sandbox";
 interface StandalonePricingPageProps {
@@ -227,4 +234,4 @@ type TemplateCategory = "blockchain" | "ai-ml" | "frontend" | "infrastructure" |
 type TemplatePreset = Omit<ProvisioningConfig, "name" | "gitUrl" | "envVars" | "driver" | "startupScriptIds">;
 declare function getPresetForTemplate(id: string): TemplatePreset;
 
-export { BillingPage, type BillingPageData, type BillingPageProps, type EnvironmentEntry, type EnvironmentOption, PricingTier, type ProductVariant$1 as ProductVariant, type Profile, type ProfileFormData, type ProfileMetrics, ProfilesPage, type ProfilesPageProps, type ProvisioningConfig, ProvisioningWizard, type ProvisioningWizardProps, type ScriptType, type Secret, type SecretsApiClient, SecretsPage, type SecretsPageProps, StandalonePricingPage, type StandalonePricingPageProps, type StartupScript, type StartupScriptEntry, type StartupScriptFormData, type StartupScriptsApiClient, StartupScriptsPage, type StartupScriptsPageProps, type TemplateCategory, type TemplatePreset, TemplatesPage, type TemplatesPageProps, getPresetForTemplate, resolveEnvironment };
+export { BillingPage, type BillingPageData, type BillingPageProps, type EnvironmentEntry, type EnvironmentOption, PricingTier, type ProductVariant$1 as ProductVariant, type Profile, type ProfileFormData, type ProfileMetrics, ProfilesPage, type ProfilesPageProps, type ProvisioningConfig, ProvisioningWizard, type ProvisioningWizardProps, type ResourceLimits, type ScriptType, type Secret, type SecretsApiClient, SecretsPage, type SecretsPageProps, StandalonePricingPage, type StandalonePricingPageProps, type StartupScript, type StartupScriptEntry, type StartupScriptFormData, type StartupScriptsApiClient, StartupScriptsPage, type StartupScriptsPageProps, type TemplateCategory, type TemplatePreset, TemplatesPage, type TemplatesPageProps, getPresetForTemplate, resolveEnvironment };

package/dist/pages.js

@@ -310,6 +310,16 @@ var STACK_DISPLAY = {
   rust: { name: "Rust", abbr: "Rs", color: "orange", textClass: "text-[var(--surface-orange-text)]" }
 };
 function resolveEnvironment(env) {
+  if (env.id.startsWith("template:")) {
+    const templateName = env.description?.replace(/^Template:\s*/, "") ?? "Custom Template";
+    return {
+      id: env.id,
+      name: templateName,
+      description: env.description ?? "User template from snapshot",
+      icon: /* @__PURE__ */ jsx2("span", { className: "text-[var(--surface-success-text)] text-2xl font-bold", children: "T" }),
+      color: "green"
+    };
+  }
   const display = STACK_DISPLAY[env.id];
   const name = display?.name ?? (env.id.length > 0 ? env.id.charAt(0).toUpperCase() + env.id.slice(1).replace(/-/g, " ") : "Unknown");
   const abbr = display?.abbr ?? (env.id.length > 0 ? env.id[0].toUpperCase() : "?");
@@ -334,8 +344,8 @@ var RAM_MIN = 2;
 var RAM_MAX = 32;
 var STORAGE_MIN = 20;
 var STORAGE_MAX = 512;
-function calcCost(cpu, ram) {
-  const cost = cpu * 0.045 + ram * 5e-3;
+function calcCost(cpu, ram, storage) {
+  const cost = cpu * 0.045 + ram * 5e-3 + storage * 11e-4;
   return cost.toFixed(2);
 }
 function ProvisioningWizard({
@@ -348,8 +358,12 @@ function ProvisioningWizard({
   defaultEnvironment,
   defaultConfig,
   skipToReview,
-  onLoadStartupScripts
+  onLoadStartupScripts,
+  resourceLimits
 }) {
+  const cpuMax = Math.max(CPU_MIN, Math.min(resourceLimits?.cpuMax ?? CPU_MAX, CPU_MAX));
+  const ramMax = Math.max(RAM_MIN, Math.min(resourceLimits?.ramMaxGB ?? RAM_MAX, RAM_MAX));
+  const storageMax = Math.max(STORAGE_MIN, Math.min(resourceLimits?.storageMaxGB ?? STORAGE_MAX, STORAGE_MAX));
   const dc = defaultConfig;
   const [envList, setEnvList] = React2.useState(environmentsProp ?? defaultEnvironments);
   const onLoadEnvironmentsRef = React2.useRef(onLoadEnvironments);
@@ -377,9 +391,14 @@ function ProvisioningWizard({
       setSelectedEnv(effectiveDefault);
     }
   }, [envList, effectiveDefault]);
-  const [cpuCores, setCpuCores] = React2.useState(dc?.cpuCores ?? 4);
-  const [ramGB, setRamGB] = React2.useState(dc?.ramGB ?? 16);
-  const [storageGB, setStorageGB] = React2.useState(dc?.storageGB ?? 128);
+  const [cpuCores, setCpuCores] = React2.useState(Math.min(dc?.cpuCores ?? 4, cpuMax));
+  const [ramGB, setRamGB] = React2.useState(Math.min(dc?.ramGB ?? 16, ramMax));
+  const [storageGB, setStorageGB] = React2.useState(Math.min(dc?.storageGB ?? 128, storageMax));
+  React2.useEffect(() => {
+    setCpuCores((prev) => Math.min(prev, cpuMax));
+    setRamGB((prev) => Math.min(prev, ramMax));
+    setStorageGB((prev) => Math.min(prev, storageMax));
+  }, [cpuMax, ramMax, storageMax]);
   const [modelTier, setModelTier] = React2.useState(dc?.modelTier ?? "claude-sonnet");
   const [systemPrompt, setSystemPrompt] = React2.useState(dc?.systemPrompt ?? "");
   const [name, setName] = React2.useState(dc?.name ?? "");
@@ -389,6 +408,7 @@ function ProvisioningWizard({
   const [bare, setBare] = React2.useState(dc?.bare ?? false);
   const [startupScriptIds, setStartupScriptIds] = React2.useState(dc?.startupScriptIds ?? []);
   const [availableScripts, setAvailableScripts] = React2.useState([]);
+  const [activePreset, setActivePreset] = React2.useState(null);
   const [showAdvanced, setShowAdvanced] = React2.useState(false);
   const [loadError, setLoadError] = React2.useState(null);
   const onLoadStartupScriptsRef = React2.useRef(onLoadStartupScripts);
@@ -423,12 +443,18 @@ function ProvisioningWizard({
       setIsDeploying(false);
     }
   };
-  const applyPreset = (cpu, ram, storage) => {
-    setCpuCores(cpu);
-    setRamGB(ram);
-    setStorageGB(storage);
+  const applyPreset = (name2, cpu, ram, storage) => {
+    setCpuCores(Math.min(cpu, cpuMax));
+    setRamGB(Math.min(ram, ramMax));
+    setStorageGB(Math.min(storage, storageMax));
+    setActivePreset(name2);
   };
-  const hourCost = calcCost(cpuCores, ramGB);
+  const presets = [
+    { name: "Lightweight", cpu: Math.min(2, cpuMax), ram: Math.min(4, ramMax), storage: Math.min(50, storageMax) },
+    { name: "Standard", cpu: Math.min(4, cpuMax), ram: Math.min(16, ramMax), storage: Math.min(128, storageMax) },
+    { name: "Performance", cpu: Math.min(8, cpuMax), ram: Math.min(32, ramMax), storage: Math.min(256, storageMax) }
+  ];
+  const hourCost = calcCost(cpuCores, ramGB, storageGB);
   return /* @__PURE__ */ jsxs2("div", { className: cn("max-w-6xl mx-auto flex flex-col", className), children: [
     /* @__PURE__ */ jsxs2("div", { className: "mb-6 flex items-center gap-4 shrink-0", children: [
       onBack && /* @__PURE__ */ jsx2("button", { type: "button", onClick: onBack, className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border border-border hover:bg-muted/50 transition-colors text-foreground", children: /* @__PURE__ */ jsx2(ArrowLeft, { className: "h-5 w-5" }) }),
@@ -463,9 +489,9 @@ function ProvisioningWizard({
               onClick: () => {
                 setCurrentStep(1);
                 setSelectedEnv(environments[0]?.id ?? "");
-                setCpuCores(4);
-                setRamGB(16);
-                setStorageGB(128);
+                setCpuCores(Math.min(4, cpuMax));
+                setRamGB(Math.min(16, ramMax));
+                setStorageGB(Math.min(128, storageMax));
                 setModelTier("claude-sonnet");
                 setSystemPrompt("");
                 setName("");
@@ -474,6 +500,7 @@ function ProvisioningWizard({
                 setDriver("docker");
                 setBare(false);
                 setStartupScriptIds([]);
+                setActivePreset(null);
               },
               className: "text-xs font-bold text-primary hover:text-primary/70 transition-colors",
               children: "Start from scratch"
@@ -522,25 +549,25 @@ function ProvisioningWizard({
             ] }),
             /* @__PURE__ */ jsxs2("div", { className: "mb-6", children: [
               /* @__PURE__ */ jsx2("label", { className: "block font-label text-xs font-bold uppercase tracking-widest text-muted-foreground mb-3", children: "Compute Presets" }),
-              /* @__PURE__ */ jsxs2("div", { className: "grid grid-cols-3 gap-3", children: [
-                /* @__PURE__ */ jsxs2("button", { type: "button", onClick: () => applyPreset(2, 4, 50), className: cn("p-3 rounded-[14px] transition-all duration-200 text-center group border", cpuCores === 2 && ramGB === 4 && storageGB === 50 ? "bg-primary/5 border-primary ring-1 ring-primary/20 shadow-sm" : "bg-card border-border hover:border-primary/30 hover:shadow-sm active:scale-[0.97]"), children: [
-                  /* @__PURE__ */ jsx2("div", { className: cn("font-bold text-sm transition-colors duration-200", cpuCores === 2 && ramGB === 4 && storageGB === 50 ? "text-primary" : "text-foreground"), children: "Lightweight" }),
-                  /* @__PURE__ */ jsx2("div", { className: "text-xs text-muted-foreground mt-0.5 font-mono", children: "2C / 4G / 50G" })
-                ] }),
-                /* @__PURE__ */ jsxs2("button", { type: "button", onClick: () => applyPreset(4, 16, 128), className: cn("p-3 rounded-[14px] transition-all duration-200 text-center group border", cpuCores === 4 && ramGB === 16 && storageGB === 128 ? "bg-primary/5 border-primary ring-1 ring-primary/20 shadow-sm" : "bg-card border-border hover:border-primary/30 hover:shadow-sm active:scale-[0.97]"), children: [
-                  /* @__PURE__ */ jsx2("div", { className: cn("font-bold text-sm transition-colors duration-200", cpuCores === 4 && ramGB === 16 && storageGB === 128 ? "text-primary" : "text-foreground"), children: "Standard" }),
-                  /* @__PURE__ */ jsx2("div", { className: "text-xs text-muted-foreground mt-0.5 font-mono", children: "4C / 16G / 128G" })
-                ] }),
-                /* @__PURE__ */ jsxs2("button", { type: "button", onClick: () => applyPreset(8, 32, 256), className: cn("p-3 rounded-[14px] transition-all duration-200 text-center group border", cpuCores === 8 && ramGB === 32 && storageGB === 256 ? "bg-primary/5 border-primary ring-1 ring-primary/20 shadow-sm" : "bg-card border-border hover:border-primary/30 hover:shadow-sm active:scale-[0.97]"), children: [
-                  /* @__PURE__ */ jsx2("div", { className: cn("font-bold text-sm transition-colors duration-200", cpuCores === 8 && ramGB === 32 && storageGB === 256 ? "text-primary" : "text-foreground"), children: "Performance" }),
-                  /* @__PURE__ */ jsx2("div", { className: "text-xs text-muted-foreground mt-0.5 font-mono", children: "8C / 32G / 256G" })
-                ] })
-              ] })
+              /* @__PURE__ */ jsx2("div", { className: "grid grid-cols-3 gap-3", children: presets.map((p) => {
+                const active = activePreset === p.name;
+                return /* @__PURE__ */ jsxs2("button", { type: "button", onClick: () => applyPreset(p.name, p.cpu, p.ram, p.storage), className: cn("p-3 rounded-[14px] transition-all duration-200 text-center group border", active ? "bg-primary/5 border-primary ring-1 ring-primary/20 shadow-sm" : "bg-card border-border hover:border-primary/30 hover:shadow-sm active:scale-[0.97]"), children: [
+                  /* @__PURE__ */ jsx2("div", { className: cn("font-bold text-sm transition-colors duration-200", active ? "text-primary" : "text-foreground"), children: p.name }),
+                  /* @__PURE__ */ jsxs2("div", { className: "text-xs text-muted-foreground mt-0.5 font-mono", children: [
+                    p.cpu,
+                    "C / ",
+                    p.ram,
+                    "G / ",
+                    p.storage,
+                    "G"
+                  ] })
+                ] }, p.name);
+              }) })
             ] }),
             /* @__PURE__ */ jsx2("div", { className: "space-y-6", children: [
-              { label: "Compute Cores (CPU)", value: cpuCores, setter: setCpuCores, min: CPU_MIN, max: CPU_MAX, step: 0.5, unit: "vCPUs" },
-              { label: "Memory (RAM)", value: ramGB, setter: setRamGB, min: RAM_MIN, max: RAM_MAX, step: 1, unit: "GB" },
-              { label: "Ephemeral Storage", value: storageGB, setter: setStorageGB, min: STORAGE_MIN, max: STORAGE_MAX, step: 8, unit: "GB" }
+              { label: "Compute Cores (CPU)", value: cpuCores, setter: setCpuCores, min: CPU_MIN, max: cpuMax, step: 0.5, unit: "vCPUs" },
+              { label: "Memory (RAM)", value: ramGB, setter: setRamGB, min: RAM_MIN, max: ramMax, step: 1, unit: "GB" },
+              { label: "Ephemeral Storage", value: storageGB, setter: setStorageGB, min: STORAGE_MIN, max: storageMax, step: 8, unit: "GB" }
             ].map(({ label, value, setter, min, max, step: s, unit }) => /* @__PURE__ */ jsxs2("div", { children: [
               /* @__PURE__ */ jsxs2("div", { className: "flex justify-between items-end border-b border-border pb-1.5 mb-2", children: [
                 /* @__PURE__ */ jsx2("label", { className: "font-label text-xs font-bold uppercase tracking-widest text-muted-foreground", children: label }),
@@ -558,7 +585,10 @@ function ProvisioningWizard({
                   max,
                   step: s,
                   value,
-                  onChange: (e) => setter(+e.target.value),
+                  onChange: (e) => {
+                    setter(+e.target.value);
+                    setActivePreset(null);
+                  },
                   className: "w-full h-2 rounded-full appearance-none cursor-pointer accent-primary [&::-webkit-slider-runnable-track]:bg-border [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:h-2 [&::-moz-range-track]:bg-border [&::-moz-range-track]:rounded-full [&::-moz-range-track]:h-2 [&::-webkit-slider-thumb]:bg-primary [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:h-5 [&::-webkit-slider-thumb]:w-5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:-mt-[6px] [&::-webkit-slider-thumb]:shadow-md [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-primary-foreground [&::-webkit-slider-thumb]:transition-transform [&::-webkit-slider-thumb]:hover:scale-110"
                 }
               ),
@@ -829,7 +859,16 @@ function ProvisioningWizard({
               /* @__PURE__ */ jsx2("span", { children: "MEMORY" }),
               /* @__PURE__ */ jsxs2("span", { className: "text-foreground/80", children: [
                 "$",
-                (ramGB * 5e-3).toFixed(2)
+                (ramGB * 5e-3).toFixed(2),
+                "/h"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs2("div", { className: "flex justify-between text-xs font-mono tracking-widest text-muted-foreground", children: [
+              /* @__PURE__ */ jsx2("span", { children: "STORAGE" }),
+              /* @__PURE__ */ jsxs2("span", { className: "text-foreground/80", children: [
+                "$",
+                (storageGB * 11e-4).toFixed(2),
+                "/h"
               ] })
             ] })
           ] })
@@ -902,16 +941,16 @@ async function fetchTiersFromApi(apiBasePath) {
 }
 var FAQ = [
   {
-    q: "What are credits?",
-    a: "Credits are used to pay for AI model usage. Different models consume different amounts of credits based on their complexity and the length of your requests."
+    q: "What is included usage?",
+    a: "Each plan includes a monthly USD usage balance. Compute and AI model usage are billed per second from this balance. If you exceed your included amount, overage is billed at the same rates with no penalty."
   },
   {
     q: "Can I change plans later?",
     a: "Yes. You can upgrade or downgrade your plan at any time. When you upgrade, you are charged the prorated difference. When you downgrade, the change takes effect at the end of your billing cycle."
   },
   {
-    q: "Do unused credits roll over?",
-    a: "Monthly credits do not roll over to the next month. However, purchased credit packs never expire and can be used at any time."
+    q: "Does unused balance roll over?",
+    a: "Monthly included usage does not roll over to the next month. Your balance resets at the start of each billing cycle."
   }
 ];
 function StandalonePricingPage({

package/dist/styles.css

@@ -720,6 +720,9 @@
   .top-0\.5 {
     top: calc(var(--spacing) * 0.5);
   }
+  .top-1 {
+    top: calc(var(--spacing) * 1);
+  }
   .top-1\/2 {
     top: calc(1 / 2 * 100%);
   }
@@ -735,12 +738,18 @@
   .top-\[50\%\] {
     top: 50%;
   }
+  .top-full {
+    top: 100%;
+  }
   .-right-1 {
     right: calc(var(--spacing) * -1);
   }
   .right-0 {
     right: calc(var(--spacing) * 0);
   }
+  .right-1 {
+    right: calc(var(--spacing) * 1);
+  }
   .right-2 {
     right: calc(var(--spacing) * 2);
   }
@@ -2479,6 +2488,9 @@
   .py-5 {
     padding-block: calc(var(--spacing) * 5);
   }
+  .py-8 {
+    padding-block: calc(var(--spacing) * 8);
+  }
   .py-12 {
     padding-block: calc(var(--spacing) * 12);
   }
@@ -3400,6 +3412,12 @@
       }
     }
   }
+  .last\:border-0 {
+    &:last-child {
+      border-style: var(--tw-border-style);
+      border-width: 0px;
+    }
+  }
   .focus-within\:border-\[var\(--border-accent-hover\)\] {
     &:focus-within {
       border-color: var(--border-accent-hover);

package/dist/{variant-list-CsS6ydgm.d.ts → variant-list-BNwUOSgz.d.ts}

@@ -235,6 +235,19 @@ interface DashboardLayoutProps {
     railFooter?: React.ReactNode;
     /** Extra dropdown items in the profile menu */
     profileMenuItems?: React.ReactNode;
+    /** Notification data for the bell dropdown */
+    notifications?: {
+        items: {
+            id: string;
+            title: string;
+            message: string;
+            read: boolean;
+            createdAt: string;
+        }[];
+        unreadCount: number;
+        onMarkRead?: (id: string) => void;
+        onMarkAllRead?: () => void;
+    };
 }
 declare function DashboardLayout({ defaultPanelOpen, defaultMode, ...props }: DashboardLayoutProps): react_jsx_runtime.JSX.Element;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/sandbox-ui",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "description": "Unified UI component library for Tangle Sandbox — primitives, chat, dashboard, terminal, editor, and workspace components",
   "repository": {
     "type": "git",