[lablup-octodog]

Resolves #111

Summary

• Board renders each item's header row and description through a small BoardItemBody, which provides an item context (BoardItemContext, internal) to the description.
• When an item has no title, the first BoardItemTitle inside its description claims the header row and renders there through a portal: same .uic-board-item__title slot, so the same layout and drag-handle alignment as a title node. Further BoardItemTitles stay in the body, and the next one takes over if the first unmounts.
• New inline prop on BoardItemTitle keeps it in the body (e.g. a second section title).
• An item with neither a title nor a body title still renders no header row, so the content keeps the board's top padding.
• New export useIsInBoardItem(): true inside an item's description, false elsewhere (including the title node).
• A body title renders nothing until its claim settles (layout effect), so it mounts once, directly in its final place; it is never injected into items, so onItemsChange reports only what the consumer passed.
• Component docs (Board, BoardItemTitle), a TitleInDescription story and a CHANGELOG entry (### Added). No new strings.

Why

Consumers that build a dashboard card once (title row with help tooltip and actions, plus body) currently have to pass a placeholder title, portal their title row into it, hide an empty header with selectors on Board's private .uic-board-item__* classes, and strip the placeholder back out of onItemsChange. That CSS breaks silently whenever Board's DOM changes. With this change the card just renders a BoardItemTitle in its body and Board places it (#108). backend.ai-webui picks this up with the next @lablup/ui-common release and can then drop that workaround.

Test plan

• src/components/Board/Board.test.tsx → "Board item context": the hook is true only in the description; a body title renders in the header of an untitled item (heading, actions, nothing left in the body); it stays in the body when the item has a title or it is inline; only the first moves and the next takes over; the header row goes away with the title (also under StrictMode); moving items keeps one row, mounted once.
• src/components/BoardItemTitle/BoardItemTitle.test.tsx: renders in place outside a board, inline or not.
• Storybook: Components/Board → Title In Description. Each card's title row is in the header, on the drag handle's line; the "Details" title stays in the body (inline); move and resize items and check the rows don't duplicate.

Verification

dist/components/Board/Board2.js                                    20.48 kB │ gzip: 6.60 kB │ map: 63.16 kB
dist/index.js                                                      32.14 kB │ gzip: 8.94 kB

✓ built in 6.21s

$ node scripts/check-pack.mjs
Packed artifact clean: @lablup/ui-common 1181 file(s), 169 export path(s) resolve; @lablup/ui-common-cli 52 file(s), bin and imports resolve.
$ node scripts/check-integration.mjs && astryx integration verify
check:integration: @lablup/ui-common@0.2.0-alpha.20 validates with 0 errors, 0 warnings (72 docs type-checked)
Integration package ready

[ok] @lablup/ui-common@0.2.0-alpha.20

1181 packed files; 144/144 required files present.

[github-actions]

PR Analysis Report

📚 Storybook Preview

View Storybook for this PR

GitHub Pages may take up to a minute to hydrate after the deploy.

🧩 Changed Components

Component	Changed	Stories	Open
Board	source + stories	8	Storybook ↗
BoardItemTitle	source	4	Storybook ↗

1 other changed file(s) in src/

• src/index.ts

📦 Bundle Size

Group	Gzip	Δ Gzip vs base
components/Board	12.4 kB	+0.4 kB
index.js	8.7 kB	+0.0 kB
components/BoardItemTitle	0.8 kB	+0.2 kB

Total gzip (JS + CSS): 197.8 kB (+0.7 kB vs origin/main)

---

_{Generated by the PR Preview workflow for c2a5532 · Storybook · CI run}

[github-actions]

Preview published under the pr-113 dist-tag (npmjs): 0.2.0-alpha.20.pr-113-20261028080932-c2a55328f

pnpm add @lablup/ui-common@0.2.0-alpha.20.pr-113-20261028080932-c2a55328f
pnpm add -D @lablup/ui-common-cli@0.2.0-alpha.20.pr-113-20261028080932-c2a55328f

In backend.ai-webui: pnpm run ui-common:pin pr-113. A consumer PR pinned to a preview cannot merge; repin to canary after this PR merges.

[lablup-octodog]

Ready gate review — round 1

Reviewed 22c6c2b against main. Copilot was not run.

#	Tag	File:line	Finding	Outcome
O1	Important	src/components/Board/Board.tsx:1222	The header row's title node rendered inside the surrounding item context. When a Board is nested in another untitled item's description, a BoardItemTitle used as a nested item's title claimed the outer item's header and moved there through a portal, so the outer item showed two header rows and the nested item lost its title. It also made useIsInBoardItem() return true in that title node, though the docs say it is false there.	fixed c2a5532: the title node now renders under BoardItemContext.Provider value={null}; new test "keeps a nested board's item title in its own item" (fails without the fix).

The fix landed after this review and was not re-reviewed (5 changed lines in Board.tsx, plus a test). pnpm run verify passes at c2a5532.