@nanisoft/prism-llms 0.4.0 → 0.5.1

package/dist/md/blocks/app-shell-01.md

@@ -0,0 +1,135 @@
+# AppShell01
+
+A navigation shell with a desktop rail, a top bar and a mobile navigation sheet.
+
+```tsx
+import { AppShell01 } from '@nanisoft/prism-ui/blocks/app-shell-01'
+```
+
+## Overview
+
+AppShell01 is the frame an application screen repeats: a navigation rail from
+the large breakpoint up, a top bar with a breadcrumb trail and actions, and a
+left-anchored sheet that carries the same navigation on narrow screens. The page
+content is a slot, so the shell never decides what a screen contains.
+
+The block composes these components:
+
+| Part | Component | Role |
+| --- | --- | --- |
+| Rail | Separator | the fixed navigation column and its dividers |
+| Top bar | Breadcrumb, Button | the trail and the sheet trigger |
+| Sheet | Dialog | the left drawer that holds navigation on small screens |
+| Content | children | the application-owned main region |
+
+The navigation is passed as a node rather than a route table. The block never
+imports a router and fetches nothing, so the application keeps its own links and
+data.
+
+## Guidelines
+
+### When to use
+
+Use AppShell01 when several screens share one navigation frame. It works when
+the navigation is stable across routes and the top bar carries the current
+location rather than a page's own controls.
+
+### When not to use
+
+Do not use it on a marketing page or a docs article. Those pages have no
+authenticated navigation rail, and the frame would collapse around content that
+does not need it.
+
+Do not use it for a single screen. One page does not justify a shell; render the
+navigation directly.
+
+### Best practices
+
+- Pass the same navigation node to both the rail and the sheet. The block
+  renders it twice, so keep ids in the navigation unique or avoid ids there.
+- Keep the breadcrumb to the ancestors and the current page. The page's own
+  title belongs in the page header, not the top bar.
+- Put account controls, a theme switch or a search in `actions`.
+- Give the shell a real `navigationLabel`: it names two navigation landmarks
+  and the sheet trigger, and it is the only required string.
+
+### Content guidelines
+
+- A brand mark is a wordmark or a short product name, not a headline.
+- A breadcrumb label is the destination's display name.
+- `navigationLabel` names the area for assistive technology, such as "Primary".
+
+**The application shell with a rail, a top bar and a mobile navigation sheet.**
+
+```tsx
+'use client'
+
+import { AppShell01 } from '@nanisoft/prism-ui/blocks/app-shell-01'
+
+const LINKS = [
+  { href: '#dashboard', label: 'Dashboard', current: true },
+  { href: '#projects', label: 'Projects', current: false },
+  { href: '#team', label: 'Team', current: false },
+]
+
+/** The application shell with a rail, a top bar and a mobile navigation sheet. */
+export default function AppShell01Demo() {
+  return (
+    <AppShell01
+      navigationLabel="Primary"
+      brand={<span className="text-sm font-semibold">Northwind</span>}
+      breadcrumbs={[
+        { label: 'Dashboard', href: '#dashboard' },
+        { label: 'Projects' },
+      ]}
+      actions={
+        <span className="bg-muted text-muted-foreground rounded-full px-3 py-1 text-xs font-medium">
+          AR
+        </span>
+      }
+      navigation={
+        <ul className="flex flex-col gap-1 text-sm">
+          {LINKS.map((link) => (
+            <li key={link.href}>
+              <a
+                href={link.href}
+                className={
+                  link.current
+                    ? 'bg-accent text-accent-foreground block rounded-md px-3 py-2 font-medium'
+                    : 'text-muted-foreground hover:text-foreground block rounded-md px-3 py-2'
+                }
+              >
+                {link.label}
+              </a>
+            </li>
+          ))}
+        </ul>
+      }
+    >
+      <div className="border-border rounded-xl border border-dashed p-6">
+        <h3 className="font-semibold">Main content</h3>
+        <p className="text-muted-foreground mt-1 text-sm">
+          The shell owns the frame; the application owns this region.
+        </p>
+      </div>
+    </AppShell01>
+  )
+}
+```
+
+## Props
+
+**`navigation`** `ReactNode` · required · default: — — The navigation rendered in the desktop rail and in the mobile sheet. Pass nodes rather than a route table: the block never imports a router.
+**`navigationLabel`** `string` · required · default: — — The accessible name for the navigation regions and the sheet trigger.
+**`brand`** `ReactNode` · optional · default: — — The brand or product mark at the top of the rail and the sheet.
+**`breadcrumbs`** `AppShellCrumb[]` · optional · default: — — The trail shown in the top bar.
+**`actions`** `ReactNode` · optional · default: — — Actions at the end of the top bar, e.g. an account menu.
+**`railHeader`** `ReactNode` · optional · default: — — A slot above the navigation, e.g. a workspace switcher.
+**`railFooter`** `ReactNode` · optional · default: — — A slot below the navigation, e.g. a user menu.
+**`children`** `ReactNode` · required · default: —
+
+## Composition
+
+**`exports`** `AppShell01` — the public runtime names this Block promises
+**`source`** `packages/ui/src/blocks/app-shell-01/index.tsx` — the file this Block is defined in
+**`dependencies`** `Breadcrumb, Button, Dialog, Separator` — the public Prism exports this item composes

