@hanzo/ui 8.0.2 → 8.0.4

package/src/product/OrgSwitcher.tsx

@@ -0,0 +1,332 @@
+'use client'
+
+/**
+ * OrgSwitcher — the Vercel-style org/team switcher, hoisted from the console
+ * (hanzoai/ui#36) onto @hanzo/gui primitives. Shows the org the surface is
+ * scoped to, switches between the orgs the caller can see, and creates one.
+ *
+ * Host-agnostic: the LIST is a lazy, paged loader the host injects (IAM
+ * `get-organizations` behind its own proxy) — one page at a time, the search
+ * term pushed to the server, more on demand (scroll + "Load more"), so it
+ * scales to thousands of orgs. No loader → the current org alone, synthesized
+ * from the scope (never fabricated). Selecting re-scopes IN PLACE via
+ * `scope.switchOrg` (persist + reload → every module refetches under the new
+ * `X-Org-Id`). Create posts through the injected hook, then scopes into the
+ * new org.
+ */
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { Button, Input, Popover, Spinner, Text, XStack, YStack } from '@hanzo/gui'
+import { Check, ChevronsUpDown, LayoutGrid, Plus, Search } from '@hanzogui/lucide-icons-2'
+
+import { filterOrgs, type Org, type OrgScope } from './scope'
+
+const titleCase = (s: string) => (s ? s[0].toUpperCase() + s.slice(1) : s)
+const initialsOf = (o: Org) =>
+  (o.displayName || o.name)
+    .split(/\s+/)
+    .map((w) => w[0])
+    .join('')
+    .slice(0, 2)
+    .toUpperCase()
+
+/** An org's avatar — its logo when set, else a monogram tile. */
+function OrgAvatar({ org, size = 22 }: { org: Org; size?: number }) {
+  if (org.logo) {
+    // eslint-disable-next-line @next/next/no-img-element
+    return <img src={org.logo} alt="" style={{ height: size, width: size, objectFit: 'contain', display: 'block', borderRadius: 6 }} />
+  }
+  return (
+    <YStack width={size} height={size} rounded="$3" bg="$color4" items="center" justify="center">
+      <Text fontSize="$1" fontWeight="800" color="$color12">
+        {initialsOf(org)}
+      </Text>
+    </YStack>
+  )
+}
+
+export type OrgSwitcherProps = {
+  /** The active-org contract (see `orgScope`). */
+  scope: OrgScope
+  /**
+   * Lazy paged org list: 0-based page + server-pushed search → one page of
+   * rows. A full page (=== pageSize) implies another. Omit when the caller
+   * can only see its own org.
+   */
+  orgs?: (page: number, query: string) => Promise<Org[]>
+  /** Rows per page the loader returns. Default 20. */
+  pageSize?: number
+  /** Create-org hook → the created org's id; omit to hide the affordance. */
+  create?: (name: string) => Promise<string>
+  /** Show the "All organizations" de-scope row (`scope.leaveOrg`). */
+  picker?: boolean
+}
+
+export function OrgSwitcher({ scope, orgs, pageSize = 20, create, picker = false }: OrgSwitcherProps) {
+  const currentId = scope.currentOrg()
+
+  const [open, setOpen] = useState(false)
+  const [query, setQuery] = useState('')
+  const [debounced, setDebounced] = useState('')
+  const [rows, setRows] = useState<Org[]>([])
+  const [loading, setLoading] = useState(false)
+  const [loadingMore, setLoadingMore] = useState(false)
+  const [hasMore, setHasMore] = useState(false)
+  const [creating, setCreating] = useState(false)
+  const [newName, setNewName] = useState('')
+  const [busy, setBusy] = useState(false)
+  const [err, setErr] = useState<string | null>(null)
+  const pageRef = useRef(0)
+  const reqRef = useRef(0) // race token — a newer request supersedes older ones
+
+  // Debounce the search so type-as-you-search re-hits the server at most ~4×/s.
+  useEffect(() => {
+    const id = setTimeout(() => setDebounced(query.trim()), 250)
+    return () => clearTimeout(id)
+  }, [query])
+
+  const fetchPage = useCallback(
+    async (page: number, q: string, append: boolean) => {
+      if (!orgs) return
+      const token = ++reqRef.current
+      append ? setLoadingMore(true) : setLoading(true)
+      try {
+        const incoming = await orgs(page, q)
+        if (token !== reqRef.current) return
+        pageRef.current = page
+        setRows((prev) => {
+          const merged = append ? [...prev] : []
+          const seen = new Set(merged.map((o) => o.name))
+          for (const o of incoming) if (!seen.has(o.name)) merged.push(o)
+          return merged
+        })
+        setHasMore(incoming.length >= pageSize)
+      } catch {
+        // Honest empty / keep what's shown — never a fabricated list.
+        if (token !== reqRef.current) return
+        if (!append) setRows([])
+        setHasMore(false)
+      } finally {
+        if (token === reqRef.current) {
+          setLoading(false)
+          setLoadingMore(false)
+        }
+      }
+    },
+    [orgs, pageSize],
+  )
+
+  // (Re)load page 0 when the popover opens or the debounced query changes.
+  useEffect(() => {
+    if (!open || !orgs) return
+    void fetchPage(0, debounced, false)
+  }, [open, debounced, fetchPage, orgs])
+
+  const loadMore = useCallback(() => {
+    if (loading || loadingMore || !hasMore) return
+    void fetchPage(pageRef.current + 1, debounced, true)
+  }, [loading, loadingMore, hasMore, debounced, fetchPage])
+
+  // Rows to render — the loaded list (client-filtered too), else the current
+  // org synthesized from the scope.
+  const visible: Org[] = useMemo(() => {
+    if (orgs) return filterOrgs(rows, query)
+    return [{ name: currentId, displayName: titleCase(currentId) }]
+  }, [orgs, rows, query, currentId])
+
+  const current: Org = useMemo(
+    () => rows.find((o) => o.name === currentId) ?? { name: currentId, displayName: titleCase(currentId) },
+    [rows, currentId],
+  )
+
+  const select = useCallback(
+    (org: string) => {
+      setOpen(false)
+      scope.switchOrg(org)
+    },
+    [scope],
+  )
+
+  const submitCreate = async () => {
+    const name = newName.trim()
+    if (!name || !create) return
+    setBusy(true)
+    setErr(null)
+    try {
+      const org = await create(name)
+      scope.switchOrg(org)
+    } catch (e) {
+      setErr(e instanceof Error ? e.message : 'Could not create the organization.')
+      setBusy(false)
+    }
+  }
+
+  return (
+    <Popover open={open} onOpenChange={setOpen} placement="bottom-start">
+      <Popover.Trigger asChild>
+        <Button size="$2" chromeless icon={<OrgAvatar org={current} size={18} />} iconAfter={<ChevronsUpDown size={13} />}>
+          {current.displayName || titleCase(current.name)}
+        </Button>
+      </Popover.Trigger>
+      <Popover.Content bordered elevate p="$2" width={300} bg="$color2" borderColor="$borderColor">
+        {creating ? (
+          <YStack gap="$2">
+            <Text fontSize="$2" color="$color12" fontWeight="700">
+              Create organization
+            </Text>
+            <Input
+              size="$3"
+              placeholder="Organization name"
+              value={newName}
+              onChangeText={setNewName}
+              autoCapitalize="words"
+              onSubmitEditing={() => void submitCreate()}
+            />
+            {err ? (
+              <Text fontSize="$1" color="$red10">
+                {err}
+              </Text>
+            ) : null}
+            <XStack gap="$2" justify="flex-end">
+              <Button size="$2" chromeless onPress={() => setCreating(false)} disabled={busy}>
+                Cancel
+              </Button>
+              <Button
+                size="$2"
+                onPress={() => void submitCreate()}
+                disabled={busy || !newName.trim()}
+                icon={busy ? <Spinner size="small" /> : <Plus size={14} />}
+              >
+                Create
+              </Button>
+            </XStack>
+          </YStack>
+        ) : (
+          <YStack gap="$1">
+            {orgs ? (
+              <XStack items="center" gap="$2" px="$2" py="$1" rounded="$3" borderWidth={1} borderColor="$borderColor">
+                <Search size={13} opacity={0.6} />
+                <Input
+                  flex={1}
+                  size="$2"
+                  borderWidth={0}
+                  bg="transparent"
+                  placeholder="Find organization…"
+                  value={query}
+                  onChangeText={setQuery}
+                  autoCapitalize="none"
+                  autoCorrect={false}
+                />
+              </XStack>
+            ) : null}
+
+            <div
+              style={{ maxHeight: 300, overflowY: 'auto', display: 'flex', flexDirection: 'column' }}
+              onScroll={(e) => {
+                const el = e.currentTarget
+                if (el.scrollHeight - el.scrollTop - el.clientHeight < 48) loadMore()
+              }}
+            >
+              {loading ? (
+                <XStack items="center" gap="$2" px="$2" py="$3">
+                  <Spinner size="small" color="$color11" />
+                  <Text fontSize="$2" color="$color10">
+                    Loading organizations…
+                  </Text>
+                </XStack>
+              ) : visible.length === 0 ? (
+                <Text px="$2" py="$2" fontSize="$2" color="$color10">
+                  {query.trim() ? `No organizations match “${query.trim()}”.` : 'No organizations yet.'}
+                </Text>
+              ) : (
+                visible.map((org) => (
+                  <XStack
+                    key={org.name}
+                    onPress={() => select(org.name)}
+                    cursor="pointer"
+                    items="center"
+                    gap="$2.5"
+                    px="$2"
+                    py="$2"
+                    rounded="$3"
+                    bg={org.name === currentId ? '$color4' : 'transparent'}
+                    hoverStyle={{ bg: '$color5' }}
+                  >
+                    <OrgAvatar org={org} />
+                    <Text flex={1} fontSize="$2" color="$color12" numberOfLines={1}>
+                      {org.displayName || org.name}
+                    </Text>
+                    {org.name === currentId ? <Check size={15} /> : null}
+                  </XStack>
+                ))
+              )}
+
+              {loadingMore ? (
+                <XStack items="center" gap="$2" px="$2" py="$2">
+                  <Spinner size="small" color="$color11" />
+                  <Text fontSize="$1" color="$color10">
+                    Loading more…
+                  </Text>
+                </XStack>
+              ) : hasMore ? (
+                <XStack onPress={loadMore} cursor="pointer" items="center" justify="center" px="$2" py="$1.5" rounded="$3" hoverStyle={{ bg: '$color4' }}>
+                  <Text fontSize="$1" color="$color11" fontWeight="600">
+                    Load more
+                  </Text>
+                </XStack>
+              ) : null}
+            </div>
+
+            {create ? (
+              <XStack
+                onPress={() => {
+                  setCreating(true)
+                  setErr(null)
+                }}
+                cursor="pointer"
+                items="center"
+                gap="$2.5"
+                px="$2"
+                py="$2"
+                mt="$1"
+                rounded="$3"
+                borderTopWidth={1}
+                borderColor="$borderColor"
+                hoverStyle={{ bg: '$color5' }}
+              >
+                <YStack width={22} height={22} rounded="$3" bg="$color3" items="center" justify="center">
+                  <Plus size={14} />
+                </YStack>
+                <Text fontSize="$2" color="$color12">
+                  Create organization
+                </Text>
+              </XStack>
+            ) : null}
+
+            {picker ? (
+              <XStack
+                onPress={() => {
+                  setOpen(false)
+                  scope.leaveOrg()
+                }}
+                cursor="pointer"
+                items="center"
+                gap="$2.5"
+                px="$2"
+                py="$2"
+                rounded="$3"
+                hoverStyle={{ bg: '$color5' }}
+              >
+                <YStack width={22} height={22} rounded="$3" bg="$color3" items="center" justify="center">
+                  <LayoutGrid size={14} />
+                </YStack>
+                <Text fontSize="$2" color="$color12">
+                  All organizations
+                </Text>
+              </XStack>
+            ) : null}
+          </YStack>
+        )}
+      </Popover.Content>
+    </Popover>
+  )
+}

