@abyss-project/commons-front-core 6.1.0 → 7.1.0

package/dist/theme/tokens/primitives.d.ts

@@ -0,0 +1,69 @@
+import { Oklch } from './oklch';
+export declare enum ThemeMode {
+    Dark = "dark",
+    Light = "light"
+}
+export type GrayStep = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+/** Tinted grays, 12 steps per mode. */
+export declare const grayScale: Record<ThemeMode, Record<GrayStep, Oklch>>;
+/** Self-hosted variable fonts (Geist, Geist Mono), with system fallbacks. */
+export declare const fontFamilies: {
+    readonly sans: "\"Geist Variable\", system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif";
+    readonly mono: "\"Geist Mono Variable\", ui-monospace, SFMono-Regular, Menlo, Consolas, \"Liberation Mono\", monospace";
+};
+/** Font sizes, in px. `pageTitle` is the single page title size of the whole ecosystem. */
+export declare const typeScale: {
+    readonly caption: 11;
+    readonly small: 12;
+    readonly body: 13;
+    readonly bodyComfort: 14;
+    readonly bodyMobile: 15;
+    readonly sectionTitle: 16;
+    readonly pageTitle: 22;
+    readonly figure: 26;
+    readonly mobileLargeTitle: 30;
+};
+export declare const fontWeights: {
+    readonly regular: 400;
+    readonly medium: 500;
+    readonly semibold: 600;
+    readonly bold: 700;
+};
+/** Spacing scale, base 4, in px. */
+export declare const space: readonly [0, 4, 8, 12, 16, 20, 24, 32, 40, 48, 64];
+/** Radii in px: `sm` badge and keyboard key, `md` surface and control, `lg` modal and mobile sheet. */
+export declare const radii: {
+    readonly sm: 4;
+    readonly md: 6;
+    readonly lg: 12;
+};
+/** Motion durations, in ms. */
+export declare const durations: {
+    readonly fast: 120;
+    readonly base: 180;
+    readonly slow: 260;
+};
+export declare const easings: {
+    readonly standard: "cubic-bezier(0.2, 0, 0, 1)";
+    readonly sheet: "cubic-bezier(0.32, 0.72, 0, 1)";
+};
+/** Breakpoints in px: mobile below `md`, tablet from `md` to `lg` - 1, desktop from `lg`. */
+export declare const breakpoints: {
+    readonly xs: 0;
+    readonly sm: 480;
+    readonly md: 768;
+    readonly lg: 1200;
+    readonly xl: 1600;
+};
+/** Row and control heights in px; `touchTarget` is the minimum tap size below `md`. */
+export declare const density: {
+    readonly comfortable: {
+        readonly row: 40;
+        readonly control: 32;
+    };
+    readonly compact: {
+        readonly row: 30;
+        readonly control: 28;
+    };
+    readonly touchTarget: 44;
+};

package/dist/theme/tokens/semantic.d.ts

@@ -0,0 +1,12 @@
+import { Oklch } from './oklch';
+import { ThemeMode } from './primitives';
+export declare const SEMANTIC_TOKENS: readonly ["bg.canvas", "bg.sidebar", "bg.surface", "bg.raised", "bg.hover", "border.subtle", "border.strong", "border.control", "text.primary", "text.secondary", "text.muted", "accent", "accent.text", "accent.on", "focus.ring", "brand", "brand.gradientFrom", "brand.gradientTo", "status.success", "status.warning", "status.danger", "status.info", "status.highlight", "status.neutral", "status.success.soft", "status.warning.soft", "status.danger.soft", "status.info.soft", "status.highlight.soft", "status.neutral.soft", "overlay.scrim"];
+export type SemanticToken = (typeof SEMANTIC_TOKENS)[number];
+export declare const semanticTokens: Record<ThemeMode, Record<SemanticToken, Oklch>>;
+/** Every semantic token of a mode, converted to sRGB hexadecimal ('#rrggbb' or '#rrggbbaa'). */
+export declare function resolveTokens(mode: ThemeMode): Record<SemanticToken, string>;
+/** CSS box-shadows of the floating layers only: `overlay` (menu, popover, toast) and `modal`. */
+export declare const elevations: Record<ThemeMode, {
+    overlay: string;
+    modal: string;
+}>;

