@micha.bigler/ui-core-micha 3.14.3 → 4.0.0

package/dist/pages/PasswordInvitePage.js

@@ -1,8 +1,7 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // src/auth/pages/PasswordInvitePage.jsx
 import React, { useState, useEffect } from 'react';
 import { useNavigate, useParams, useLocation } from 'react-router-dom';
-import { Helmet } from 'react-helmet';
 import { Button, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { NarrowPage } from '../layout/PageLayout';
@@ -116,5 +115,5 @@ export function PasswordInvitePage() {
     if (!checked && !errorKey) {
         return (_jsx(NarrowPage, { title: t('Auth.PAGE_CHECKING_LINK_TITLE'), children: _jsx(Typography, { children: t('Auth.PAGE_CHECKING_LINK_TEXT') }) }));
     }
-    return (_jsxs(NarrowPage, { title: t(pageTitleKey), subtitle: t(pageSubtitleKey), children: [_jsx(Helmet, { children: _jsxs("title", { children: [t('App.NAME'), " \u2013 ", t(pageTitleKey)] }) }), errorKey && (_jsx(Typography, { color: "error", gutterBottom: true, children: errorKey })), successKey && (_jsxs(_Fragment, { children: [_jsx(Typography, { color: "primary", gutterBottom: true, children: t(successKey) }), _jsx(Button, { variant: "contained", onClick: () => navigate(continueTarget), children: t('Auth.SIGNUP_GO_TO_LOGIN') })] })), submitErrorKey && !successKey && (_jsx(Typography, { color: "error", gutterBottom: true, children: submitErrorKey })), !successKey && !errorKey && (_jsx(PasswordSetForm, { onSubmit: handleSubmit, submitting: submitting }))] }));
+    return (_jsxs(NarrowPage, { title: t(pageTitleKey), subtitle: t(pageSubtitleKey), children: [_jsx("title", { children: `${t('App.NAME')} – ${t(pageTitleKey)}` }), errorKey && (_jsx(Typography, { color: "error", gutterBottom: true, children: errorKey })), successKey && (_jsxs(_Fragment, { children: [_jsx(Typography, { color: "primary", gutterBottom: true, children: t(successKey) }), _jsx(Button, { variant: "contained", onClick: () => navigate(continueTarget), children: t('Auth.SIGNUP_GO_TO_LOGIN') })] })), submitErrorKey && !successKey && (_jsx(Typography, { color: "error", gutterBottom: true, children: submitErrorKey })), !successKey && !errorKey && (_jsx(PasswordSetForm, { onSubmit: handleSubmit, submitting: submitting }))] }));
 }

package/dist/pages/PasswordResetRequestPage.js

@@ -1,7 +1,6 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // src/auth/pages/PasswordResetRequestPage.jsx
 import React, { useState } from 'react';
-import { Helmet } from 'react-helmet';
 import { Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { NarrowPage } from '../layout/PageLayout';
@@ -33,5 +32,5 @@ export function PasswordResetRequestPage() {
             setSubmitting(false);
         }
     };
-    return (_jsxs(NarrowPage, { title: t('Auth.PAGE_RESET_PASSWORD_TITLE'), subtitle: t('Auth.PAGE_RESET_REQUEST_SUBTITLE'), children: [_jsx(Helmet, { children: _jsxs("title", { children: [t('App.NAME'), " \u2013 ", t('Auth.PAGE_RESET_PASSWORD_TITLE')] }) }), successKey && (_jsx(Typography, { color: "primary", gutterBottom: true, children: t(successKey) })), errorKey && (_jsx(Typography, { color: "error", gutterBottom: true, children: errorKey })), _jsx(PasswordResetRequestForm, { onSubmit: handleSubmit, submitting: submitting })] }));
+    return (_jsxs(NarrowPage, { title: t('Auth.PAGE_RESET_PASSWORD_TITLE'), subtitle: t('Auth.PAGE_RESET_REQUEST_SUBTITLE'), children: [_jsx("title", { children: `${t('App.NAME')} – ${t('Auth.PAGE_RESET_PASSWORD_TITLE')}` }), successKey && (_jsx(Typography, { color: "primary", gutterBottom: true, children: t(successKey) })), errorKey && (_jsx(Typography, { color: "error", gutterBottom: true, children: errorKey })), _jsx(PasswordResetRequestForm, { onSubmit: handleSubmit, submitting: submitting })] }));
 }

package/dist/pages/SignUpPage.js

@@ -1,8 +1,7 @@
-import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useContext, useEffect, useMemo, useRef, useState, } from 'react';
 import { useNavigate, useLocation } from 'react-router-dom';
 import { Alert, Box, Button, Stack, TextField, Typography, } from '@mui/material';
-import { Helmet } from 'react-helmet';
 import { useTranslation } from 'react-i18next';
 import { NarrowPage } from '../layout/PageLayout';
 import { AuthContext } from '../auth/AuthContext';