package/src/product/index.ts

@@ -38,6 +38,13 @@ export { Donut as DonutRing, type DonutSegment } from './Donut'
 export { ComboBox } from './ComboBox'
 export * from './combobox/filter'
 
+// The shared shell — brand mark, org scope + switcher, app header (the
+// console's org-scope contract + switcher hoisted here; hanzoai/ui#36).
+export * from './AppHeader'
+export * from './BrandMark'
+export * from './OrgSwitcher'
+export * from './scope'
+
 // The rest — every exported name below is unique across the layer.
 export * from './DataTable'
 export * from './EmptyState'
@@ -56,8 +63,6 @@ export * from './ThemeToggle'
 export * from './Toast'
 export * from './color'
 
-// Usage — the shared AI-quota surface (meter bar → provider card → dashboard).
-export * from './usage'
-
-// Social — ChannelBadge, PostCard, CampaignCard (extracted from Hanzo Social).
-export * from './social'
+// Usage — the canonical AI-usage surface (totals, chart, spend-by-model, activity)
+// now lives in ONE home: `@hanzo/usage/panel` (<UsagePanel>). The former meter/card/
+// dashboard kit here was orphaned (zero consumers) and folded into it.

package/src/product/scope.test.ts

@@ -0,0 +1,92 @@
+import { describe, expect, it } from 'vitest'
+
+import { filterOrgs, orgScope } from './scope'
+
+/** In-memory Storage double. */
+function memory(): Pick<Storage, 'getItem' | 'setItem' | 'removeItem'> {
+  const m = new Map<string, string>()
+  return {
+    getItem: (k) => m.get(k) ?? null,
+    setItem: (k, v) => void m.set(k, v),
+    removeItem: (k) => void m.delete(k),
+  }
+}
+
+function harness() {
+  const calls: string[] = []
+  const scope = orgScope({
+    brandOrg: 'hanzo',
+    storage: memory(),
+    navigate: (path) => calls.push(`nav:${path}`),
+    reload: () => calls.push('reload'),
+  })
+  return { scope, calls }
+}
+
+describe('orgScope', () => {
+  it('defaults to the brand org, un-selected', () => {
+    const { scope } = harness()
+    expect(scope.currentOrg()).toBe('hanzo')
+    expect(scope.isScopedAway()).toBe(false)
+    expect(scope.hasSelectedOrg()).toBe(false)
+  })
+
+  it('setCurrentOrg persists; the brand org clears the override', () => {
+    const { scope } = harness()
+    scope.setCurrentOrg('acme')
+    expect(scope.currentOrg()).toBe('acme')
+    expect(scope.isScopedAway()).toBe(true)
+    scope.setCurrentOrg('hanzo')
+    expect(scope.currentOrg()).toBe('hanzo')
+    expect(scope.isScopedAway()).toBe(false)
+  })
+
+  it('enterOrg selects + scopes + navigates home', () => {
+    const { scope, calls } = harness()
+    scope.enterOrg('acme')
+    expect(scope.currentOrg()).toBe('acme')
+    expect(scope.hasSelectedOrg()).toBe(true)
+    expect(calls).toEqual(['nav:/'])
+  })
+
+  it('leaveOrg de-selects, resets to the brand org, navigates home', () => {
+    const { scope, calls } = harness()
+    scope.enterOrg('acme')
+    scope.leaveOrg()
+    expect(scope.currentOrg()).toBe('hanzo')
+    expect(scope.hasSelectedOrg()).toBe(false)
+    expect(calls).toEqual(['nav:/', 'nav:/'])
+  })
+
+  it('switchOrg persists, keeps the selection, reloads; same org is a no-op', () => {
+    const { scope, calls } = harness()
+    scope.enterOrg('acme')
+    scope.switchOrg('zoo')
+    expect(scope.currentOrg()).toBe('zoo')
+    expect(scope.hasSelectedOrg()).toBe(true)
+    expect(calls).toEqual(['nav:/', 'reload'])
+    scope.switchOrg('zoo')
+    expect(calls).toEqual(['nav:/', 'reload'])
+  })
+
+  it('two scopes with different keys never collide', () => {
+    const store = memory()
+    const a = orgScope({ brandOrg: 'hanzo', key: 'a', storage: store })
+    const b = orgScope({ brandOrg: 'hanzo', key: 'b', storage: store })
+    a.setCurrentOrg('acme')
+    expect(b.currentOrg()).toBe('hanzo')
+  })
+})
+
+describe('filterOrgs', () => {
+  const orgs = [
+    { name: 'acme', displayName: 'Acme Corp' },
+    { name: 'zoo', displayName: 'Zoo Labs' },
+  ]
+  it('matches name and displayName, case-insensitive; blank returns all', () => {
+    expect(filterOrgs(orgs, '')).toHaveLength(2)
+    expect(filterOrgs(orgs, 'ACME')).toEqual([orgs[0]])
+    expect(filterOrgs(orgs, 'labs')).toEqual([orgs[1]])
+    expect(filterOrgs(orgs, 'nope')).toEqual([])
+  })
+})

