@estiva-app/ui 0.40.0 → 0.41.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@estiva-app/ui",
-  "version": "0.40.0",
+  "version": "0.41.0",
   "description": "Estiva's design tokens (the contract) and a small set of primitives (a convenience) for every Estiva app.",
   "type": "module",
   "license": "MIT",

package/registry.json

@@ -4,7 +4,7 @@
     "kind": "package",
     "repo": "estiva-ui",
     "package": "@estiva-app/ui",
-    "packageVersion": "0.40.0",
+    "packageVersion": "0.41.0",
     "exports": 90,
     "typeExports": 101,
     "files": null
@@ -792,6 +792,18 @@
           "required": false,
           "note": null
         },
+        {
+          "name": "href",
+          "takes": "text",
+          "required": false,
+          "note": "The chip is a link: a real anchor with the chip's own round shape, so the keyboard ring is round too."
+        },
+        {
+          "name": "onClick",
+          "takes": "MouseEventHandler<HTMLAnchorElement>",
+          "required": false,
+          "note": "With `href`: a router app takes the click here, like `Link`."
+        },
         {
           "name": "className",
           "takes": "text",
@@ -825,13 +837,13 @@
         "bg-warning-muted text-warning-default signal:border signal:border-warning-outline signal:shadow-glow-warning",
         "bg-success-muted text-success-default signal:border signal:border-success-outline",
         "bg-error-muted text-error-default signal:border signal:border-error-outline",
+        "overflow-x-clip text-ellipsis whitespace-nowrap signal:tracking-wide text-chip signal:font-mono signal:text-small signal:font-semibold signal:tabular-nums",
+        "overflow-x-clip text-ellipsis whitespace-nowrap signal:tracking-wide",
         "rounded-full bg-accent-muted text-accent-primary signal:border signal:border-accent-outline",
         "rounded-full bg-info-muted text-info-default signal:border signal:border-info-outline",
         "rounded-full bg-warning-muted text-warning-default signal:border signal:border-warning-outline signal:shadow-glow-warning",
         "rounded-full bg-success-muted text-success-default signal:border signal:border-success-outline",
-        "rounded-full bg-error-muted text-error-default signal:border signal:border-error-outline",
-        "overflow-x-clip text-ellipsis whitespace-nowrap signal:tracking-wide text-chip signal:font-mono signal:text-small signal:font-semibold signal:tabular-nums",
-        "overflow-x-clip text-ellipsis whitespace-nowrap signal:tracking-wide"
+        "rounded-full bg-error-muted text-error-default signal:border signal:border-error-outline"
       ]
     },
     {
@@ -2749,6 +2761,12 @@
           "required": false,
           "note": "One line, cut with an ellipsis when it does not fit — a title that is a link."
         },
