noecosystem-design 0.3.0 → 0.4.0

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/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                                                        |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "noecosystem-design",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "private": false,
   "description": "Agent-readable NOE design-system source, registry metadata, and verification contracts.",
   "keywords": [

package/packages/design-tokens/src/tailwind.css

@@ -1,3 +1,8 @@
 @import "tailwindcss";
 @import "./theme.css";
 @import "./base.css";
+
+/* Tailwind v4 resolves explicit sources relative to this stylesheet. Storybook and
+   product apps consume workspace source outside their own package roots. */
+@source "../../../packages";
+@source "../../../apps";

package/packages/icons/package.json

@@ -7,9 +7,14 @@
     "react": "^19.2.0"
   },
   "exports": {
-    ".": "./src/index.tsx"
+    ".": "./src/index.tsx",
+    "./nocfo-logo": "./src/nocfo-logo.tsx"
   },
   "dependencies": {
     "iconsax-react": "0.0.8"
+  },
+  "devDependencies": {
+    "vitest": "4.1.11",
+    "vitest-browser-react": "2.2.0"
   }
 }

package/packages/icons/src/brands/nocfo.svg

@@ -0,0 +1,8 @@
+<svg width="698" height="115" viewBox="0 0 698 115" fill="none" xmlns="http://www.w3.org/2000/svg">
+<title>NOCFO</title>
+<path d="M636.475 42.5066C670.199 41.9183 699.188 36.762 697.24 78.3513C696.422 95.8057 694.599 107.431 674.435 113.115C655.219 113.967 618.693 118.485 614.59 94.2956C611.226 74.4705 609.538 47.9355 636.475 42.5066ZM688.198 76.031C690.086 45.5042 661.671 51.0544 637.899 51.5583C632.981 52.6653 629.35 53.7832 626.398 58.1775C620.114 67.5366 618.965 95.6618 630.797 101.452C639.35 105.639 662.895 104.297 672.995 103.76C688.139 98.6936 687.394 89.0325 688.198 76.031Z" fill="white"/>
+<path d="M467.517 43.3473C482.372 43.1323 513.647 39.1155 520.943 54.2547C522.502 57.4924 524.8 62.6848 523.304 66.1513C520.707 67.2164 520.514 67.0872 517.584 66.6572C510.654 62.2262 516.468 52.7675 499.371 52.2646C464.447 51.3928 449.226 48.4785 452.936 86.8645C454.824 106.392 466.853 104.769 485.656 104.5C526.417 104.971 504.703 92.1634 520.242 89.2117C523.238 90.3793 522.264 89.5509 523.759 92.4987C523.548 113.208 504.309 114.086 486.432 113.861C470.279 113.659 447.74 114.956 444.598 94.261C441.582 74.4048 439.949 48.4154 467.517 43.3473Z" fill="white"/>
+<path d="M554.993 43.2972C565.284 43.1654 601.126 41.0629 606.755 45.6961C607.862 48.7493 607.864 47.4537 606.659 50.5743C597.297 57.7393 541.771 40.7556 544.87 67.1734C546.493 81.0099 594.502 67.9992 602.929 74.1125C602.981 77.0923 603.463 79.5864 601.237 81.6661C587.929 82.9637 559.376 82.0993 544.925 82.017C544.823 90.3091 546.719 105.331 543.654 112.144C540.944 114.363 542.339 113.847 538.229 113.803L536.945 112.23C535.403 102.746 534.598 62.4579 539.522 52.2873C541.947 47.2793 549.2 44.6295 554.993 43.2972Z" fill="white"/>
+<path d="M56.7057 0.220818C59.4812 -0.0783868 66.655 0.00764426 69.5347 0.0238175C78.3794 0.0954738 87.2231 0.25451 96.0646 0.501376C100.5 0.589655 105.045 0.395802 109.484 0.256308C132.52 -0.467892 156.409 -0.133871 173.733 17.4305C179.379 23.0998 183.544 30.0721 185.86 37.7326C187.257 42.4387 187.682 48.1555 188.036 53.0969C189.467 73.0742 188.685 93.4045 188.559 113.42C181.836 113.656 173.963 113.499 167.156 113.523L167.227 75.7448C167.255 68.6649 167.379 61.7158 167.124 54.636C166.395 34.3692 151.889 21.6885 132.236 19.9335C117.122 18.9447 100.969 19.8066 85.8082 19.9052C66.7354 20.0292 45.5038 16.4282 30.7644 31.6442C24.6706 38.0679 22.4129 45.2014 21.9355 53.7631C20.8234 73.7101 21.3197 93.5171 21.552 113.465C15.0667 113.737 6.74555 113.517 0.174689 113.502C0.0536924 100.976 -0.00444898 88.4497 0.000265171 75.9236C0.023387 65.4894 -0.0850384 49.2196 2.53468 39.4846C4.44796 32.5183 7.8839 26.064 12.5947 20.589C24.2656 7.00099 39.1747 1.54859 56.7057 0.220818Z" fill="white"/>
+<path d="M319.568 0.193154C332.548 0.161706 345.543 -0.281296 358.514 0.29081C365.335 0.582372 372.427 0.7861 379.045 2.5828C396.211 7.24404 410.499 20.151 416.147 37.1297C418.006 42.7191 418.727 48.4357 418.961 54.3387C420.359 89.7317 395.124 112.994 360.341 113.954C346.371 114.201 332.168 113.892 318.17 113.936L293.926 114.03C272.33 113.981 254.719 113.713 238.029 98.2703C216.174 78.0453 215.513 41.0945 235.138 19.2088C247.145 5.81961 262.554 0.908067 279.985 0.192178L281.043 0.157021C293.831 -0.229988 306.771 0.224377 319.568 0.193154ZM329.095 19.2166C313.953 19.1948 298.232 18.934 283.14 19.2752C283.028 19.2772 282.918 19.2805 282.808 19.2859C271.122 19.6424 260.264 22.6589 252.265 31.5525C245.275 39.3273 242.217 48.2684 242.538 58.5779C242.751 68.5089 246.945 77.937 254.18 84.74C267.898 97.6367 287.634 94.6477 304.868 94.7137C322.102 94.7799 339.509 95.1774 356.733 94.7576C386.396 94.2072 404.261 71.1977 395.264 42.6101C391.991 32.2128 380.566 23.3761 370.269 20.8816C362.924 19.1026 354.048 19.1626 346.523 19.1844L329.095 19.2166Z" fill="white"/>
+</svg>