@@ -118,7 +117,7 @@ export function SignUpPage() {
     const handleGoToLogin = () => {
         navigate('/login');
     };
-    return (_jsxs(NarrowPage, { title: t('Auth.LOGIN_SIGNUP_BUTTON'), subtitle: pageSubtitle, children: [_jsx(Helmet, { children: _jsxs("title", { children: [t('App.NAME'), " \u2013 ", t('Auth.LOGIN_SIGNUP_BUTTON')] }) }), signupModes.length === 0 ? (_jsx(Alert, { severity: "info", sx: SIGN_UP_PAGE_ALERT_SX, children: t('Auth.SELF_SIGNUP_DISABLED', 'Self sign-up is currently disabled.') })) : (_jsxs(_Fragment, { children: [successKey && (_jsx(Alert, { severity: "success", sx: SIGN_UP_PAGE_ALERT_SX, children: t(successKey, { email }) })), errorKey && (_jsx(Alert, { severity: "error", sx: SIGN_UP_PAGE_ALERT_SX, children: errorKey })), signupModes.length > 1 && (_jsx(Stack, { spacing: 1, sx: { mb: 2 }, children: _jsx(Stack, { spacing: 1, children: signupModes.map((entry) => (_jsx(Button, { variant: mode === entry ? 'contained' : 'outlined', onClick: () => setMode(entry), disabled: submitting, fullWidth: true, children: t(MODE_LABELS[entry] || entry, entry) }, entry))) }) })), _jsxs(Box, { component: "form", onSubmit: handleSubmit, sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: [_jsx(TextField, { label: t('Auth.EMAIL_LABEL'), type: "email", required: true, fullWidth: true, value: email, onChange: (e) => setEmail(e.target.value), disabled: submitting }), mode === 'self_signup_access_code' && (_jsx(TextField, { label: t('Auth.ACCESS_CODE_LABEL'), type: "text", required: true, fullWidth: true, value: accessCode, onChange: (e) => setAccessCode(e.target.value), disabled: submitting })), turnstileRequired && (_jsx(TurnstileWidget, { ref: turnstileWidgetRef, siteKey: authMethods.turnstile_site_key, onToken: setTurnstileToken })), _jsx(Button, { type: "submit", variant: "contained", disabled: submitting || (turnstileRequired && !turnstileToken), children: submitting
+    return (_jsxs(NarrowPage, { title: t('Auth.LOGIN_SIGNUP_BUTTON'), subtitle: pageSubtitle, children: [_jsx("title", { children: `${t('App.NAME')} – ${t('Auth.LOGIN_SIGNUP_BUTTON')}` }), signupModes.length === 0 ? (_jsx(Alert, { severity: "info", sx: SIGN_UP_PAGE_ALERT_SX, children: t('Auth.SELF_SIGNUP_DISABLED', 'Self sign-up is currently disabled.') })) : (_jsxs(_Fragment, { children: [successKey && (_jsx(Alert, { severity: "success", sx: SIGN_UP_PAGE_ALERT_SX, children: t(successKey, { email }) })), errorKey && (_jsx(Alert, { severity: "error", sx: SIGN_UP_PAGE_ALERT_SX, children: errorKey })), signupModes.length > 1 && (_jsx(Stack, { spacing: 1, sx: { mb: 2 }, children: _jsx(Stack, { spacing: 1, children: signupModes.map((entry) => (_jsx(Button, { variant: mode === entry ? 'contained' : 'outlined', onClick: () => setMode(entry), disabled: submitting, fullWidth: true, children: t(MODE_LABELS[entry] || entry, entry) }, entry))) }) })), _jsxs(Box, { component: "form", onSubmit: handleSubmit, sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: [_jsx(TextField, { label: t('Auth.EMAIL_LABEL'), type: "email", required: true, fullWidth: true, value: email, onChange: (e) => setEmail(e.target.value), disabled: submitting }), mode === 'self_signup_access_code' && (_jsx(TextField, { label: t('Auth.ACCESS_CODE_LABEL'), type: "text", required: true, fullWidth: true, value: accessCode, onChange: (e) => setAccessCode(e.target.value), disabled: submitting })), turnstileRequired && (_jsx(TurnstileWidget, { ref: turnstileWidgetRef, siteKey: authMethods.turnstile_site_key, onToken: setTurnstileToken })), _jsx(Button, { type: "submit", variant: "contained", disabled: submitting || (turnstileRequired && !turnstileToken), children: submitting
                                     ? t('Auth.SIGNUP_SUBMITTING')
                                     : t('Auth.SIGNUP_SUBMIT') })] })] })), _jsx(Box, { sx: { mt: 3 }, children: _jsxs(Typography, { variant: "body2", children: [t('Auth.SIGNUP_ALREADY_HAVE_ACCOUNT'), ' ', _jsx(Button, { onClick: handleGoToLogin, variant: "text", size: "small", children: t('Auth.SIGNUP_GO_TO_LOGIN') })] }) })] }));
 }

package/dist/pages/SignupConfirmPage.js

@@ -1,4 +1,4 @@
-import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // src/pages/SignupConfirmPage.jsx
 //
 // S13: Completes a pending registration. Reads the signed pending-token from
@@ -9,7 +9,6 @@ import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-run
 import React, { useMemo, useState } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { Alert, Box, Button, Stack, TextField, Typography, } from '@mui/material';
-import { Helmet } from 'react-helmet';
 import { useTranslation } from 'react-i18next';
 import { NarrowPage } from '../layout/PageLayout';
 import { confirmRegistration } from '../auth/authApi';
@@ -59,7 +58,7 @@ export function SignupConfirmPage() {
         }
     };
     const tokenMissing = !tokenFromUrl;
-    return (_jsxs(NarrowPage, { title: t('Auth.SIGNUP_CONFIRM_TITLE', 'Confirm your registration'), subtitle: t('Auth.SIGNUP_CONFIRM_SUBTITLE', 'Choose a password to finish creating your account.'), children: [_jsx(Helmet, { children: _jsxs("title", { children: [t('App.NAME'), " \u2013 ", t('Auth.SIGNUP_CONFIRM_TITLE', 'Confirm your registration')] }) }), tokenMissing ? (_jsxs(_Fragment, { children: [_jsx(Alert, { severity: "error", sx: SIGNUP_CONFIRM_PAGE_ALERT_SX, children: t('Auth.PENDING_TOKEN_INVALID', 'This confirmation link is invalid or expired.') }), _jsxs(Stack, { direction: "row", spacing: 1, sx: { mt: 1 }, children: [_jsx(Button, { onClick: () => navigate('/signup'), variant: "contained", children: t('Auth.SIGNUP_REQUEST_NEW', 'Request a new invitation') }), _jsx(Button, { onClick: () => navigate('/login'), variant: "text", children: t('Auth.SIGNUP_GO_TO_LOGIN', 'Go to login') })] })] })) : (_jsxs(_Fragment, { children: [errorKey && (_jsx(Alert, { severity: "error", sx: SIGNUP_CONFIRM_PAGE_ALERT_SX, children: errorKey })), _jsxs(Box, { component: "form", onSubmit: handleSubmit, sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: [_jsx(TextField, { label: t('Auth.NEW_PASSWORD_LABEL', 'New password'), type: "password", required: true, fullWidth: true, value: password, onChange: (e) => setPassword(e.target.value), disabled: submitting, autoComplete: "new-password" }), _jsx(TextField, { label: t('Auth.PASSWORD_CONFIRM_LABEL', 'Confirm new password'), type: "password", required: true, fullWidth: true, value: confirmPassword, onChange: (e) => setConfirmPassword(e.target.value), disabled: submitting, autoComplete: "new-password" }), _jsx(Button, { type: "submit", variant: "contained", disabled: submitting, children: submitting
+    return (_jsxs(NarrowPage, { title: t('Auth.SIGNUP_CONFIRM_TITLE', 'Confirm your registration'), subtitle: t('Auth.SIGNUP_CONFIRM_SUBTITLE', 'Choose a password to finish creating your account.'), children: [_jsx("title", { children: `${t('App.NAME')} – ${t('Auth.SIGNUP_CONFIRM_TITLE', 'Confirm your registration')}` }), tokenMissing ? (_jsxs(_Fragment, { children: [_jsx(Alert, { severity: "error", sx: SIGNUP_CONFIRM_PAGE_ALERT_SX, children: t('Auth.PENDING_TOKEN_INVALID', 'This confirmation link is invalid or expired.') }), _jsxs(Stack, { direction: "row", spacing: 1, sx: { mt: 1 }, children: [_jsx(Button, { onClick: () => navigate('/signup'), variant: "contained", children: t('Auth.SIGNUP_REQUEST_NEW', 'Request a new invitation') }), _jsx(Button, { onClick: () => navigate('/login'), variant: "text", children: t('Auth.SIGNUP_GO_TO_LOGIN', 'Go to login') })] })] })) : (_jsxs(_Fragment, { children: [errorKey && (_jsx(Alert, { severity: "error", sx: SIGNUP_CONFIRM_PAGE_ALERT_SX, children: errorKey })), _jsxs(Box, { component: "form", onSubmit: handleSubmit, sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: [_jsx(TextField, { label: t('Auth.NEW_PASSWORD_LABEL', 'New password'), type: "password", required: true, fullWidth: true, value: password, onChange: (e) => setPassword(e.target.value), disabled: submitting, autoComplete: "new-password" }), _jsx(TextField, { label: t('Auth.PASSWORD_CONFIRM_LABEL', 'Confirm new password'), type: "password", required: true, fullWidth: true, value: confirmPassword, onChange: (e) => setConfirmPassword(e.target.value), disabled: submitting, autoComplete: "new-password" }), _jsx(Button, { type: "submit", variant: "contained", disabled: submitting, children: submitting
                                     ? t('Auth.SIGNUP_CONFIRM_SUBMITTING', 'Confirming…')
                                     : t('Auth.SIGNUP_CONFIRM_SUBMIT', 'Confirm registration') })] }), _jsxs(Stack, { direction: "row", spacing: 1, sx: { mt: 3 }, children: [_jsx(Typography, { variant: "body2", children: t('Auth.SIGNUP_ALREADY_HAVE_ACCOUNT', 'Already have an account?') }), _jsx(Button, { onClick: () => navigate('/login'), variant: "text", size: "small", children: t('Auth.SIGNUP_GO_TO_LOGIN', 'Go to login') })] })] }))] }));
 }

package/dist/theme/createAppTheme.js

@@ -266,7 +266,8 @@ function createPaletteAwareComponents(palette, isDark) {
  * objects are created, so runtime app/site overrides cannot leave stale values.
  */
 export function createAppTheme(appConfig = {}) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+    var _r, _s;
     if (!((_a = appConfig === null || appConfig === void 0 ? void 0 : appConfig.palette) === null || _a === void 0 ? void 0 : _a.primary)) {
         throw new TypeError('createAppTheme: appConfig.palette.primary is required.');
     }
@@ -327,16 +328,16 @@ export function createAppTheme(appConfig = {}) {
         ? finalPalette.dataSeries.categorical.map((colour) => (deriveLightenedPageColour(colour, [finalPalette.background.paper], 3)))
         : finalPalette.dataSeries.categorical;
     const computedPalette = Object.assign(Object.assign({}, derivedStatusEntries), { controlBorder: Object.assign(Object.assign(Object.assign({}, finalPalette.controlBorder), derivedControlBorderEntries), { focus: isDark
-                ? ((_o = (_m = (_l = appConfig.palette) === null || _l === void 0 ? void 0 : _l.controlBorder) === null || _m === void 0 ? void 0 : _m.focus) !== null && _o !== void 0 ? _o : deriveLightenedColour(primaryMain, contrastSurfaces))
+                ? ((_r = (_m = (_l = appConfig.palette) === null || _l === void 0 ? void 0 : _l.controlBorder) === null || _m === void 0 ? void 0 : _m.focus) !== null && _r !== void 0 ? _r : deriveLightenedColour(primaryMain, contrastSurfaces))
                 : deriveFocusColour(finalPalette.primary.main, contrastSurfaces) }), primary: Object.assign(Object.assign(Object.assign({}, finalPalette.primary), (isDark && primaryMain !== finalPalette.primary.main
             ? withMainShades(primaryMain, primaryContrastText)
             : { main: primaryMain })), { contrastText: primaryContrastText }), dataSeries: { categorical: derivedSeries } });
     const resolvedPalette = Object.assign(Object.assign({}, finalPalette), computedPalette);
-    const fontFamily = ((_p = appConfig.typography) === null || _p === void 0 ? void 0 : _p.fontFamily) || BASELINE_STATIC.typography.fontFamily;
+    const fontFamily = ((_o = appConfig.typography) === null || _o === void 0 ? void 0 : _o.fontFamily) || BASELINE_STATIC.typography.fontFamily;
     // The h4 step below `sm` follows the app's own `sm` if it overrides the breakpoint,
     // so the step always ends where theme.breakpoints.down('sm') ends.
     const _t = BASELINE_STATIC.typography.h4, _u = breakpointDownQuery(BREAKPOINT_SM), h4Mobile = _t[_u], h4Base = __rest(_t, [typeof _u === "symbol" ? _u : _u + ""]);
-    const smValue = (_s = (_r = (_q = appConfig.breakpoints) === null || _q === void 0 ? void 0 : _q.values) === null || _r === void 0 ? void 0 : _r.sm) !== null && _s !== void 0 ? _s : BREAKPOINT_SM;
+    const smValue = (_s = (_q = (_p = appConfig.breakpoints) === null || _p === void 0 ? void 0 : _p.values) === null || _q === void 0 ? void 0 : _q.sm) !== null && _s !== void 0 ? _s : BREAKPOINT_SM;
     return createTheme(Object.assign(Object.assign({}, BASELINE_STATIC), { typography: Object.assign(Object.assign({}, BASELINE_STATIC.typography), { fontFamily, h4: Object.assign(Object.assign({}, h4Base), { [breakpointDownQuery(smValue)]: h4Mobile }) }), fontLoading: Object.assign(Object.assign({}, BASELINE_STATIC.fontLoading), { weights: [...BASELINE_STATIC.fontLoading.weights] }), shadow: isDark ? Object.assign(Object.assign({}, BASELINE_STATIC.shadow), { overlay: DARK_OVERLAY_SHADOW }) : BASELINE_STATIC.shadow, palette: resolvedPalette, themeCompleteness: {
             baseline: true,
             exemptions: (isDark

package/dist/theme/kitSxEntry.js

@@ -0,0 +1,11 @@
+/**
+ * One registry entry: a kit-owned sx object paired with the baseline-styled MUI key it targets.
+ * Lives apart from kitSxRegistry so a sub-path registry can build entries without importing every kit component.
+ */
+export const createKitSxEntry = (component, muiComponent, sx, exportName, slots) => ({
+    component,
+    muiComponent,
+    sx,
+    slots,
+    exportName,
+});

package/dist/theme/kitSxRegistry.js

@@ -16,7 +16,6 @@ import { SOFT_CHIP_CAVEAT_SX, SOFT_CHIP_ROOT_SX, SOFT_CHIP_STATUS_SX, } from '..
 import { SUPPORT_RECOVERY_AGENT_BUTTON_SX, SUPPORT_RECOVERY_AGENT_PAPER_SX, SUPPORT_RECOVERY_ALERT_SX, } from '../components/SupportRecoveryRequestsTab';
 import { USER_INVITE_ACTION_SX, USER_INVITE_ALERT_SX } from '../components/UserInviteComponent';
 import { USER_LIST_ACTION_SX, USER_LIST_ALERT_SX, USER_LIST_BODY_CELL_SX, USER_LIST_EMPTY_CELL_SX, USER_LIST_HEADER_CELL_SX, } from '../components/UserListComponent';
-import { CHART_FRAME_ALERT_SX, CHART_FRAME_ROOT_SX } from '../components/charts/ChartFrame';
 import { PAGE_LAYOUT_CONTAINER_SX } from '../layout/PageLayout';
 import { SECTION_NAV_DRAWER_PAPER_SX, SECTION_NAV_GROUP_PAPER_SX, } from '../layout/SectionNav';
 import { ATTACHMENT_LIST_ALERT_SX, ATTACHMENT_LIST_LIGHTBOX_ACTION_SX, } from '../messaging/AttachmentList';
@@ -33,8 +32,7 @@ import { LOGIN_PAGE_ALERT_SX } from '../pages/LoginPage';
 import { SIGN_UP_PAGE_ALERT_SX } from '../pages/SignUpPage';
 import { SIGNUP_CONFIRM_PAGE_ALERT_SX } from '../pages/SignupConfirmPage';
 import { REAUTH_MODAL_ALERT_SX, REAUTH_MODAL_TEXT_FIELD_SX } from '../auth/ReauthModal';
-import { CHAT_LIST_ARCHIVED_ACTION_SX, CHAT_LIST_ROW_ACTION_SX } from '../chat/ChatList';
-import { CHAT_THREAD_NOTICE_SX, CHAT_THREAD_TOOL_CHIP_SX } from '../chat/ChatThread';
+import { createKitSxEntry } from './kitSxEntry';
 const SX_EXPORTS = {
     ACCESS_CODE_ACTION_SX,
     ACCESS_CODE_ALERT_SX,
@@ -50,8 +48,6 @@ const SX_EXPORTS = {
     BROWSER_PUSH_FORM_CONTROL_LABEL_SX,
     BULK_INVITE_ACTION_SX,
     BULK_INVITE_ALERT_SX,
-    CHART_FRAME_ALERT_SX,
-    CHART_FRAME_ROOT_SX,
     COMPOSER_EMOJI_BUTTON_SX,
     COMPOSER_MESSAGE_FIELD_SX,
     COMPOSER_SEND_BUTTON_SX,
@@ -105,10 +101,6 @@ const SX_EXPORTS = {
     SUPPORT_RECOVERY_AGENT_PAPER_SX,
     SUPPORT_RECOVERY_ALERT_SX,
     THREAD_DAY_SEPARATOR_SX,
-    CHAT_LIST_ARCHIVED_ACTION_SX,
-    CHAT_LIST_ROW_ACTION_SX,
-    CHAT_THREAD_NOTICE_SX,
-    CHAT_THREAD_TOOL_CHIP_SX,
     USER_INVITE_ACTION_SX,
     USER_INVITE_ALERT_SX,
     USER_LIST_ACTION_SX,
@@ -125,6 +117,7 @@ const entry = (component, muiComponent, sx, slots) => ({
     slots,
     exportName: SX_EXPORT_NAMES.get(sx),
 });
+export { createKitSxEntry };
 /**
  * Kit-owned, top-level sx objects paired with the baseline-styled MUI key they
  * target. Conditional and nested sx remain a documented lower bound in the
@@ -176,8 +169,6 @@ export const KIT_COMPONENT_SX_REGISTRY = [
     entry('UserListComponent.headerCell', 'MuiTableCell', USER_LIST_HEADER_CELL_SX),
     entry('UserListComponent.emptyCell', 'MuiTableCell', USER_LIST_EMPTY_CELL_SX),
     entry('UserListComponent.bodyCell', 'MuiTableCell', USER_LIST_BODY_CELL_SX),
-    entry('ChartFrame.root', 'MuiPaper', CHART_FRAME_ROOT_SX),
-    entry('ChartFrame.alert', 'MuiAlert', CHART_FRAME_ALERT_SX),
     entry('PageLayout.container', 'MuiContainer', PAGE_LAYOUT_CONTAINER_SX),
     entry('SectionNav.drawerPaper', 'MuiDrawer', SECTION_NAV_DRAWER_PAPER_SX, ['paper']),
     entry('SectionNav.drawerPaperBase', 'MuiPaper', SECTION_NAV_DRAWER_PAPER_SX),
@@ -208,8 +199,4 @@ export const KIT_COMPONENT_SX_REGISTRY = [
     entry('SignupConfirmPage.alert', 'MuiAlert', SIGNUP_CONFIRM_PAGE_ALERT_SX),
     entry('ReauthModal.alert', 'MuiAlert', REAUTH_MODAL_ALERT_SX),
     entry('ReauthModal.field', 'MuiTextField', REAUTH_MODAL_TEXT_FIELD_SX),
-    entry('ChatList.rowAction', 'MuiIconButton', CHAT_LIST_ROW_ACTION_SX),
-    entry('ChatList.archivedAction', 'MuiButton', CHAT_LIST_ARCHIVED_ACTION_SX),
-    entry('ChatThread.toolChip', 'MuiChip', CHAT_THREAD_TOOL_CHIP_SX),
-    entry('ChatThread.notice', 'MuiAlert', CHAT_THREAD_NOTICE_SX),
 ];

package/dist/theme/themeCompleteness.js

@@ -22,10 +22,7 @@ const TYPOGRAPHY_SURFACES = TYPOGRAPHY_VARIANTS.flatMap((variant) => ['fontSize'
 const componentPath = (component, path) => pathSurface(`components.${component}.${path}`);
 const componentKeyLeaf = (component, path, key, leaf) => keyedSurface(`components.${component}.${path}.${key}.${leaf}`, (theme) => { var _a, _b; return (_b = (_a = getPath(theme, `components.${component}.${path}`)) === null || _a === void 0 ? void 0 : _a[key]) === null || _b === void 0 ? void 0 : _b[leaf]; });
 const COMPONENT_SURFACES = [
-    keyedSurface('components.MuiCssBaseline.reduced-motion.transitionDuration', (theme) => {
-        var _a, _b, _c, _d, _e;
-        return (_e = (_d = (_c = (_b = (_a = theme.components) === null || _a === void 0 ? void 0 : _a.MuiCssBaseline) === null || _b === void 0 ? void 0 : _b.styleOverrides) === null || _c === void 0 ? void 0 : _c['@media (prefers-reduced-motion: reduce)']) === null || _d === void 0 ? void 0 : _d['*, *::before, *::after']) === null || _e === void 0 ? void 0 : _e.transitionDuration;
-    }),
+    keyedSurface('components.MuiCssBaseline.reduced-motion.transitionDuration', (theme) => { var _a, _b, _c, _d, _e; return (_e = (_d = (_c = (_b = (_a = theme.components) === null || _a === void 0 ? void 0 : _a.MuiCssBaseline) === null || _b === void 0 ? void 0 : _b.styleOverrides) === null || _c === void 0 ? void 0 : _c['@media (prefers-reduced-motion: reduce)']) === null || _d === void 0 ? void 0 : _d['*, *::before, *::after']) === null || _e === void 0 ? void 0 : _e.transitionDuration; }),
     componentPath('MuiButton', 'defaultProps.disableElevation'),
     componentPath('MuiButton', 'styleOverrides.root.minHeight'),
     componentPath('MuiButton', 'styleOverrides.root.borderRadius'),
@@ -69,10 +66,7 @@ const COMPONENT_SURFACES = [
     componentPath('MuiChip', 'styleOverrides.root.height'),
     componentPath('MuiChip', 'styleOverrides.root.borderRadius'),
     componentPath('MuiChip', 'styleOverrides.root.fontSize'),
-    keyedSurface('components.MuiChip.styleOverrides.root.coarse-hit-area.inset', (theme) => {
-        var _a, _b, _c, _d, _e, _f;
-        return (_f = (_e = (_d = (_c = (_b = (_a = theme.components) === null || _a === void 0 ? void 0 : _a.MuiChip) === null || _b === void 0 ? void 0 : _b.styleOverrides) === null || _c === void 0 ? void 0 : _c.root) === null || _d === void 0 ? void 0 : _d['@media (any-pointer: coarse)']) === null || _e === void 0 ? void 0 : _e['&::after']) === null || _f === void 0 ? void 0 : _f.inset;
-    }),
+    keyedSurface('components.MuiChip.styleOverrides.root.coarse-hit-area.inset', (theme) => { var _a, _b, _c, _d, _e, _f; return (_f = (_e = (_d = (_c = (_b = (_a = theme.components) === null || _a === void 0 ? void 0 : _a.MuiChip) === null || _b === void 0 ? void 0 : _b.styleOverrides) === null || _c === void 0 ? void 0 : _c.root) === null || _d === void 0 ? void 0 : _d['@media (any-pointer: coarse)']) === null || _e === void 0 ? void 0 : _e['&::after']) === null || _f === void 0 ? void 0 : _f.inset; }),
     componentPath('MuiBottomNavigation', 'styleOverrides.root.boxShadow'),
     componentPath('MuiBottomNavigation', 'styleOverrides.root.backgroundColor'),
     componentPath('MuiBottomNavigationAction', 'styleOverrides.root.padding'),
@@ -95,10 +89,7 @@ const COMPONENT_SURFACES = [
     componentKeyLeaf('MuiTextField', 'styleOverrides.root', '@media (any-pointer: coarse)', 'minWidth'),
     componentPath('MuiOutlinedInput', 'styleOverrides.root.minHeight'),
     componentPath('MuiOutlinedInput', 'styleOverrides.root.borderRadius'),
-    keyedSurface('components.MuiOutlinedInput.variants.non-multiline-height', (theme) => {
-        var _a, _b, _c, _d, _e;
-        return (_e = (_d = (_c = (_b = (_a = theme.components) === null || _a === void 0 ? void 0 : _a.MuiOutlinedInput) === null || _b === void 0 ? void 0 : _b.variants) === null || _c === void 0 ? void 0 : _c.find(({ props }) => (props === null || props === void 0 ? void 0 : props.multiline) === false)) === null || _d === void 0 ? void 0 : _d.style) === null || _e === void 0 ? void 0 : _e.height;
-    }),
+    keyedSurface('components.MuiOutlinedInput.variants.non-multiline-height', (theme) => { var _a, _b, _c, _d, _e; return (_e = (_d = (_c = (_b = (_a = theme.components) === null || _a === void 0 ? void 0 : _a.MuiOutlinedInput) === null || _b === void 0 ? void 0 : _b.variants) === null || _c === void 0 ? void 0 : _c.find(({ props }) => (props === null || props === void 0 ? void 0 : props.multiline) === false)) === null || _d === void 0 ? void 0 : _d.style) === null || _e === void 0 ? void 0 : _e.height; }),
     componentKeyLeaf('MuiOutlinedInput', 'styleOverrides.root', '@media (any-pointer: coarse)', 'minHeight'),
     componentKeyLeaf('MuiOutlinedInput', 'styleOverrides.root', '@media (any-pointer: coarse)', 'minWidth'),
     componentKeyLeaf('MuiOutlinedInput', 'styleOverrides.root', '& .MuiOutlinedInput-notchedOutline', 'borderColor'),

package/dist/utils/auth-errors.js

@@ -1,8 +1,9 @@
 // src/utils/auth-errors.js
 export function extractErrorInfo(error) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
-    const status = (_b = (_a = error.response) === null || _a === void 0 ? void 0 : _a.status) !== null && _b !== void 0 ? _b : null;
-    const data = (_d = (_c = error.response) === null || _c === void 0 ? void 0 : _c.data) !== null && _d !== void 0 ? _d : null;
+    var _a, _b;
+    var _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+    const status = (_c = (_a = error.response) === null || _a === void 0 ? void 0 : _a.status) !== null && _c !== void 0 ? _c : null;
+    const data = (_d = (_b = error.response) === null || _b === void 0 ? void 0 : _b.data) !== null && _d !== void 0 ? _d : null;
     if (!data) {
         return {
             status,

package/package.json

@@ -1,8 +1,20 @@
 {
   "name": "@micha.bigler/ui-core-micha",
-  "version": "3.14.3",
+  "version": "4.0.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
+  "exports": {
+    ".": "./dist/index.js",
+    "./charts": "./dist/entries/charts.js",
+    "./chat": "./dist/entries/chat.js",
+    "./markdown": "./dist/entries/markdown.js",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "CHANGELOG.md"
+  ],
   "sideEffects": [
     "./src/index.js",
     "./dist/index.js",
@@ -21,23 +33,34 @@
   },
   "private": false,
   "dependencies": {
-    "@fontsource/dm-sans": "^5.2.8",
-    "react-markdown": "^10.1.0",
-    "remark-gfm": "^4.0.1"
+    "@fontsource/dm-sans": "^5.3.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
+    "@mui/icons-material": "^7.3.11",
     "@mui/material": "^7.3.11",
     "@mui/x-charts": "^8.0.0",
     "axios": "^1.16.1",
-    "i18next": "^25.10.10 || ^26.0.0",
+    "i18next": ">= 26.2.0",
     "qrcode.react": "^4.2.0",
     "react": "^19.2.6",
     "react-dom": "^19.2.6",
-    "react-helmet": "^6.1.0",
     "react-i18next": "^16.3.5 || ^17.0.0",
-    "react-router-dom": "^7.15.1"
+    "react-markdown": "^10.1.0",
+    "react-router-dom": "^7.15.1",
+    "remark-gfm": "^4.0.1"
+  },
+  "peerDependenciesMeta": {
+    "@mui/x-charts": {
+      "optional": true
+    },
+    "react-markdown": {
+      "optional": true
+    },
+    "remark-gfm": {
+      "optional": true
+    }
   },
   "scripts": {
     "build": "tsc -p tsconfig.build.json",
@@ -46,14 +69,16 @@
   },
   "devDependencies": {
     "@mui/icons-material": "^7.3.11",
-    "@mui/x-charts": "^8.0.0",
-    "@testing-library/react": "^16.3.2",
-    "@vitejs/plugin-react": "^6.0.5",
-    "i18next": "^26.2.0",
-    "jsdom": "^29.1.1",
-    "react-i18next": "^17.0.8",
-    "typescript": "^6.0.3",
-    "vite": "^8.2.0",
-    "vitest": "^4.1.10"
+    "@mui/x-charts": "^8.29.3",
+    "@testing-library/react": "^16.3.3",
+    "@vitejs/plugin-react": "^6.1.2",
+    "i18next": "^26.4.2",
+    "jsdom": "^30.1.2",
+    "react-i18next": "^17.0.16",
+    "react-markdown": "^10.1.0",
+    "remark-gfm": "^4.0.1",
+    "typescript": "^7.0.2",
+    "vite": "^8.3.4",
+    "vitest": "^5.0.3"
   }
 }

package/.github/workflows/publish.yml

@@ -1,126 +0,0 @@
-name: Publish ui-core-micha to npm
-
-on:
-  push:
-    branches:
-      - main
-    paths:
-      - "package.json"
-      - "pnpm-lock.yaml"
-      - "src/**"
-      - "tsconfig.build.json"
-  workflow_dispatch:
-
-jobs:
-  publish:
-    runs-on: ubuntu-latest
-    permissions:
-      id-token: write
-      contents: read
-
-    steps:
-      - name: Check out code
-        uses: actions/checkout@v6
-        with:
-          fetch-depth: 2
-
-      - name: Set up Node
-        uses: actions/setup-node@v6
-        with:
-          node-version: '24.15.0'
-          registry-url: 'https://registry.npmjs.org'
-
-      - name: Decide whether to publish
-        id: version_check
-        run: |
-          node <<'NODE'
-          const fs = require('fs');
-          const cp = require('child_process');
-
-          const outputPath = process.env.GITHUB_OUTPUT;
-          const githubEvent = process.env.GITHUB_EVENT_NAME || '';
-
-          function writeOutput(value) {
-            fs.appendFileSync(outputPath, `should_publish=${value}\n`, 'utf8');
-          }
-
-          if (githubEvent === 'workflow_dispatch') {
-            console.log('Manual dispatch: publish enabled.');
-            writeOutput('true');
-            process.exit(0);
-          }
-
-          const current = JSON.parse(fs.readFileSync('package.json', 'utf8')).version;
-          let published;
-          try {
-            published = cp.execFileSync(
-              'npm',
-              ['view', '@micha.bigler/ui-core-micha', 'version'],
-              { encoding: 'utf8' }
-            ).trim();
-          } catch (error) {
-            console.log(
-              'Could not fetch the published npm version (the package may not exist yet or the registry is unavailable). Publishing.'
-            );
-            writeOutput('true');
-            process.exit(0);
-          }
-
-          console.log(`Published version: ${published}`);
-          console.log(`Current version:  ${current}`);
-
-          function parse(version) {
-            return version.split('.').map((part) => Number.parseInt(part, 10) || 0);
-          }
-
-          function greaterThan(a, b) {
-            const left = parse(a);
-            const right = parse(b);
-            const maxLength = Math.max(left.length, right.length);
-            for (let index = 0; index < maxLength; index += 1) {
-              const lv = left[index] || 0;
-              const rv = right[index] || 0;
-              if (lv > rv) return true;
-              if (lv < rv) return false;
-            }
-            return false;
-          }
-
-          if (greaterThan(current, published)) {
-            console.log('Version increased. Publishing.');
-            writeOutput('true');
-          } else {
-            console.log('Version did not increase. Skipping publish.');
-            writeOutput('false');
-          }
-          NODE
-
-      - name: Set up pnpm
-        if: steps.version_check.outputs.should_publish == 'true'
-        uses: pnpm/action-setup@v6
-        with:
-          version: 11.1.2
-
-      - name: Show version from package.json
-        if: steps.version_check.outputs.should_publish == 'true'
-        run: node -e "console.log('Version from package.json:', require('./package.json').version);"
-
-      - name: Install dependencies (pnpm)
-        if: steps.version_check.outputs.should_publish == 'true'
-        run: pnpm install --frozen-lockfile
-
-      - name: Build
-        if: steps.version_check.outputs.should_publish == 'true'
-        run: pnpm run build
-
-      - name: Run tests
-        if: steps.version_check.outputs.should_publish == 'true'
-        run: pnpm run test
-
-      - name: Ensure recent npm for trusted publishing
-        if: steps.version_check.outputs.should_publish == 'true'
-        run: npm install -g npm@latest
-
-      - name: Publish to npm (Trusted Publishing)
-        if: steps.version_check.outputs.should_publish == 'true'
-        run: npm publish --access public

package/DESIGN.md

@@ -1,60 +0,0 @@
-# Frontend Design Principles
-
-How we design app frontends across the estate. **Consistency here is consistency of METHOD, not one identical look** — every app starts from the shared `createAppTheme` baseline and owns its identity overrides (principle 1); the shared surface (`ui-core-micha` theme, components, charts, layout) carries the structural consistency. hram is the worked example throughout, not a look other apps must copy.
-
-These principles are the spec a **prototype** encodes and the implementation matches. `frontend-engineering` (build) and `ui_reviewer` (review) point here; the prototype workflow is the `frontend-design` skill.
-
-## Identity
-
-### Dark mode
-
-Opt in with `createAppTheme({ palette: { mode: 'dark', primary } })`. The factory keeps a primary that
-already clears 4.5:1 on the dark page and lightens one that does not; its button text is whichever of
-`#FFFFFF` and the page colour has the stronger contrast. Baseline status colours and control borders are
-lightened only when a baseline-owned value fails on an app's dark page; app-supplied values remain owned by
-the app. Dialogs, menus, popovers, and drawers use the dark overlay surface and shadow, while resting
-surfaces remain outlined and shadowless. Data-series colours are lightened until they clear 3:1 on the
-theme's own paper, so an app-owned dark paper adapts without changing its supplied series. Apps own their
-dark primary and may own reviewed dark surfaces and ink; the baseline owns the remaining dark tokens.
-
-The baseline's page-derived colours are `success.main`, `warning.main`, `error.main`, `info.main`,
-`controlBorder.main`, `controlBorder.hover`, and `controlBorder.error`, alongside the existing
-`controlBorder.focus`: a fixed colour cannot promise WCAG contrast on every page background. The baseline therefore
-tries for a passing colour rather than a fixed hex that must appear unchanged on every site — derivation is capped
-(the same bounded darken/alpha steps `controlBorder.focus` already used) and can still leave a contrast finding on a
-page extreme enough that no derived shade clears the threshold; values that already pass remain byte-identical,
-while baseline values that fail are derived against the theme's own page.
-
-1. **Honor the shared baseline and the app's identity; don't invent a parallel system.** `ui-core-micha`'s `createAppTheme` deliberately owns the complete visual baseline. Each app supplies its identity through `palette.primary` and `fontFamily`, plus reviewed overrides where its real design requires them (hram: primary blue `#468AB2`). **Match first, then elevate.** Never invent a parallel language — a made-up teal / pills / breadcrumb vocabulary was the v1 mistake.
-2. **One accent, deliberately placed.** Interactive = the app's one accent colour. **Data colours are a separate layer with a shared default that apps may override.** Status (green / amber / red) is semantic and is NEVER repurposed as a series colour. Restraint over decoration.
-3. **Commit to the app's theme reality — with intent.** If the app is single-theme (hram is light-only), commit to that deliberately rather than bolting on dark mode as an afterthought — a decision, not an omission. The estate does NOT mandate light-only; it is per-app — but whichever it is, it is on purpose.
-
-## Information design (it's a tool, not a document)
-
-4. **Scan and operate, not read.** Summary before detail; state encoded in form (chips, knee-markers); interactive things look interactive.
-5. **The user's language, not the system's.** Humanize labels (`incidence_scale` → "Incidence scale"); keep the raw name reachable on hover for the technicians — readability without losing traceability. Words are design material.
-6. **Reduce help to the minimum, don't remove it.** Explanation lives in on-demand affordances (ⓘ-popover, provisional-chip), never in permanent banners or helper sentences — in doubt a chip, not a sentence; less noise, same information.
-7. **Design the edge-states, not just the happy path.** An empty / "no frontier" state gets a real design (statement + CTA), never a bare alert.
-
-## Charts (read by humans, executed by code)
-
-8. **Every chart earns:** axis labels (with units), a legend only when >1 series, a tooltip, theme-token colours, container-responsive sizing, and empty/loading states. **Single-hue for magnitude; diverging (blue/red around zero) ONLY for signed data.** The concrete data palette is a separate layer with a shared `ui-core-micha` default that apps override when their domain calls for it.
-   **Dual-axis is a default-off exception, opt-in only** (CHART-5, operator decision): the shared `TimeSeriesChart` preset supports a second y-axis via a per-series `axis: 'secondary'` field specifically for two series sharing one axis at very different scales/units (e.g. a user count vs. hours) where series-toggles alone leave one series unreadable. Reach for it only under that same condition, not as a general layout choice — a single shared axis (or toggles) stays the default everywhere else.
-8a. **Axis titles: categorical axis gets none by default; numeric axis carries the quantity and unit, once.** A categorical axis' ticks are names (`"Session 1"`, ward names) — a title only restates their type; add one only when the ticks are codes or abbreviations whose kind is not self-evident. A numeric axis is meaningless without a title naming the quantity and its unit — unless the ticks already show the unit (`%`, a currency symbol) and the panel heading already names the quantity, in which case a title repeats both. **The unit belongs in the title once, never in every tick** (`"Accessibility (minutes) (min)"` over ticks `"0.0 min"` was measured live — the unit three times on one axis). This is a decision the caller makes per axis, not something the chart preset silently applies or suppresses (THEME-9) — a label the caller deliberately set is never auto-dropped.
-8b. **Scatter: neutral by default; colour only when it encodes a real dimension.** An undifferentiated point cloud is one neutral mass (the role register's neutral, not a series/KPI-identity hue) — colour is earned by a genuine data dimension (a category, a continuous measure), never applied just to look intentional. `ScatterChart` (THEME-10, drawn from three real consumers — hram's allocation-performance, access-gap, and optimization-results panels) supports three modes: neutral (default, single series, no colour set), categorical (multiple series, one colour per series, discrete legend — draw the colours from the app's own family/role register, not a hand-indexed array), and continuous (the caller resolves a per-point colour from its own scale and applies it via `getPointStyle`; this package does not ship a colour-scale/legend component). Bubble sizing (`sizeAccessor`) always draws largest-first — an unordered bubble chart with no defined draw order is silently wrong, not a stylistic choice. Individually marked points (a hollow status-quo point against filled candidates) go through the same `getPointStyle` hook. Reference geometry (a computed curve, a labelled reference line) is composed as `children`, reading the chart's own live scale (`ScatterReferenceCurve`/`ScatterReferenceLine`) rather than a second, hand-rolled pixel mapping. **Not this preset:** row-based dot plots (a forest plot, a tornado) — categorical y-axis, 150–220px of row labels, row-density as the layout problem — are a different chart family with their own preset, not a scatter with a tall left margin.
-9. **Ground it in the real subject matter.** Faithful structures from the real panels (hram: Morris-tornado, Pareto/knee, CI-strip, allocation-scatter with shape-encoded sources) — no lorem, no generic charts. Hence: **scout the real subject before building.**
-
-## Craft
-
-10. **Prototype = spec, parity = guardrail — both directions, within a DECLARED coverage.** Purely visual/UX — function stays; **"No behaviour / permission / data-contract change"** is the hard condition in the WO. Prototypes are routinely **partial** (tabs undrawn, flows stubbed), and nobody downstream can tell a deliberate omission from a required removal — so **prototype silence never authorizes a removal; the Envelope's "Replaces / removes" list does.** Every prototype therefore **declares what it covers and what it leaves untouched**. Inside the covered area each omission is resolved at authoring time into *removes* or *deliberately keeps*, leaving nothing ambiguous; outside it the prototype says nothing. Parity is then checked both ways **within that coverage**: everything drawn is present, and nothing listed as removed survives. **Inventory is not enough.** Presence and absence say nothing about weight, density or colour — an implementation can pass this check completely and still read heavier and older than the prototype. Parity therefore also requires a **rendered side-by-side at two widths** before the change lands (the Orchestrator's — `AGENTS.md` → Reviews), and the token values themselves come from the artifact's `<style>` block via the Envelope's token delta list. **A redesign that ends up net-additive has failed**, however good its new parts — shipping MORE UI than before is the estate's recurring cleanup failure (status bands, duplicated badges, tip text layered on top of the very legacy the redesign was meant to replace).
-11. **Align to the shipped reality.** When related features land, pull the prototype onto them so it is a truthful spec, not a contradicting vision.
-12. **Avoid the generic "AI look"; take details seriously.** No cream / serif / neon default; embed the real font (CSP-safe as a data-URI, not a silent-fallback risk); `tabular-nums` for aligned numbers; a11y (role/aria on chart regions, focusable info). **Template tells to CUT** (unless the app's design system genuinely specifies them): monospace-uppercase **eyebrow / kicker labels** (e.g. `IMARA · ADVANCING RESILIENT HEALTH SYSTEMS`), decorative **pills / badges**, `FIG. 01 ·` / `F.01` **figure captions**, `↳`-prefixed **micro-links**, **oversized display** headlines, **sketchy / hand-drawn** styling, and **explanatory paragraphs that restate the UI** (help is on-demand — see #6). Restraint is the default; each of these is added only with a real reason.
-
-For the **design craft** of a prototype (an HTML artifact) and its charts, load Claude's built-in **`artifact-design`** (design fundamentals) and **`dataviz`** (charts) skills and apply them WITHIN these principles — this doc adds the estate method (honor the app's OWN tokens, restraint), it does not replace that craft, and it must not crowd it out (load both). Do NOT default to **`swisstph-design`**: it imposes the Swiss-TPH house brand and conflicts with #1 (honor the app's own tokens).
-
-## Also — structural dimensions
-
-13. **Spacing / density = tool density, not document width.** A defined spacing rhythm, dense enough to scan and operate — not airy like a reading document. Use the theme's spacing scale; don't hand-pick pixel gaps.
-14. **Responsive = container-sized, not fixed px.** Layouts and charts size to their container; define breakpoint behaviour deliberately (what stacks, what hides, what scrolls) — the same container-responsive rule the charts already follow.
-15. **Motion = restrained and functional.** Transitions serve orientation/feedback (state change, reveal), never decoration. Short, few, purposeful; respect `prefers-reduced-motion`.
-16. **Prefer icons for secondary actions where the meaning is conventional.** A dense action row reads better as one labelled primary action plus **icon buttons** (preview, download, edit, delete, overflow) than as a row of text buttons — and a labelled `Button` is simply the cheapest thing to type, so implementations drift toward text-heavy rows the prototype never had. Conditions: use an **established glyph** (never invented iconography); always pair it with a **`Tooltip` AND an `aria-label`**, since an icon-only control otherwise has no accessible name; and **keep the text label** when the action is primary, destructive without a confirm step, or app-specific enough that no conventional icon exists. A tooltip may NAME an action — if it has to explain a concept, the control needs a label, or on-demand help (#6).