+        {
+          "name": "cover",
+          "takes": "true/false",
+          "required": false,
+          "note": "The link covers the row it sits in: a click anywhere on the row opens it, and the keyboard ring goes round the whole row."
+        },
         {
           "name": "children",
           "takes": "anything",
@@ -2785,8 +2803,13 @@
       "app": null,
       "looks": [
         "text-info-default underline underline-offset-2 hover:opacity-80",
+        "text-info-default underline underline-offset-2 hover:opacity-80 after:rounded-md focus-visible:outline-none",
         "text-info-default underline underline-offset-2 hover:opacity-80 truncate",
-        "underline underline-offset-2 hover:text-text-primary truncate"
+        "text-info-default underline underline-offset-2 hover:opacity-80 truncate after:rounded-md focus-visible:outline-none",
+        "hover:underline truncate after:rounded-md focus-visible:outline-none",
+        "underline underline-offset-2 hover:text-text-primary after:rounded-md focus-visible:outline-none",
+        "underline underline-offset-2 hover:text-text-primary truncate",
+        "underline underline-offset-2 hover:text-text-primary truncate after:rounded-md focus-visible:outline-none"
       ]
     },
     {

package/src/Chip.mdx

@@ -20,8 +20,8 @@ muted tints; the label is the `chip` type token, 11px / 500.
 
 ## When not
 
-- Something clickable → **Button** (small) or **MenuItem** — a Chip is not
-  a control.
+- Something that does an action → **Button** (small) or **MenuItem**. A Chip
+  is not a control. It can only be a link, with `href`.
 - A removable token in a multi-select → **InputChip** (see ChipInput).
 - A count beside a tab label → **Tabs** draws its own mono number, not a
   Chip.
@@ -37,6 +37,17 @@ import { Chip } from '@estiva-app/ui'
 - `leadingIcon` / `trailingIcon` take a 12px icon; the slots centre it, so
   it never rides the text baseline.
 - A count alone works too — `label="3"`, no icon.
+- `href` makes the chip a link to the thing it names: a real anchor with the
+  chip's round shape, so the keyboard ring is round too. A router app passes
+  `onClick`, as with **Link**. Inside a row whose **Link** has `cover`, it
+  stays clickable on its own: the row opens one thing, the chip another.
+
+```tsx
+<div className="relative flex items-center gap-3">
+  <Link href={itemUrl} variant="plain" cover>Item one</Link>
+  <Chip href={groupUrl} label="Group" />
+</div>
+```
 
 ## What it owns
 

package/src/Chip.stories.tsx

@@ -27,6 +27,8 @@ export const WithLeadingIcon: Story = { args: { type: 'info', label: 'Replies',
 export const WithTrailingIcon: Story = { args: { type: 'success', label: 'Sorted', trailingIcon: <IconArrowUp className="size-3" stroke={1.5} /> } }
 /** A count alone. */
 export const CountOnly: Story = { args: { type: 'neutral', label: '2' } }
+/** A link to the thing it names. Tab to it: the ring is round, like the chip. */
+export const AsLink: Story = { args: { type: 'neutral', label: 'Group', href: '#' } }
 
 /** All six colour types. */
 export const AllTypes: Story = {

package/src/Chip.test.tsx

@@ -0,0 +1,36 @@
+// @vitest-environment jsdom
+/**
+ * What the Chip page claims about `href`, pinned: without it the chip is not a
+ * link; with it the chip is a real anchor named by its label, keeps its round
+ * shape, sits above a covering link (`relative`), and hands the click to a
+ * router app through `onClick`.
+ */
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { cleanup, render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { Chip } from './Chip'
+
+afterEach(cleanup)
+
+describe('Chip', () => {
+  it('is not a link without href', () => {
+    render(<Chip label="Group" />)
+    expect(screen.queryByRole('link')).toBeNull()
+    expect(screen.getByText('Group').parentElement?.tagName).toBe('DIV')
+  })
+
+  it('with href is an anchor named by its label, round, and lifted above a covering link', () => {
+    render(<Chip label="Group" href="/groups/one" />)
+    const link = screen.getByRole('link', { name: 'Group' })
+    expect(link.getAttribute('href')).toBe('/groups/one')
+    expect(link.classList.contains('rounded-full')).toBe(true)
+    expect(link.classList.contains('relative')).toBe(true)
+  })
+
+  it('a router app takes the click through onClick', async () => {
+    const onClick = vi.fn((event: { preventDefault: () => void }) => event.preventDefault())
+    render(<Chip label="Group" href="/groups/one" onClick={onClick} />)
+    await userEvent.click(screen.getByRole('link', { name: 'Group' }))
+    expect(onClick).toHaveBeenCalledTimes(1)
+  })
+})

package/src/Chip.tsx

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react'
+import type { MouseEventHandler, ReactNode } from 'react'
 import { cn } from './cn'
 import { CHIP_TEXT_CLASSES } from './looks'
 
@@ -20,6 +20,14 @@ export interface ChipProps {
   label?: string
   leadingIcon?: ReactNode
   trailingIcon?: ReactNode
+  /**
+   * The chip is a link: a real anchor with the chip's own round shape, so the
+   * keyboard ring is round too. It sits above a row's covering `Link`, so the
+   * row opens one thing and the chip another (UIG-33, Katerina 28 September).
+   */
+  href?: string
+  /** With `href`: a router app takes the click here, like `Link`. */
+  onClick?: MouseEventHandler<HTMLAnchorElement>
   className?: string
 }
 
@@ -32,9 +40,10 @@ const typeStyles: Record<ChipType, string> = {
   error: 'bg-error-muted text-error-default signal:border signal:border-error-outline',
 }
 
-export function Chip({ type = 'neutral', label, leadingIcon, trailingIcon, className }: ChipProps) {
-  return (
-    <div className={cn('inline-flex min-w-0 items-center justify-center gap-1.5 rounded-full max-h-[20px] px-2 py-1', typeStyles[type], className)}>
+export function Chip({ type = 'neutral', label, leadingIcon, trailingIcon, href, onClick, className }: ChipProps) {
+  const classes = cn('inline-flex min-w-0 items-center justify-center gap-1.5 rounded-full max-h-[20px] px-2 py-1', typeStyles[type], className)
+  const inside = (
+    <>
       {leadingIcon && <span className="flex size-3 shrink-0 items-center justify-center">{leadingIcon}</span>}
       {label && (
         // A chip given a `max-w-*` cuts a long label with an ellipsis instead
@@ -48,6 +57,9 @@ export function Chip({ type = 'neutral', label, leadingIcon, trailingIcon, class
         <span className={cn('min-w-0 overflow-x-clip text-ellipsis whitespace-nowrap signal:tracking-wide', CHIP_TEXT_CLASSES)}>{label}</span>
       )}
       {trailingIcon && <span className="flex size-3 shrink-0 items-center justify-center">{trailingIcon}</span>}
-    </div>
+    </>
   )
+  // `relative` lifts a linked chip above a covering link that comes before it.
+  if (href) return <a href={href} onClick={onClick} className={cn('relative', classes)}>{inside}</a>
+  return <div className={classes}>{inside}</div>
 }

package/src/Link.mdx

@@ -24,6 +24,11 @@ the app decides how it navigates.
   what it wraps draws itself.
 - `external` — another site or app: it opens in a new tab, with
   `noopener noreferrer`.
+- **`cover`** — a row that opens one thing wherever you click it: an item in a
+  list, a row of a table. The link covers the row, and the keyboard ring goes
+  round the whole row.
+
+<Canvas of={LinkStories.Cover} />
 
 ## When not
 
@@ -33,6 +38,13 @@ the app decides how it navigates.
 - A link that looks like an icon button → **IconButton** with `href`.
 - A word standing for a person or a thing, drawn in a small box → **InlineChip**
   with `href`.
+- A box that is one link → **Card** with `href`. `cover` is for a row that has
+  no frame of its own.
+- `cover` on a row whose parts each open something different, or a row with
+  nothing to open. A row with only a second link inside it (a chip, say) is
+  fine: see How.
+- Stretching a link over its row by hand (`after:absolute`): the lint refuses
+  it. Use `cover`.
 
 ## How
 
@@ -59,6 +71,26 @@ import { Link } from '@estiva-app/ui'
 
 - `truncate` keeps a title that is a link on one line, cut with an ellipsis.
   Its size and colour still come from the text around it.
+
+- `cover` covers the nearest box that is `relative`: give the row `relative`.
+  The row keeps its own size, fill and hover; the link only adds the layer
+  and the ring. Pointing anywhere on the row counts as pointing at the link,
+  so `quiet` underlines the title while the row is hovered.
+- A second link inside the row comes **after** the covering link and is
+  `relative` itself, so it sits above the layer. A **Chip** with `href` already
+  is.
+
+```tsx
+<div className="relative flex h-9 items-center gap-3 px-3 hover:bg-bg-hover">
+  <Link href={itemUrl} variant="plain" cover onClick={navigate}>Item one</Link>
+  <Chip href={groupUrl} label="Group" onClick={navigate} />
+</div>
+
+<tr className="relative">
+  <td><Link href={itemUrl} variant="quiet" cover>Item one</Link></td>
+  <td>…</td>
+</tr>
+```
 - `quiet`, `underlined` and `plain` take their size and colour from where they
   sit, so put those on your own element around the link, not on the link —
   the lint refuses a look passed in `className`.

package/src/Link.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
 import { Link } from './Link'
 import { Card } from './Card'
+import { Chip } from './Chip'
 
 const meta = {
   title: 'Navigation/Link',
@@ -70,6 +71,54 @@ export const External: Story = {
   ),
 }
 
+const ROWS = [
+  { key: 'A-1', title: 'Item one', group: 'Group', time: '2h' },
+  { key: 'A-2', title: 'Item two', group: 'Group', time: '1d' },
+  { key: 'A-3', title: 'Item three', time: '3d' },
+]
+
+/**
+ * A row that is one link: click anywhere on it, or Tab to it and the ring goes
+ * round the whole row. The chip is a second link, and opens something else.
+ */
+export const Cover: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="flex w-full max-w-xl flex-col">
+      {ROWS.map((row) => (
+        <div key={row.key} className="relative flex h-9 items-center gap-3 rounded-md px-3 transition-colors hover:bg-bg-hover">
+          <Link href="#" variant="plain" cover className="flex min-w-0 flex-1 items-center gap-3">
+            <span className="w-10 shrink-0 font-mono text-caption text-text-muted">{row.key}</span>
+            <span className="min-w-0 flex-1 truncate text-body-2 text-text-primary">{row.title}</span>
+          </Link>
+          {row.group && <Chip href="#" label={row.group} />}
+          <span className="w-8 shrink-0 text-right text-caption text-text-muted">{row.time}</span>
+        </div>
+      ))}
+    </div>
+  ),
+}
+
+/** The same in a table: the row is `relative`, the title a `quiet` link that covers it. */
+export const CoverInTable: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <table className="w-full max-w-xl text-body-2">
+      <tbody>
+        {ROWS.map((row) => (
+          <tr key={row.key} className="relative border-b border-border-subtle last:border-b-0 hover:bg-bg-hover">
+            <td className="w-14 px-3 py-2 font-mono text-caption text-text-muted">{row.key}</td>
+            <td className="px-3 py-2 text-text-primary">
+              <Link href="#" variant="quiet" cover>{row.title}</Link>
+            </td>
+            <td className="w-16 px-3 py-2 text-right text-caption text-text-muted">{row.time}</td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  ),
+}
+
 /** The four looks, each where it belongs. */
 export const AllVariants: Story = {
   parameters: { controls: { disable: true } },

package/src/Link.test.tsx

@@ -88,6 +88,21 @@ describe('Link', () => {
     expect(classesOf(screen.getByRole('link'))).toEqual([])
   })
 
+  it('cover lays a layer over the row and moves the ring onto it; without it, nothing of the kind', () => {
+    render(
+      <>
+        <Link href="#" variant="plain" cover>
+          Row
+        </Link>
+        <Link href="#" variant="plain">
+          Words
+        </Link>
+      </>,
+    )
+    expect(classesOf(screen.getByRole('link', { name: 'Row' }))).toEqual(['after:absolute', 'after:inset-0', 'after:rounded-md', 'focus-visible:outline-none', 'focus-visible:after:[outline-style:auto]'])
+    expect(classesOf(screen.getByRole('link', { name: 'Words' }))).toEqual([])
+  })
+
   it('a ref reaches the anchor', () => {
     const ref = createRef<HTMLAnchorElement>()
     render(

package/src/Link.tsx

@@ -18,6 +18,15 @@ import { cn } from './cn'
  *   and a solid version became this one, solid (her ruling, 13 September).
  * - `plain` — no look at all: a card or a row that is a link draws itself.
  *
+ * **`cover`: a row that is one link** (UIG-33, Katerina 28 September). The link
+ * stretches an invisible layer over the nearest box the app has given
+ * `relative` (a row, a table row), so a click anywhere on it opens the link, and
+ * the keyboard ring goes round that whole box rather than round the words. The
+ * row stays the app's own: its size, its fill, its hover. A second link inside
+ * the row stays clickable when it comes after the covering link and is
+ * `relative` itself, which a `Chip` with an `href` already is. Both apps
+ * stretched a link by hand before this, each under a written exception.
+ *
  * **Navigation is the app's.** The package cannot know a router, so like
  * `NavItem` it renders a real anchor and passes every anchor prop through: a
  * router app hands in `onClick`, prevents the default and navigates, and the
@@ -25,6 +34,13 @@ import { cn } from './cn'
  */
 export type LinkVariant = 'text' | 'quiet' | 'underlined' | 'plain'
 
+/**
+ * The covering layer, and the ring moved onto it: `outline-none` takes the ring
+ * off the words, and `outline-style: auto` draws the browser's own ring round the
+ * layer, the same ring every other control shows, only the size of the row.
+ */
+const COVER_CLASSES = 'after:absolute after:inset-0 after:rounded-md focus-visible:outline-none focus-visible:after:[outline-style:auto]'
+
 const VARIANT_CLASSES: Record<LinkVariant, string> = {
   text: 'text-info-default underline underline-offset-2 hover:opacity-80',
   quiet: 'hover:underline',
@@ -46,15 +62,20 @@ export interface LinkProps extends ComponentPropsWithRef<'a'> {
    * Its size and colour still come from the text around it (UIG-9, 17 September).
    */
   truncate?: boolean
+  /**
+   * The link covers the row it sits in: a click anywhere on the row opens it,
+   * and the keyboard ring goes round the whole row. Give the row `relative`.
+   */
+  cover?: boolean
   children: ReactNode
 }
 
-export function Link({ href, variant = 'text', external = false, truncate = false, className, children, ...props }: LinkProps) {
+export function Link({ href, variant = 'text', external = false, truncate = false, cover = false, className, children, ...props }: LinkProps) {
   return (
     <a
       href={href}
       {...(external ? { target: '_blank', rel: 'noopener noreferrer' } : {})}
-      className={cn(VARIANT_CLASSES[variant], truncate && 'truncate', className)}
+      className={cn(VARIANT_CLASSES[variant], truncate && 'truncate', cover && COVER_CLASSES, className)}
       {...props}
     >
       {children}

package/src/eslint/index.test.ts

@@ -139,7 +139,7 @@ describe('an app lint with configs.recommended', () => {
       [
         'estiva/no-restyled-part',
         2,
-        '`text-h2` on `Link` changes how it looks. A part of @estiva-app/ui is placed from outside, never restyled: only space, size, flex and grid, and position pass in. Use its `variant` or `truncate`. A look for what is around it goes on your own element around it.',
+        '`text-h2` on `Link` changes how it looks. A part of @estiva-app/ui is placed from outside, never restyled: only space, size, flex and grid, and position pass in. Use its `variant`, `truncate` or `cover`. A look for what is around it goes on your own element around it.',
       ],
     ])
   })

package/src/eslint/no-restyled-part.test.ts

@@ -115,7 +115,7 @@ tester.run('no-restyled-part', noRestyledPart, {
       name: 'a look behind a variant, and an extra layer',
       filename: app,
       code: ui('Link', '    <Link href="/x" className="signal:hover:bg-success-muted after:absolute [&>*]:shrink-0">x</Link>'),
-      errors: [{ message: restyled('`signal:hover:bg-success-muted` `after:absolute` `[&>*]:shrink-0`', '`Link`', ' Use its `variant` or `truncate`.') }],
+      errors: [{ message: restyled('`signal:hover:bg-success-muted` `after:absolute` `[&>*]:shrink-0`', '`Link`', ' Use its `variant`, `truncate` or `cover`.') }],
     },
     {
       name: 'an inner box’s class prop',
@@ -184,7 +184,7 @@ tester.run('no-restyled-part', noRestyledPart, {
       name: 'a wrapper declared in the same file',
       filename: app,
       code: "import { Link, type LinkProps } from '@estiva-app/ui'\nfunction RouterLink({ href, ...props }: LinkProps) {\n  return <Link href={href} {...props} />\n}\nexport function Probe() {\n  return <RouterLink href=\"/x\" className=\"text-h5\">x</RouterLink>\n}\n",
-      errors: [{ message: restyled('`text-h5`', '`RouterLink` (it hands its props to `Link`)', ' Use its `variant` or `truncate`.') }],
+      errors: [{ message: restyled('`text-h5`', '`RouterLink` (it hands its props to `Link`)', ' Use its `variant`, `truncate` or `cover`.') }],
     },
     {
       name: 'EmptyState padded directly',
@@ -196,19 +196,19 @@ tester.run('no-restyled-part', noRestyledPart, {
       name: 'an escape with no reason is reported, and so is the class',
       filename: app,
       code: ui('Link', '    // @estiva-escape(no-restyled-part):\n    <Link href="/x" className="text-h2">x</Link>'),
-      errors: [{ messageId: 'escapeWithoutReason' }, { message: restyled('`text-h2`', '`Link`', ' Use its `variant` or `truncate`.') }],
+      errors: [{ messageId: 'escapeWithoutReason' }, { message: restyled('`text-h2`', '`Link`', ' Use its `variant`, `truncate` or `cover`.') }],
     },
     {
       name: 'inside the package: a part imported from a sibling',
       filename: pkg,
       code: local('Link', './Link', '    <Link href="/x" className="rounded-lg border">x</Link>'),
-      errors: [{ message: restyled('`rounded-lg` `border`', '`Link`', ' Use its `variant` or `truncate`.') }],
+      errors: [{ message: restyled('`rounded-lg` `border`', '`Link`', ' Use its `variant`, `truncate` or `cover`.') }],
     },
     {
       name: 'inside the package: a part used in the file that declares it',
       filename: pkg,
       code: 'export function Link() {\n  return null\n}\nexport function Probe() {\n  return <Link className="text-caption" />\n}\n',
-      errors: [{ message: restyled('`text-caption`', '`Link`', ' Use its `variant` or `truncate`.') }],
+      errors: [{ message: restyled('`text-caption`', '`Link`', ' Use its `variant`, `truncate` or `cover`.') }],
     },
   ],
 })

package/src/eslint/no-restyled-part.ts

@@ -119,7 +119,7 @@ export const PART_LOOK_PROPS: Record<string, string[]> = {
   IconButton: ['variant', 'pressed', 'glow'],
   InputChip: ['truncate'],
   Kbd: ['tone'],
-  Link: ['variant', 'truncate'],
+  Link: ['variant', 'truncate', 'cover'],
   MenuItem: ['size', 'selected', 'destructive'],
   MenuSub: ['selected'],
   NavItem: ['active'],

package/src/gates/app-checks.ts

@@ -264,6 +264,20 @@ export function appChecks(h: GateHelpers, { app = '.', page, chain = { ref: 'UIG
         return own.length ? h.FAIL(`draws the text tree itself (${own.join(', ')}): pass the tree to RichText`) : h.PASS('formatted text is drawn by RichText only')
       } },
     ]),
+    // UIG-33, Katerina's picks of 28 September: a row that is one link is `Link` with `cover`, and a
+    // chip that is a link is `Chip` with `href`. Before, both apps stretched a link over its row by
+    // hand (`after:absolute`) and rounded a Link round a chip, each under an escape.
+    ticket('UIG-33', [
+      { what: 'the installed package has Link cover and Chip href', run: all(h, [
+        () => h.contains(at('node_modules/@estiva-app/ui/dist/Link.d.ts'), /\bcover\?: boolean/, 'the installed Link takes cover'),
+        () => h.contains(at('node_modules/@estiva-app/ui/dist/Chip.d.ts'), /\bhref\?: string/, 'the installed Chip takes href'),
+      ], 'the installed Link takes cover and Chip takes href') },
+      { what: 'no link is stretched over its row by hand', run: () => {
+        const sources = h.listFiles(at('src'), (n) => /\.tsx$/.test(n) && !/\.(test|stories)\.tsx$/.test(n))
+        const own = sources.filter((f) => /<(?:Link|a)\b[^>]*\bafter:(?:absolute|inset-0)\b/.test(h.read(f)))
+        return own.length ? h.FAIL(`stretches a link by hand (${own.join(', ')}): give the Link cover`) : h.PASS('every whole-row link is Link with cover')
+      } },
+    ]),
     // Katerina's ruling of 17 September (docs/GATES.md §23): one copy, in the package. An app made
     // by create-estiva-app passes this from its first commit; Peek and Ship do once UIG-32 lands.
     ticket('UIG-32', [

package/src/gates/create-app.test.ts

@@ -194,8 +194,13 @@ describe('a made app, under the checks every app runs', () => {
     const real = helpers(dir)
     // "The installed package exports Link" reads its declarations, which CI's
     // test step does not build (`pretest` bundles only): the same exports are read
-    // from their source when the declarations are not there.
-    const exportsFrom = (rel: string) => (rel.endsWith('dist/index.d.ts') && !real.exists(rel) ? join(process.cwd(), 'src', 'index.ts') : rel)
+    // from their source when the declarations are not there. A part's own props
+    // (UIG-33: `Link.d.ts`) are read from its source file the same way.
+    const exportsFrom = (rel: string) => {
+      const declared = rel.replace(/\\/g, '/').match(/dist\/(\w+)\.d\.ts$/)
+      if (!declared || real.exists(rel)) return rel
+      return declared[1] === 'index' ? join(process.cwd(), 'src', 'index.ts') : join(process.cwd(), 'src', `${declared[1]}.tsx`)
+    }
     const h: GateHelpers = {
       ...real,
       contains: (rel, needle, label) => real.contains(exportsFrom(rel), needle, label),