Screen

Defined in: packages/core/src/types.ts:49

Screen metadata definition for the screen catalog.

Example

const screen: Screen = {
  id: "billing.invoice.detail",
  title: "Invoice Detail",
  route: "/billing/invoices/:id",
  owner: ["billing-team"],
  tags: ["billing", "invoice"],
  dependsOn: ["InvoiceAPI.getDetail"],
  next: ["billing.invoice.edit"],
}

Properties

allowCycles?

optional allowCycles: boolean

Defined in: packages/core/src/types.ts:115

Allow circular navigation involving this screen. When true, cycles that include this screen will not trigger warnings.

Default

false

Example

true

---

dependsOn?

optional dependsOn: string[]

Defined in: packages/core/src/types.ts:93

APIs or services this screen depends on for impact analysis

Examples

["InvoiceAPI.getDetail", "PaymentAPI.getStatus"]

["UserAPI.getProfile"]

---

description?

optional description: string

Defined in: packages/core/src/types.ts:121

Optional description explaining the screen’s purpose

Example

"Displays detailed invoice information including line items and payment status"

---

entryPoints?

optional entryPoints: string[]

Defined in: packages/core/src/types.ts:100

Screen IDs that can navigate to this screen (incoming edges)

Examples

["billing.invoice.list"]

["dashboard.home", "nav.sidebar"]

---

id

id: string

Defined in: packages/core/src/types.ts:56

Unique identifier for the screen using dot notation

Examples

"billing.invoice.detail"

"auth.login"

"settings.profile"

---

links?

optional links: ScreenLink[]

Defined in: packages/core/src/types.ts:127

Links to external resources like Storybook, Figma, or documentation

Example

[{ label: "Figma", url: "https://figma.com/file/..." }]

---

mock?

optional mock: ScreenMock

Defined in: packages/core/src/types.ts:134

Wireframe-level mock definition for UI documentation. When defined, navigation targets (navigateTo, itemNavigateTo, rowNavigateTo) are automatically extracted and merged into the next array.

---

next?

optional next: string[]

Defined in: packages/core/src/types.ts:107

Screen IDs this screen can navigate to (outgoing edges)

Examples

["billing.invoice.edit", "billing.payment.start"]

["billing.invoice.list"]

---

owner?

optional owner: string[]

Defined in: packages/core/src/types.ts:79

Team(s) or domain(s) that own this screen

Examples

["billing-team"]

["platform", "billing"]

---

route

route: string

Defined in: packages/core/src/types.ts:72

Route path pattern with optional dynamic segments

Examples

"/billing/invoices/:id"

"/auth/login"

"/settings/profile"

---

tags?

optional tags: string[]

Defined in: packages/core/src/types.ts:86

Tags for categorization and filtering in the catalog

Examples

["billing", "invoice"]

["auth", "security"]

---

title

title: string

Defined in: packages/core/src/types.ts:64

Human-readable title displayed in the screen catalog

Examples

"Invoice Detail"

"Login"

"User Profile Settings"