package/src/product/scope.ts

@@ -0,0 +1,123 @@
+/**
+ * orgScope — the active-organization contract every Hanzo surface shares
+ * (hoisted from the console; see hanzoai/ui#36).
+ *
+ * Brand identity (which IAM you log into, the wordmark + logo) is fixed per
+ * host; the DATA scope — which org's identity, secrets and resources the app
+ * acts on — is orthogonal. This module owns only that switch. Every
+ * tenant-scoped call reads `currentOrg()` and stamps it as `X-Org-Id`.
+ *
+ * Two-level model: the org VALUE (which org) and the SELECTION (has one been
+ * chosen yet) are orthogonal. A fresh login is org-LESS: `hasSelectedOrg()` is
+ * false so the host can show its org picker even for a one-org user. Entering
+ * (`enterOrg`) sets value + flag and navigates home; leaving (`leaveOrg`)
+ * clears the flag back to the picker; the in-shell quick switch (`switchOrg`)
+ * persists and reloads so every module refetches under the new `X-Org-Id`.
+ *
+ * Host-agnostic: storage + navigation are injected (browser defaults), so the
+ * same contract runs in Next, Vite, Svelte or a test.
+ */
+
+export type Org = { name: string; displayName?: string; logo?: string }
+
+export type OrgScopeConfig = {
+  /** The brand's own org — the default scope (e.g. `config.iamOrgName`). */
+  brandOrg: string
+  /** Storage key namespace — ONE per surface. Default `'hanzo.org'`. */
+  key?: string
+  /** Storage — defaults to `window.localStorage`, null-safe on SSR/blocked. */
+  storage?: Pick<Storage, 'getItem' | 'setItem' | 'removeItem'>
+  /** Navigate to a path (enter/leave land on home). Default `location.assign`. */
+  navigate?: (path: string) => void
+  /** Hard reload (quick-switch refetches everything). Default `location.reload`. */
+  reload?: () => void
+}
+
+export type OrgScope = {
+  /** The org the surface is currently scoped to (default: the brand org). */
+  currentOrg(): string
+  /** Switch the active scope. Passing the brand org clears the override. */
+  setCurrentOrg(org: string): void
+  /** True when scoped to a non-default (switched) org. */
+  isScopedAway(): boolean
+  /** True once an org has been explicitly ENTERED (picker → shell). */
+  hasSelectedOrg(): boolean
+  /** Enter an org from the picker: scope + select + navigate home. */
+  enterOrg(org: string): void
+  /** Leave the org (back to the picker): de-select + reset + navigate home. */
+  leaveOrg(): void
+  /** In-shell quick switch: persist + keep selection + reload. Same org: no-op. */
+  switchOrg(org: string): void
+}
+
+function browserStorage(): Pick<Storage, 'getItem' | 'setItem' | 'removeItem'> | null {
+  if (typeof window === 'undefined') return null
+  try {
+    return window.localStorage
+  } catch {
+    return null
+  }
+}
+
+export function orgScope(config: OrgScopeConfig): OrgScope {
+  const key = config.key ?? 'hanzo.org'
+  const selectedKey = `${key}.selected`
+  const store = () => config.storage ?? browserStorage()
+  const read = (k: string): string | null => {
+    try {
+      return store()?.getItem(k) ?? null
+    } catch {
+      return null
+    }
+  }
+  const write = (k: string, v: string | null): void => {
+    try {
+      if (v === null) store()?.removeItem(k)
+      else store()?.setItem(k, v)
+    } catch {
+      // Storage blocked — the scope simply stays at the brand org.
+    }
+  }
+  const goHome = () => {
+    if (config.navigate) return config.navigate('/')
+    if (typeof window !== 'undefined') window.location.assign('/')
+  }
+  const doReload = () => {
+    if (config.reload) return config.reload()
+    if (typeof window !== 'undefined') window.location.reload()
+  }
+
+  const scope: OrgScope = {
+    currentOrg: () => read(key) || config.brandOrg,
+    setCurrentOrg: (org) => write(key, !org || org === config.brandOrg ? null : org),
+    isScopedAway: () => scope.currentOrg() !== config.brandOrg,
+    hasSelectedOrg: () => read(selectedKey) === '1',
+    enterOrg: (org) => {
+      if (!org) return
+      scope.setCurrentOrg(org)
+      write(selectedKey, '1')
+      goHome()
+    },
+    leaveOrg: () => {
+      write(selectedKey, null)
+      scope.setCurrentOrg(config.brandOrg)
+      goHome()
+    },
+    switchOrg: (org) => {
+      if (!org || org === scope.currentOrg()) return
+      scope.setCurrentOrg(org)
+      write(selectedKey, '1')
+      doReload()
+    },
+  }
+  return scope
+}
+
+/** Case-insensitive filter over org name + display name (the switcher search). */
+export function filterOrgs<T extends Org>(orgs: T[], query: string): T[] {
+  const q = query.trim().toLowerCase()
+  if (!q) return orgs
+  return orgs.filter(
+    (o) => o.name.toLowerCase().includes(q) || (o.displayName ?? '').toLowerCase().includes(q),
+  )
+}