package/packages/icons/src/nocfo-logo.browser.test.tsx

@@ -0,0 +1,14 @@
+import { expect, test } from 'vitest';
+import { render } from 'vitest-browser-react';
+
+import { NocfoLogo } from './nocfo-logo';
+
+test('NocfoLogo exposes the official wordmark with an accessible product name', async () => {
+  const screen = await render(<NocfoLogo label="سامانه NOCFO" />);
+  const logo = screen.getByRole('img', { name: 'سامانه NOCFO' });
+
+  await expect.element(logo).toHaveAttribute('data-slot', 'nocfo-logo');
+  await expect.element(logo).toHaveAttribute('width', '698');
+  await expect.element(logo).toHaveAttribute('height', '115');
+  expect(logo.element().getAttribute('src')).toMatch(/^data:image\/svg\+xml/);
+});

package/packages/icons/src/nocfo-logo.tsx

@@ -0,0 +1,23 @@
+import type * as React from 'react';
+
+const nocfoLogoUrl = new URL('./brands/nocfo.svg', import.meta.url).href;
+
+export interface NocfoLogoProps extends Omit<React.ComponentProps<'img'>, 'alt' | 'src'> {
+  /** Localized accessible name. Pass an empty string only when adjacent text names the brand. */
+  label?: string;
+}
+
+/** Official NOCFO wordmark. Brand artwork is never directionally mirrored. */
+export function NocfoLogo({ label = 'NOCFO', style, ...props }: NocfoLogoProps) {
+  return (
+    <img
+      alt={label}
+      data-slot="nocfo-logo"
+      height={115}
+      src={nocfoLogoUrl}
+      style={{ blockSize: 'auto', inlineSize: '8.75rem', ...style }}
+      width={698}
+      {...props}
+    />
+  );
+}

package/packages/registry/r/app-frame.json

@@ -43,10 +43,17 @@
     "color.surfaceRaised",
     "color.surfaceSunken"
   ],
-  "capabilityAliases": ["app frame", "app-frame", "finance application shell", "admin shell"],
+  "capabilityAliases": [
+    "app frame",
+    "app-frame",
+    "finance application shell",
+    "admin shell",
+    "NOCFO workspace"
+  ],
   "useWhen": [
     "using app frame in Patterns / Pages",
-    "building a flat finance or admin application shell"
+    "building a flat finance or admin application shell",
+    "composing the NOCFO bank-account workspace template shown in Storybook"
   ],
   "doNotUseWhen": ["when app frame semantics do not match"]
 }

package/packages/registry/r/icon-system.json

@@ -3,7 +3,7 @@
   "name": "icon-system",
   "type": "registry:ui",
   "title": "Icon System",
