noecosystem-design 0.2.3 → 0.4.0

package/README.md

@@ -100,8 +100,8 @@ Advanced Security are enabled in repository settings.
 CodeQL is similarly opt-in through `ENABLE_CODEQL=true`: first enable **Code
 Security** for this private repository in GitHub’s security settings, then set the
 variable. This avoids a misleading failed workflow when GitHub cannot accept SARIF
-uploads. The workflows use Node 24; the runner’s Node 20 deprecation notice does not
-require a compatibility override.
+uploads. The workflows configure Node 24 and use `actions/setup-node@v6`, whose
+action runtime is also Node 24.
 
 ## Architecture
 

package/apps/storybook/.storybook/preview.tsx

@@ -58,7 +58,7 @@ const preview: Preview = {
             data-locale={meta.locale}
             style={{
               minHeight: '100vh',
-              padding: '2rem',
+              padding: context.parameters.layout === 'fullscreen' ? 0 : '2rem',
               background: 'var(--noe-color-background)',
               color: 'var(--noe-color-foreground)',
             }}

package/apps/storybook/stories/catalog/app-frame.stories.tsx

@@ -1,7 +1,22 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { AppFrame } from '../../../../packages/ui/src/app-frame';
-import { ChartSquare, ReceiptSearch, WalletMoney } from '../../../../packages/icons/src';
+import { Breadcrumb, PageHeader } from '../../../../packages/ui/src/page-header';
+import { Button } from '../../../../packages/ui/src/button';
+import { HeaderNavigation } from '../../../../packages/ui/src/header-navigation';
+import { Input } from '../../../../packages/ui/src/input';
+import { Select } from '../../../../packages/ui/src/select';
+import { DataTable, type DataColumn } from '../../../../packages/data-ui/src/data-table';
+import { FilterBar } from '../../../../packages/data-ui/src/filter-bar';
+import {
+  Add,
+  BoxSearch,
+  ChartSquare,
+  ReceiptSearch,
+  Setting2,
+  WalletMoney,
+} from '../../../../packages/icons/src';
+import { NocfoLogo } from '../../../../packages/icons/src/nocfo-logo';
 import { SidebarNavigation } from '../../../../packages/ui/src/sidebar-navigation';
 
 const navigation = (
@@ -17,6 +32,7 @@ const navigation = (
         ],
       },
     ]}
+    wrapLabels
   />
 );
 
@@ -75,6 +91,196 @@ function FinanceAppFrameDemo() {
   );
 }
 