package/src/usage.ts

@@ -0,0 +1,8 @@
+// @hanzo/ui/usage — the shared AI-usage surface (the meter bar → provider card →
+// dashboard progression), re-exported from its home package @hanzo/usage. Thin
+// subpath so every console shows the same quota UI:
+//
+//   import { UsageMeter, UsageProviderCard, UsageDashboard } from '@hanzo/ui/usage'
+//
+// Optional peer — only pulled when the subpath is used.
+export * from '@hanzo/usage'

package/src/wallet.ts

@@ -0,0 +1,11 @@
+// @hanzo/ui/wallet — the ONE wallet surface, re-exported from its home module
+// @hanzo/ui-shadcn/wallet. `WalletMenu` is presentation only (address, PQ
+// identity, selected-network alignment, explorer link, connect/disconnect);
+// custody lives in the injected `WalletAdapter` (desktop wallet, web EIP-1193).
+// Thin subpath so every console imports the same wallet surface:
+//
+//   import { WalletMenu, injectedEvmAdapter, walletAvailable, ensureEvmNetwork,
+//            shortAddress, type WalletAdapter } from '@hanzo/ui/wallet'
+//
+// Optional peer — only pulled when the subpath is used.
+export * from '@hanzo/ui-shadcn/wallet'

package/types/billing.d.ts

