@tangle-network/sandbox-ui 0.36.0 → 0.37.0

package/dist/{chunk-Y2G5LHYJ.js → chunk-4PCDRCDA.js}

@@ -1,7 +1,7 @@
 import {
   Button,
   Logo
-} from "./chunk-QHIA75U3.js";
+} from "./chunk-4ZZUMXPX.js";
 import {
   cn
 } from "./chunk-EI44GEQ5.js";
@@ -1498,6 +1498,7 @@ function DashboardLayoutInner({
   LinkComponent = DefaultLink2,
   logoHref = "/",
   onLogoClick,
+  logoAriaLabel = "Toggle navigation",
   labeledRail = false,
   footer,
   railFooter,
@@ -1540,7 +1541,7 @@ function DashboardLayoutInner({
           {
             type: "button",
             onClick: onLogoClick,
-            "aria-label": "Toggle navigation",
+            "aria-label": logoAriaLabel,
             className: "p-1 rounded-md transition-colors hover:bg-muted/50",
             children: /* @__PURE__ */ jsx14(Logo, { variant, size: "sm", iconOnly: true })
           }
@@ -1617,6 +1618,7 @@ function DashboardLayoutInner({
       Link,
       variant,
       onLogoClick,
+      logoAriaLabel,
       logoHref,
       labeledRail,
       toggleRail,

package/dist/{chunk-QHIA75U3.js → chunk-4ZZUMXPX.js}

@@ -148,8 +148,11 @@ function Logo({ variant = "sandbox", size = "md", className, iconOnly = false })
 Logo.displayName = "Logo";
 
 // src/primitives/heading.tsx
+import {
+  forwardRef
+} from "react";
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var ROLE_CLASS = {
+var VARIANT_CLASS = {
   display: "font-display font-bold text-foreground text-[length:var(--font-size-display,3rem)] leading-[var(--line-height-display,1.05)] tracking-[var(--tracking-tight,-0.02em)]",
   hero: "font-display font-bold text-foreground text-[length:var(--font-size-hero,2.5rem)] leading-[1.1] tracking-[var(--tracking-tight,-0.02em)]",
   page: "font-display font-semibold text-foreground text-[length:var(--font-size-3xl,1.875rem)] leading-[var(--line-height-heading,1.15)] tracking-[var(--tracking-tight,-0.02em)]",
@@ -165,10 +168,10 @@ var DEFAULT_TAG = {
   subsection: "h3",
   eyebrow: "p"
 };
-function Heading({ role, as, className, children, ...rest }) {
+var Heading = forwardRef(function Heading2({ role, as, className, children, ...rest }, ref) {
   const Tag = as ?? DEFAULT_TAG[role];
-  return /* @__PURE__ */ jsx2(Tag, { className: cn(ROLE_CLASS[role], className), ...rest, children });
-}
+  return /* @__PURE__ */ jsx2(Tag, { ref, className: cn(VARIANT_CLASS[role], className), ...rest, children });
+});
 function PageHeader({
   title,
   description,
@@ -218,8 +221,11 @@ function SectionTitle({
     }
   );
 }
+
+// src/primitives/page-shell.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
 function PageShell({ children, className }) {
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx3(
     "div",
     {
       className: cn(

package/dist/dashboard.d.ts

@@ -665,6 +665,12 @@ interface DashboardLayoutProps {
      * navigating — e.g. to toggle the sidebar. Takes precedence over logoHref.
      */
     onLogoClick?: () => void;
+    /**
+     * Accessible label for the logo button when onLogoClick is set. Defaults to
+     * "Toggle navigation"; set it to match what onLogoClick actually does (e.g.
+     * "Open command palette") so screen readers don't announce a stale action.
+     */
+    logoAriaLabel?: string;
     /**
      * Let the icon rail expand to a labeled rail. When true, the rail logo
      * toggles between icon-only and labeled instead of navigating.

package/dist/dashboard.js

@@ -52,7 +52,7 @@ import {
   canAdminSandbox,
   parseInsufficientBalance,
   useSidebar
-} from "./chunk-Y2G5LHYJ.js";
+} from "./chunk-4PCDRCDA.js";
 import {
   BillingDashboard,
   InfoPanel,
@@ -61,7 +61,7 @@ import {
   UsageChart,
   formatPrice
 } from "./chunk-2XNT74ZX.js";
-import "./chunk-QHIA75U3.js";
+import "./chunk-4ZZUMXPX.js";
 import {
   BackendSelector,
   HARNESS_BRAND,

package/dist/index.js

@@ -199,7 +199,7 @@ import {
   canAdminSandbox,
   parseInsufficientBalance,
   useSidebar
-} from "./chunk-Y2G5LHYJ.js";
+} from "./chunk-4PCDRCDA.js";
 import {
   BillingDashboard,
   InfoPanel,
@@ -294,7 +294,7 @@ import {
   buttonVariants,
   useTheme,
   useToast
-} from "./chunk-QHIA75U3.js";
+} from "./chunk-4ZZUMXPX.js";
 import {
   BackendSelector,
   HARNESS_BRAND,

package/dist/pages.js

@@ -23,7 +23,7 @@ import {
   SelectValue,
   Switch,
   Textarea
-} from "./chunk-QHIA75U3.js";
+} from "./chunk-4ZZUMXPX.js";
 import "./chunk-NMR2CTGP.js";
 import {
   cn

package/dist/primitives.d.ts

@@ -1,7 +1,8 @@
 export { Avatar, AvatarFallback, AvatarImage, Badge, BadgeProps, Button, ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CodeBlock, CodeBlockProps, CopyButton, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropZone, DropZoneProps, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, EmptyStateProps, InlineCode, InlineCodeProps, Input, InputProps, Label, Progress, SegmentedControl, SegmentedControlOption, SegmentedControlProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SidebarDropZone, SidebarDropZoneProps, Skeleton, SkeletonCard, SkeletonTable, StatCard, StatCardProps, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, Textarea, TextareaProps, ThemeToggle, Toast, ToastContainer, ToastProvider, UploadFile, UploadProgress, UploadProgressProps, badgeVariants, buttonVariants, useTheme, useToast } from '@tangle-network/ui/primitives';
 export { L as Logo, a as LogoProps, T as TangleKnot } from './logo-CZ6moVvw.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ElementType, ReactNode } from 'react';
+import * as React from 'react';
+import { HTMLAttributes, ElementType, ReactNode } from 'react';
 
 /**
  * Canonical type roles for the Tangle design system. Every title in every
@@ -13,17 +14,28 @@ import { ElementType, ReactNode } from 'react';
  *
  * Weights are deliberately quiet (Tangle Quiet): heroes at 700, titles at 600
  * — never extrabold.
+ *
+ * Semantic-tag invariant: both `display` and `page` default to <h1>. Use at
+ * most one of them per page (the marketing hero OR the dashboard page title);
+ * if a page needs both, override the secondary one with `as` to keep a single
+ * <h1> for accessibility and SEO.
  */
-type HeadingRole = "display" | "hero" | "page" | "section" | "subsection" | "eyebrow";
-interface HeadingProps {
-    role: HeadingRole;
+type HeadingVariant = "display" | "hero" | "page" | "section" | "subsection" | "eyebrow";
+/** @deprecated Renamed to {@link HeadingVariant}; kept as an alias. */
+type HeadingRole = HeadingVariant;
+interface HeadingProps extends Omit<HTMLAttributes<HTMLElement>, "role"> {
+    /** Type role from the design system (size + weight + tracking + leading). */
+    role: HeadingVariant;
     /** Override the rendered element (defaults to the semantic tag for the role). */
     as?: ElementType;
-    className?: string;
     children: ReactNode;
-    id?: string;
 }
-declare function Heading({ role, as, className, children, ...rest }: HeadingProps): react_jsx_runtime.JSX.Element;
+/**
+ * Role-based heading. Forwards a ref to the underlying element and passes
+ * through standard HTML/ARIA/data-* attributes so it drops into tests,
+ * scroll-spy, and a11y tooling without friction.
+ */
+declare const Heading: React.ForwardRefExoticComponent<HeadingProps & React.RefAttributes<HTMLElement>>;
 interface PageHeaderProps {
     title: ReactNode;
     description?: ReactNode;
@@ -48,6 +60,7 @@ interface SectionTitleProps {
 }
 /** Section heading inside a page — smaller than PageHeader, same rhythm. */
 declare function SectionTitle({ title, description, action, className, }: SectionTitleProps): react_jsx_runtime.JSX.Element;
+
 interface PageShellProps {
     children: ReactNode;
     className?: string;
@@ -55,7 +68,9 @@ interface PageShellProps {
 /**
  * Canonical page container — one max-width, one gutter, one vertical rhythm
  * so every page sits on the same grid. Gutter widens on large viewports.
+ * Layout primitive (not a heading); kept in its own module so consumers
+ * looking for page layout don't have to reach into the typography file.
  */
 declare function PageShell({ children, className }: PageShellProps): react_jsx_runtime.JSX.Element;
 
-export { Heading, type HeadingProps, type HeadingRole, PageHeader, type PageHeaderProps, PageShell, type PageShellProps, SectionTitle, type SectionTitleProps };
+export { Heading, type HeadingProps, type HeadingRole, type HeadingVariant, PageHeader, type PageHeaderProps, PageShell, type PageShellProps, SectionTitle, type SectionTitleProps };

package/dist/primitives.js

@@ -91,7 +91,7 @@ import {
   buttonVariants,
   useTheme,
   useToast
-} from "./chunk-QHIA75U3.js";
+} from "./chunk-4ZZUMXPX.js";
 import "./chunk-EI44GEQ5.js";
 export {
   Avatar,

package/package.json

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