package/dist/md/blocks/auth-form-01.md

@@ -0,0 +1,135 @@
+# AuthForm01
+
+A sign-in card with labelled credential fields, a remember control and an error slot.
+
+```tsx
+import { AuthForm01 } from '@nanisoft/prism-ui/blocks/auth-form-01'
+```
+
+## Overview
+
+AuthForm01 is a sign-in card: a title, a supporting line, an error slot, the
+credential fields, an optional remember row and the submit control.
+
+The block composes these components:
+
+| Part | Component | Role |
+| --- | --- | --- |
+| Surface | Card | the panel that centres the form |
+| Fields | Field, Input | labelled email and password controls |
+| Choices | Checkbox | the remember-me row |
+| Feedback | Alert | the error message above the fields |
+| Submit | Button | the one action on the card |
+
+The block owns no credentials and makes no request. Each field value and the
+submit handler come from the consumer, and the error line is a prop, so the
+consumer's validation decides when it appears.
+
+## Guidelines
+
+### When to use
+
+Use AuthForm01 for a sign-in or a similar single-step credential screen. It
+works when the screen exists to collect one email and one secret and send them
+somewhere.
+
+### When not to use
+
+Do not use it for registration, password reset or profile editing. Those have
+different field sets; compose a form from the same parts.
+
+Do not use it for an account picker or single sign-on landing; that is a
+different shape, and `footer` is not the place for it.
+
+### Best practices
+
+- Set `type`, `autoComplete` and `required` on every field. Browsers use them to
+  fill and validate, so the typing is the whole reason the field is typed.
+- Keep the error to one sentence and mark the failed fields. The Alert names the
+  problem; `aria-invalid` on each input is what a screen reader announces.
+- Disable the submit control while `pending` and pass `pendingLabel`, so the
+  reader sees that work is happening.
+
+### Content guidelines
+
+- The title is a short verb phrase in sentence case: "Sign in", "Continue".
+- The description states the outcome, not a policy.
+- An error says what to do next: "Enter your email and password to continue."
+
+**A sign-in card with controlled fields and a submit-time error.**
+
+```tsx
+'use client'
+
+import { useState } from 'react'
+
+import { AuthForm01 } from '@nanisoft/prism-ui/blocks/auth-form-01'
+
+/** A sign-in card with controlled fields and a submit-time error. */
+export default function AuthForm01Demo() {
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [error, setError] = useState<string>()
+
+  return (
+    <AuthForm01
+      title="Sign in"
+      description="Welcome back. Enter your details to continue."
+      error={error}
+      submitLabel="Sign in"
+      fields={[
+        {
+          id: 'auth-email',
+          label: 'Email',
+          type: 'email',
+          autoComplete: 'email',
+          placeholder: 'you@example.com',
+          value: email,
+          onChange: setEmail,
+          required: true,
+        },
+        {
+          id: 'auth-password',
+          label: 'Password',
+          type: 'password',
+          autoComplete: 'current-password',
+          value: password,
+          onChange: setPassword,
+          required: true,
+        },
+      ]}
+      remember={{ id: 'auth-remember', label: 'Remember me for 30 days' }}
+      onSubmit={(event) => {
+        event.preventDefault()
+        setError(
+          email && password ? undefined : 'Enter your email and password to continue.',
+        )
+      }}
+      footer={
+        <p className="text-muted-foreground text-center text-sm">
+          No account yet? Create one.
+        </p>
+      }
+    />
+  )
+}
+```
+
+## Props
+
+**`title`** `string` · required · default: —
+**`description`** `string` · optional · default: —
+**`fields`** `AuthFormField[]` · required · default: — — The credential fields, in order.
+**`error`** `string` · optional · default: — — An error message shown above the fields and marked on each control.
+**`remember`** `AuthFormRemember` · optional · default: — — A remember-me row under the fields.
+**`submitLabel`** `string` · required · default: — — The submit button label.
+**`pendingLabel`** `string` · optional · default: — — The label shown while `pending` is true. Falls back to `submitLabel`.
+**`pending`** `boolean` · optional · default: — — Disables the submit control while a request is in flight.
+**`onSubmit`** `(event: FormEvent<HTMLFormElement>) => void` · optional · default: —
+**`footer`** `ReactNode` · optional · default: — — A row under the submit button, e.g. a link to another screen.
+
+## Composition
+
+**`exports`** `AuthForm01` — the public runtime names this Block promises
+**`source`** `packages/ui/src/blocks/auth-form-01/index.tsx` — the file this Block is defined in
+**`dependencies`** `Alert, Button, Card, Checkbox, Field, Input` — the public Prism exports this item composes

