@ankhorage/zora 21.0.8 → 21.0.10

package/src/features/graph-view/adapters/inbound/web-artifact/compactGraphSpacing.test.ts

@@ -1,59 +1,66 @@
 import { expect, test } from 'bun:test';
-import cytoscape from 'cytoscape';
+import cytoscape, { type NodeSingular } from 'cytoscape';
 
 import { compactGraphSpacing } from './compactGraphSpacing';
 
-test('compacts the settled layout up to measured clearance without changing node sizes or edges', () => {
+test('compacts around measured labels while allowing node backgrounds to overlap', () => {
   const cy = cytoscape({
     headless: true,
     styleEnabled: true,
     layout: { name: 'preset' },
     elements: [
       { data: { id: 'a' }, position: { x: 0, y: 0 } },
-      { data: { id: 'b' }, position: { x: 500, y: 0 } },
+      { data: { id: 'b' }, position: { x: 200, y: 0 } },
       { data: { id: 'e', source: 'a', target: 'b', weight: 7 } },
     ],
     style: [{ selector: 'node', style: { width: 100, height: 40, padding: '0px' } }],
   });
   try {
+    const a = cy.getElementById('a');
+    const b = cy.getElementById('b');
+    installMeasuredLabelBox(a, 40, 20);
+    installMeasuredLabelBox(b, 40, 20);
+
     const factor = compactGraphSpacing(cy, 1);
-    expect(factor).toBeLessThan(0.3);
-    expect(factor).toBeGreaterThan(0.2);
-    const a = cy.getElementById('a').boundingBox();
-    const b = cy.getElementById('b').boundingBox();
-    expect(b.x1 - a.x2).toBeGreaterThanOrEqual(8);
-    expect(cy.edges().length).toBe(1);
+    expect(factor).toBeGreaterThan(0.17);
+    expect(factor).toBeLessThan(0.19);
+    expect(b.boundingBox().x1 - a.boundingBox().x2).toBeLessThan(0);
+
+    const labelA = readLabelBox(a);
+    const labelB = readLabelBox(b);
+    const overlap = Math.min(labelA.x2, labelB.x2) - Math.max(labelA.x1, labelB.x1);
+    expect(overlap).toBeGreaterThan(0);
+    expect(overlap).toBeLessThanOrEqual(40 * 0.12 + 0.2);
     expect(cy.edges()[0].data('weight')).toBe(7);
-    expect(cy.getElementById('a').width()).toBe(100);
-    // A second bounded search may refine the first interval, but cannot cross the clearance.
-    const refined = compactGraphSpacing(cy, factor);
-    expect(factor - refined).toBeLessThan(1 / 128);
-    expect(
-      cy.getElementById('b').boundingBox().x1 - cy.getElementById('a').boundingBox().x2,
-    ).toBeGreaterThanOrEqual(8);
+    expect(a.width()).toBe(100);
   } finally {
     cy.destroy();
   }
 });
 
-test('expands a uniformly cramped layout to measured clearance', () => {
+test('expands a uniformly cramped layout only until measured labels are readable', () => {
   const cy = cytoscape({
     headless: true,
     styleEnabled: true,
     layout: { name: 'preset' },
     elements: [
       { data: { id: 'a' }, position: { x: 0, y: 0 } },
-      { data: { id: 'b' }, position: { x: 50, y: 0 } },
+      { data: { id: 'b' }, position: { x: 20, y: 0 } },
     ],
     style: [{ selector: 'node', style: { width: 100, height: 40, padding: '0px' } }],
   });
   try {
+    installMeasuredLabelBox(cy.getElementById('a'), 40, 20);
+    installMeasuredLabelBox(cy.getElementById('b'), 40, 20);
+
     const factor = compactGraphSpacing(cy, 0.1);
-    expect(factor).toBeGreaterThan(0.2);
-    expect(factor).toBeLessThan(0.3);
-    const a = cy.getElementById('a').boundingBox();
-    const b = cy.getElementById('b').boundingBox();
-    expect(b.x1 - a.x2).toBeGreaterThanOrEqual(8);
+    expect(factor).toBeGreaterThan(0.17);
+    expect(factor).toBeLessThan(0.19);
+    const labelA = readLabelBox(cy.getElementById('a'));
+    const labelB = readLabelBox(cy.getElementById('b'));
+    expect(Math.min(labelA.x2, labelB.x2) - Math.max(labelA.x1, labelB.x1)).toBeLessThanOrEqual(
+      40 * 0.12 + 0.2,
+    );
   } finally {
     cy.destroy();
   }
@@ -78,7 +85,7 @@ test('preserves locked or non-uniformly overlapping views', () => {
   }
 });
 
-test('allows parent-child containment but preserves separation between compound groups', () => {
+test('allows parent-child containment but keeps compound peer groups separated', () => {
   const cy = cytoscape({
     headless: true,
     styleEnabled: true,
@@ -94,9 +101,37 @@ test('allows parent-child containment but preserves separation between compound
     expect(compactGraphSpacing(cy, 1)).toBeLessThan(1);
     expect(
       cy.getElementById('q').boundingBox().x1 - cy.getElementById('p').boundingBox().x2,
-    ).toBeGreaterThanOrEqual(8);
+    ).toBeGreaterThanOrEqual(0);
     expect(cy.getElementById('p.a').data('parent')).toBe('p');
   } finally {
     cy.destroy();
   }
 });
+
+/*** Install a dynamic renderer-style label box for headless Cytoscape tests. */
+function installMeasuredLabelBox(node: NodeSingular, width: number, height: number): void {
+  const originalBoundingBox = node.boundingBox.bind(node);
+  node.boundingBox = (options) => {
+    if (options?.includeNodes !== false) return originalBoundingBox(options);
+    const position = node.position();
+    return {
+      x1: position.x - width / 2,
+      y1: position.y - height / 2,
+      x2: position.x + width / 2,
+      y2: position.y + height / 2,
+      w: width,
+      h: height,
+    };
+  };
+}
+
+/*** Read only the renderer-measured label box from one test node. */
+function readLabelBox(node: NodeSingular) {
+  return node.boundingBox({
+    includeNodes: false,
+    includeEdges: false,
+    includeLabels: true,
+    includeOverlays: false,
+    includeUnderlays: false,
+  });
+}

package/src/features/graph-view/adapters/inbound/web-artifact/compactGraphSpacing.ts

@@ -1,86 +1,264 @@
-import type { Core } from 'cytoscape';
+import { findMinimumAcceptedNumber } from '@ankhorage/utility/algorithms';
+import type { Core, NodeSingular } from 'cytoscape';
+
+const LABEL_OVERLAP_RATIO = 0.12;
+const MAX_EXPANSION_ATTEMPTS = 8;
+const MAX_NODE_COUNT = 2000;
+const MAX_PAIR_CHECKS = 200000;
+const SEARCH_ITERATIONS = 8;
 
 /***
- * Optimize settled layout spacing uniformly until measured node and label bounds clear.
- * Compound containment is intentional; sibling and unrelated compound intersections are not.
- * @performance At most eight synchronous trials and 200,000 pair checks per trial. No layout
- * algorithm reruns, no work on zoom, and no intermediate frame is painted. Large, locked, or
- * non-uniformly overlapping views retain their original positions.
+ * Optimize settled layout spacing around readable label bounds instead of full node clearance.
+ * Compound containment stays intentional while sibling groups retain non-overlapping boundaries.
+ * @performance Cytoscape geometry is measured once, then bounded pure numeric trials reuse the
+ * immutable snapshot. No layout reruns, zoom work, or intermediate frames are painted.
  */
 export function compactGraphSpacing(cy: Core, spacingFactor: number): number {
   const leaves = cy.nodes(':childless');
-  if (leaves.length < 2 || cy.nodes().length > 2000 || leaves.filter(':locked').length > 0)
+  if (leaves.length < 2 || cy.nodes().length > MAX_NODE_COUNT || cy.nodes(':locked').length > 0)
     return spacingFactor;
-  const ancestors = new Map(
-    cy.nodes().map((node) => [node.id(), new Set(node.ancestors().map((parent) => parent.id()))]),
-  );
-  const positions = new Map(leaves.map((node) => [node.id(), { ...node.position() }]));
+
   const bounds = leaves.boundingBox();
   const center = { x: (bounds.x1 + bounds.x2) / 2, y: (bounds.y1 + bounds.y2) / 2 };
-  if (hasCollisions(cy, ancestors))
-    return expandGraphSpacing(cy, ancestors, center, positions, spacingFactor);
-  return compressGraphSpacing(cy, ancestors, center, positions, spacingFactor);
+  const leafGeometry = leaves.map(readLeafGeometry);
+  const groups = cy.nodes(':parent').map((node) =>
+    readGroupGeometry(
+      node.id(),
+      node.ancestors().map((parent) => parent.id()),
+      node.boundingBox(),
+      leafGeometry,
+    ),
+  );
+  const accepts = (factor: number) =>
+    !hasUnsafeCollisions(resolveCollisionBoxes(leafGeometry, groups, center, factor));
+  const currentAccepted = accepts(1);
+  const minimum = currentAccepted ? Math.min(1, 0.1 / spacingFactor) : 1;
+  const maximum = currentAccepted ? 1 : findExpansionMaximum(accepts);
+  if (maximum === undefined) return spacingFactor;
+
+  const factor = findMinimumAcceptedNumber({
+    minimum,
+    maximum,
+    iterations: SEARCH_ITERATIONS,
+    accepts,
+  });
+  if (factor === undefined) return spacingFactor;
+
+  applyScale(cy, leafGeometry, center, factor);
+  return spacingFactor * factor;
 }
 
-/*** Compress a collision-free settled layout to its smallest measured clearance. */
-function compressGraphSpacing(
-  cy: Core,
-  ancestors: ReadonlyMap<string, ReadonlySet<string>>,
-  center: { x: number; y: number },
-  positions: ReadonlyMap<string, { x: number; y: number }>,
-  spacingFactor: number,
-): number {
-  const search = { low: Math.min(1, 0.1 / spacingFactor), high: 1 };
-  for (const attempt of Array.from({ length: 8 }, (_, index) => index)) {
-    const factor = attempt === 0 ? search.low : (search.low + search.high) / 2;
-    applyScale(cy, positions, center, factor);
-    if (hasCollisions(cy, ancestors)) search.low = factor;
-    else search.high = factor;
-    if (search.high === search.low) break;
-  }
-  applyScale(cy, positions, center, search.high);
-  return spacingFactor * search.high;
+interface Point {
+  readonly x: number;
+  readonly y: number;
 }
 
-/*** Expand a uniformly cramped layout until measured node and label bounds clear. */
-function expandGraphSpacing(
-  cy: Core,
-  ancestors: ReadonlyMap<string, ReadonlySet<string>>,
-  center: { x: number; y: number },
-  positions: ReadonlyMap<string, { x: number; y: number }>,
-  spacingFactor: number,
-): number {
-  let low = 1;
-  let high = 1;
-  let attempts = 0;
-  while (attempts < 8) {
-    high *= 2;
-    attempts += 1;
-    applyScale(cy, positions, center, high);
-    if (!hasCollisions(cy, ancestors)) break;
-    low = high;
-  }
-  if (hasCollisions(cy, ancestors)) {
-    applyScale(cy, positions, center, 1);
-    return spacingFactor;
-  }
-  for (const _attempt of Array.from({ length: 8 - attempts }, (_, index) => index)) {
-    const factor = (low + high) / 2;
-    applyScale(cy, positions, center, factor);
-    if (hasCollisions(cy, ancestors)) low = factor;
-    else high = factor;
+interface Bounds {
+  readonly x1: number;
+  readonly y1: number;
+  readonly x2: number;
+  readonly y2: number;
+  readonly w: number;
+  readonly h: number;
+}
+
+interface Insets {
+  readonly left: number;
+  readonly right: number;
+  readonly top: number;
+  readonly bottom: number;
+}
+
+interface LeafGeometry {
+  readonly id: string;
+  readonly ancestors: ReadonlySet<string>;
+  readonly position: Point;
+  readonly labelBox: Bounds;
+  readonly nodeBox: Bounds;
+}
+
+interface GroupGeometry {
+  readonly id: string;
+  readonly ancestors: ReadonlySet<string>;
+  readonly descendants: readonly LeafGeometry[];
+  readonly insets: Insets;
+}
+
+interface CollisionBox {
+  readonly id: string;
+  readonly ancestors: ReadonlySet<string>;
+  readonly kind: 'label' | 'group';
+  readonly box: Bounds;
+}
+
+/*** Read one leaf's immutable position, hierarchy and renderer-measured label geometry. */
+function readLeafGeometry(node: NodeSingular): LeafGeometry {
+  const nodeBox = node.boundingBox({
+    includeLabels: true,
+    includeOverlays: false,
+    includeUnderlays: false,
+  });
+  const labelBox = node.boundingBox({
+    includeNodes: false,
+    includeEdges: false,
+    includeLabels: true,
+    includeOverlays: false,
+    includeUnderlays: false,
+  });
+  return {
+    id: node.id(),
+    ancestors: new Set(node.ancestors().map((parent) => parent.id())),
+    position: { ...node.position() },
+    labelBox: isUsableBox(labelBox) ? labelBox : nodeBox,
+    nodeBox,
+  };
+}
+
+/*** Capture one compound group's descendant geometry and constant renderer-owned outer insets. */
+function readGroupGeometry(
+  id: string,
+  ancestorIds: readonly string[],
+  parentBox: Bounds,
+  leaves: readonly LeafGeometry[],
+): GroupGeometry {
+  const descendants = leaves.filter((leaf) => leaf.ancestors.has(id));
+  const descendantUnion = unionBounds(descendants.map((leaf) => leaf.nodeBox)) ?? parentBox;
+  return {
+    id,
+    ancestors: new Set(ancestorIds),
+    descendants,
+    insets: {
+      left: Math.max(0, descendantUnion.x1 - parentBox.x1),
+      right: Math.max(0, parentBox.x2 - descendantUnion.x2),
+      top: Math.max(0, descendantUnion.y1 - parentBox.y1),
+      bottom: Math.max(0, parentBox.y2 - descendantUnion.y2),
+    },
+  };
+}
+
+/*** Resolve immutable label and compound boxes for one candidate uniform spacing factor. */
+function resolveCollisionBoxes(
+  leaves: readonly LeafGeometry[],
+  groups: readonly GroupGeometry[],
+  center: Point,
+  factor: number,
+): readonly CollisionBox[] {
+  const labels = leaves.map((leaf) => ({
+    id: leaf.id,
+    ancestors: leaf.ancestors,
+    kind: 'label' as const,
+    box: shiftBounds(leaf.labelBox, leaf.position, center, factor),
+  }));
+  const compoundBoxes = groups.flatMap((group) => {
+    const descendants = group.descendants.map((leaf) =>
+      shiftBounds(leaf.nodeBox, leaf.position, center, factor),
+    );
+    const union = unionBounds(descendants);
+    if (!union) return [];
+    return [
+      {
+        id: group.id,
+        ancestors: group.ancestors,
+        kind: 'group' as const,
+        box: expandBounds(union, group.insets),
+      },
+    ];
+  });
+  return [...labels, ...compoundBoxes];
+}
+
+/*** Find the first bounded expansion factor that makes the pure geometry snapshot acceptable. */
+function findExpansionMaximum(accepts: (factor: number) => boolean): number | undefined {
+  return Array.from({ length: MAX_EXPANSION_ATTEMPTS }, (_, index) => 2 ** (index + 1)).find(
+    accepts,
+  );
+}
+
+/***
+ * Sweep resolved boxes by x extent and stop conservatively if the pair-check budget is exhausted.
+ * Local loop counters are intentionally mutable on this performance-critical boundary.
+ */
+function hasUnsafeCollisions(boxes: readonly CollisionBox[]): boolean {
+  const sorted = [...boxes].sort((first, second) => first.box.x1 - second.box.x1);
+  const budget = { remaining: MAX_PAIR_CHECKS };
+  for (const [index, first] of sorted.entries()) {
+    for (let next = index + 1; next < sorted.length; next += 1) {
+      const second = sorted.at(next);
+      if (!second) break;
+      if (second.box.x1 >= first.box.x2) break;
+      budget.remaining -= 1;
+      if (budget.remaining < 0) return true;
+      if (isIntentionalContainment(first, second)) continue;
+      if (isUnsafeOverlap(first, second)) return true;
+    }
   }
-  applyScale(cy, positions, center, high);
-  return spacingFactor * high;
+  return false;
+}
+
+/*** Ignore intentional compound containment while retaining sibling and unrelated separation. */
+function isIntentionalContainment(first: CollisionBox, second: CollisionBox): boolean {
+  return first.ancestors.has(second.id) || second.ancestors.has(first.id);
+}
+
+/*** Permit only a small bounded label-label overlap; every other intersection remains unsafe. */
+function isUnsafeOverlap(first: CollisionBox, second: CollisionBox): boolean {
+  const overlapWidth =
+    Math.min(first.box.x2, second.box.x2) - Math.max(first.box.x1, second.box.x1);
+  const overlapHeight =
+    Math.min(first.box.y2, second.box.y2) - Math.max(first.box.y1, second.box.y1);
+  if (overlapWidth <= 0 || overlapHeight <= 0) return false;
+  if (first.kind !== 'label' || second.kind !== 'label') return true;
+  const widthRatio = overlapWidth / Math.min(first.box.w, second.box.w);
+  const heightRatio = overlapHeight / Math.min(first.box.h, second.box.h);
+  return widthRatio > LABEL_OVERLAP_RATIO && heightRatio > LABEL_OVERLAP_RATIO;
 }
 
-/*** Transform leaf centers, preserving ordering, dimensions, compound membership and edge data. */
+/*** Shift one fixed renderer box with its leaf center under uniform radial scaling. */
+function shiftBounds(box: Bounds, position: Point, center: Point, factor: number): Bounds {
+  const dx = (position.x - center.x) * (factor - 1);
+  const dy = (position.y - center.y) * (factor - 1);
+  return {
+    x1: box.x1 + dx,
+    y1: box.y1 + dy,
+    x2: box.x2 + dx,
+    y2: box.y2 + dy,
+    w: box.w,
+    h: box.h,
+  };
+}
+
+/*** Expand a descendant union by the compound renderer's measured outer insets. */
+function expandBounds(box: Bounds, insets: Insets): Bounds {
+  const x1 = box.x1 - insets.left;
+  const y1 = box.y1 - insets.top;
+  const x2 = box.x2 + insets.right;
+  const y2 = box.y2 + insets.bottom;
+  return { x1, y1, x2, y2, w: x2 - x1, h: y2 - y1 };
+}
+
+/*** Return the immutable union of measured boxes, or undefined for an empty collection. */
+function unionBounds(boxes: readonly Bounds[]): Bounds | undefined {
+  if (boxes.length === 0) return undefined;
+  const x1 = Math.min(...boxes.map((box) => box.x1));
+  const y1 = Math.min(...boxes.map((box) => box.y1));
+  const x2 = Math.max(...boxes.map((box) => box.x2));
+  const y2 = Math.max(...boxes.map((box) => box.y2));
+  return { x1, y1, x2, y2, w: x2 - x1, h: y2 - y1 };
+}
+
+/*** Return whether renderer measurement produced a non-empty label box. */
+function isUsableBox(box: Bounds): boolean {
+  return box.w > 0 && box.h > 0;
+}
+
+/*** Apply the accepted factor once, preserving node dimensions, hierarchy, ordering and edge data. */
 function applyScale(
   cy: Core,
-  positions: ReadonlyMap<string, { x: number; y: number }>,
-  center: { x: number; y: number },
+  leaves: readonly LeafGeometry[],
+  center: Point,
   factor: number,
-) {
+): void {
+  const positions = new Map(leaves.map((leaf) => [leaf.id, leaf.position]));
   cy.batch(() => {
     cy.nodes()
       .not(':parent')
@@ -93,31 +271,3 @@ function applyScale(
       });
   });
 }
-
-/*** Sweep measured bounds, ignoring intentional containment and stopping conservatively at budget. */
-function hasCollisions(cy: Core, ancestors: ReadonlyMap<string, ReadonlySet<string>>): boolean {
-  const boxes = cy
-    .nodes()
-    .map((node) => ({
-      id: node.id(),
-      box: node.boundingBox({
-        includeLabels: true,
-        includeOverlays: false,
-        includeUnderlays: false,
-      }),
-    }))
-    .sort((a, b) => a.box.x1 - b.box.x1);
-  const budget = { remaining: 200000 };
-  for (const [index, first] of boxes.entries()) {
-    for (let next = index + 1; next < boxes.length; next += 1) {
-      const second = boxes.at(next);
-      if (!second) break;
-      if (second.box.x1 >= first.box.x2 + 8) break;
-      if (--budget.remaining < 0) return true;
-      if (ancestors.get(first.id)?.has(second.id) || ancestors.get(second.id)?.has(first.id))
-        continue;
-      if (first.box.y1 < second.box.y2 + 8 && second.box.y1 < first.box.y2 + 8) return true;
-    }
-  }
-  return false;
-}

package/src/features/tabs/adapters/inbound/TabList.tsx

@@ -6,13 +6,12 @@ import { withZoraThemeScope } from '../../../theme/adapters/inbound/withZoraThem
 /*** Renders the accessible list of tabs for a Tabs composition. */
 export const TabList = withZoraThemeScope(TabListInner);
 
-/*** Delegates tablist semantics and keyboard navigation to Surface. */
+/*** Delegates tablist semantics, keyboard navigation, and fill distribution to Surface. */
 function TabListInner({
   themeId: _themeId,
   mode: _mode,
   interactionPolicy: _interactionPolicy,
-  children,
-  testID,
+  ...props
 }: TabListProps) {
-  return <SurfaceTabList testID={testID}>{children}</SurfaceTabList>;
+  return <SurfaceTabList {...props} />;
 }

package/src/features/tabs/adapters/inbound/Tabs.layout.test.tsx

@@ -8,6 +8,8 @@ import { renderToStaticMarkup } from 'react-dom/server';
 
 import type { ScrollView as ScrollViewComponent } from '../../../layout/adapters/inbound/ScrollView';
 import type { ZoraProvider as ZoraProviderComponent } from '../../../theme/adapters/inbound/ZoraProvider';
+import type { Tab as TabComponent } from './Tab';
+import type { TabList as TabListComponent } from './TabList';
 import type { TabPanel as TabPanelComponent } from './TabPanel';
 import type { Tabs as TabsComponent } from './Tabs';
 
@@ -55,3 +57,34 @@ test('renders a bounded generated Tabs panel containing the canonical ScrollView
   expect(browserWindow.document.body.textContent).not.toContain('Hidden rules');
   browserWindow.close();
 });
+
+test('forwards filled tab distribution and trailing tab content through the generated artifact', async () => {
+  const { ZoraProvider } = (await load('runtime/ZoraProvider.js')) as {
+    ZoraProvider: typeof ZoraProviderComponent;
+  };
+  const { Tab, TabList, Tabs } = (await load('components/tabs/index.js')) as {
+    Tab: typeof TabComponent;
+    TabList: typeof TabListComponent;
+    Tabs: typeof TabsComponent;
+  };
+  const markup = renderToStaticMarkup(
+    <ZoraProvider mode="light">
+      <Tabs defaultValue="tree">
+        <TabList fill testID="tools">
+          <Tab label="Tree" trailing={<span data-testid="tree-count">2</span>} value="tree" />
+          <Tab label="Rules" value="rules" />
+        </TabList>
+      </Tabs>
+    </ZoraProvider>,
+  );
+  const browserWindow = new Window();
+  browserWindow.document.body.innerHTML = markup;
+  const tabList = browserWindow.document.querySelector('[data-testid="tools"]');
+  const wrappers = Array.from(tabList?.children ?? []);
+
+  expect(tabList?.getAttribute('role')).toBe('tablist');
+  expect(wrappers).toHaveLength(2);
+  expect(wrappers.every((wrapper) => wrapper.getAttribute('style')?.includes('flex:1'))).toBe(true);
+  expect(browserWindow.document.querySelector('[data-testid="tree-count"]')?.textContent).toBe('2');
+  browserWindow.close();
+});

package/src/features/tabs/tabListMeta.ts

@@ -6,5 +6,7 @@ export const tabListMeta = {
   directManifestNode: true,
   allowedChildren: ['Tab'],
   description: 'Accessible list of selectable tabs.',
-  props: {},
+  props: {
+    fill: { type: 'boolean', category: 'Layout', label: 'Fill', default: false },
+  },
 } as const satisfies ZoraComponentMeta;

package/src/types/tabs.ts

@@ -1,21 +1,19 @@
 import type {
+  TabListProps as SurfaceTabListProps,
   TabPanelProps as SurfaceTabPanelProps,
+  TabProps as SurfaceTabProps,
   TabsProps as SurfaceTabsProps,
 } from '@ankhorage/surface';
-import type React from 'react';
 
 import type { ZoraBaseProps } from './base';
 
 export interface TabsProps extends ZoraBaseProps, Omit<SurfaceTabsProps, 'testID'> {}
 
-export interface TabListProps extends ZoraBaseProps {
-  children?: React.ReactNode;
-}
+export interface TabListProps extends ZoraBaseProps, Omit<SurfaceTabListProps, 'testID'> {}
 
-export interface TabProps extends ZoraBaseProps {
-  value: string;
+export interface TabProps
+  extends ZoraBaseProps, Omit<SurfaceTabProps, 'children' | 'interactionPolicy' | 'testID'> {
   label: string;
-  disabled?: boolean;
 }
 
 export interface TabPanelProps extends ZoraBaseProps, Omit<SurfaceTabPanelProps, 'testID'> {}