exploration: Tangent Shell in Tangle

knip.json

@@ -7,7 +7,8 @@
     "src/components/ui/**",
     "src/config/announcements.ts",
     "src/config/preSubmitHooks.ts",
-    "src/components/shared/BetaFeatureWrapper/BetaFeatureWrapper.tsx"
+    "src/components/shared/BetaFeatureWrapper/BetaFeatureWrapper.tsx",
+    "src/shell/contracts.ts"
   ],
   "ignoreDependencies": [
     "@tanstack/react-query-devtools",

package.json

@@ -124,9 +124,11 @@
     "react-scan": "^0.5.7",
     "react-toastify": "^11.1.0",
     "remark-gfm": "^4.0.1",
+    "socket.io-client": "^4.8.3",
     "tailwind-merge": "^3.6.0",
     "tailwindcss": "^4.3.3",
     "tailwindcss-animate": "^1.0.7",
+    "virtua": "^0.49.3",
     "zod": "^4.4.3"
   },
   "peerDependencies": {

src/components/ui/box.tsx

@@ -0,0 +1,311 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import type { AriaAttributes, AriaRole, PropsWithChildren, Ref } from "react";
+import { forwardRef } from "react";
+
+import { cn } from "@/lib/utils";
+
+/**
+ * Configurable container primitive, modeled on Shopify Polaris Box. Token-only
+ * escape hatch; use BlockStack / InlineStack for layout.
+ */
+
+type BoxElement =
+  | "div"
+  | "section"
+  | "article"
+  | "header"
+  | "footer"
+  | "aside"
+  | "main"
+  | "nav";
+
+const boxVariants = cva("", {
+  variants: {
+    background: {
+      transparent: "",
+      subdued: "bg-muted/50",
+      base: "bg-background",
+      strong: "bg-secondary",
+      card: "bg-card",
+      inverted: "bg-foreground text-background",
+      "critical-subtle": "bg-destructive/10",
+      "warning-subtle": "bg-warning/15",
+      "info-subtle": "bg-info/10",
+      "success-subtle": "bg-success/10",
+    },
+    padding: {
+      none: "p-0",
+      xs: "p-1",
+      sm: "p-2",
+      base: "p-3",
+      lg: "p-4",
+      xl: "p-6",
+    },
+    paddingBlock: {
+      none: "py-0",
+      xs: "py-1",
+      sm: "py-2",
+      base: "py-3",
+      lg: "py-4",
+      xl: "py-6",
+    },
+    paddingInline: {
+      none: "px-0",
+      xs: "px-1",
+      sm: "px-2",
+      base: "px-3",
+      lg: "px-4",
+      xl: "px-6",
+    },
+    paddingBlockStart: {
+      none: "pt-0",
+      xs: "pt-1",
+      sm: "pt-2",
+      base: "pt-3",
+      lg: "pt-4",
+      xl: "pt-6",
+    },
+    paddingBlockEnd: {
+      none: "pb-0",
+      xs: "pb-1",
+      sm: "pb-2",
+      base: "pb-3",
+      lg: "pb-4",
+      xl: "pb-6",
+    },
+    paddingInlineStart: {
+      none: "ps-0",
+      xs: "ps-1",
+      sm: "ps-2",
+      base: "ps-3",
+      lg: "ps-4",
+      xl: "ps-6",
+    },
+    paddingInlineEnd: {
+      none: "pe-0",
+      xs: "pe-1",
+      sm: "pe-2",
+      base: "pe-3",
+      lg: "pe-4",
+      xl: "pe-6",
+    },
+    borderRadius: {
+      none: "rounded-none",
+      xs: "rounded-xs",
+      sm: "rounded-sm",
+      base: "rounded-md",
+      lg: "rounded-lg",
+      xl: "rounded-xl",
+      full: "rounded-full",
+    },
+    border: {
+      none: "border-0",
+      sm: "border",
+      base: "border-2",
+    },
+    borderBlockStart: {
+      none: "border-t-0",
+      sm: "border-t border-border",
+    },
+    borderBlockEnd: {
+      none: "border-b-0",
+      sm: "border-b border-border",
+    },
+    borderInlineStart: {
+      none: "border-s-0",
+      sm: "border-s border-border",
+      md: "border-s-2 border-border",
+    },
+    borderInlineEnd: {
+      none: "border-e-0",
+      sm: "border-e border-border",
+    },
+    borderColor: {
+      base: "border-border",
+      subdued: "border-border/50",
+      strong: "border-foreground/30",
+      critical: "border-destructive",
+      warning: "border-warning",
+      info: "border-info",
+      success: "border-success",
+    },
+    shadow: {
+      none: "shadow-none",
+      xs: "shadow-xs",
+      sm: "shadow-sm",
+      md: "shadow-md",
+      lg: "shadow-lg",
+    },
+    inlineSize: {
+      auto: "w-auto",
+      full: "w-full",
+      fit: "w-fit",
+      screen: "w-screen",
+      "1/2": "w-1/2",
+      "1/3": "w-1/3",
+      "2/3": "w-2/3",
+      "1/4": "w-1/4",
+      "3/4": "w-3/4",
+    },
+    blockSize: {
+      auto: "h-auto",
+      full: "h-full",
+      fit: "h-fit",
+      screen: "h-screen",
+      svh: "h-svh",
+    },
+    minInlineSize: {
+      "0": "min-w-0",
+      auto: "min-w-auto",
+      full: "min-w-full",
+    },
+    minBlockSize: {
+      "0": "min-h-0",
+      auto: "min-h-auto",
+      full: "min-h-full",
+      screen: "min-h-screen",
+      svh: "min-h-svh",
+    },
+    maxInlineSize: {
+      none: "max-w-none",
+      full: "max-w-full",
+      sm: "max-w-sm",
+      md: "max-w-md",
+      lg: "max-w-lg",
+      xl: "max-w-xl",
+      "2xl": "max-w-2xl",
+      "5xl": "max-w-5xl",
+      screen: "max-w-screen",
+    },
+    maxBlockSize: {
+      none: "max-h-none",
+      full: "max-h-full",
+      screen: "max-h-screen",
+      xs: "max-h-32",
+      sm: "max-h-48",
+      md: "max-h-64",
+      lg: "max-h-80",
+      xl: "max-h-96",
+    },
+    overflow: {
+      visible: "overflow-visible",
+      hidden: "overflow-hidden",
+      auto: "overflow-auto",
+      "scroll-y": "overflow-y-auto overflow-x-hidden",
+      "scroll-x": "overflow-x-auto overflow-y-hidden",
+      clip: "overflow-clip",
+    },
+    position: {
+      static: "static",
+      relative: "relative",
+      absolute: "absolute",
+      sticky: "sticky",
+      fixed: "fixed",
+    },
+    zIndex: {
+      "0": "z-0",
+      "10": "z-10",
+      "20": "z-20",
+      "30": "z-30",
+      "40": "z-40",
+      "50": "z-50",
+    },
+  },
+});
+
+type BoxVariantProps = VariantProps<typeof boxVariants>;
+
+interface BoxOwnProps extends AriaAttributes {
+  as?: BoxElement;
+  role?: AriaRole;
+  title?: string;
+  onClick?: React.MouseEventHandler<HTMLElement>;
+  pointerEvents?: "auto" | "none";
+  /** Marks this Box a Tailwind `group` parent so descendants can use `group-hover:*`. */
+  group?: boolean;
+}
+
+export interface BoxProps extends BoxOwnProps, BoxVariantProps {}
+
+export const Box = forwardRef<HTMLElement, PropsWithChildren<BoxProps>>(
+  function Box(
+    {
+      as: Element = "div",
+      children,
+      background,
+      padding,
+      paddingBlock,
+      paddingInline,
+      paddingBlockStart,
+      paddingBlockEnd,
+      paddingInlineStart,
+      paddingInlineEnd,
+      borderRadius,
+      border,
+      borderBlockStart,
+      borderBlockEnd,
+      borderInlineStart,
+      borderInlineEnd,
+      borderColor,
+      shadow,
+      inlineSize,
+      blockSize,
+      minInlineSize,
+      minBlockSize,
+      maxInlineSize,
+      maxBlockSize,
+      overflow,
+      position,
+      zIndex,
+      pointerEvents,
+      group,
+      role,
+      ...rest
+    },
+    ref,
+  ) {
+    return (
+      <Element
+        ref={ref as Ref<any>}
+        role={role}
+        className={cn(
+          group && "group",
+          boxVariants({
+            background,
+            padding,
+            paddingBlock,
+            paddingInline,
+            paddingBlockStart,
+            paddingBlockEnd,
+            paddingInlineStart,
+            paddingInlineEnd,
+            borderRadius,
+            border,
+            borderBlockStart,
+            borderBlockEnd,
+            borderInlineStart,
+            borderInlineEnd,
+            borderColor,
+            shadow,
+            inlineSize,
+            blockSize,
+            minInlineSize,
+            minBlockSize,
+            maxInlineSize,
+            maxBlockSize,
+            overflow,
+            position,
+            zIndex,
+          }),
+          pointerEvents === "none" && "pointer-events-none",
+          pointerEvents === "auto" && "pointer-events-auto",
+        )}
+        {...rest}
+      >
+        {children}
+      </Element>
+    );
+  },
+);
+
+Box.displayName = "Box";