@tangle-network/sandbox-ui 0.3.4 → 0.3.6

package/dist/{chunk-COCSO7FG.js → chunk-PCTEG6HR.js}

@@ -166,8 +166,76 @@ function AuthHeader({
   );
 }
 
+// src/auth/login-layout.tsx
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function MaterialIcon({ name, className }) {
+  return /* @__PURE__ */ jsx2("span", { className: cn("material-symbols-outlined", className), style: { fontVariationSettings: "'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24" }, children: name });
+}
+function LoginLayout({
+  brandName = "Tangle Sandbox",
+  tagline,
+  subtitle = "Step into the next generation of sandboxed cloud infrastructure. Precise, ethereal, and designed for high-performance development.",
+  terminalLines = [
+    "Initializing secure environment...",
+    "DONE  Encrypted bridge established.",
+    "Awaiting user authentication..."
+  ],
+  footerLinks = [
+    { label: "Documentation", href: "/docs" },
+    { label: "Support", href: "/support" }
+  ],
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsxs2("div", { className: cn("bg-surface text-on-surface font-sans overflow-hidden", className), children: [
+    /* @__PURE__ */ jsxs2("div", { className: "fixed inset-0 z-0 overflow-hidden", children: [
+      /* @__PURE__ */ jsx2("div", { className: "absolute top-[-10%] left-[-10%] w-[50%] h-[50%] bg-md3-primary/10 rounded-full blur-[120px]" }),
+      /* @__PURE__ */ jsx2("div", { className: "absolute bottom-[-10%] right-[-10%] w-[40%] h-[40%] bg-secondary-container/10 rounded-full blur-[100px]" }),
+      /* @__PURE__ */ jsx2("div", { className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full h-full opacity-20 pointer-events-none", style: { backgroundImage: "radial-gradient(#4a4455 1px, transparent 1px)", backgroundSize: "40px 40px" } })
+    ] }),
+    /* @__PURE__ */ jsxs2("main", { className: "relative z-10 flex flex-col md:flex-row h-screen", children: [
+      /* @__PURE__ */ jsxs2("section", { className: "hidden md:flex flex-col justify-between p-12 lg:p-20 w-1/2 h-full", children: [
+        /* @__PURE__ */ jsx2("div", { className: "space-y-4", children: /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ jsx2("div", { className: "w-10 h-10 bg-gradient-to-br from-md3-primary to-primary-container rounded-lg flex items-center justify-center shadow-lg shadow-md3-primary/20", children: /* @__PURE__ */ jsx2(MaterialIcon, { name: "terminal", className: "text-on-primary text-2xl" }) }),
+          /* @__PURE__ */ jsx2("span", { className: "text-2xl font-extrabold tracking-tighter bg-gradient-to-br from-violet-300 to-violet-600 bg-clip-text text-transparent", children: brandName })
+        ] }) }),
+        /* @__PURE__ */ jsxs2("div", { className: "max-w-lg space-y-6", children: [
+          tagline ? /* @__PURE__ */ jsx2("div", { className: "text-5xl lg:text-7xl font-bold tracking-tight leading-none text-white", children: tagline }) : /* @__PURE__ */ jsxs2("h1", { className: "text-5xl lg:text-7xl font-bold tracking-tight leading-none text-white", children: [
+            "Orchestrate ",
+            /* @__PURE__ */ jsx2("br", {}),
+            /* @__PURE__ */ jsx2("span", { className: "text-primary-fixed-dim", children: "Agents" }),
+            " in Flow."
+          ] }),
+          /* @__PURE__ */ jsx2("p", { className: "text-on-surface-variant text-lg leading-relaxed font-light", children: subtitle }),
+          /* @__PURE__ */ jsxs2("div", { className: "mt-12 bg-surface-container-lowest rounded-xl border border-outline-variant/10 overflow-hidden shadow-2xl", children: [
+            /* @__PURE__ */ jsxs2("div", { className: "bg-surface-container-high px-4 py-2 flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx2("div", { className: "w-3 h-3 rounded-full bg-md3-error/40" }),
+              /* @__PURE__ */ jsx2("div", { className: "w-3 h-3 rounded-full bg-md3-primary/40" }),
+              /* @__PURE__ */ jsx2("div", { className: "w-3 h-3 rounded-full bg-md3-secondary/40" }),
+              /* @__PURE__ */ jsx2("span", { className: "ml-4 font-mono text-xs text-on-surface-variant/60", children: "tangle --init-node" })
+            ] }),
+            /* @__PURE__ */ jsx2("div", { className: "p-6 font-mono text-xs space-y-2", children: terminalLines.map((line, i) => /* @__PURE__ */ jsxs2("div", { className: "flex gap-4", children: [
+              /* @__PURE__ */ jsx2("span", { className: "text-md3-primary/60", children: String(i + 1).padStart(2, "0") }),
+              line.startsWith("DONE") ? /* @__PURE__ */ jsxs2(Fragment, { children: [
+                /* @__PURE__ */ jsx2("span", { className: "text-primary-fixed-dim", children: "DONE" }),
+                /* @__PURE__ */ jsx2("span", { className: "text-on-surface", children: line.replace("DONE  ", "") })
+              ] }) : /* @__PURE__ */ jsx2("span", { className: "text-on-surface", children: line })
+            ] }, i)) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx2("nav", { className: "flex gap-8 text-sm font-medium text-on-surface-variant", children: footerLinks.map((link) => /* @__PURE__ */ jsxs2("a", { href: link.href, className: "hover:text-md3-primary transition-colors flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx2(MaterialIcon, { name: link.label === "Documentation" ? "menu_book" : "contact_support", className: "text-lg" }),
+          link.label
+        ] }, link.href)) })
+      ] }),
+      /* @__PURE__ */ jsx2("section", { className: "w-full md:w-1/2 flex items-center justify-center p-6 lg:p-24 relative", children: /* @__PURE__ */ jsx2("div", { className: "w-full max-w-md bg-surface-container/60 backdrop-blur-[20px] rounded-[2rem] p-8 lg:p-12 shadow-2xl border border-white/5", children }) })
+    ] })
+  ] });
+}
+
 export {
   GitHubLoginButton,
   UserMenu,
-  AuthHeader
+  AuthHeader,
+  LoginLayout
 };

package/dist/dashboard.d.ts

@@ -1,4 +1,4 @@
-export { A as AppSidebar, a as AppSidebarProps, B as Backend, b as BackendSelector, c as BackendSelectorProps, C as ClusterStatusBar, d as ClusterStatusBarProps, e as ClusterStatusItem, D as DashboardLayout, f as DashboardLayoutProps, v as DashboardProfile, g as DashboardUser, N as NavItem, h as NewSandboxCard, i as NewSandboxCardProps, w as ProductVariant, P as ProfileComparison, j as ProfileComparisonProps, k as ProfileSelector, l as ProfileSelectorProps, R as ResourceMeter, m as ResourceMeterProps, S as SandboxCard, n as SandboxCardData, o as SandboxCardProps, p as SandboxStatus, q as SandboxTable, r as SandboxTableProps, s as SidebarNavItem, t as SidebarSandbox, x as Variant, V as VariantList, u as VariantListProps, y as VariantOutcome, z as VariantStatus } from './index-BOjBJwzD.js';
+export { A as AppSidebar, a as AppSidebarProps, B as Backend, b as BackendSelector, c as BackendSelectorProps, C as ClusterStatusBar, d as ClusterStatusBarProps, e as ClusterStatusItem, f as CreditBalance, g as CreditBalanceProps, D as DashboardLayout, h as DashboardLayoutProps, G as DashboardProfile, i as DashboardUser, I as Invoice, j as InvoiceTable, k as InvoiceTableProps, N as NavItem, l as NewSandboxCard, m as NewSandboxCardProps, P as PlanCardData, n as PlanCards, o as PlanCardsProps, H as PlanFeature, J as ProductVariant, p as ProfileComparison, q as ProfileComparisonProps, r as ProfileSelector, s as ProfileSelectorProps, R as ResourceMeter, t as ResourceMeterProps, S as SandboxCard, u as SandboxCardData, v as SandboxCardProps, w as SandboxStatus, x as SandboxTable, y as SandboxTableProps, z as SidebarNavItem, E as SidebarSandbox, K as Variant, V as VariantList, F as VariantListProps, L as VariantOutcome, M as VariantStatus } from './index-BJIPTCKk.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-CY9xo3KX.js';
 import 'react/jsx-runtime';
 import 'react';

package/dist/dashboard.js

@@ -2,15 +2,18 @@ import {
   AppSidebar,
   BackendSelector,
   ClusterStatusBar,
+  CreditBalance,
   DashboardLayout,
+  InvoiceTable,
   NewSandboxCard,
+  PlanCards,
   ProfileComparison,
   ProfileSelector,
   ResourceMeter,
   SandboxCard,
   SandboxTable,
   VariantList
-} from "./chunk-HY5IBRCE.js";
+} from "./chunk-DMYYQXPN.js";
 import {
   BillingDashboard,
   PricingPage,
@@ -27,8 +30,11 @@ export {
   BackendSelector,
   BillingDashboard,
   ClusterStatusBar,
+  CreditBalance,
   DashboardLayout,
+  InvoiceTable,
   NewSandboxCard,
+  PlanCards,
   PricingPage,
   ProfileComparison,
   ProfileSelector,

package/dist/{index-BOjBJwzD.d.ts → index-BJIPTCKk.d.ts}

@@ -39,6 +39,51 @@ interface ClusterStatusBarProps {
 }
 declare function ClusterStatusBar({ items, latency, className }: ClusterStatusBarProps): react_jsx_runtime.JSX.Element;
 
+interface CreditBalanceProps {
+    amount: number;
+    description?: string;
+    onTopUp?: (amount: number) => void;
+    quickAmounts?: number[];
+    className?: string;
+}
+declare function CreditBalance({ amount, description, onTopUp, quickAmounts, className, }: CreditBalanceProps): react_jsx_runtime.JSX.Element;
+
+interface Invoice {
+    id: string;
+    date: string;
+    amount: number;
+    status: "paid" | "pending" | "failed";
+}
+interface InvoiceTableProps {
+    invoices: Invoice[];
+    onExportAll?: () => void;
+    onLoadMore?: () => void;
+    onViewInvoice?: (id: string) => void;
+    hasMore?: boolean;
+    className?: string;
+}
+declare function InvoiceTable({ invoices, onExportAll, onLoadMore, onViewInvoice, hasMore, className }: InvoiceTableProps): react_jsx_runtime.JSX.Element;
+
+interface PlanFeature {
+    text: string;
+}
+interface PlanCardData {
+    id: string;
+    name: string;
+    price: number;
+    period?: string;
+    features: PlanFeature[];
+    popular?: boolean;
+    current?: boolean;
+    ctaLabel?: string;
+    onSelect?: (id: string) => void;
+}
+interface PlanCardsProps {
+    plans: PlanCardData[];
+    className?: string;
+}
+declare function PlanCards({ plans, className }: PlanCardsProps): react_jsx_runtime.JSX.Element;
+
 type ProductVariant = "sandbox";
 interface NavItem {
     id: string;
@@ -216,4 +261,4 @@ interface VariantListProps {
 }
 declare function VariantList({ variants, selectedId, onSelect, onAccept, onReject, isActioning, className, }: VariantListProps): react_jsx_runtime.JSX.Element;
 
-export { AppSidebar as A, type Backend as B, ClusterStatusBar as C, DashboardLayout as D, type NavItem as N, ProfileComparison as P, ResourceMeter as R, SandboxCard as S, type TopNavLink as T, VariantList as V, type AppSidebarProps as a, BackendSelector as b, type BackendSelectorProps as c, type ClusterStatusBarProps as d, type ClusterStatusItem as e, type DashboardLayoutProps as f, type DashboardUser as g, NewSandboxCard as h, type NewSandboxCardProps as i, type ProfileComparisonProps as j, ProfileSelector as k, type ProfileSelectorProps as l, type ResourceMeterProps as m, type SandboxCardData as n, type SandboxCardProps as o, type SandboxStatus as p, SandboxTable as q, type SandboxTableProps as r, type SidebarNavItem as s, type SidebarSandbox as t, type VariantListProps as u, type Profile as v, type ProductVariant as w, type Variant as x, type VariantOutcome as y, type VariantStatus as z };
+export { AppSidebar as A, type Backend as B, ClusterStatusBar as C, DashboardLayout as D, type SidebarSandbox as E, type VariantListProps as F, type Profile as G, type PlanFeature as H, type Invoice as I, type ProductVariant as J, type Variant as K, type VariantOutcome as L, type VariantStatus as M, type NavItem as N, type PlanCardData as P, ResourceMeter as R, SandboxCard as S, type TopNavLink as T, VariantList as V, type AppSidebarProps as a, BackendSelector as b, type BackendSelectorProps as c, type ClusterStatusBarProps as d, type ClusterStatusItem as e, CreditBalance as f, type CreditBalanceProps as g, type DashboardLayoutProps as h, type DashboardUser as i, InvoiceTable as j, type InvoiceTableProps as k, NewSandboxCard as l, type NewSandboxCardProps as m, PlanCards as n, type PlanCardsProps as o, ProfileComparison as p, type ProfileComparisonProps as q, ProfileSelector as r, type ProfileSelectorProps as s, type ResourceMeterProps as t, type SandboxCardData as u, type SandboxCardProps as v, type SandboxStatus as w, SandboxTable as x, type SandboxTableProps as y, type SidebarNavItem as z };

package/dist/index.d.ts

@@ -13,9 +13,9 @@ export { E as ExpandedToolDetail, I as InlineThinkingItem, c as InlineToolItem,
 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 { FileArtifactPane, FileArtifactPaneProps, FilePreview, FilePreviewProps } from './files.js';
-export { A as AppSidebar, a as AppSidebarProps, B as Backend, b as BackendSelector, c as BackendSelectorProps, C as ClusterStatusBar, d as ClusterStatusBarProps, e as ClusterStatusItem, D as DashboardLayout, f as DashboardLayoutProps, g as DashboardUser, N as NavItem, h as NewSandboxCard, i as NewSandboxCardProps, P as ProfileComparison, j as ProfileComparisonProps, k as ProfileSelector, l as ProfileSelectorProps, R as ResourceMeter, m as ResourceMeterProps, S as SandboxCard, n as SandboxCardData, o as SandboxCardProps, p as SandboxStatus, q as SandboxTable, r as SandboxTableProps, s as SidebarNavItem, t as SidebarSandbox, T as TopNavLink, V as VariantList, u as VariantListProps } from './index-BOjBJwzD.js';
+export { A as AppSidebar, a as AppSidebarProps, B as Backend, b as BackendSelector, c as BackendSelectorProps, C as ClusterStatusBar, d as ClusterStatusBarProps, e as ClusterStatusItem, f as CreditBalance, g as CreditBalanceProps, D as DashboardLayout, h as DashboardLayoutProps, i as DashboardUser, I as Invoice, j as InvoiceTable, k as InvoiceTableProps, N as NavItem, l as NewSandboxCard, m as NewSandboxCardProps, P as PlanCardData, n as PlanCards, o as PlanCardsProps, p as ProfileComparison, q as ProfileComparisonProps, r as ProfileSelector, s as ProfileSelectorProps, R as ResourceMeter, t as ResourceMeterProps, S as SandboxCard, u as SandboxCardData, v as SandboxCardProps, w as SandboxStatus, x as SandboxTable, y as SandboxTableProps, z as SidebarNavItem, E as SidebarSandbox, T as TopNavLink, V as VariantList, F as VariantListProps } from './index-BJIPTCKk.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-CY9xo3KX.js';
-export { AuthHeader, GitHubLoginButton, UserMenu } from './auth.js';
+export { AuthHeader, GitHubLoginButton, LoginLayout, LoginLayoutProps, UserMenu } from './auth.js';
 export { CodeBlock, CopyButton, Markdown, MarkdownProps } from './markdown.js';
 export { AppendUserMessageOptions, ApplySdkEventOptions, BeginAssistantMessageOptions, CompleteAssistantMessageOptions, SdkSessionAttachment, SdkSessionEvent, SdkSessionSeed, UseSdkSessionOptions, UseSdkSessionReturn, UseToolCallStreamReturn, useAutoScroll, useDropdownMenu, useRunCollapseState, useRunGroups, useSSEStream, useSdkSession, useSessionStream, useSidecarAuth, useToolCallStream } from './sdk-hooks.js';
 export { d as createAuthFetcher, u as useApiKey, e as useAuth, f as usePtySession } from './use-pty-session-DeZSxOCN.js';

package/dist/index.js

@@ -5,8 +5,9 @@ import {
 import {
   AuthHeader,
   GitHubLoginButton,
+  LoginLayout,
   UserMenu
-} from "./chunk-COCSO7FG.js";
+} from "./chunk-PCTEG6HR.js";
 import {
   createAuthFetcher,
   useApiKey,
@@ -159,15 +160,18 @@ import {
   AppSidebar,
   BackendSelector,
   ClusterStatusBar,
+  CreditBalance,
   DashboardLayout,
+  InvoiceTable,
   NewSandboxCard,
+  PlanCards,
   ProfileComparison,
   ProfileSelector,
   ResourceMeter,
   SandboxCard,
   SandboxTable,
   VariantList
-} from "./chunk-HY5IBRCE.js";
+} from "./chunk-DMYYQXPN.js";
 import {
   BillingDashboard,
   PricingPage,
@@ -330,6 +334,7 @@ export {
   CodeBlock as CodeBlockDisplay,
   CommandPreview,
   CopyButton,
+  CreditBalance,
   DashboardLayout,
   Dialog,
   DialogClose,
@@ -371,12 +376,15 @@ export {
   InlineThinkingItem,
   InlineToolItem,
   Input,
+  InvoiceTable,
   Label,
+  LoginLayout,
   Logo,
   Markdown,
   MessageList,
   NewSandboxCard,
   OpenUIArtifactRenderer,
+  PlanCards,
   PricingPage as PricingCards,
   ProfileComparison,
   ProfileSelector,

package/dist/pages.d.ts

@@ -1,5 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { B as BillingSubscription, a as BillingBalance, b as BillingUsage, U as UsageDataPoint, P as PricingTier } from './usage-chart-CY9xo3KX.js';
+import * as React from 'react';
 
 type ProductVariant$1 = "sandbox";
 interface BillingPageData {
@@ -20,6 +21,29 @@ interface BillingPageProps {
 }
 declare function BillingPage({ variant, initialData, apiBasePath, onManageSubscription, onAddCredits, onSelectTier, fetchBillingData, }: BillingPageProps): react_jsx_runtime.JSX.Element;
 
+interface EnvironmentOption {
+    id: string;
+    name: string;
+    description: string;
+    icon: React.ReactNode;
+    color: string;
+}
+interface ProvisioningWizardProps {
+    environments?: EnvironmentOption[];
+    onSubmit?: (config: ProvisioningConfig) => void;
+    onBack?: () => void;
+    className?: string;
+}
+interface ProvisioningConfig {
+    environment: string;
+    cpuCores: number;
+    ramGB: number;
+    storageGB: number;
+    modelTier: string;
+    systemPrompt: string;
+}
+declare function ProvisioningWizard({ environments, onSubmit, onBack, className, }: ProvisioningWizardProps): react_jsx_runtime.JSX.Element;
+
 type ProductVariant = "sandbox";
 interface StandalonePricingPageProps {
     variant?: ProductVariant;
@@ -87,4 +111,4 @@ interface ProfilesPageProps {
 }
 declare function ProfilesPage({ apiClient, tier, maxProfiles, onCompareClick, title, }: ProfilesPageProps): react_jsx_runtime.JSX.Element;
 
-export { BillingPage, type BillingPageData, type BillingPageProps, type ProductVariant$1 as ProductVariant, type Profile, type ProfileFormData, type ProfileMetrics, ProfilesPage, type ProfilesPageProps, StandalonePricingPage, type StandalonePricingPageProps };
+export { BillingPage, type BillingPageData, type BillingPageProps, type EnvironmentOption, type ProductVariant$1 as ProductVariant, type Profile, type ProfileFormData, type ProfileMetrics, ProfilesPage, type ProfilesPageProps, type ProvisioningConfig, ProvisioningWizard, type ProvisioningWizardProps, StandalonePricingPage, type StandalonePricingPageProps };