package/dist/md/blocks/cta-01.md

@@ -0,0 +1,88 @@
+# Cta01
+
+A closing call to action on a filled primary surface.
+
+```tsx
+import { Cta01 } from '@nanisoft/prism-ui/blocks/cta-01'
+```
+
+## Overview
+
+Cta01 is the closing band of a page: a headline, an optional supporting line and
+one action, on a filled primary surface. It is the last thing a reader sees, so
+it carries exactly one decision.
+
+The copy and the action are props. The block previously shipped the library's
+own pitch, which described the library rather than whatever product installed
+it.
+
+## Guidelines
+
+### When to use
+
+Use Cta01 at the end of a marketing page, after the reader has seen the product
+and is ready to act. It works when there is one clear next step.
+
+### When not to use
+
+Do not use it more than once on a page. A second closing band tells the reader
+the page ended twice.
+
+Do not use it inside an application screen. Its filled surface is a marketing
+emphasis, and inside a task flow it competes with the working surface.
+
+Do not use it when the action is a download or an external link with no landing
+page. The band promises a next step; the action must deliver one.
+
+### Best practices
+
+- Keep the description optional and short. The headline and the action carry the
+  band.
+- Use one action. This block takes a single action object rather than a list,
+  because two equal choices at the end of a page cancel each other out.
+- Set `headingLevel` to match the page outline, and leave the default when the
+  band is composed under a heading the page already owns.
+- Keep the headline shorter than the hero's. The reader has already read the
+  page; the closing line reminds rather than introduces.
+
+### Content guidelines
+
+- The headline states the next step, not a repeat of the page title.
+- The description adds one concrete detail: what the reader gets, or what it
+  costs.
+- The action label is verb-first and sentence case: "Read the guides", "Start
+  free".
+
+**The closing band, with one action.**
+
+```tsx
+import { Cta01 } from '@nanisoft/prism-ui/blocks/cta-01'
+
+/** The closing band, with one action. */
+export default function Cta01Demo() {
+  return (
+    <Cta01
+      headingLevel="h3"
+      title="A closing line, two lines at most"
+      description="A sentence that says what happens next, then one action."
+      action={{ label: 'Do the thing', href: '/components/button' }}
+    />
+  )
+}
+```
+
+## Props
+
+**`title`** `string` · required · default: —
+**`description`** `string` · optional · default: —
+**`action`** `Cta01Action` · optional · default: — — The one action this band carries. Omit it for a closing statement that asks for nothing, and use `actionSlot` for a control that is not a call to action.
+**`actionSlot`** `ReactNode` · optional · default: — — A slot for a control the block does not own, such as a client router's link or a menu. This is what a call to action with no destination becomes: a slot the consumer fills, rather than a control the block renders and cannot make work.
+**`secondaryAction`** `Cta01Action` · optional · default: — — The second action, rendered beside the first at outline weight. It is a prop rather than a second `action` array because `action` is the one this Block styles as the closing ask and a second action in the same weight is two closing asks; a reader who has to choose between two equally-weighted buttons has been given a menu where a page wanted a decision. Three of the four NaniSoft sites render two actions in their closing band and all four do, and all four wrote the pair by hand, so each one re-decided the gap, the order and the weight between them.
+**`note`** `ReactNode` · optional · default: — — The line under the actions: the footnote, the caveat, the sentence that qualifies the ask. Three of the four sites render one, and each wrote it by hand. A `ReactNode` rather than a string because the honest line is sometimes not one sentence: three of the four carry a link inside it, and a string prop would force a caller to compose a paragraph to say "this is in development, here is where to watch it".
+**`headingLevel`** `HeadingLevel` · optional · default: — — Heading level for the headline. See `HeadingLevel`.
+
+## Composition
+
+**`exports`** `Cta01` — the public runtime names this Block promises
+**`source`** `packages/ui/src/blocks/cta-01/index.tsx` — the file this Block is defined in
+**`dependencies`** `CtaLink, Section` — the public Prism exports this item composes

