@tangle-network/sandbox-ui 0.2.2 → 0.3.4

package/dist/workspace.d.ts

@@ -1,5 +1,12 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode } from 'react';
+import { F as FileNode, g as FileTreeVisibilityOptions, b as FileTabData } from './file-tabs-CmaoDVBI.js';
+export { A as ArtifactPane, a as ArtifactPaneProps } from './file-tabs-CmaoDVBI.js';
+import { c as ChatContainerProps } from './chat-container-C8eHLw8z.js';
+import { OpenUIComponentNode, OpenUIAction } from './openui.js';
+import './parts-CyGkM6Fp.js';
+import './branding-DCi5VEik.js';
+import './tool-display-Ct9nFAzJ.js';
 
 interface WorkspaceLayoutProps {
     /** Left sidebar content (file tree, navigation) */
@@ -24,9 +31,67 @@ interface WorkspaceLayoutProps {
     defaultRightOpen?: boolean;
     /** Default bottom panel state */
     defaultBottomOpen?: boolean;
+    /** Default left panel width in px */
+    defaultLeftWidth?: number;
+    /** Default right panel width in px */
+    defaultRightWidth?: number;
+    /** Minimum left panel width in px */
+    minLeftWidth?: number;
+    /** Maximum left panel width in px */
+    maxLeftWidth?: number;
+    /** Minimum right panel width in px */
+    minRightWidth?: number;
+    /** Maximum right panel width in px */
+    maxRightWidth?: number;
+    /** Persist panel state and sizes in localStorage */
+    persistenceKey?: string;
+    /** Disable resize handles */
+    resizable?: boolean;
+    /** Visual theme for sandbox surfaces */
+    theme?: "operator" | "builder" | "consumer" | "vault";
+    /** Density mode for control sizing */
+    density?: "comfortable" | "compact";
+    /** Accessible label for the left panel */
+    leftLabel?: string;
+    /** Accessible label for the right panel */
+    rightLabel?: string;
+    /** Accessible label for the bottom panel */
+    bottomLabel?: string;
     className?: string;
 }
-declare function WorkspaceLayout({ left, leftHeader, center, centerHeader, centerFooter, right, rightHeader, bottom, defaultLeftOpen, defaultRightOpen, defaultBottomOpen, className, }: WorkspaceLayoutProps): react_jsx_runtime.JSX.Element;
+declare function WorkspaceLayout({ left, leftHeader, center, centerHeader, centerFooter, right, rightHeader, bottom, defaultLeftOpen, defaultRightOpen, defaultBottomOpen, defaultLeftWidth, defaultRightWidth, minLeftWidth, maxLeftWidth, minRightWidth, maxRightWidth, persistenceKey, resizable, theme, density, leftLabel, rightLabel, bottomLabel, className, }: WorkspaceLayoutProps): react_jsx_runtime.JSX.Element;
+
+interface DirectoryPaneProps {
+    root: FileNode;
+    selectedPath?: string;
+    onSelect?: (path: string, node: FileNode) => void;
+    onRefresh?: () => void;
+    onUpload?: () => void;
+    title?: string;
+    subtitle?: string;
+    defaultExpanded?: boolean;
+    searchPlaceholder?: string;
+    visibility?: FileTreeVisibilityOptions;
+    className?: string;
+}
+/**
+ * DirectoryPane — searchable file-system navigation surface for sandbox
+ * sessions.
+ */
+declare function DirectoryPane({ root, selectedPath, onSelect, onRefresh, onUpload, title, subtitle, defaultExpanded, searchPlaceholder, visibility, className, }: DirectoryPaneProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * StatusBanner — full-width notification banner for connection/provisioning states.
+ */
+type BannerType = "provisioning" | "connecting" | "error" | "success" | "info";
+interface StatusBannerProps {
+    type: BannerType;
+    message: string;
+    detail?: string;
+    onDismiss?: () => void;
+    className?: string;
+}
+declare function StatusBanner({ type, message, detail, onDismiss, className }: StatusBannerProps): react_jsx_runtime.JSX.Element;
 
 /**
  * StatusBar — bottom bar with model selector, context badges, credits.
@@ -48,17 +113,113 @@ interface StatusBarProps {
 declare function StatusBar({ modelLabel, onModelClick, credits, contextBadges, onRemoveBadge, status, className, }: StatusBarProps): react_jsx_runtime.JSX.Element;
 
 /**
- * StatusBanner — full-width notification banner for connection/provisioning states.
+ * Terminal — read-only terminal output panel.
+ *
+ * Shows agent's bash command output with basic ANSI color support.
+ * Collapsible, auto-scrolls to bottom.
  */
-type BannerType = "provisioning" | "connecting" | "error" | "success" | "info";
-interface StatusBannerProps {
-    type: BannerType;
-    message: string;
-    detail?: string;
-    onDismiss?: () => void;
+interface TerminalLine {
+    id: string;
+    text: string;
+    type: "command" | "stdout" | "stderr" | "system";
+    timestamp?: number;
+}
+interface TerminalProps {
+    lines: TerminalLine[];
+    title?: string;
+    isCollapsed?: boolean;
+    onToggle?: () => void;
+    onClose?: () => void;
+    maxHeight?: number;
     className?: string;
 }
-declare function StatusBanner({ type, message, detail, onDismiss, className }: StatusBannerProps): react_jsx_runtime.JSX.Element;
+declare function TerminalPanel({ lines, title, isCollapsed, onToggle, onClose, maxHeight, className, }: TerminalProps): react_jsx_runtime.JSX.Element;
+
+interface RuntimePaneProps {
+    title?: string;
+    subtitle?: string;
+    statusBanner?: StatusBannerProps;
+    statusBar?: StatusBarProps;
+    terminal?: TerminalProps;
+    audit?: React.ReactNode;
+    inspector?: React.ReactNode;
+    footer?: React.ReactNode;
+    className?: string;
+}
+/**
+ * RuntimePane — shared operating surface for sandbox session state, terminal
+ * output, audit results, and runtime metadata.
+ */
+declare function RuntimePane({ title, subtitle, statusBanner, statusBar, terminal, audit, inspector, footer, className, }: RuntimePaneProps): react_jsx_runtime.JSX.Element;
+
+interface SandboxWorkbenchArtifactBase {
+    id: string;
+    title: ReactNode;
+    subtitle?: ReactNode;
+    eyebrow?: ReactNode;
+    meta?: ReactNode;
+    headerActions?: ReactNode;
+    toolbar?: ReactNode;
+    footer?: ReactNode;
+}
+interface SandboxWorkbenchFileArtifact extends SandboxWorkbenchArtifactBase {
+    kind: "file";
+    path: string;
+    filename: string;
+    content?: string;
+    blobUrl?: string;
+    mimeType?: string;
+    onDownload?: () => void;
+    tabs?: FileTabData[];
+    activeTabId?: string;
+    onTabSelect?: (id: string) => void;
+    onTabClose?: (id: string) => void;
+}
+interface SandboxWorkbenchMarkdownArtifact extends SandboxWorkbenchArtifactBase {
+    kind: "markdown";
+    content: string;
+}
+interface SandboxWorkbenchOpenUIArtifact extends SandboxWorkbenchArtifactBase {
+    kind: "openui";
+    schema: OpenUIComponentNode | OpenUIComponentNode[];
+    onAction?: (action: OpenUIAction) => void;
+}
+interface SandboxWorkbenchCustomArtifact extends SandboxWorkbenchArtifactBase {
+    kind: "custom";
+    content: ReactNode;
+}
+type SandboxWorkbenchArtifact = SandboxWorkbenchCustomArtifact | SandboxWorkbenchFileArtifact | SandboxWorkbenchMarkdownArtifact | SandboxWorkbenchOpenUIArtifact;
+interface SandboxWorkbenchSessionProps extends Omit<ChatContainerProps, "className"> {
+    eyebrow?: ReactNode;
+    title?: ReactNode;
+    subtitle?: ReactNode;
+    meta?: ReactNode;
+    headerActions?: ReactNode;
+}
+interface SandboxWorkbenchLayoutOptions extends Pick<WorkspaceLayoutProps, "defaultBottomOpen" | "defaultLeftOpen" | "defaultLeftWidth" | "defaultRightOpen" | "defaultRightWidth" | "density" | "maxLeftWidth" | "maxRightWidth" | "minLeftWidth" | "minRightWidth" | "persistenceKey" | "resizable" | "theme"> {
+}
+interface SandboxWorkbenchProps {
+    title?: ReactNode;
+    subtitle?: ReactNode;
+    status?: ReactNode;
+    directory?: DirectoryPaneProps;
+    session: SandboxWorkbenchSessionProps;
+    artifacts?: SandboxWorkbenchArtifact[];
+    activeArtifactId?: string;
+    onArtifactChange?: (artifactId: string) => void;
+    onArtifactClose?: (artifactId: string) => void;
+    runtime?: RuntimePaneProps;
+    layout?: SandboxWorkbenchLayoutOptions;
+    emptyArtifactState?: ReactNode;
+    className?: string;
+}
+/**
+ * SandboxWorkbench — high-level composition that turns sandbox-ui primitives
+ * into a complete session surface: directory, agent timeline, artifacts, and
+ * runtime in one reusable shell.
+ */
+declare function SandboxWorkbench({ title, subtitle, status, directory, session, artifacts, activeArtifactId, onArtifactChange, onArtifactClose, runtime, layout, emptyArtifactState, className, }: SandboxWorkbenchProps): react_jsx_runtime.JSX.Element;
+declare function AgentWorkbench(props: SandboxWorkbenchProps): react_jsx_runtime.JSX.Element;
 
 /**
  * AuditResults — structured pass/fail display for form audits.
@@ -87,27 +248,4 @@ interface AuditResultsProps {
 }
 declare function AuditResults({ forms, crossFormChecks, overallScore, className }: AuditResultsProps): react_jsx_runtime.JSX.Element;
 
-/**
- * Terminal — read-only terminal output panel.
- *
- * Shows agent's bash command output with basic ANSI color support.
- * Collapsible, auto-scrolls to bottom.
- */
-interface TerminalLine {
-    id: string;
-    text: string;
-    type: "command" | "stdout" | "stderr" | "system";
-    timestamp?: number;
-}
-interface TerminalProps {
-    lines: TerminalLine[];
-    title?: string;
-    isCollapsed?: boolean;
-    onToggle?: () => void;
-    onClose?: () => void;
-    maxHeight?: number;
-    className?: string;
-}
-declare function TerminalPanel({ lines, title, isCollapsed, onToggle, onClose, maxHeight, className, }: TerminalProps): react_jsx_runtime.JSX.Element;
-
-export { type AuditCheck, AuditResults, type AuditResultsProps, type BannerType, type ContextBadge, type FormAudit, StatusBanner, type StatusBannerProps, StatusBar, type StatusBarProps, type TerminalLine, TerminalPanel, type TerminalProps, WorkspaceLayout, type WorkspaceLayoutProps };
+export { AgentWorkbench, type AuditCheck, AuditResults, type AuditResultsProps, type BannerType, type ContextBadge, DirectoryPane, type DirectoryPaneProps, type FormAudit, RuntimePane, type RuntimePaneProps, SandboxWorkbench, type SandboxWorkbenchArtifact, type SandboxWorkbenchCustomArtifact, type SandboxWorkbenchFileArtifact, type SandboxWorkbenchLayoutOptions, type SandboxWorkbenchMarkdownArtifact, type SandboxWorkbenchOpenUIArtifact, type SandboxWorkbenchProps, type SandboxWorkbenchSessionProps, StatusBanner, type StatusBannerProps, StatusBar, type StatusBarProps, type TerminalLine, TerminalPanel, type TerminalProps, WorkspaceLayout, type WorkspaceLayoutProps };

package/dist/workspace.js

@@ -1,13 +1,37 @@
 import {
+  AgentWorkbench,
   AuditResults,
+  DirectoryPane,
+  RuntimePane,
+  SandboxWorkbench,
   StatusBanner,
   StatusBar,
   TerminalPanel,
   WorkspaceLayout
-} from "./chunk-KYY2X6LY.js";
+} from "./chunk-QGI5E7JD.js";
+import "./chunk-MUOL44AE.js";
+import "./chunk-4F2GJRGU.js";
+import "./chunk-CNWVHQFY.js";
+import "./chunk-WUR652Y3.js";
+import "./chunk-HRMUF35V.js";
+import "./chunk-CJ2RYVZH.js";
+import "./chunk-BX6AQMUS.js";
+import "./chunk-YDBXQQLC.js";
+import "./chunk-TQN3VR4F.js";
+import {
+  ArtifactPane
+} from "./chunk-JF6E2DS5.js";
+import "./chunk-LTFK464G.js";
+import "./chunk-MXCSSOGH.js";
+import "./chunk-HWLX5NME.js";
 import "./chunk-RQHJBTEU.js";
 export {
+  AgentWorkbench,
+  ArtifactPane,
   AuditResults,
+  DirectoryPane,
+  RuntimePane,
+  SandboxWorkbench,
   StatusBanner,
   StatusBar,
   TerminalPanel,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/sandbox-ui",
-  "version": "0.2.2",
+  "version": "0.3.4",
   "description": "Unified UI component library for Tangle Sandbox — primitives, chat, dashboard, terminal, editor, and workspace components",
   "type": "module",
   "main": "dist/index.js",
@@ -26,6 +26,10 @@
       "import": "./dist/workspace.js",
       "types": "./dist/workspace.d.ts"
     },
+    "./openui": {
+      "import": "./dist/openui.js",
+      "types": "./dist/openui.d.ts"
+    },
     "./files": {
       "import": "./dist/files.js",
       "types": "./dist/files.d.ts"
@@ -58,6 +62,10 @@
       "import": "./dist/hooks.js",
       "types": "./dist/hooks.d.ts"
     },
+    "./sdk-hooks": {
+      "import": "./dist/sdk-hooks.js",
+      "types": "./dist/sdk-hooks.d.ts"
+    },
     "./stores": {
       "import": "./dist/stores.js",
       "types": "./dist/stores.d.ts"
@@ -71,12 +79,11 @@
       "types": "./dist/utils.d.ts"
     },
     "./styles": "./dist/styles.css",
-    "./globals.css": "./src/styles/globals.css",
+    "./globals.css": "./dist/globals.css",
     "./tailwind": "./tailwind.config.cjs"
   },
   "files": [
     "dist",
-    "src/styles",
     "tailwind.config.cjs"
   ],
   "scripts": {

package/tailwind.config.cjs

@@ -49,6 +49,45 @@ module.exports = {
         warning: "hsl(var(--warning))",
         error: "hsl(var(--error))",
         info: "hsl(var(--info))",
+        // MD3 surface hierarchy (Stitch design system)
+        "surface": "var(--md3-surface)",
+        "surface-dim": "var(--md3-surface-dim)",
+        "surface-bright": "var(--md3-surface-bright)",
+        "surface-container-lowest": "var(--md3-surface-container-lowest)",
+        "surface-container-low": "var(--md3-surface-container-low)",
+        "surface-container": "var(--md3-surface-container)",
+        "surface-container-high": "var(--md3-surface-container-high)",
+        "surface-container-highest": "var(--md3-surface-container-highest)",
+        "surface-variant": "var(--md3-surface-variant)",
+        "on-surface": "var(--md3-on-surface)",
+        "on-surface-variant": "var(--md3-on-surface-variant)",
+        // MD3 primary tokens
+        "md3-primary": "var(--md3-primary)",
+        "primary-container": "var(--md3-primary-container)",
+        "on-primary": "var(--md3-on-primary)",
+        "on-primary-container": "var(--md3-on-primary-container)",
+        "primary-fixed": "var(--md3-primary-fixed)",
+        "primary-fixed-dim": "var(--md3-primary-fixed-dim)",
+        // MD3 secondary tokens
+        "md3-secondary": "var(--md3-secondary)",
+        "secondary-container": "var(--md3-secondary-container)",
+        "on-secondary": "var(--md3-on-secondary)",
+        "on-secondary-container": "var(--md3-on-secondary-container)",
+        "secondary-fixed": "var(--md3-secondary-fixed)",
+        "secondary-fixed-dim": "var(--md3-secondary-fixed-dim)",
+        // MD3 tertiary tokens
+        "md3-tertiary": "var(--md3-tertiary)",
+        "tertiary-container": "var(--md3-tertiary-container)",
+        // MD3 outline tokens
+        "outline": "var(--md3-outline)",
+        "outline-variant": "var(--md3-outline-variant)",
+        // MD3 error tokens
+        "md3-error": "var(--md3-error)",
+        "error-container": "var(--md3-error-container)",
+        "on-error": "var(--md3-on-error)",
+        // MD3 inverse tokens
+        "inverse-surface": "var(--md3-inverse-surface)",
+        "inverse-primary": "var(--md3-inverse-primary)",
       },
       borderRadius: {
         lg: "var(--radius)",

package/dist/chunk-2UHPE5T7.js

@@ -1,201 +0,0 @@
-import {
-  cn
-} from "./chunk-RQHJBTEU.js";
-
-// src/primitives/card.tsx
-import * as React from "react";
-import { jsx } from "react/jsx-runtime";
-var Card = React.forwardRef(({ className, variant = "default", hover = false, ...props }, ref) => {
-  const variants = {
-    default: "bg-card border-border",
-    glass: "bg-card/60 backdrop-blur-xl border-border/50",
-    sandbox: "bg-card/80 backdrop-blur-xl border-purple-500/20 shadow-lg shadow-purple-500/5"
-  };
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref,
-      className: cn(
-        "rounded-xl border text-card-foreground transition-all duration-300",
-        variants[variant],
-        hover && "cursor-pointer hover:border-muted-foreground/50 hover:shadow-xl",
-        className
-      ),
-      ...props
-    }
-  );
-});
-Card.displayName = "Card";
-var CardHeader = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  "div",
-  {
-    ref,
-    className: cn("flex flex-col space-y-1.5 p-6", className),
-    ...props
-  }
-));
-CardHeader.displayName = "CardHeader";
-var CardTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  "h3",
-  {
-    ref,
-    className: cn("font-semibold leading-none tracking-tight", className),
-    ...props
-  }
-));
-CardTitle.displayName = "CardTitle";
-var CardDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  "p",
-  {
-    ref,
-    className: cn("text-muted-foreground text-sm", className),
-    ...props
-  }
-));
-CardDescription.displayName = "CardDescription";
-var CardContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("p-6 pt-0", className), ...props }));
-CardContent.displayName = "CardContent";
-var CardFooter = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  "div",
-  {
-    ref,
-    className: cn("flex items-center p-6 pt-0", className),
-    ...props
-  }
-));
-CardFooter.displayName = "CardFooter";
-
-// src/primitives/badge.tsx
-import { cva } from "class-variance-authority";
-import { jsx as jsx2 } from "react/jsx-runtime";
-var badgeVariants = cva(
-  "inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold text-xs transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
-  {
-    variants: {
-      variant: {
-        default: "border-transparent bg-primary text-primary-foreground",
-        secondary: "border-transparent bg-secondary text-secondary-foreground",
-        destructive: "border-transparent bg-destructive text-destructive-foreground",
-        outline: "text-foreground",
-        success: "border-green-500/20 border-transparent bg-green-500/10 text-green-400",
-        warning: "border-transparent border-yellow-500/20 bg-yellow-500/10 text-yellow-400",
-        error: "border-red-500/20 border-transparent bg-red-500/10 text-red-400",
-        info: "border-blue-500/20 border-transparent bg-blue-500/10 text-blue-400",
-        sandbox: "border-purple-500/20 border-transparent bg-purple-500/10 text-purple-400"
-      }
-    },
-    defaultVariants: {
-      variant: "default"
-    }
-  }
-);
-function Badge({ className, variant, ...props }) {
-  return /* @__PURE__ */ jsx2("div", { className: cn(badgeVariants({ variant }), className), ...props });
-}
-
-// src/primitives/progress.tsx
-import * as ProgressPrimitive from "@radix-ui/react-progress";
-import * as React2 from "react";
-import { jsx as jsx3, jsxs } from "react/jsx-runtime";
-var Progress = React2.forwardRef(
-  ({ className, value, variant = "default", showValue = false, ...props }, ref) => {
-    const indicatorVariants = {
-      default: "bg-primary",
-      sandbox: "bg-gradient-to-r from-purple-500 to-violet-500"
-    };
-    return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-      /* @__PURE__ */ jsx3(
-        ProgressPrimitive.Root,
-        {
-          ref,
-          className: cn(
-            "relative h-2 w-full overflow-hidden rounded-full bg-muted",
-            className
-          ),
-          ...props,
-          children: /* @__PURE__ */ jsx3(
-            ProgressPrimitive.Indicator,
-            {
-              className: cn(
-                "h-full w-full flex-1 transition-all duration-300 ease-out",
-                indicatorVariants[variant]
-              ),
-              style: { transform: `translateX(-${100 - (value || 0)}%)` }
-            }
-          )
-        }
-      ),
-      showValue && /* @__PURE__ */ jsxs("span", { className: "absolute -top-6 right-0 text-muted-foreground text-xs", children: [
-        value,
-        "%"
-      ] })
-    ] });
-  }
-);
-Progress.displayName = ProgressPrimitive.Root.displayName;
-
-// src/primitives/skeleton.tsx
-import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
-function Skeleton({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx4(
-    "div",
-    {
-      className: cn("animate-pulse rounded-lg bg-muted", className),
-      ...props
-    }
-  );
-}
-function SkeletonCard({ className }) {
-  return /* @__PURE__ */ jsxs2(
-    "div",
-    {
-      className: cn(
-        "space-y-4 rounded-xl border border-border bg-card p-6",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsx4(Skeleton, { className: "h-4 w-3/4" }),
-        /* @__PURE__ */ jsx4(Skeleton, { className: "h-4 w-1/2" }),
-        /* @__PURE__ */ jsxs2("div", { className: "space-y-2 pt-4", children: [
-          /* @__PURE__ */ jsx4(Skeleton, { className: "h-3 w-full" }),
-          /* @__PURE__ */ jsx4(Skeleton, { className: "h-3 w-5/6" }),
-          /* @__PURE__ */ jsx4(Skeleton, { className: "h-3 w-4/6" })
-        ] })
-      ]
-    }
-  );
-}
-function SkeletonTable({ rows = 5 }) {
-  return /* @__PURE__ */ jsxs2("div", { className: "space-y-3", children: [
-    /* @__PURE__ */ jsxs2("div", { className: "flex gap-4 border-border border-b pb-2", children: [
-      /* @__PURE__ */ jsx4(Skeleton, { className: "h-4 w-1/4" }),
-      /* @__PURE__ */ jsx4(Skeleton, { className: "h-4 w-1/4" }),
-      /* @__PURE__ */ jsx4(Skeleton, { className: "h-4 w-1/4" }),
-      /* @__PURE__ */ jsx4(Skeleton, { className: "h-4 w-1/4" })
-    ] }),
-    Array.from({ length: rows }).map((_, i) => /* @__PURE__ */ jsxs2("div", { className: "flex gap-4", children: [
-      /* @__PURE__ */ jsx4(Skeleton, { className: "h-4 w-1/4" }),
-      /* @__PURE__ */ jsx4(Skeleton, { className: "h-4 w-1/4" }),
-      /* @__PURE__ */ jsx4(Skeleton, { className: "h-4 w-1/4" }),
-      /* @__PURE__ */ jsx4(Skeleton, { className: "h-4 w-1/4" })
-    ] }, i))
-  ] });
-}
-
-export {
-  Card,
-  CardHeader,
-  CardTitle,
-  CardDescription,
-  CardContent,
-  CardFooter,
-  badgeVariants,
-  Badge,
-  Progress,
-  Skeleton,
-  SkeletonCard,
-  SkeletonTable
-};