+type BankAccountRow = {
+  id: string;
+  bank: string;
+  company: string;
+  country: string;
+  branch: string;
+  code: string;
+  accountNumber: string;
+  iban: string;
+};
+
+const bankAccountColumns: DataColumn<BankAccountRow>[] = [
+  { key: 'bank', header: 'بانک / Bank', sortable: true },
+  { key: 'company', header: 'شرکت مالک / Owner Company', sortable: true },
+  { key: 'country', header: 'کشور / Country', sortable: true },
+  { key: 'branch', header: 'شعبه / Branch', sortable: true },
+  { key: 'code', header: 'کد حساب / Account Code', technical: true },
+  { key: 'accountNumber', header: 'شماره حساب / Account Number', technical: true },
+  { key: 'iban', header: 'شبا / IBAN', technical: true },
+];
+
+const bankAccountRows: BankAccountRow[] = [
+  {
+    id: '1',
+    bank: 'Emirates NBD',
+    company: 'بازرگانی امین برتر اقتصاد ملل',
+    country: 'امارات متحده عربی',
+    branch: 'Deira Branch',
+    code: 'ACC-AMIN-AED',
+    accountNumber: 'AE-ENBD-AED-1000006',
+    iban: 'AE5700001234567',
+  },
+  {
+    id: '2',
+    bank: 'Emirates NBD',
+    company: 'بازرگانی امین برتر اقتصاد ملل',
+    country: 'امارات متحده عربی',
+    branch: 'Deira Branch',
+    code: 'ACC-AMIN-USD',
+    accountNumber: 'AE-ENBD-USD-1000004',
+    iban: 'AE5600001234567',
+  },
+  {
+    id: '3',
+    bank: 'Ziraat Bankası',
+    company: 'ارمغان صنعت میلا',
+    country: 'ترکیه',
+    branch: 'Kadıköy Branch',
+    code: 'ARMAGHAN-EUR',
+    accountNumber: 'TR-ZIR-EUR-1000005',
+    iban: 'TR7600012345678',
+  },
+];
+
+const financeNavigation = (
+  <SidebarNavigation
+    className="text-sm"
+    label="ناوبری NOCFO"
+    sections={[
+      {
+        id: 'overview',
+        items: [{ href: '#overview', icon: <ChartSquare />, label: 'نمای کلی / Overview' }],
+      },
+      {
+        id: 'settings',
+        label: 'تنظیمات / Settings',
+        items: [
+          { href: '#companies', label: 'شرکت‌ها / Companies' },
+          { href: '#countries', label: 'کشورها / Countries' },
+          { href: '#banks', label: 'بانک‌ها / Banks' },
+          { href: '#accounts', label: 'حساب‌های بانکی / Bank Accounts', current: true },
+          { href: '#currencies', label: 'ارزها / Currencies' },
+          { href: '#transaction-types', label: 'نوع تراکنش / Transaction Types' },
+          { href: '#transaction-natures', label: 'ماهیت تراکنش‌ها / Transaction Natures' },
+          { href: '#descriptions', label: 'شرح‌های استاندارد / Standard Descriptions' },
+          { href: '#rates', label: 'نرخ تسعیر / Exchange Rates' },
+        ],
+      },
+      {
+        id: 'operations',
+        items: [
+          { href: '#operations', icon: <ReceiptSearch />, label: 'عملیات / Operations' },
+          { href: '#security', icon: <Setting2 />, label: 'امنیت / Security' },
+          { href: '#modules', icon: <WalletMoney />, label: 'زیرسیستم‌ها / Modules' },
+        ],
+      },
+    ]}
+  />
+);
+
+function NocfoBankAccountsWorkspace() {
+  return (
+    <div data-theme="dark" dir="rtl" lang="fa" style={{ height: '100dvh' }}>
+      <AppFrame
+        className="h-full min-h-0 overflow-hidden"
+        header={
+          <HeaderNavigation
+            actions={
+              <>
+                <Button size="sm" variant="outline">
+                  دوشنبه ۱۰ شهریور ۱۴۰۵
+                </Button>
+                <Select aria-label="سال مالی" defaultValue="1405" className="h-9">
+                  <option value="1405">سال مالی ۱۴۰۵–۱۴۰۶</option>
+                </Select>
+                <span className="hidden text-xs text-muted-foreground md:inline">
+                  fse.prepare@example.com / مدیر
+                </span>
+              </>
+            }
+            brand={<NocfoLogo style={{ inlineSize: '6.25rem' }} />}
+            className="bg-surface-sunken"
+            label="نوار ابزار NOCFO"
+          />
+        }
+        mobileNavigation={financeNavigation}
+        navigation={financeNavigation}
+        variant="finance"
+      >
+        <div className="flex min-w-0 flex-col gap-3">
+          <PageHeader
+            actions={
+              <Button variant="secondary">
+                <Add />
+                افزودن حساب بانکی / Add Bank Account
+              </Button>
+            }
+            breadcrumb={
+              <Breadcrumb
+                items={[
+                  { label: 'بانکداری شرکتی', href: '#corporate-banking' },
+                  { label: 'تنظیمات', href: '#settings' },
+                  { label: 'حساب‌های بانکی / Bank Accounts', current: true },
+                ]}
+              />
+            }
+            title="حساب‌های بانکی / Bank Accounts"
+          />
+          <FilterBar
+            filters={
+              <div className="grid w-full grid-cols-1 gap-2 sm:grid-cols-2 xl:grid-cols-4">
+                {[
+                  'شرکت مالک / Owner Company',
+                  'کشور',
+                  'بانک',
+                  'شعبه',
+                  'ارز پایه / Base Currency',
+                  'نوع حساب / Account Type',
+                  'کارگزار / عامل',
+                ].map((label) => (
+                  <Select aria-label={label} key={label} defaultValue="">
+                    <option value="">{label}</option>
+                  </Select>
+                ))}
+              </div>
+            }
+            label="فیلتر حساب‌های بانکی"
+            search={
+              <div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
+                <Input aria-label="جستجوی شماره حساب" placeholder="جستجوی شماره حساب" />
+                <Input aria-label="جستجوی شبا" placeholder="جستجوی IBAN / شبا" />
+              </div>
+            }
+          />
+          <section
+            className="min-w-0 rounded-lg bg-surface p-3"
+            aria-label="ابزار و جدول حساب‌های بانکی"
+          >
+            <div className="mb-3 flex items-center gap-2">
+              <BoxSearch className="size-4 text-muted-foreground" />
+              <Input
+                aria-label="جستجو در حساب‌های بانکی"
+                className="ms-auto max-w-sm"
+                placeholder="جستجو در حساب‌های بانکی / Search accounts"
+              />
+            </div>
+            <DataTable
+              caption="حساب‌های بانکی"
+              columns={bankAccountColumns}
+              density="compact"
+              empty={<span>حساب بانکی پیدا نشد</span>}
+              rows={bankAccountRows}
+            />
+          </section>
+        </div>
+      </AppFrame>
+    </div>
+  );
+}
+
 const meta = {
   title: 'Catalog/Patterns/Pages/App Frame',
   component: AppFrameDemo,
@@ -88,3 +294,9 @@ export const Default: Story = {};
 export const Finance: Story = {
   render: () => <FinanceAppFrameDemo />,
 };
+
+export const NocfoBankAccounts: Story = {
+  name: 'Template — NOCFO bank accounts workspace',
+  render: () => <NocfoBankAccountsWorkspace />,
+  parameters: { layout: 'fullscreen' },
+};

package/apps/storybook/stories/catalog/checkbox.stories.tsx

@@ -8,11 +8,16 @@ const meta = {
 } satisfies Meta<typeof Checkbox>;
 export default meta;
 type Story = StoryObj<typeof meta>;
-export const Default: Story = {};
+export const Default: Story = {
+  render: () => <Checkbox label="Enable notifications" />,
+};
+export const Bare: Story = {
+  render: () => <Checkbox aria-label="Enable notifications" />,
+};
 export const RTL: Story = {
   render: () => (
     <div dir="rtl">
-      <Checkbox />
+      <Checkbox label="فعال‌سازی اعلان‌ها" />
     </div>
   ),
 };

package/apps/storybook/stories/catalog/data-table.stories.tsx

@@ -1,11 +1,23 @@
+import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Button } from '@noe/ui/button';
+import { EmptyState } from '@noe/ui/empty-state';
+import { Input } from '@noe/ui/input';
 