package/dist/md/blocks/data-table-01.md

@@ -0,0 +1,196 @@
+# DataTable01
+
+A table section with a toolbar, filters, row selection and pagination.
+
+```tsx
+import { DataTable01 } from '@nanisoft/prism-ui/blocks/data-table-01'
+```
+
+## Overview
+
+DataTable01 is a table section for a paged collection: a toolbar, a search
+field, a filter popover, optional row selection, a per-row action menu and
+pagination. It renders the rows it is given and reports every interaction
+through a callback.
+
+The block composes these components:
+
+| Part | Component | Role |
+| --- | --- | --- |
+| Toolbar | Input, Button, DropdownMenu, Popover | search, filters, column visibility |
+| Grid | Table, Checkbox | the rows, with an optional selection column |
+| Row menu | DropdownMenu | the actions for one row |
+| Paging | Pagination, Button | the page window and the step controls |
+
+The block owns no data and does no filtering, sorting or fetching. The page
+number, the search text, the filter values and the selected ids are controlled
+props, so a server page or a client cache drives it by the same contract. When a
+controlled prop is omitted, that interaction falls back to internal state.
+
+## Guidelines
+
+### When to use
+
+Use DataTable01 for a collection a reader scans, compares and acts on. It earns
+its space when there is more than one column, a set that pages, and at least one
+of search, filters or row selection.
+
+### When not to use
+
+Do not use it for fewer than a dozen rows with no paging. A plain `Table` with a
+heading is lighter and reads the same.
+
+Do not hide the page's primary action in the row menu. Keep the main action on
+the screen and reserve the menu for secondary commands.
+
+### Best practices
+
+- Own the data at the call site. Filter and page there, and pass only the
+  current page in, so the table stays a view rather than a state store.
+- Give every row a stable `getRowId`. An index-based id loses the selection
+  when the page changes.
+- Pass every string in `labels`, and reset the page to one when the search or a
+  filter changes.
+
+### Content guidelines
+
+- A column header is a short noun: "Account", "Seats".
+- A row action is a verb phrase: "View details", "Rename", "Delete".
+
+**A data table wired to local state: search, filters, selection and paging.**
+
+```tsx
+'use client'
+
+import { useState } from 'react'
+
+import { Button } from '@nanisoft/prism-ui/components/button'
+import { DataTable01, type DataTableRow } from '@nanisoft/prism-ui/blocks/data-table-01'
+
+const ACCOUNTS: DataTableRow[] = [
+  { id: 'northwind', name: 'Northwind', plan: 'Team', status: 'Active', seats: '24' },
+  { id: 'contoso', name: 'Contoso', plan: 'Business', status: 'Active', seats: '86' },
+  { id: 'fabrikam', name: 'Fabrikam', plan: 'Team', status: 'Paused', seats: '12' },
+  { id: 'adventure', name: 'Adventure Works', plan: 'Starter', status: 'Active', seats: '4' },
+  { id: 'litware', name: 'Litware', plan: 'Business', status: 'Active', seats: '140' },
+  { id: 'proseware', name: 'Proseware', plan: 'Starter', status: 'Paused', seats: '7' },
+]
+
+const PAGE_SIZE = 3
+
+/** A data table wired to local state: search, filters, selection and paging. */
+export default function DataTable01Demo() {
+  const [query, setQuery] = useState('')
+  const [filters, setFilters] = useState<Record<string, string | undefined>>({})
+  const [selected, setSelected] = useState<string[]>([])
+  const [page, setPage] = useState(1)
+
+  const filtered = ACCOUNTS.filter((row) => {
+    const matchesQuery = String(row.name).toLowerCase().includes(query.toLowerCase())
+    const matchesStatus = !filters.status || row.status === filters.status
+    return matchesQuery && matchesStatus
+  })
+  const pageCount = Math.max(1, Math.ceil(filtered.length / PAGE_SIZE))
+  const pageRows = filtered.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE)
+
+  return (
+    <DataTable01
+      title="Accounts"
+      description="Every workspace you can manage."
+      columns={[
+        { id: 'name', header: 'Account', label: 'Account', cell: (row) => String(row.name) },
+        { id: 'plan', header: 'Plan', label: 'Plan', cell: (row) => String(row.plan) },
+        { id: 'status', header: 'Status', label: 'Status', cell: (row) => String(row.status) },
+        {
+          id: 'seats',
+          header: 'Seats',
+          label: 'Seats',
+          className: 'text-right',
+          cell: (row) => String(row.seats),
+        },
+      ]}
+      rows={pageRows}
+      getRowId={(row) => String(row.id)}
+      selectable
+      selectedIds={selected}
+      onSelectedIdsChange={setSelected}
+      searchValue={query}
+      onSearchChange={(value) => {
+        setQuery(value)
+        setPage(1)
+      }}
+      filters={[
+        {
+          id: 'status',
+          label: 'Status',
+          options: [
+            { label: 'Active', value: 'Active' },
+            { label: 'Paused', value: 'Paused' },
+          ],
+        },
+      ]}
+      filterValues={filters}
+      onFilterChange={(id, value) => {
+        setFilters((previous) => ({ ...previous, [id]: value }))
+        setPage(1)
+      }}
+      page={page}
+      pageCount={pageCount}
+      onPageChange={setPage}
+      rowActions={() => [
+        { label: 'View details' },
+        { label: 'Rename' },
+        { label: 'Delete', variant: 'destructive' },
+      ]}
+      toolbarActions={<Button size="sm">New account</Button>}
+      labels={{
+        search: 'Search accounts',
+        filters: 'Filters',
+        reset: 'Reset filters',
+        columns: 'Columns',
+        viewColumns: 'View',
+        selectAll: 'Select every account on this page',
+        selectRow: 'Select this account',
+        rowActions: 'Account actions',
+        previous: 'Previous',
+        next: 'Next',
+        page: (value) => `Go to page ${value}`,
+        selectedCount: (count) => `${count} selected`,
+        empty: 'No accounts match the current search and filters.',
+      }}
+    />
+  )
+}
+```
+
+## Props
+
+**`title`** `ReactNode` · optional · default: —
+**`description`** `ReactNode` · optional · default: —
+**`columns`** `DataTableColumn[]` · required · default: —
+**`rows`** `DataTableRow[]` · required · default: — — The rows for the current page. The block renders them; it never fetches.
+**`getRowId`** `(row: DataTableRow) => string` · required · default: — — Returns a stable identity for a row.
+**`caption`** `ReactNode` · optional · default: — — Names the table for assistive technology when no heading does.
+**`selectable`** `boolean` · optional · default: — — Adds the selection column and the selection summary.
+**`selectedIds`** `string[]` · optional · default: —
+**`defaultSelectedIds`** `string[]` · optional · default: —
+**`onSelectedIdsChange`** `(ids: string[]) => void` · optional · default: —
+**`searchValue`** `string` · optional · default: —
+**`onSearchChange`** `(value: string) => void` · optional · default: —
+**`filters`** `DataTableFilter[]` · optional · default: —
+**`filterValues`** `Record<string, string | undefined>` · optional · default: —
+**`onFilterChange`** `(id: string, value: string | undefined) => void` · optional · default: —
+**`page`** `number` · optional · default: — — The current page, 1-based.
+**`defaultPage`** `number` · optional · default: —
+**`pageCount`** `number` · required · default: — — How many pages exist. At least 1.
+**`onPageChange`** `(page: number) => void` · optional · default: —
+**`rowActions`** `(row: DataTableRow) => DataTableRowAction[]` · optional · default: — — The per-row action menu. Return an empty array to omit the menu.
+**`toolbarActions`** `ReactNode` · optional · default: — — Controls rendered at the end of the toolbar, e.g. a create Button.
+**`emptyMessage`** `ReactNode` · optional · default: — — Replaces the fallback empty line.
+**`labels`** `DataTable01Labels` · required · default: —
+
+## Composition
+
+**`exports`** `DataTable01` — the public runtime names this Block promises
+**`source`** `packages/ui/src/blocks/data-table-01/index.tsx` — the file this Block is defined in
+**`dependencies`** `Button, Checkbox, DropdownMenu, Input, Pagination, Popover, Table` — the public Prism exports this item composes