package/dist/theme/tokens/semantic.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/theme/tokens/soft.d.ts

@@ -0,0 +1,2 @@
+/** Opacity of the `.soft` backgrounds (ADR-0166 §3): status badges, accent tints. */
+export declare const SOFT_ALPHA = 0.14;

package/dist/translations/en.d.ts

@@ -1564,5 +1564,158 @@ declare const _default: {
             'sign-out': string;
         };
     };
+    ds: {
+        inputs: {
+            'rich-select': {
+                empty: string;
+            };
+            date: {
+                'open-calendar': string;
+                'previous-month': string;
+                'next-month': string;
+                cancel: string;
+                confirm: string;
+                invalid: string;
+                'before-min': string;
+                'after-max': string;
+            };
+            'date-range': {
+                from: string;
+                to: string;
+                presets: string;
+                'invalid-order': string;
+            };
+            color: {
+                swatches: string;
+                invalid: string;
+            };
+        };
+        structure: {
+            'app-shell': {
+                navigation: string;
+                'open-navigation': string;
+                'switch-space': string;
+                spaces: string;
+                'space-kind': {
+                    personal: string;
+                    organization: string;
+                };
+                'item-with-count': string;
+                'item-urgent': string;
+            };
+            'page-header': {
+                breadcrumbs: string;
+            };
+            'filter-bar': {
+                'open-filters': string;
+                title: string;
+                reset: string;
+                close: string;
+            };
+            'split-view': {
+                panel: string;
+                close: string;
+            };
+        };
+        mobile: {
+            shell: {
+                back: string;
+                navigation: string;
+                'tab-with-badge': string;
+                'pull-to-refresh': string;
+                refreshing: string;
+            };
+            'bottom-sheet': {
+                label: string;
+            };
+            'action-bar': {
+                label: string;
+                more: string;
+                'more-title': string;
+            };
+            'swipe-deck': {
+                label: string;
+                progress: string;
+                'approve-all': string;
+                hint: string;
+                approve: string;
+                reject: string;
+                undo: string;
+            };
+        };
+        states: {
+            'page-state': {
+                loading: string;
+                'empty-title': string;
+                'error-title': string;
+                'error-description': string;
+                retry: string;
+                'forbidden-title': string;
+                'forbidden-description': string;
+                'not-found-title': string;
+                'not-found-description': string;
+            };
+        };
+        data: {
+            'data-table': {
+                'select-all': string;
+                'select-row': string;
+                selected: string;
+                'clear-selection': string;
+                loading: string;
+                rows: string;
+            };
+            'stat-tile': {
+                trend: string;
+            };
+        };
+        meaning: {
+            severity: {
+                debug: string;
+                info: string;
+                warn: string;
+                error: string;
+                fatal: string;
+            };
+            scan: {
+                pending: string;
+                clean: string;
+                infected: string;
+                error: string;
+                skipped: string;
+            };
+        };
+        business: {
+            'infected-download': {
+                title: string;
+                description: string;
+                'download-anyway': string;
+                cancel: string;
+            };
+        };
+        layers: {
+            modal: {
+                close: string;
+            };
+            'confirm-dialog': {
+                cancel: string;
+                'type-to-confirm': string;
+                failed: string;
+            };
+            drawer: {
+                close: string;
+            };
+            toast: {
+                region: string;
+                dismiss: string;
+            };
+            'command-palette': {
+                label: string;
+                search: string;
+                results: string;
+                empty: string;
+            };
+        };
+    };
 };
 export default _default;

package/dist/translations/fr.d.ts

@@ -1564,5 +1564,158 @@ declare const _default: {
             'sign-out': string;
         };
     };