-import { type DataColumn, DataTable } from '../../../../packages/data-ui/src/data-table';
+import {
+  type DataColumn,
+  DataTable,
+  type DataSort,
+  type FilterSpec,
+  type PageSpec,
+  type RowId,
+} from '../../../../packages/data-ui/src/data-table';
+import { FilterBar } from '../../../../packages/data-ui/src/filter-bar';
 
 type ServiceRow = { id: string; service: string; owner: string; status: string; updated: string };
 
 const columns: DataColumn<ServiceRow>[] = [
-  { key: 'service', header: 'Service' },
+  { key: 'service', header: 'Service', technical: true },
   { key: 'owner', header: 'Owner' },
   { key: 'status', header: 'Status' },
   { key: 'updated', header: 'Updated', technical: true, align: 'end' },
@@ -29,6 +41,18 @@ const rows: ServiceRow[] = [
   },
 ];
 
+const moreRows: ServiceRow[] = [
+  ...rows,
+  {
+    id: '4',
+    service: 'registry-api',
+    owner: 'Design Systems',
+    status: 'Healthy',
+    updated: '3h ago',
+  },
+  { id: '5', service: 'agent-gateway', owner: 'AI Platform', status: 'Healthy', updated: '5h ago' },
+];
+
 function DataTableDemo() {
   return (
     <DataTable columns={columns} rows={rows} caption="Service health" empty="No services yet." />
@@ -44,8 +68,207 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {};
+
 export const Empty: Story = {
   render: () => (
-    <DataTable columns={columns} rows={[]} caption="Service health" empty="No services yet." />
+    <DataTable
+      columns={columns}
+      rows={[]}
+      caption="Service health"
+      empty={
+        <EmptyState
+          title="No services yet"
+          description="Services appear here once they report health to the platform."
+        />
+      }
+    />
+  ),
+};
+
+function SortingDemo() {
+  const [sorting, setSorting] = useState<DataSort[]>([{ field: 'service', direction: 'asc' }]);
+  return (
+    <DataTable
+      columns={columns}
+      rows={[...moreRows]}
+      caption="Service health"
+      empty="No services yet."
+      sorting={sorting}
+      onSortingChange={setSorting}
+    />
+  );
+}
+export const Sorting: Story = { render: () => <SortingDemo /> };
+
+function SelectionDemo() {
+  const [selected, setSelected] = useState<RowId[]>(['2']);
+  return (
+    <DataTable
+      columns={columns}
+      rows={rows}
+      caption="Service health"
+      empty="No services yet."
+      selection={selected}
+      onSelectionChange={setSelected}
+      selectAllLabel="Select all services"
+      rowSelectionLabel={(row: ServiceRow) => `Select ${row.service}`}
+      selectedCountLabel={(count: number) => `${count} selected`}
+      renderSelectionActions={({ selectedIds }) => (
+        <Button size="sm" variant="outline">
+          Restart {selectedIds.length > 0 ? `(${selectedIds.length})` : ''}
+        </Button>
+      )}
+    />
+  );
+}
+export const Selection: Story = { render: () => <SelectionDemo /> };
+
+function PaginationDemo() {
+  const [page, setPage] = useState<PageSpec>({ index: 0, size: 2 });
+  return (
+    <DataTable
+      columns={columns}
+      rows={[...moreRows]}
+      caption="Service health"
+      empty="No services yet."
+      page={page}
+      onPageChange={setPage}
+      previousPageLabel="Previous page"
+      nextPageLabel="Next page"
+      paginationLabel="Service health pagination"
+    />
+  );
+}
+export const Pagination: Story = { render: () => <PaginationDemo /> };
+
+function WithFiltersDemo() {
+  const [search, setSearch] = useState('');
+  const [filters, setFilters] = useState<FilterSpec[]>([]);
+  return (
+    <div className="flex flex-col gap-3">
+      <FilterBar
+        label="Filter services"
+        search={
+          <Input
+            aria-label="Search services"
+            onChange={(event) => {
+              setSearch(event.target.value);
+              setFilters(
+                event.target.value
+                  ? [{ field: 'service', operator: 'contains', value: event.target.value }]
+                  : [],
+              );
+            }}
+            placeholder="Search services"
+            size="sm"
+            value={search}
+          />
+        }
+      />
+      <DataTable
+        columns={columns}
+        rows={[...moreRows]}
+        caption="Service health"
+        empty="No services match the current filter."
+        filters={filters}
+        onFiltersChange={setFilters}
+      />
+    </div>
+  );
+}
+export const WithFilters: Story = { render: () => <WithFiltersDemo /> };
+
+function CompactDemo() {
+  return (
+    <DataTable
+      columns={columns}
+      rows={[...moreRows]}
+      caption="Service health"
+      density="compact"
+      empty="No services yet."
+      page={{ index: 0, size: 3 }}
+      onPageChange={() => {}}
+      previousPageLabel="Previous page"
+      nextPageLabel="Next page"
+      paginationLabel="Service health pagination"
+    />
+  );
+}
+export const Compact: Story = { render: () => <CompactDemo /> };
+
+function RtlDemo() {
+  const [sorting, setSorting] = useState<DataSort[]>([{ field: 'service', direction: 'asc' }]);
+  const faColumns: DataColumn<ServiceRow>[] = [
+    { key: 'service', header: 'سرویس', technical: true },
+    { key: 'owner', header: 'مالک' },
+    { key: 'status', header: 'وضعیت' },
+    { key: 'updated', header: 'آخرین به‌روزرسانی', align: 'end' },
+  ];
+  return (
+    <div dir="rtl" lang="fa">
+      <DataTable
+        columns={faColumns}
+        rows={rows}
+        caption="وضعیت سرویس‌ها"
+        density="compact"
+        empty="هنوز سرویسی ثبت نشده است."
+        sorting={sorting}
+        onSortingChange={setSorting}
+        selectAllLabel="انتخاب همه سرویس‌ها"
+        rowSelectionLabel={(row: ServiceRow) => `انتخاب ${row.service}`}
+        selectedCountLabel={(count: number) => `${count} مورد انتخاب شده`}
+        page={{ index: 0, size: 2 }}
+        onPageChange={() => {}}
+        previousPageLabel="صفحه قبلی"
+        nextPageLabel="صفحه بعدی"
+        paginationLabel="صفحه‌بندی وضعیت سرویس‌ها"
+      />
+    </div>
+  );
+}
+export const RTL: Story = { render: () => <RtlDemo /> };
+
+function ServerSideDemo() {
+  const [query, setQuery] = useState<{ sorts: DataSort[]; filters: FilterSpec[]; page: PageSpec }>({
+    sorts: [],
+    filters: [],
+    page: { index: 0, size: 2 },
+  });
+  // A real product sends `toDataQuery(query)` to Django and renders the page.
+  const serverPage = moreRows.slice(
+    query.page.index * query.page.size,
+    (query.page.index + 1) * query.page.size,
+  );
+  return (
+    <DataTable
+      columns={columns}
+      rows={serverPage}
+      caption="Service health"
+      empty="No services yet."
+      sorting={query.sorts}
+      onSortingChange={(sorts) => setQuery((q) => ({ ...q, sorts }))}
+      manualSorting
+      page={query.page}
+      onPageChange={(next) => setQuery((q) => ({ ...q, page: next }))}
+      manualPagination
+      totalRowCount={moreRows.length}
+      previousPageLabel="Previous page"
+      nextPageLabel="Next page"
+      paginationLabel="Service health pagination"
+    />
+  );
+}
+export const ServerSide: Story = { render: () => <ServerSideDemo /> };
+
+export const Loading: Story = {
+  render: () => (
+    <DataTable
+      columns={columns}
+      rows={[]}
+      caption="Service health"
+      empty="No services yet."
+      loading
+      loadingRows={3}
+    />
   ),
 };

package/apps/storybook/stories/catalog/dialog.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import { expect, userEvent, within } from 'storybook/test';
+import { expect, userEvent, waitFor, within } from 'storybook/test';
 
 import { Button } from '../../../../packages/ui/src/button';
 import {
@@ -53,7 +53,7 @@ export const OpenAndClose: Story = {
   play: async ({ canvas }) => {
     await userEvent.click(canvas.getByRole('button', { name: /review change/i }));
     const dialog = within(document.body).getByRole('dialog');
-    await expect(dialog).toBeVisible();
+    await waitFor(() => expect(dialog).toBeVisible());
     await userEvent.click(within(dialog).getByRole('button', { name: /cancel/i }));
   },
 };

package/apps/storybook/stories/catalog/icon-system.stories.tsx

@@ -6,6 +6,7 @@ import {
   iconsaxFreeSource,
   NoeMark,
 } from '../../../../packages/icons/src/index';
+import { NocfoLogo } from '../../../../packages/icons/src/nocfo-logo';
 
 function IconGallery() {
   return (
@@ -24,6 +25,16 @@ function IconGallery() {
           <span>Backward</span>
         </div>
       </div>
+      <div
+        data-theme="dark"
+        style={{
+          background: 'var(--noe-color-surface-sunken)',
+          borderRadius: 'var(--noe-radius-md)',
+          padding: 'var(--noe-space-4)',
+        }}
+      >
+        <NocfoLogo label="NOCFO" />
+      </div>
       <div>
         <strong>Mirror in RTL:</strong> {iconDirectionPolicy.mirror.join(', ')}
       </div>

package/apps/storybook/stories/catalog/menu.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import { expect, userEvent, within } from 'storybook/test';
+import { expect, userEvent, waitFor, within } from 'storybook/test';
 
 import { Button } from '../../../../packages/ui/src/button';
 import {
@@ -40,7 +40,7 @@ export const KeyboardOpen: Story = {
     trigger.focus();
     await userEvent.keyboard('{Enter}');
     const menu = within(document.body).getByRole('menu');
-    await expect(menu).toBeVisible();
-    await expect(within(menu).getByText('Rerun')).toBeVisible();
+    await waitFor(() => expect(menu).toBeVisible());
+    await waitFor(() => expect(within(menu).getByText('Rerun')).toBeVisible());
   },
 };

package/apps/web/styles.css

@@ -18,7 +18,6 @@ input,
 textarea,
 select {
   font: inherit;
-  color: inherit;
 }
 button,
 a,

package/docs/design-system/brand-theme.md

@@ -30,3 +30,11 @@ Do not create a separate app palette.
 - Admin, expert and profile shells: the same paper/graphite canvas, thin utility
   dividers, and one mint primary action per region.
 - Destructive paths continue to use coral and must retain explicit labels.
+
+## Product marks
+
+`NocfoLogo` from `@noe/icons/nocfo-logo` owns the official wide NOCFO wordmark and its intrinsic
+aspect ratio. Render it on a dark product-chrome surface, give it a localized accessible
+label, and never mirror, crop, redraw or recolor the artwork. Product shells compose the
+mark through the `HeaderNavigation.brand` slot instead of referencing a product asset
+from page code.

package/docs/design-system/components.md

@@ -60,6 +60,12 @@ surface tokens and spacing; their outer stroke and every shadow are absent. Use
 the standard `Button variant="secondary"` for transparent, currentColor outline
 actions. It is white on dark/colored surfaces and graphite on paper.
 
+The `Template — NOCFO bank accounts workspace` story on `app-frame` is the canonical
+dense finance composition: official `NocfoLogo`, compact header actions, logical RTL
+sidebar, bilingual `PageHeader`, multi-control `FilterBar`, and compact `DataTable`.
+Product repositories keep domain columns and queries local while reusing this
+composition instead of maintaining separate Cashflow and Loan shell/table wrappers.
+
 Mapping to the Untitled UI reference taxonomy (honest as of 2026-08-27 — foundation stabilization):
 
 | Untitled UI category      | NOE coverage                                                        |
@@ -101,6 +107,38 @@ Implemented source includes Button, Input, Field, Dialog, Drawer, Tabs, auto-dir
 - Tab arrow behavior resolves against active direction.
 - Email, URL, telephone, numeric, code and identifier content preserve technical direction.
 
+## Data tables
+
+`DataTable` in `@noe/data-ui` owns the semantic `<table>` markup, NOE tokens,
+RTL behavior and accessibility, while TanStack Table v9 provides the headless
+state engine behind an internal adapter
+(`packages/data-ui/src/table/adapters/tanstack.ts`, per ADR 0008). TanStack
+types never appear in the public API: products program against NOE contracts
+(`DataColumn`, `DataSort`, `FilterSpec`, `PageSpec`, `RowId`, `SelectionState`,
+`DataQuery`) exported from `@noe/data-ui`.
+
+- Sorting headers cycle ascending → descending → unsorted and expose `aria-sort`;
+  icons are direction-neutral so RTL needs no mirroring.
+- Filtering uses NOE `FilterSpec` operators (`contains`, `equals`, `in`,
+  `between`, …). `FilterBar` composes the controls; `DataTable` owns state.
+- Pagination is controlled via `PageSpec` with caller-provided accessible
+  labels, matching the `Pagination` primitive contract.
+- Selection keeps stable row ids (`RowId`), supports single/multiple modes and
+  never selects by positional index.
+- Server mode (`manualSorting`/`manualFiltering`/`manualPagination` +
+  `totalRowCount`) trusts incoming data order and slicing; pair it with
+  `toDataQuery` to serialize state into a Django query.
+- `density="compact"` tightens row rhythm for dense workspaces using the
+  spacing scale; `regular` is the default.
+- `empty` accepts composed content — pass an `EmptyState` for full empty
+  affordances. The `WithFilters` catalog story demonstrates the FilterBar +
+  Input + DataTable composition.
+
+Deterministic visual evidence (light, dark, RTL, selection, loading) is
+captured by `packages/data-ui/src/table/data-table-visual.evidence.browser.test.tsx`
+into `evidence/data-table/`; the browser test project renders with the real
+Tailwind-expanded NOE tokens.
+
 ## Product adapters
 
 Data, chart, agent and workflow packages own the NOE composition. Product screens should never import an unnormalized marketplace component directly.

package/docs/design-system/inventory.md

@@ -386,3 +386,4 @@ Total catalog entries: **129** · registry items: **67**
 - `fab`: Mobile-only floating action button anchored to the logical end edge above the bottom navigation, with safe-area padding and required accessible label.
 - `mobile-screen`: Single-column mobile page scaffold composing an app bar, scrollable content region, optional floating action button and bottom navigation.
 - `bottom-navigation`: Mobile-only bottom tab bar with current-page state, badges, icon slots and safe-area padding; hidden from the medium breakpoint upward.
+