package/dist/md/blocks/feature-grid-01.md

@@ -0,0 +1,92 @@
+# FeatureGrid01
+
+A feature grid with optional icon tiles and a section heading.
+
+```tsx
+import { FeatureGrid01 } from '@nanisoft/prism-ui/blocks/feature-grid-01'
+```
+
+## Overview
+
+FeatureGrid01 is a grid of short feature blurbs under an optional section
+heading. Each feature carries an icon, a title and a body, and the whole list is
+a prop.
+
+The `variant` prop chooses between `icon` tiles and a bare `bare` layout that
+leans on the type alone. The list was previously hardcoded, which meant an
+installed block argued for the library inside the consumer's product; it is a
+prop now.
+
+## Guidelines
+
+### When to use
+
+Use FeatureGrid01 to summarise a small set of peer features whose blurbs are
+short. It reads best with two to four items, and it aligns to two columns from
+the `sm` breakpoint.
+
+### When not to use
+
+Do not use it for a list that is actually a set of steps. Order matters in a
+process, and a grid communicates that order does not.
+
+Do not use it for long descriptions. A body longer than two sentences turns the
+grid into a wall of text; use separate sections instead.
+
+Do not use the `icon` variant when the icons are decorative and unrelated. Use
+`variant="bare"` so the type carries the structure.
+
+### Best practices
+
+- Keep every body to the same approximate length so the tiles stay the same
+  height and a reader can scan the column edges.
+- Use two to four features. Five items leave one orphan on its own row unless the
+  grid is full-bleed.
+- Pass a `title` only when the section needs a heading. The grid renders
+  without one, which is correct when the surrounding page already introduces it.
+- Keep icons from `lucide-react` and give each one a distinct silhouette, so the
+  tiles are distinguishable at a glance.
+
+### Content guidelines
+
+- A feature title is two or three words in sentence case.
+- A feature body is one sentence and states what the feature does for the
+  reader, not how it is implemented.
+- Do not repeat the section description in a feature body.
+
+**The feature grid with four neutral placeholder features.**
+
+```tsx
+import { Blocks, Palette, ShieldCheck, Zap } from 'lucide-react'
+
+import { FeatureGrid01 } from '@nanisoft/prism-ui/blocks/feature-grid-01'
+
+/** The feature grid with four neutral placeholder features. */
+export default function FeatureGrid01Demo() {
+  return (
+    <FeatureGrid01
+      headingLevel="h3"
+      eyebrow="Preview"
+      title="Section heading"
+      description="An optional line that explains what the set below it has in common."
+      features={[
+        { icon: Palette, title: 'First item', body: 'A short sentence describing the first thing in the set.' },
+        { icon: Blocks, title: 'Second item', body: 'A short sentence describing the second thing in the set.' },
+        { icon: Zap, title: 'Third item', body: 'A short sentence describing the third thing in the set.' },
+        { icon: ShieldCheck, title: 'Fourth item', body: 'A short sentence describing the fourth thing in the set.' },
+      ]}
+    />
+  )
+}
+```
+
+## Props
+
+**`variant`** `'icon'` · optional · default: —
+**`features`** `IconFeature[]` · required · default: —
+
+## Composition
+
+**`exports`** `FeatureGrid01` — the public runtime names this Block promises
+**`source`** `packages/ui/src/blocks/feature-grid-01/index.tsx` — the file this Block is defined in
+**`dependencies`** `Card, Section` — the public Prism exports this item composes