+    ds: {
+        inputs: {
+            'rich-select': {
+                empty: string;
+            };
+            date: {
+                'open-calendar': string;
+                'previous-month': string;
+                'next-month': string;
+                cancel: string;
+                confirm: string;
+                invalid: string;
+                'before-min': string;
+                'after-max': string;
+            };
+            'date-range': {
+                from: string;
+                to: string;
+                presets: string;
+                'invalid-order': string;
+            };
+            color: {
+                swatches: string;
+                invalid: string;
+            };
+        };
+        structure: {
+            'app-shell': {
+                navigation: string;
+                'open-navigation': string;
+                'switch-space': string;
+                spaces: string;
+                'space-kind': {
+                    personal: string;
+                    organization: string;
+                };
+                'item-with-count': string;
+                'item-urgent': string;
+            };
+            'page-header': {
+                breadcrumbs: string;
+            };
+            'filter-bar': {
+                'open-filters': string;
+                title: string;
+                reset: string;
+                close: string;
+            };
+            'split-view': {
+                panel: string;
+                close: string;
+            };
+        };
+        mobile: {
+            shell: {
+                back: string;
+                navigation: string;
+                'tab-with-badge': string;
+                'pull-to-refresh': string;
+                refreshing: string;
+            };
+            'bottom-sheet': {
+                label: string;
+            };
+            'action-bar': {
+                label: string;
+                more: string;
+                'more-title': string;
+            };
+            'swipe-deck': {
+                label: string;
+                progress: string;
+                'approve-all': string;
+                hint: string;
+                approve: string;
+                reject: string;
+                undo: string;
+            };
+        };
+        states: {
+            'page-state': {
+                loading: string;
+                'empty-title': string;
+                'error-title': string;
+                'error-description': string;
+                retry: string;
+                'forbidden-title': string;
+                'forbidden-description': string;
+                'not-found-title': string;
+                'not-found-description': string;
+            };
+        };
+        data: {
+            'data-table': {
+                'select-all': string;
+                'select-row': string;
+                selected: string;
+                'clear-selection': string;
+                loading: string;
+                rows: string;
+            };
+            'stat-tile': {
+                trend: string;
+            };
+        };
+        meaning: {
+            severity: {
+                debug: string;
+                info: string;
+                warn: string;
+                error: string;
+                fatal: string;
+            };
+            scan: {
+                pending: string;
+                clean: string;
+                infected: string;
+                error: string;
+                skipped: string;
+            };
+        };
+        business: {
+            'infected-download': {
+                title: string;
+                description: string;
+                'download-anyway': string;
+                cancel: string;
+            };
+        };
+        layers: {
+            modal: {
+                close: string;
+            };
+            'confirm-dialog': {
+                cancel: string;
+                'type-to-confirm': string;
+                failed: string;
+            };
+            drawer: {
+                close: string;
+            };
+            toast: {
+                region: string;
+                dismiss: string;
+            };
+            'command-palette': {
+                label: string;
+                search: string;
+                results: string;
+                empty: string;
+            };
+        };
+    };
 };
 export default _default;

package/dist/{components/QuotaReached/billing-quota-error.d.ts → utils/billing-quota-error.utils.d.ts}

@@ -1,5 +1,5 @@
 import { AxiosInstance } from 'axios';