-  "description": "Icon System — Foundations / Icons component. icon-system provides foundations / icons behavior with RTL, i18n and accessibility built-in.",
+  "description": "One icon and product-mark policy for NOE interfaces. Includes direction-aware Iconsax controls, the NOE mark and the official NOCFO wordmark; brand artwork never mirrors in RTL.",
   "files": [
     {
       "path": "packages/icons/src/index.tsx",
@@ -14,6 +14,16 @@
       "path": "packages/icons/src/iconsax.tsx",
       "type": "registry:component",
       "target": "packages/icons/src/iconsax.tsx"
+    },
+    {
+      "path": "packages/icons/src/nocfo-logo.tsx",
+      "type": "registry:component",
+      "target": "packages/icons/src/nocfo-logo.tsx"
+    },
+    {
+      "path": "packages/icons/src/brands/nocfo.svg",
+      "type": "registry:file",
+      "target": "packages/icons/src/brands/nocfo.svg"
     }
   ],
   "registryDependencies": [],
@@ -30,7 +40,7 @@
   "rtl": "required",
   "i18n": {
     "messageKeys": [],
-    "bidiNotes": ["logical properties", "no global mirror"]
+    "bidiNotes": ["directional controls mirror by policy", "brand marks never mirror"]
   },
   "accessibility": {
     "keyboard": ["Tab to focus", "Enter/Space activate"],
@@ -38,7 +48,10 @@
     "focusBehavior": ["visible ring 2px"]
   },
   "tokenContracts": ["color.foreground", "color.border"],
-  "capabilityAliases": ["icon system", "icon-system"],
-  "useWhen": ["using icon system in Foundations / Icons"],
-  "doNotUseWhen": ["when icon system semantics do not match"]
+  "capabilityAliases": ["icon system", "icon-system", "NOCFO logo", "product wordmark"],
+  "useWhen": [
+    "rendering interface icons through the canonical Iconsax policy",
+    "rendering the official NOCFO wordmark in product chrome"
+  ],
+  "doNotUseWhen": ["rendering a third-party service logo through the NOCFO product mark"]
 }

package/packages/registry/r/sidebar-navigation.json

@@ -3,7 +3,7 @@
   "name": "sidebar-navigation",
   "type": "registry:block",
   "title": "Sidebar Navigation",
-  "description": "Sidebar Navigation — Patterns / Application component. Uses logical icon, label and end-adornment order without row reversal; RTL, i18n and accessibility are built in.",
+  "description": "Sidebar Navigation — Patterns / Application component. Uses logical icon, label and end-adornment order without row reversal, with opt-in wrapping for long bilingual finance labels; RTL, i18n and accessibility are built in.",
   "files": [
     {
       "path": "packages/ui/src/lib/cn.ts",
@@ -44,6 +44,9 @@
     "color.mutedForeground"
   ],
   "capabilityAliases": ["sidebar navigation", "sidebar-navigation", "finance sidebar"],
-  "useWhen": ["using sidebar navigation in Patterns / Application"],
+  "useWhen": [
+    "using sidebar navigation in Patterns / Application",
+    "rendering long bilingual finance labels with wrapLabels"
+  ],
   "doNotUseWhen": ["when sidebar navigation semantics do not match"]
 }

package/packages/ui/src/app-frame.browser.test.tsx

@@ -27,6 +27,7 @@ test('finance app frame keeps a flat, logical RTL sidebar structure', async () =
                 ],
               },
             ]}
+            wrapLabels
           />
         }
         variant="finance"
@@ -43,5 +44,10 @@ test('finance app frame keeps a flat, logical RTL sidebar structure', async () =
     .element(screen.getByRole('link', { name: 'داشبورد' }))
     .toHaveAttribute('aria-current', 'page');
   await expect.element(screen.getByTestId('dashboard-icon')).toBeVisible();
+  await expect.element(screen.getByText('داشبورد')).toHaveClass('whitespace-normal');
   await expect.element(screen.getByRole('main')).toHaveAttribute('id', 'finance-main');
+  const layoutGrid = frame.element().querySelector(':scope > div');
+  expect(layoutGrid).not.toBeNull();
+  expect(layoutGrid?.getAttribute('data-has-inspector')).toBeNull();
+  expect(layoutGrid?.className).not.toContain('_18rem');
 });

package/packages/ui/src/app-frame.tsx