@@ -0,0 +1,2 @@
+export * from '@hanzo/ui-shadcn/billing';
+//# sourceMappingURL=billing.d.ts.map

package/types/billing.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"billing.d.ts","sourceRoot":"","sources":["../src/billing.ts"],"names":[],"mappings":"AAQA,cAAc,0BAA0B,CAAA"}

package/types/canvas.d.ts

@@ -0,0 +1,2 @@
+export * from '@hanzo/canvas';
+//# sourceMappingURL=canvas.d.ts.map

package/types/canvas.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvas.d.ts","sourceRoot":"","sources":["../src/canvas.ts"],"names":[],"mappings":"AAUA,cAAc,eAAe,CAAA"}

package/types/cd/layout.d.ts

@@ -0,0 +1,57 @@
+/**
+ * Deterministic layered graph layout — pure, no React, no DOM, unit-tested. This
+ * is the dependency-free equivalent of the GitOps engine UI's dagre `rankdir:LR`
+ * pass: resources flow left→right by ownership depth, each tier a clean column.
+ *
+ * Three folds:
+ *   1. columns — longest-path layering (Kahn topological order). A root (no
+ *      incoming edge) sits in column 0; every other node one column right of its
+ *      deepest parent. Cycles degrade gracefully (a child keeps its best column),
+ *      so a malformed graph can never wedge the layout.
+ *   2. order — within a column, nodes are ordered by the barycentre of their
+ *      parents' rows (then name), so children cluster under their owner and edge
+ *      crossings stay low — dagre's crossing-reduction, cheaply.
+ *   3. place — nodes stack top-to-bottom at their own height (pods are taller
+ *      than controllers) with a fixed gap, and each column is vertically centred
+ *      on a shared axis so tiers read as balanced columns.
+ *
+ * The same graph always yields byte-identical positions.
+ */
+export interface LayoutNode {
+    id: string;
+    /** Rendered height in px (pods are taller than controllers). */
+    h: number;
+}
+export interface LayoutEdge {
+    source: string;
+    target: string;
+}
+export interface LayoutOptions {
+    /** Uniform node width in px (x is placed on a fixed column pitch). */
+    nodeWidth?: number;
+    /** Horizontal gap between a column's right edge and the next column. */
+    columnGap?: number;
+    /** Vertical gap between stacked nodes in a column. */
+    rowGap?: number;
+}
+export interface PositionedNode {
+    id: string;
+    /** Top-left corner, px. */
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+    col: number;
+}
+export interface GraphLayout {
+    nodes: PositionedNode[];
+    /** Content bounds — the transformed layer's intrinsic size. */
+    width: number;
+    height: number;
+}
+/**
+ * Lay a resource graph out into centred LR columns. Returns one positioned node
+ * per input node (input order preserved in the result array) plus content bounds.
+ */
+export declare function layoutTree(nodes: LayoutNode[], edges: LayoutEdge[], opts?: LayoutOptions): GraphLayout;
+//# sourceMappingURL=layout.d.ts.map

package/types/cd/layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../src/cd/layout.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,CAAA;IACV,gEAAgE;IAChE,CAAC,EAAE,MAAM,CAAA;CACV;AAED,MAAM,WAAW,UAAU;IACzB,MAAM,EAAE,MAAM,CAAA;IACd,MAAM,EAAE,MAAM,CAAA;CACf;AAED,MAAM,WAAW,aAAa;IAC5B,sEAAsE;IACtE,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,wEAAwE;IACxE,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,sDAAsD;IACtD,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB;AAED,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,CAAA;IACV,2BAA2B;IAC3B,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;IACT,GAAG,EAAE,MAAM,CAAA;CACZ;AAED,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,cAAc,EAAE,CAAA;IACvB,+DAA+D;IAC/D,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;CACf;AA6CD;;;GAGG;AACH,wBAAgB,UAAU,CACxB,KAAK,EAAE,UAAU,EAAE,EACnB,KAAK,EAAE,UAAU,EAAE,EACnB,IAAI,GAAE,aAAkB,GACvB,WAAW,CA2Eb"}