-import { QuotaDialogPayload } from './quota-dialog.store';
+import { QuotaDialogPayload } from '../hooks/quota-dialog.store';
 /**
  * Detects a billing-quota block in an axios error and resolves it into the
  * payload the quota dialog needs. Returns null for anything that is not a

package/dist/utils/billing-quota-error.utils.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/utils/billing.utils.d.ts

@@ -1,11 +1,5 @@
 import { IntlShape } from 'react-intl';
-import { PlanTier, BillingAccountStatus, InvoiceStatus, InvoiceType, CreditTransactionType, EurTransactionType, IPlanTemplate } from '@abyss-project/main';
-export declare const PLAN_TIER_COLORS: Record<PlanTier, string>;
-export declare const BILLING_ACCOUNT_STATUS_COLORS: Record<BillingAccountStatus, string>;
-export declare const INVOICE_STATUS_COLORS: Record<InvoiceStatus, string>;
-export declare const INVOICE_TYPE_COLORS: Record<InvoiceType, string>;
-export declare const CREDIT_TRANSACTION_TYPE_COLORS: Record<CreditTransactionType, string>;
-export declare const EUR_TRANSACTION_TYPE_COLORS: Record<EurTransactionType, string>;
+import { IPlanTemplate } from '@abyss-project/main';
 /**
  * Translation id of the name a user reads for a plan: `billing.plan.<key>.name`, the key chosen by
  * `resolvePlanNameKey` of `@abyss-project/main` (never the plan's technical `name`). The labels

package/dist/{components/CookieConsent/reconcile.util.d.ts → utils/cookie-consent-reconcile.utils.d.ts}

@@ -1,5 +1,5 @@
 import { IUserCookieConsent } from '@abyss-project/main';
-import { ResolvedConsent } from './types';
+import { ResolvedConsent } from './cookie-consent.types';
 export declare enum ReconcileAction {
     NOOP = "noop",
     ADOPT_DB = "adopt-db",

package/dist/utils/cookie-consent-reconcile.utils.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/utils/cookie-storage.utils.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/utils/index.d.ts

@@ -1,11 +1,14 @@
 export * from './billing.utils';
-export * from './color.utils';
 export * from './clipboard.utils';
 export * from './cookie.utils';
-export * from './file.utils';
 export * from './message-link.utils';
 export * from './project-link-wording.utils';
 export * from './locale.utils';
 export * from './share-notification.utils';
 export * from './space-display-name.utils';
 export * from './cloud-space-url.utils';
+export * from './billing-quota-error.utils';
+export * from './cookie-storage.utils';
+export * from './cookie-consent-reconcile.utils';
+export * from './cookie-consent.types';
+export * from './privacy-link.constant';

package/dist/utils/privacy-link.constant.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/utils/project-link-wording.utils.d.ts

@@ -1,3 +1,3 @@
-import { ABYSS_LINK } from '../components/Spotlight';
+import { ABYSS_LINK } from '../legacy/components/Spotlight';
 import { ExistingTranslationKey } from '../hooks/use-rich-intl.hook';
 export declare const getAbyssLinkWording: (link: ABYSS_LINK) => ExistingTranslationKey;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abyss-project/commons-front-core",
-  "version": "6.1.0",
+  "version": "7.1.0",
   "description": "Front Core package of AbyssProject",
   "main": "dist/index.js",
   "module": "./dist/index.js",
@@ -21,7 +21,13 @@
     "./auth": {
       "import": "./dist/auth-client.js",
       "types": "./dist/auth-client.d.ts"
-    }
+    },
+    "./legacy": {
+      "import": "./dist/legacy.js",
+      "types": "./dist/legacy.d.ts"
+    },
+    "./fonts.css": "./dist/fonts.css",
+    "./legacy/fonts.css": "./dist/legacy/fonts.css"
   },
   "typesVersions": {
     "*": {
@@ -33,6 +39,9 @@
       ],
       "auth": [
         "./dist/auth-client.d.ts"
+      ],
+      "legacy": [
+        "./dist/legacy.d.ts"
       ]
     }
   },
@@ -87,6 +96,9 @@
     "@capacitor/clipboard": "^7.0.1",
     "@capacitor/core": "^7.4.0",
     "@capacitor/share": "^7.0.1",
+    "@fontsource-variable/geist": "^5.3.0",
+    "@fontsource-variable/geist-mono": "^5.3.0",
+    "@fontsource-variable/lexend": "^5.3.0",
     "@milkdown/core": "^7.15.3",
     "@milkdown/crepe": "^7.15.3",
     "@milkdown/plugin-listener": "^7.15.3",
@@ -120,6 +132,7 @@
   },
   "devDependencies": {
     "@abyss-project/cloud": "^2.4.0",
+    "@playwright/test": "^1.52.0",
     "@testing-library/react": "^16.3.2",
     "@types/byte-size": "^8.1.0",
     "@types/flat": "^5.0.5",
@@ -153,12 +166,15 @@
     "@abyss-project/capacitor-auth": "1.0.0"
   },
   "scripts": {
-    "lint": "eslint \"{src,apps,libs,test,core}/**/*.{ts,tsx}\" --fix",
-    "lint:check": "eslint \"{src,apps,libs,test,core}/**/*.{ts,tsx}\" --max-warnings 0",
-    "tsc": "tsc --noEmit",
+    "lint": "eslint \"{src,apps,libs,test,core,catalog}/**/*.{ts,tsx}\" --fix",
+    "lint:check": "eslint \"{src,apps,libs,test,core,catalog}/**/*.{ts,tsx}\" --max-warnings 0",
+    "tsc": "tsc --noEmit && tsc --noEmit -p catalog/tsconfig.json",
     "build": "vite build && node scripts/check-auth-entry-isolation.cjs",
     "dev": "vite build --watch",
     "test": "vitest run --config vitest.config.ts",