@@ -42,9 +42,16 @@ export function AppFrame({
         className={cn(
           'grid',
           isFinanceShell
-            ? 'lg:grid-cols-[17.5rem_minmax(0,1fr)] xl:grid-cols-[17.5rem_minmax(0,1fr)_18rem]'
-            : 'lg:grid-cols-[15rem_minmax(0,1fr)] xl:grid-cols-[15rem_minmax(0,1fr)_18rem]',
+            ? cn(
+                'lg:grid-cols-[17.5rem_minmax(0,1fr)]',
+                inspector && 'xl:grid-cols-[17.5rem_minmax(0,1fr)_18rem]',
+              )
+            : cn(
+                'lg:grid-cols-[15rem_minmax(0,1fr)]',
+                inspector && 'xl:grid-cols-[15rem_minmax(0,1fr)_18rem]',
+              ),
         )}
+        data-has-inspector={inspector ? true : undefined}
       >
         {mobileNavigation ? (
           <nav

package/packages/ui/src/badge.tsx

@@ -8,14 +8,14 @@ export const badgeVariants = cva(
   {
     variants: {
       variant: {
-        default: 'border-accent/30 bg-accent/10 text-accent',
+        default: 'border-accent/30 bg-accent/10 text-foreground',
         outline: 'border-border bg-transparent text-foreground',
         secondary: 'border-transparent bg-muted text-foreground',
-        destructive: 'border-destructive/30 bg-destructive/10 text-destructive',
+        destructive: 'border-destructive/30 bg-destructive/10 text-foreground',
         info: 'border-info/30 bg-info/10 text-info',
         success: 'border-success/30 bg-success/10 text-success',
-        warning: 'border-warning/40 bg-warning/15 text-warning-foreground',
-        error: 'border-destructive/30 bg-destructive/10 text-destructive',
+        warning: 'border-warning/40 bg-warning/15 text-foreground',
+        error: 'border-destructive/30 bg-destructive/10 text-foreground',
       },
     },
     defaultVariants: {

package/packages/ui/src/calendar.tsx

@@ -317,7 +317,7 @@ export function Calendar({
                             isSelected
                               ? 'bg-accent text-accent-foreground'
                               : isToday
-                                ? 'border border-accent text-accent'
+                                ? 'border border-accent text-foreground'
                                 : 'text-foreground hover:bg-muted',
                           )}
                         >

package/packages/ui/src/code.tsx

@@ -105,7 +105,9 @@ export function Terminal({
           <span
             className={cn(
               'block',
-              line.stream === 'stderr' ? 'text-destructive' : 'text-background/90',
+              line.stream === 'stderr'
+                ? 'text-[var(--noe-primitive-color-coral-400)]'
+                : 'text-background/90',
             )}
             data-stream={line.stream ?? 'stdout'}
             key={line.key}

package/packages/ui/src/field.tsx

@@ -97,7 +97,7 @@ export function FieldError({
 }: React.ComponentProps<typeof FieldPrimitive.Error>) {
   return (
     <FieldPrimitive.Error
-      className={cn('text-xs leading-normal text-destructive', className)}
+      className={cn('text-xs font-medium leading-normal text-foreground', className)}
       data-slot="field-error"
       {...props}
     />

package/packages/ui/src/file-uploader.tsx

@@ -11,7 +11,7 @@ export function FileUploader({ className, ...props }: React.ComponentProps<'div'
       {...props}
     >
       Drag files here or{' '}
-      <button type="button" className="text-accent">
+      <button type="button" className="font-medium text-foreground underline">
         browse
       </button>
     </div>

package/packages/ui/src/progress-steps.tsx

@@ -54,7 +54,7 @@ export function ProgressSteps({
               isCompleted
                 ? 'border-success/20 bg-success/10 text-success'
                 : isCurrent
-                  ? 'border-accent bg-accent/10 text-accent'
+                  ? 'border-accent bg-accent/10 text-foreground'
                   : 'border-border bg-surface text-muted-foreground',
             )}
           >

package/packages/ui/src/sidebar-navigation.tsx

@@ -22,11 +22,14 @@ export interface SidebarNavigationSection {
 export interface SidebarNavigationProps extends Omit<React.ComponentProps<'nav'>, 'children'> {
   label: string;
   sections: readonly SidebarNavigationSection[];
+  /** Allow long bilingual labels to wrap in dense finance navigation. */
+  wrapLabels?: boolean;
 }
 
 export function SidebarNavigation({
   label,
   sections,
+  wrapLabels = false,
   className,
   ...props
 }: SidebarNavigationProps) {
@@ -70,7 +73,14 @@ export function SidebarNavigation({
                       {item.icon}
                     </span>
                   ) : null}
-                  <span className="min-w-0 flex-1 truncate">{item.label}</span>
+                  <span
+                    className={cn(
+                      'min-w-0 flex-1',
+                      wrapLabels ? 'whitespace-normal break-words' : 'truncate',
+                    )}
+                  >
+                    {item.label}
+                  </span>
                   {item.endAdornment ? (
                     <span className="ms-auto shrink-0 text-current">{item.endAdornment}</span>
                   ) : null}