@tangle-network/sandbox-ui 0.10.4 → 0.10.6

package/dist/sidebar-drop-zone-tDBsuOH5.d.ts

@@ -0,0 +1,301 @@
+import * as React$1 from 'react';
+import { ReactNode } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import * as ProgressPrimitive from '@radix-ui/react-progress';
+import * as SwitchPrimitives from '@radix-ui/react-switch';
+import * as LabelPrimitive from '@radix-ui/react-label';
+
+declare const Card: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & {
+    variant?: "default" | "glass" | "sandbox" | "elevated";
+    hover?: boolean;
+} & React$1.RefAttributes<HTMLDivElement>>;
+declare const CardHeader: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
+declare const CardTitle: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLHeadingElement> & React$1.RefAttributes<HTMLHeadingElement>>;
+declare const CardDescription: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLParagraphElement> & React$1.RefAttributes<HTMLParagraphElement>>;
+declare const CardContent: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
+declare const CardFooter: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
+
+declare const Dialog: React$1.FC<DialogPrimitive.DialogProps>;
+declare const DialogTrigger: React$1.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
+declare const DialogPortal: React$1.FC<DialogPrimitive.DialogPortalProps>;
+declare const DialogClose: React$1.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React$1.RefAttributes<HTMLButtonElement>>;
+declare const DialogOverlay: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const DialogContent: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {
+    variant?: "default" | "sandbox";
+} & React$1.RefAttributes<HTMLDivElement>>;
+declare const DialogHeader: {
+    ({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+declare const DialogFooter: {
+    ({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+declare const DialogTitle: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React$1.RefAttributes<HTMLHeadingElement>, "ref"> & React$1.RefAttributes<HTMLHeadingElement>>;
+declare const DialogDescription: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React$1.RefAttributes<HTMLParagraphElement>, "ref"> & React$1.RefAttributes<HTMLParagraphElement>>;
+
+declare const inputVariants: (props?: ({
+    variant?: "default" | "sandbox" | "error" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface InputProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "size">, VariantProps<typeof inputVariants> {
+    label?: string;
+    error?: string;
+    hint?: string;
+}
+declare const Input: React$1.ForwardRefExoticComponent<InputProps & React$1.RefAttributes<HTMLInputElement>>;
+interface TextareaProps extends React$1.TextareaHTMLAttributes<HTMLTextAreaElement> {
+    variant?: "default" | "sandbox";
+    label?: string;
+    error?: string;
+    hint?: string;
+}
+declare const Textarea: React$1.ForwardRefExoticComponent<TextareaProps & React$1.RefAttributes<HTMLTextAreaElement>>;
+
+declare const badgeVariants: (props?: ({
+    variant?: "default" | "destructive" | "outline" | "secondary" | "sandbox" | "error" | "success" | "warning" | "info" | "running" | "creating" | "stopped" | "warm" | "cold" | "deleted" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type BadgeVariant = "default" | "secondary" | "destructive" | "outline" | "success" | "warning" | "error" | "info" | "sandbox" | "running" | "creating" | "stopped" | "warm" | "cold" | "deleted" | null;
+interface BadgeProps extends VariantProps<typeof badgeVariants> {
+    variant?: BadgeVariant;
+    className?: string;
+    children?: React$1.ReactNode;
+    dot?: boolean;
+    onClick?: React$1.MouseEventHandler<HTMLDivElement>;
+    style?: React$1.CSSProperties;
+    id?: string;
+    role?: React$1.AriaRole;
+    title?: string;
+    [key: string]: unknown;
+}
+declare function Badge({ className, variant, dot, children, ...props }: BadgeProps): react_jsx_runtime.JSX.Element;
+
+declare const Avatar: React$1.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarProps & React$1.RefAttributes<HTMLSpanElement>, "ref"> & React$1.RefAttributes<HTMLSpanElement>>;
+declare const AvatarImage: React$1.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarImageProps & React$1.RefAttributes<HTMLImageElement>, "ref"> & React$1.RefAttributes<HTMLImageElement>>;
+declare const AvatarFallback: React$1.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarFallbackProps & React$1.RefAttributes<HTMLSpanElement>, "ref"> & React$1.RefAttributes<HTMLSpanElement>>;
+
+declare const DropdownMenu: React$1.FC<DropdownMenuPrimitive.DropdownMenuProps>;
+declare const DropdownMenuTrigger: React$1.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
+declare const DropdownMenuGroup: React$1.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuGroupProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuPortal: React$1.FC<DropdownMenuPrimitive.DropdownMenuPortalProps>;
+declare const DropdownMenuSub: React$1.FC<DropdownMenuPrimitive.DropdownMenuSubProps>;
+declare const DropdownMenuRadioGroup: React$1.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuRadioGroupProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuSubTrigger: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubTriggerProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & React$1.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuSubContent: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuContent: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuItem: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuItemProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & React$1.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuCheckboxItem: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuCheckboxItemProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuRadioItem: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuRadioItemProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuLabel: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuLabelProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & React$1.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuSeparator: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSeparatorProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuShortcut: {
+    ({ className, ...props }: React$1.HTMLAttributes<HTMLSpanElement>): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+declare const Select: React$1.FC<SelectPrimitive.SelectProps>;
+declare const SelectGroup: React$1.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const SelectValue: React$1.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & React$1.RefAttributes<HTMLSpanElement>>;
+declare const SelectTrigger: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+declare const SelectScrollUpButton: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollUpButtonProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const SelectScrollDownButton: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollDownButtonProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const SelectContent: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const SelectLabel: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const SelectItem: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const SelectSeparator: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectSeparatorProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+
+declare const Table: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLTableElement> & React$1.RefAttributes<HTMLTableElement>>;
+declare const TableHeader: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLTableSectionElement> & React$1.RefAttributes<HTMLTableSectionElement>>;
+declare const TableBody: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLTableSectionElement> & React$1.RefAttributes<HTMLTableSectionElement>>;
+declare const TableFooter: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLTableSectionElement> & React$1.RefAttributes<HTMLTableSectionElement>>;
+declare const TableRow: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLTableRowElement> & React$1.RefAttributes<HTMLTableRowElement>>;
+declare const TableHead: React$1.ForwardRefExoticComponent<React$1.ThHTMLAttributes<HTMLTableCellElement> & React$1.RefAttributes<HTMLTableCellElement>>;
+declare const TableCell: React$1.ForwardRefExoticComponent<React$1.TdHTMLAttributes<HTMLTableCellElement> & React$1.RefAttributes<HTMLTableCellElement>>;
+declare const TableCaption: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLTableCaptionElement> & React$1.RefAttributes<HTMLTableCaptionElement>>;
+
+declare const Tabs: React$1.ForwardRefExoticComponent<TabsPrimitive.TabsProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const TabsList: React$1.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsListProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {
+    variant?: "default" | "pills" | "underline";
+} & React$1.RefAttributes<HTMLDivElement>>;
+declare const TabsTrigger: React$1.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsTriggerProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & {
+    variant?: "default" | "pills" | "underline";
+} & React$1.RefAttributes<HTMLButtonElement>>;
+declare const TabsContent: React$1.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+
+declare const Progress: React$1.ForwardRefExoticComponent<Omit<ProgressPrimitive.ProgressProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {
+    variant?: "default" | "sandbox";
+    showValue?: boolean;
+} & React$1.RefAttributes<HTMLDivElement>>;
+
+declare const Switch: React$1.ForwardRefExoticComponent<Omit<SwitchPrimitives.SwitchProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+
+declare function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+declare function SkeletonCard({ className }: {
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function SkeletonTable({ rows }: {
+    rows?: number;
+}): react_jsx_runtime.JSX.Element;
+
+interface Toast {
+    id: string;
+    title: string;
+    description?: string;
+    variant?: "default" | "success" | "error" | "warning" | "info";
+    duration?: number;
+}
+interface ToastContainerProps {
+    toasts: Toast[];
+    onDismiss: (id: string) => void;
+}
+declare function ToastContainer({ toasts, onDismiss }: ToastContainerProps): react_jsx_runtime.JSX.Element;
+type ToastInput = Omit<Toast, "id">;
+interface ToastContextValue {
+    toasts: Toast[];
+    toast: (input: ToastInput) => void;
+    success: (title: string, description?: string) => void;
+    error: (title: string, description?: string) => void;
+    warning: (title: string, description?: string) => void;
+    info: (title: string, description?: string) => void;
+    dismiss: (id: string) => void;
+}
+declare function ToastProvider({ children }: {
+    children: React$1.ReactNode;
+}): react_jsx_runtime.JSX.Element;
+declare function useToast(): ToastContextValue;
+
+declare const Label: React$1.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React$1.RefAttributes<HTMLLabelElement>, "ref"> & React$1.RefAttributes<HTMLLabelElement>>;
+
+interface EmptyStateProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    icon?: React$1.ReactNode;
+    title: string;
+    description?: string;
+    action?: React$1.ReactNode;
+}
+declare const EmptyState: React$1.ForwardRefExoticComponent<EmptyStateProps & React$1.RefAttributes<HTMLDivElement>>;
+
+interface StatCardProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    variant?: "default" | "sandbox";
+    title: string;
+    value: string | number;
+    subtitle?: string;
+    icon?: React$1.ReactNode;
+    trend?: {
+        value: number;
+        label?: string;
+    };
+}
+declare const StatCard: React$1.ForwardRefExoticComponent<StatCardProps & React$1.RefAttributes<HTMLDivElement>>;
+
+interface LogoProps {
+    variant?: "sandbox";
+    size?: "sm" | "md" | "lg" | "xl";
+    className?: string;
+    iconOnly?: boolean;
+}
+declare function TangleKnot({ size, className }: {
+    size: number;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function Logo({ variant, size, className, iconOnly }: LogoProps): react_jsx_runtime.JSX.Element;
+declare namespace Logo {
+    var displayName: string;
+}
+
+interface TerminalDisplayProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    variant?: "default" | "sandbox";
+    title?: string;
+    showHeader?: boolean;
+    autoScroll?: boolean;
+    maxHeight?: string;
+}
+declare const TerminalDisplay: React$1.ForwardRefExoticComponent<TerminalDisplayProps & React$1.RefAttributes<HTMLDivElement>>;
+interface TerminalLineProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    type?: "input" | "output" | "error" | "success" | "info" | "thinking" | "command" | "warning";
+    prompt?: string;
+    timestamp?: string;
+}
+declare const TerminalLine: React$1.ForwardRefExoticComponent<TerminalLineProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const TerminalCursor: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLSpanElement> & React$1.RefAttributes<HTMLSpanElement>>;
+interface TerminalInputProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "onSubmit"> {
+    onSubmit?: (value: string) => void;
+    variant?: "default" | "sandbox";
+}
+declare const TerminalInput: React$1.ForwardRefExoticComponent<TerminalInputProps & React$1.RefAttributes<HTMLInputElement>>;
+
+interface DropZoneProps {
+    /** Called with dropped files */
+    onDrop: (files: File[]) => void;
+    /** Accepted file types (e.g. ".pdf,.csv,.xlsx") */
+    accept?: string;
+    /** Whether drop zone is active */
+    disabled?: boolean;
+    /** Custom overlay content (replaces default) */
+    overlay?: ReactNode;
+    /** Overlay title */
+    title?: string;
+    /** Overlay description */
+    description?: string;
+    /** Overlay icon (Material Symbols name or ReactNode) */
+    icon?: string | ReactNode;
+    /** Children wrapped by the drop zone */
+    children: ReactNode;
+    className?: string;
+}
+declare function DropZone({ onDrop, accept, disabled, overlay, title, description, icon, children, className, }: DropZoneProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * UploadProgress — file upload status indicators.
+ *
+ * Shows a list of files being uploaded with progress bars,
+ * completion checkmarks, and error states.
+ */
+interface UploadFile {
+    id: string;
+    name: string;
+    size: number;
+    status: "pending" | "uploading" | "complete" | "error";
+    progress?: number;
+    error?: string;
+}
+interface UploadProgressProps {
+    files: UploadFile[];
+    onRemove?: (id: string) => void;
+    onRetry?: (id: string) => void;
+    className?: string;
+}
+declare function UploadProgress({ files, onRemove, onRetry, className }: UploadProgressProps): react_jsx_runtime.JSX.Element | null;
+
+interface SidebarDropZoneProps {
+    /** Called with dropped files */
+    onDrop: (files: File[]) => void;
+    /** Accepted file types (e.g. ".pdf,.csv") */
+    accept?: string;
+    /** Whether drop zone is active */
+    disabled?: boolean;
+    /** Title shown in the drop zone */
+    title?: string;
+    /** Description shown below the title */
+    description?: string;
+    /** Custom icon (replaces default upload icon) */
+    icon?: ReactNode;
+    /** Always visible (not just on drag). Useful as a persistent upload area. */
+    persistent?: boolean;
+    className?: string;
+}
+declare function SidebarDropZone({ onDrop, accept, disabled, title, description, icon, persistent, className, }: SidebarDropZoneProps): react_jsx_runtime.JSX.Element;
+
+export { SelectSeparator as $, Avatar as A, Badge as B, Card as C, Dialog as D, DropdownMenuRadioGroup as E, DropdownMenuRadioItem as F, DropdownMenuSeparator as G, DropdownMenuShortcut as H, DropdownMenuSub as I, DropdownMenuSubContent as J, DropdownMenuSubTrigger as K, DropdownMenuTrigger as L, EmptyState as M, type EmptyStateProps as N, Input as O, type InputProps as P, Label as Q, Logo as R, type LogoProps as S, Progress as T, Select as U, SelectContent as V, SelectGroup as W, SelectItem as X, SelectLabel as Y, SelectScrollDownButton as Z, SelectScrollUpButton as _, AvatarFallback as a, SelectTrigger as a0, SelectValue as a1, SidebarDropZone as a2, type SidebarDropZoneProps as a3, Skeleton as a4, SkeletonCard as a5, SkeletonTable as a6, StatCard as a7, type StatCardProps as a8, Switch as a9, useToast as aA, Table as aa, TableBody as ab, TableCaption as ac, TableCell as ad, TableFooter as ae, TableHead as af, TableHeader as ag, TableRow as ah, Tabs as ai, TabsContent as aj, TabsList as ak, TabsTrigger as al, TangleKnot as am, TerminalCursor as an, TerminalDisplay as ao, TerminalInput as ap, TerminalLine as aq, Textarea as ar, type TextareaProps as as, type Toast as at, ToastContainer as au, ToastProvider as av, type UploadFile as aw, UploadProgress as ax, type UploadProgressProps as ay, badgeVariants as az, AvatarImage as b, type BadgeProps as c, CardContent as d, CardDescription as e, CardFooter as f, CardHeader as g, CardTitle as h, DialogClose as i, DialogContent as j, DialogDescription as k, DialogFooter as l, DialogHeader as m, DialogOverlay as n, DialogPortal as o, DialogTitle as p, DialogTrigger as q, DropZone as r, type DropZoneProps as s, DropdownMenu as t, DropdownMenuCheckboxItem as u, DropdownMenuContent as v, DropdownMenuGroup as w, DropdownMenuItem as x, DropdownMenuLabel as y, DropdownMenuPortal as z };

package/dist/styles.css

@@ -1,4 +1,5 @@
 /*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
+@import url("https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;600&family=Outfit:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap");
 @layer properties;
 :root, [data-sandbox-ui] {
   --md3-surface: #0a0a14;
@@ -403,7 +404,6 @@
   --radius-pill: 999px;
   --radius-full: 999px;
 }
-@import url("https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;600&family=Outfit:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap");
 @layer theme, base, components, utilities;
 @layer theme {
   :root, :host {
@@ -906,6 +906,9 @@
   .mr-3 {
     margin-right: calc(var(--spacing) * 3);
   }
+  .-mb-px {
+    margin-bottom: -1px;
+  }
   .mb-0\.5 {
     margin-bottom: calc(var(--spacing) * 0.5);
   }
@@ -1607,6 +1610,9 @@
   .flex-row-reverse {
     flex-direction: row-reverse;
   }
+  .flex-nowrap {
+    flex-wrap: nowrap;
+  }
   .flex-wrap {
     flex-wrap: wrap;
   }
@@ -1972,6 +1978,9 @@
     --tw-border-style: none;
     border-style: none;
   }
+  .border-\[var\(--accent-text\)\] {
+    border-color: var(--accent-text);
+  }
   .border-\[var\(--border-accent\)\] {
     border-color: var(--border-accent);
   }
@@ -2140,9 +2149,18 @@
       background-color: color-mix(in srgb,var(--bg-card) 94%,transparent);
     }
   }
+  .bg-\[var\(--accent-surface\)\] {
+    background-color: var(--accent-surface);
+  }
   .bg-\[var\(--accent-surface-soft\)\] {
     background-color: var(--accent-surface-soft);
   }
+  .bg-\[var\(--accent-surface-soft\)\]\/40 {
+    background-color: var(--accent-surface-soft);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--accent-surface-soft) 40%, transparent);
+    }
+  }
   .bg-\[var\(--accent-surface-strong\)\] {
     background-color: var(--accent-surface-strong);
   }
@@ -2898,6 +2916,12 @@
   .text-\[var\(--accent-text\)\] {
     color: var(--accent-text);
   }
+  .text-\[var\(--accent-text\)\]\/80 {
+    color: var(--accent-text);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, var(--accent-text) 80%, transparent);
+    }
+  }
   .text-\[var\(--brand-cool\)\] {
     color: var(--brand-cool);
   }
@@ -3057,6 +3081,9 @@
   .capitalize {
     text-transform: capitalize;
   }
+  .normal-case {
+    text-transform: none;
+  }
   .uppercase {
     text-transform: uppercase;
   }

package/dist/{usage-chart-SSiOgeQI.d.ts → usage-chart-CPTcNlGs.d.ts}

@@ -49,6 +49,13 @@ interface PricingPageProps {
     className?: string;
     cardClassName?: string;
 }
+/**
+ * Formats an integer cent amount as a human-readable USD price.
+ * Whole-dollar amounts omit decimals ($10), fractional amounts show two ($10.99).
+ * Returns "$0" for non-finite or negative inputs.
+ * @param cents - Amount in whole US cents (e.g. 1099 for $10.99).
+ */
+declare function formatPrice(cents: number): string;
 declare function PricingPage({ tiers, currentTierId, billingPeriod, onBillingPeriodChange, onSelectTier, loading, className, }: PricingPageProps): react_jsx_runtime.JSX.Element;
 
 interface UsageDataPoint {
@@ -63,4 +70,4 @@ interface UsageChartProps {
 }
 declare function UsageChart({ data, title, unit, className }: UsageChartProps): react_jsx_runtime.JSX.Element;
 
-export { type BillingSubscription as B, type PricingTier as P, type UsageDataPoint as U, type BillingBalance as a, type BillingUsage as b, BillingDashboard as c, type BillingDashboardProps as d, PricingPage as e, type PricingPageProps as f, UsageChart as g, type UsageChartProps as h };
+export { type BillingSubscription as B, type PricingTier as P, type UsageDataPoint as U, type BillingBalance as a, type BillingUsage as b, BillingDashboard as c, type BillingDashboardProps as d, PricingPage as e, type PricingPageProps as f, UsageChart as g, type UsageChartProps as h, formatPrice as i };

package/dist/{variant-list-DHP2OXFE.d.ts → variant-list-DAhiR-7S.d.ts}

@@ -278,6 +278,7 @@ interface ResourceMeterProps {
 declare function ResourceMeter({ label, value, max, unit, icon, className }: ResourceMeterProps): react_jsx_runtime.JSX.Element;
 
 type SandboxStatus = "running" | "hibernating" | "provisioning" | "stopped" | "failed" | "archived" | "creating";
+type TeamRole = "owner" | "admin" | "member" | "viewer";
 interface SandboxCardData {
     id: string;
     name: string;
@@ -291,6 +292,17 @@ interface SandboxCardData {
     provisioningMessage?: string;
     provisioningPercent?: number;
     archivedAt?: string;
+    /**
+     * Populated when the sandbox is shared with a team. Drives a small
+     * "shared with X" badge in the card header so a user can see at a
+     * glance which of their sandboxes are personal vs. collaborative.
+     */
+    team?: {
+        id: string;
+        name?: string;
+        /** Caller's role in the team — the card uses this to gate the Delete action. */
+        role: TeamRole;
+    };
 }
 interface SandboxCardProps {
     sandbox: SandboxCardData;
@@ -307,6 +319,7 @@ interface SandboxCardProps {
     onHealth?: (id: string) => void;
     className?: string;
 }
+declare function canAdminSandbox(sandbox: SandboxCardData): boolean;
 declare function SandboxCard({ sandbox, onOpenIDE, onOpenTerminal, onWake, onRestore, onDelete, onStop, onResume, onFork, onKeepAlive, onUsage, onHealth, className }: SandboxCardProps): react_jsx_runtime.JSX.Element;
 interface NewSandboxCardProps {
     onClick?: () => void;
@@ -405,4 +418,4 @@ interface VariantListProps {
 }
 declare function VariantList({ variants, selectedId, onSelect, onAccept, onReject, isActioning, className, }: VariantListProps): react_jsx_runtime.JSX.Element;
 
-export { type SidebarPanelHeaderProps as $, type RailSeparatorProps as A, type Backend as B, ClusterStatusBar as C, DashboardLayout as D, ResourceMeter as E, type ResourceMeterProps as F, SIDEBAR_PANEL_WIDTH as G, SIDEBAR_RAIL_WIDTH as H, type Invoice as I, SIDEBAR_TOTAL_WIDTH as J, SandboxCard as K, type SandboxCardData as L, type SandboxCardProps as M, type NavItem as N, type SandboxStatus as O, type PanelConfig as P, SandboxTable as Q, RailButton as R, SIDEBAR_MOBILE_WIDTH as S, type SandboxTableProps as T, Sidebar as U, SidebarContent as V, type SidebarContentProps as W, SidebarPanel as X, SidebarPanelContent as Y, type SidebarPanelContentProps as Z, SidebarPanelHeader as _, BackendSelector as a, type SidebarPanelProps as a0, type SidebarProps as a1, SidebarProvider as a2, type SidebarProviderProps as a3, SidebarRail as a4, SidebarRailFooter as a5, type SidebarRailFooterProps as a6, SidebarRailHeader as a7, type SidebarRailHeaderProps as a8, SidebarRailNav as a9, type SidebarRailNavProps as aa, type SidebarRailProps as ab, type SidebarUser as ac, type TopNavLink as ad, VariantList as ae, type VariantListProps as af, useSidebar as ag, type Profile as ah, type PlanFeature as ai, type Variant as aj, type VariantOutcome as ak, type VariantStatus as al, type BackendSelectorProps as b, type ClusterStatusBarProps as c, type ClusterStatusItem as d, CreditBalance as e, type CreditBalanceProps as f, type DashboardLayoutProps as g, type DashboardUser as h, InvoiceTable as i, type InvoiceTableProps as j, NewSandboxCard as k, type NewSandboxCardProps as l, type PlanCardData as m, PlanCards as n, type PlanCardsProps as o, type ProductVariant as p, ProfileAvatar as q, type ProfileAvatarProps as r, ProfileComparison as s, type ProfileComparisonProps as t, ProfileSelector as u, type ProfileSelectorProps as v, type RailButtonProps as w, RailModeButton as x, type RailModeButtonProps as y, RailSeparator as z };
+export { type SidebarPanelHeaderProps as $, type RailSeparatorProps as A, type Backend as B, ClusterStatusBar as C, DashboardLayout as D, ResourceMeter as E, type ResourceMeterProps as F, SIDEBAR_PANEL_WIDTH as G, SIDEBAR_RAIL_WIDTH as H, type Invoice as I, SIDEBAR_TOTAL_WIDTH as J, SandboxCard as K, type SandboxCardData as L, type SandboxCardProps as M, type NavItem as N, type SandboxStatus as O, type PanelConfig as P, SandboxTable as Q, RailButton as R, SIDEBAR_MOBILE_WIDTH as S, type SandboxTableProps as T, Sidebar as U, SidebarContent as V, type SidebarContentProps as W, SidebarPanel as X, SidebarPanelContent as Y, type SidebarPanelContentProps as Z, SidebarPanelHeader as _, BackendSelector as a, type SidebarPanelProps as a0, type SidebarProps as a1, SidebarProvider as a2, type SidebarProviderProps as a3, SidebarRail as a4, SidebarRailFooter as a5, type SidebarRailFooterProps as a6, SidebarRailHeader as a7, type SidebarRailHeaderProps as a8, SidebarRailNav as a9, type SidebarRailNavProps as aa, type SidebarRailProps as ab, type SidebarUser as ac, type TopNavLink as ad, VariantList as ae, type VariantListProps as af, useSidebar as ag, type Profile as ah, type PlanFeature as ai, type TeamRole as aj, type Variant as ak, type VariantOutcome as al, type VariantStatus as am, canAdminSandbox as an, type BackendSelectorProps as b, type ClusterStatusBarProps as c, type ClusterStatusItem as d, CreditBalance as e, type CreditBalanceProps as f, type DashboardLayoutProps as g, type DashboardUser as h, InvoiceTable as i, type InvoiceTableProps as j, NewSandboxCard as k, type NewSandboxCardProps as l, type PlanCardData as m, PlanCards as n, type PlanCardsProps as o, type ProductVariant as p, ProfileAvatar as q, type ProfileAvatarProps as r, ProfileComparison as s, type ProfileComparisonProps as t, ProfileSelector as u, type ProfileSelectorProps as v, type RailButtonProps as w, RailModeButton as x, type RailModeButtonProps as y, RailSeparator as z };

package/package.json

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