-    "test:watch": "vitest --config vitest.config.ts"
+    "test:watch": "vitest --config vitest.config.ts",
+    "catalog": "vite --config catalog/vite.config.ts",
+    "catalog:test": "playwright test --config catalog/playwright.config.ts",
+    "catalog:test:ci": "vite build --config catalog/vite.config.ts && playwright test --config catalog/playwright.ci.config.ts"
   }
 }

package/test-results/catalog/.last-run.json

@@ -0,0 +1,4 @@
+{
+  "status": "passed",
+  "failedTests": []
+}

package/vite.config.ts

@@ -1,13 +1,38 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 import { resolve } from 'path'
+import { readFileSync } from 'fs'
+import type { Plugin } from 'vite'
 import dts from 'vite-plugin-dts';
 
 const isWatch = process.argv.includes('--watch');
 
+// The font stylesheets ship as written, at the public subpaths `./fonts.css` (Geist, Geist Mono)
+// and `./legacy/fonts.css` (Lexend) of package.json `exports`: their `@import '@fontsource-variable/…'`
+// are resolved by the consumer's bundler from this package's own dependencies, so the font files
+// are never copied into this package's dist.
+const FONT_STYLESHEETS: Array<{ source: string; fileName: string }> = [
+  { source: 'src/theme/fonts.css', fileName: 'fonts.css' },
+  { source: 'src/legacy/fonts.css', fileName: 'legacy/fonts.css' },
+];
+
+const fontStylesheets = (): Plugin => ({
+  name: 'abyss-font-stylesheets',
+  generateBundle() {
+    for (const { source, fileName } of FONT_STYLESHEETS) {
+      this.emitFile({
+        type: 'asset',
+        fileName,
+        source: readFileSync(resolve(__dirname, source), 'utf8'),
+      });
+    }
+  },
+});
+
 export default defineConfig({
   plugins: [
     react(),
+    fontStylesheets(),
     !isWatch && dts({
       skipDiagnostics: true, // Skip TypeScript diagnostics to avoid type conflicts
       staticImport: true,
@@ -36,7 +61,7 @@ export default defineConfig({
       // monitor SDK that the full barrel transitively includes.
       entry: {
         index: resolve(__dirname, 'src/index.ts'),
-        'cookie-consent': resolve(__dirname, 'src/components/CookieConsent/index.ts'),
+        'cookie-consent': resolve(__dirname, 'src/legacy/components/CookieConsent/index.ts'),
         // The native auth bridge, out of the main barrel: the only importer of the optional peer
         // `@abyss-project/capacitor-auth`, which a web-only consumer does not install.
         'auth-native': resolve(__dirname, 'src/auth/client/capacitor-bridge.ts'),
@@ -51,6 +76,9 @@ export default defineConfig({
         // and silently swap the full barrel's own `./auth` export for this narrow one. The public
         // subpath stays `./auth` (package.json `exports`) — only the dist filename differs.
         'auth-client': resolve(__dirname, 'src/auth/client/index.ts'),
+        // The previous design system (theme, visual components, their visual utils and hooks),
+        // isolated until every app has migrated off it (ADR-0169 §2). Public subpath `./legacy`.
+        legacy: resolve(__dirname, 'src/legacy/index.ts'),
       },
       formats: ['es'],
       fileName: (_format, entryName) => `${entryName}.js`,

package/dist/components/CookieConsent/index.d.ts

@@ -1,9 +0,0 @@
-export * from './AbyssCookieConsentProvider';
-export * from './privacy-link.constant';
-export * from './CookieConsentBanner.component';
-export * from './CookieConsentSettings.component';
-export * from './use-cookie-consent.hook';
-export * from './cookie-storage.util';
-export * from './reconcile.util';
-export * from './types';
-export { flattenTranslations } from '../../hooks/use-rich-intl.hook';