@vectramindnpm/unified-design-system 0.1.0

package/README.md

@@ -0,0 +1,255 @@
+# unified-design-system
+
+Standalone, publishable UI component library extracted from Firstpass-Neo's
+`src/designSystem` (design tokens) and `src/components/ui` (29 components), with the
+app-specific couplings removed so it can be installed as a plain npm dependency in any
+React app — and, later, browsed in its own Storybook.
+
+## What's here
+
+```
+src/
+  tokens/            ← designTokens.js → semanticTokens.js → componentTokens.js (+ index.js barrel)
+  lib/utils.ts        ← cn() (clsx + tailwind-merge)
+  types/view-mode.ts   ← local EViewMode enum (stand-in for the app's models/utilitiesModel)
+  components/ui/       ← all 29 components — implementation only (.tsx/.ts/.css), no stories
+  stories/               ← one *.stories.tsx per component, kept separate from components/ui/
+  styles/
+    tokens.css          ← design-token CSS custom properties (from the app's variables.css)
+    shadcn-base.css      ← the shadcn-style base HSL vars a few components use
+    theme.css            ← Tailwind v4 `@theme inline` bridge (auto-generated, see below)
+    components.css        ← custom classNames the components render beyond tokens/Tailwind
+    icon-font.css           ← the `fp-neo` icon font (icon-neo-*) — see below
+    fonts.css                ← Inter variable-font @font-face
+    fonts/                     ← the actual font files (fp-neo.*, Inter .woff2)
+    index.css                 ← styles.css entry: imports all of the above
+  index.ts             ← the package's public barrel export
+tailwind-tokens.cjs   ← flat Tailwind v3 color/radius/spacing map (from the app's tailwind.tokens.cjs)
+tailwind-preset.js     ← Tailwind v3 preset for consumers still on Tailwind v3
+```
+
+The Rsbuild app in the rest of this repo (`src/App.tsx`, `.storybook/`) is a local dev
+harness / smoke test for the same `src/` — it is **not** what gets published.
+
+## What changed vs. the original app code
+
+Per [docs/design-system-npm-storybook-guide.md](../../../GITHUB/Firstpass-Neo/docs/design-system-npm-storybook-guide.md)'s
+Phase 1 decoupling, plus a few couplings that guide's scan didn't catch:
+
+- **`semanticTokens`/`designTokens`/`componentTokens`** — every `ui/*` file that imported
+  these through `../../helpers/helpersIndex` now imports directly from `../../tokens`.
+- **i18n removed entirely** (per explicit request, not just made optional) — `icon.tsx`,
+  `buttonIcon.tsx`, `delete-action.tsx` no longer import `react-i18next` or
+  `getTranslationKey`. Tooltip/aria labels fall back to a **static string** (the icon
+  `name`, or a hardcoded label like `"Delete"`/`"Refresh"`) instead of a translation
+  lookup. If you need i18n later, wrap the exported components in your own thin
+  wrapper that passes a translated `tooltipText` prop — every component that shows a
+  label already accepts one.
+- **`view-toggle.tsx`** — dropped `getSessionStateKey`/`getViewType` (app's
+  `internaljscontrols.ts`) and `useSelector` (Redux). `ViewToggle` is now a controlled
+  component (`viewMode` + `onViewModeChange` props); `useViewMode()` is a plain
+  `useState` + `localStorage` hook with no Redux/app dependency.
+- **`truncated-text.tsx`** — same Redux/session coupling removed; takes a `viewMode` prop
+  instead of reading it from the app's store.
+- **`toast.tsx`** — the `Toast` component itself was already prop-driven. Its
+  `useToast()` hook (which dispatched into the app's own Redux alert store) was
+  app-specific state wiring, not a reusable UI primitive, so it's not included — drive
+  `<Toast onClose={...} />` from your own state instead.
+- **`loader.tsx`** — dropped the `useSelector` read of the app's `Layout.loading` Redux
+  state; `Loader` now just uses its own `isLoading` prop. The loading GIF is bundled
+  into the package (inlined as a data URI at build time) instead of importing from the
+  app's `src/icons/`.
+- **`time-picker.scss` → `time-picker.css`** — the original Sass file was nested under
+  the app's `#fpneo` Tailwind-important selector (would never match elsewhere) and used
+  Sass-only nesting. Flattened to plain, framework-agnostic CSS with its `@apply`
+  utilities inlined as literal styles, so it needs no Sass or Tailwind build step at all.
+- **`models/utilitiesModel.EViewMode`** → copied locally as `types/view-mode.ts` (it was
+  a two-value enum with no other app dependency).
+- A couple of components (`dropdown-menu.tsx`, `popover.tsx`, `tooltip.tsx`,
+  `expandable-search.tsx`, `table.tsx`) needed small, behavior-preserving TypeScript
+  fixes (a stricter `useRef`/`RefObject` generic, a `type`-only import,
+  `JSX.Element` → `React.JSX.Element`) to type-check as an isolated package — same
+  runtime behavior, just satisfies a standalone `tsup` build.
+
+**Untouched:** all component markup, class names, and visual variants — this was a
+decoupling pass, not a redesign.
+
+### Component-level styles (beyond tokens)
+
+Several components render classNames that are neither Tailwind utilities nor covered by
+`tokens.css`/`shadcn-base.css` — plain custom classes like `.app-card`, `.switch-pill`,
+`.view-toggle__btn`, `.dropdownHead`, `.item-table__head`, `.fp-loader-overlay`, and the
+`icon-neo-*` icon font every Icon/ButtonIcon/DeleteAction/Toast/TimePicker glyph depends
+on. These lived in the source app's `src/styles/common.scss`, `mainstyles.css`, and
+`font-icons.css` — SCSS nested under that app's `#fpneo` Tailwind-important wrapper, with
+`@apply` directives, so they'd neither match nor build here as-is.
+
+- **`src/styles/components.css`** — every one of those classes, flattened to plain CSS
+  (`@apply` resolved to literal declarations, `#fpneo`/SCSS nesting stripped). Page- and
+  business-specific rules were left out on purpose: Table's per-page `*-cols` grid-column
+  layouts (`.flows-cols`, `.appt-cols`, ...) are data-shape-specific, not reusable design
+  system material — bring your own to match your own columns. (Two of `table.tsx`'s own
+  variant keys, `users` → `.users-cols` and `devices` → `.devices-cols`, turned out to
+  have no corresponding CSS anywhere in the source app either — likely dead/mismatched
+  keys there already, not something introduced here.)
+- **`src/styles/icon-font.css`** + **`src/styles/fonts.css`** — the `fp-neo` icon font
+  (`icon-neo-*`) and Inter variable font `@font-face` rules, copied verbatim (already
+  plain CSS) with only their `url()` paths adjusted to this package's own
+  `src/styles/fonts/` copy of the four `fp-neo.*` files and the Inter `.woff2`.
+- All of the above are wired into `src/styles/index.css` (and so into `styles.css`),
+  alongside `tokens.css`/`shadcn-base.css`/`theme.css` — importing that one file is
+  enough. Each is also independently `exports`-mapped (`./components.css`,
+  `./icon-font.css`, `./fonts.css`) if you'd rather cherry-pick.
+
+Verified via `npm run build-storybook` and `npm run build` (the demo app): Rsbuild/Rspack's
+asset pipeline picks up and correctly hashes all five font files from the `url()`
+references in this CSS — proof the paths resolve. (No headless browser was available in
+this environment to capture an actual rendered screenshot; that's the one thing not
+independently confirmed visually.)
+
+### Button variant redesign
+
+`Button` originally had **19 `variant` values** conflating four unrelated things: color/
+emphasis, shape (pill vs. rounded), fixed footer sizing, and one-off page-specific skins.
+Redesigned into three independent, composable axes instead:
+
+```tsx
+variant: "primary" | "secondary" | "destructive" | "outline" | "ghost" | "link"   // 6
+size:    "default" | "sm" | "lg" | "icon" | "iconLg"                              // unchanged
+shape?:  "default" | "pill"                                                       // NEW
+selected?: boolean                                                                // unchanged
+```
+
+Nothing else in this package used any variant beyond `"ghost"` internally (checked before
+making this change), and the package has no external consumers yet, so this was a clean
+breaking change with nothing to migrate. Mapping from the old 19 to the new API:
+
+| Old `variant` | New equivalent | Note |
+|---|---|---|
+| `default` (purple) **and** `primary` (blue) | `variant="primary"` | Consolidated to one color — the token-driven `interactive-brand` (purple), not the hardcoded blue. If you specifically need the old blue, add `className="bg-[var(--color-brand-blue)]"`. |
+| `secondary`, `destructive`, `outline`, `ghost` | same name, unchanged | No visual change. |
+| `pill` | `shape="pill"` (with any `variant`) | Combine, e.g. `variant="outline" shape="pill"`. |
+| `borderPrimary` | `variant="outline"` | Brand-colored border was a one-off tint — add `className="border-interactive-brand text-interactive-brand"` to restore it exactly. |
+| `refreshIcon` | **removed** — use `<ButtonIcon variant="refresh" />` | That's already `ButtonIcon`'s job; `Button` doesn't need to duplicate it. |
+| `selectedIcon` | **removed** — use `<ButtonIcon variant="filled" />` or `<Button variant="primary" size="icon">` | Same reasoning. |
+| `lang` | `variant="ghost"` + `className` | One-off page skin, not a reusable color. |
+| `submenu` | `variant="outline" shape="pill" size="sm"` + `className` | Same. |
+| `deptedit` | `variant="ghost"` + `className="text-interactive-brand hover:bg-[var(--color-ext-eef2ff)]"` | Also drops the legacy `dept-edit-btn` className-sniffing hack entirely. |
+| `cancel` | `variant="outline"` + `className="h-9 px-5 border-[var(--color-button-cancel)] text-[var(--color-button-cancel)]"` | Footer trio: fixed sizing + color both become explicit `className`, since they're page-context, not a semantic color. |
+| `save` | `variant="primary"` + `className="h-9 px-5"` | |
+| `close` | `variant="secondary"` + `className="h-9 px-5"` | |
+| `formButtonSubmit` | `variant="primary" shape="pill"` + `className="h-9 px-6"` | |
+| `formButtonCancel` | `variant="outline" shape="pill"` + `className` for the soft-pink tone | |
+| `formButtonBack` | `variant="outline" shape="pill"` + `className="h-9 px-6"` | |
+
+`link` is genuinely new (no old equivalent) — a text-only, underline-on-hover variant with
+no padding/height, the one common pattern the original 19 never actually had.
+
+## Using it in this repo right now
+
+```tsx
+import { Button, Badge, Card } from './index'; // see src/App.tsx for a working example
+```
+
+## Building the package
+
+```bash
+npm run build:lib     # tsup → dist/{index.cjs,index.mjs,index.d.ts} + dist/*.css
+```
+
+This has been verified end-to-end: `npm run build:lib` succeeds, `npm pack` produces a
+clean ~390 KB tarball, and installing that tarball into a scratch project and
+`require()`-ing it resolves all exports correctly (with `react`, `react-dom`, and
+`formik` installed as peers).
+
+## Installing it in another app
+
+```bash
+npm install /path/to/unified-design-system-0.1.0.tgz   # or from your registry once published
+```
+
+```tsx
+import { Button, Icon, Table } from 'unified-design-system';
+```
+
+Peer dependencies you must have installed: `react`, `react-dom`, and `formik` (4 of the
+29 components — `FormField`, `Input` with `as="field"`, `Textarea` with `as="field"`,
+`ScrollToFieldError` — call real Formik APIs at runtime, so it's a required peer, not
+optional).
+
+**Styling** — pick one based on your Tailwind version:
+
+- **Tailwind v4**: `@import "unified-design-system/styles.css";` in your global CSS,
+  alongside your own `@import "tailwindcss";`. This one import already includes the icon
+  font, component classes, and tokens.
+- **Tailwind v3**: add `presets: [require("unified-design-system/tailwind-preset")]` to
+  your `tailwind.config.js`, and `@import "unified-design-system/tokens.css";` +
+  `@import "unified-design-system/shadcn-base.css";` + `@import "unified-design-system/components.css";`
+  + `@import "unified-design-system/icon-font.css";` + `@import "unified-design-system/fonts.css";`
+  in your global CSS.
+- **No Tailwind**: same four `@import`s as above (skip `tokens.css`/`shadcn-base.css`
+  only if you don't need the CSS-variable-driven components) — most components read CSS
+  custom properties (`var(--color-...)`) rather than Tailwind utility classes.
+
+Any icon (`<Icon name="icon-neo-trash" />`, etc.) needs `icon-font.css` loaded — without
+it the glyph classes resolve to nothing and icons render blank.
+
+## Publishing (once you're ready)
+
+1. `npm run build:lib`
+2. `npm version patch|minor|major`
+3. `npm publish` (add `--registry` for a private/internal registry)
+4. Tag the release in git.
+
+This package has no consumers yet, so no versioning discipline is enforced — once
+something depends on it, breaking changes need a major bump.
+
+## Storybook
+
+Set up via the official installer (`npm create storybook@latest`, framework
+auto-detected as `react-rsbuild`), which added `@storybook/addon-a11y` and
+`@storybook/addon-docs` to `.storybook/main.ts` and to `devDependencies`.
+
+The generic Storybook onboarding tutorial (the original `src/stories/` — its demo
+Button/Header/Page components, their `.css`, `Configure.mdx`, and the screenshot/icon
+images under `assets/`) was removed entirely; it wasn't part of this design system. That
+same `src/stories/` path has since been repurposed to hold this design system's own
+stories instead (see below) — a fresh, unrelated folder with the same name.
+
+**Every one of the 29 components has its own `*.stories.tsx` in `src/stories/`** — kept
+in a separate folder from `src/components/ui/` (which holds only `.tsx`/`.ts`/`.css`
+implementation files, no stories), and importing from there
+(`import { Button } from "../components/ui/button"`). `.storybook/main.ts`'s
+`../src/**/*.stories.tsx` glob picks them up regardless of where under `src/` they live,
+so this split needed no config change. Each story has a `Default` plus variant/state
+stories and, for the compound components (Dialog, DropdownMenu, Popover, Tooltip, Table,
+AppList, TimePicker, Toast, ViewToggle, ...), a composed working example; components with
+a real `cva` variant/size enum (Button, Badge, Icon, ButtonIcon, Checkbox, RadioButton,
+Tab) also get an `AllVariants`/`AllColors`/`AllSizes`-style story enumerating every value
+from their actual source, cross-checked against it rather than sampled. Every meta also
+carries `tags: ["autodocs"]`, a one-line `parameters.docs.description.component`
+explaining what the component is/isn't (e.g. Icon vs. ButtonIcon, Popover/Tooltip/DropdownMenu
+being hand-built rather than Radix-based), and a `layout` parameter (`"centered"` for
+atomic controls, `"padded"` for larger/compound ones) so each renders sensibly on its own
+Docs page.
+
+One correctness fix worth knowing about: `.storybook/preview.tsx` originally imported
+`src/styles/index.css` directly, which never triggers Tailwind itself — same as
+`src/App.css` needing its own `@import 'tailwindcss';` alongside the design-system
+styles. Without it, Storybook's build silently produced zero Tailwind-generated utility
+classes (`bg-interactive-brand`, `rounded-md`, `inline-flex`, ...), so every
+utility-class-driven style rendered as if unstyled even though the underlying CSS
+variables were present. Fixed via `.storybook/preview.css` (`@import 'tailwindcss';`
++ the design-system styles) — verified by diffing Storybook's compiled CSS against the
+demo app's byte-for-byte, not just a clean build.
+
+Verified working: `npm run build-storybook` produces a static build with exactly 29
+autodocs pages (one per component) alongside 106 individual story variants — confirmed by
+inspecting the build's `index.json`, not just a successful exit code. `npm run storybook`
+boots and serves at `http://localhost:6006/`. `npm run lint` reports zero errors across
+the story files.
+
+```bash
+npm run storybook        # dev server
+npm run build-storybook   # static build, e.g. for Chromatic/GitHub Pages
+```

package/dist/components.css

@@ -0,0 +1,387 @@
+/* Component-specific styles these components render classNames for, beyond Tailwind
+   utilities and design tokens. Ported from the source app's src/styles/common.scss and
+   src/styles/mainstyles.css — originally SCSS nested under an app-specific `#fpneo {}`
+   Tailwind-important wrapper (would never match here) with Tailwind `@apply` directives.
+   Flattened to plain CSS with `@apply` resolved to literal declarations so this file has
+   zero build-step dependency on Sass or Tailwind. Page/business-specific styling (e.g.
+   Table's per-page `*-cols` grid-column layouts, and page overrides in clinical.scss) is
+   intentionally NOT included — bring your own for those. */
+
+/* ── Card (card.tsx) ─────────────────────────────────────────────────────── */
+.app-card {
+  background-color: #ffffff;
+  border-radius: 1.25rem;
+  border: 1px solid #f3f4f6;
+  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  transition-property: box-shadow;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+  display: flex;
+  flex-direction: column;
+}
+.app-card:hover {
+  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+}
+.app-card--editing {
+  border-color: var(--color-brand-purple);
+  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+}
+
+/* ── AppList (list.tsx) ──────────────────────────────────────────────────── */
+.app-list-wrapper {
+  border: 1px solid #f3f4f6;
+  border-radius: 1rem;
+  overflow: hidden;
+  background-color: #ffffff;
+}
+.app-list-header {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  padding: 0.75rem 1.25rem;
+  background-color: var(--color-ext-f8f9fa);
+  border-bottom: 1px solid #e5e7eb;
+}
+.app-list-header > div {
+  font-size: 0.625rem;
+  font-weight: 500;
+  color: #9ca3af;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+.app-list-body {
+  width: 100%;
+}
+.app-list-row {
+  padding: 0.9375rem 1.25rem;
+  border-bottom: 1px solid #f3f4f6;
+  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter;
+  transition-duration: 100ms;
+}
+.app-list-row:last-child {
+  border-bottom-width: 0;
+}
+.app-list-row:hover {
+  background-color: var(--color-ext-fafafa);
+}
+.app-list-row--editing {
+  background-color: rgb(238 242 255 / 0.4);
+  border-left: 2px solid var(--color-brand-purple);
+}
+.app-list-cell {
+  font-size: 0.8125rem;
+  color: #374151;
+  min-width: 0;
+  padding-right: 0.75rem;
+}
+.app-list-cell--muted {
+  color: #6b7280;
+}
+.app-list-cell--actions {
+  display: flex;
+  align-items: center;
+  gap: 0.125rem;
+  justify-content: flex-end;
+  padding-right: 0.25rem;
+}
+
+/* ── Switch (switch.tsx) ─────────────────────────────────────────────────── */
+.switch-pill {
+  position: relative;
+  display: inline-flex;
+  flex-shrink: 0;
+  cursor: pointer;
+  align-items: center;
+  width: 2rem;
+  height: 1.125rem;
+  border-radius: 9999px;
+  padding: 0.125rem;
+  transition: background-color 0.25s ease-in-out;
+}
+.switch-pill:focus-within {
+  outline: none;
+}
+.switch-pill--on {
+  background-color: var(--color-ext-00c48c);
+}
+.switch-pill--off {
+  background-color: var(--color-neutral-450);
+}
+.switch-pill--disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+.switch-pill__input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+.switch-pill__thumb {
+  pointer-events: none;
+  display: block;
+  background-color: #ffffff;
+  width: 0.875rem;
+  height: 0.875rem;
+  border-radius: 9999px;
+  box-shadow: 0 1px 3px var(--color-ext-0000001f);
+  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.switch-pill__thumb--on {
+  transform: translateX(0.875rem);
+}
+[dir="rtl"] .switch-pill__thumb--on {
+  transform: translateX(-0.875rem);
+}
+.switch-pill__thumb--off {
+  transform: translateX(0);
+}
+
+/* ── ViewToggle (view-toggle.tsx) ────────────────────────────────────────── */
+.view-toggle {
+  display: flex;
+  align-items: center;
+  gap: 0.125rem;
+  background-color: #f3f4f6;
+  border-radius: 0.5rem;
+  padding: 0.25rem;
+}
+.view-toggle__btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  border-radius: 0.375rem;
+  transition-property: all;
+  transition-duration: 150ms;
+  color: var(--color-ext-888888);
+  opacity: 1 !important;
+}
+.view-toggle__btn:hover {
+  color: #4b5563;
+  background-color: #f3f4f6;
+}
+.view-toggle__btn:focus,
+.view-toggle__btn:focus-visible {
+  outline: none;
+  box-shadow: none;
+}
+.view-toggle__btn--active {
+  background-color: #ffffff;
+  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  color: var(--color-brand-purple);
+}
+.view-toggle__btn--active:hover {
+  color: var(--color-brand-purple);
+  background-color: #ffffff;
+}
+
+/* ── DropdownMenu (dropdown-menu.tsx) ────────────────────────────────────── */
+.dropdownHead {
+  position: fixed;
+  z-index: var(--zindex-overlay);
+  min-width: 12rem;
+  overflow: hidden;
+  border-radius: 0.75rem;
+  border: 1px solid #f3f4f6;
+  background-color: #ffffff;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  transition-property: opacity;
+  transition-duration: 150ms;
+}
+.dropdownInner {
+  position: relative;
+  display: flex;
+  cursor: pointer;
+  user-select: none;
+  align-items: center;
+  padding: 0.375rem 0.5rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  outline: none;
+  transition-property: color, background-color, border-color;
+  transition-duration: 150ms;
+}
+.dropdownInner[data-disabled] {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+/* ── FormField / Input (form-field.tsx, expandable-search.tsx) ──────────── */
+.form__field {
+  min-width: 0;
+}
+.form__field > * + * {
+  margin-top: 0.5rem;
+}
+.formfield__label {
+  font-size: 0.75rem;
+  font-weight: 500;
+  margin-bottom: 0.5rem;
+  display: block;
+  color: var(--color-text-primary);
+}
+.form-error {
+  font-size: 0.75rem;
+  line-height: 1rem;
+  color: #ef4444;
+  margin-top: 0.25rem;
+}
+.required-field {
+  color: #ef4444;
+  margin-left: 0.25rem;
+}
+.formfield__search {
+  display: flex;
+  height: 2.25rem;
+  width: 100%;
+  border-radius: 0.5rem;
+  font-size: 0.8125rem;
+  padding: 0.25rem 0.75rem 0.25rem 2.5rem;
+  background-color: transparent;
+  border: 1px solid var(--color-neutral-300);
+}
+.formfield__search::placeholder {
+  color: var(--color-neutral-400);
+  font-size: 0.8125rem;
+}
+.formfield__search:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+.formfield__search:focus-visible {
+  outline: none;
+  border-color: var(--focus-ring-color);
+  box-shadow: 0 0 0 1px var(--focus-ring-color-soft);
+}
+
+/* ── ExpandableSearch's collapsed trigger button ─────────────────────────── */
+.header__round-btn {
+  width: 2.5625rem;
+  height: 2.5625rem;
+  padding: 0;
+  background-color: var(--color-ext-edeaf7);
+  border-radius: 1.25rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.875rem;
+}
+.header__round-btn:hover {
+  background-color: var(--color-ext-e0daf0);
+}
+
+/* ── Loader (loader.tsx) — already plain CSS in the source app ──────────── */
+.fp-loader-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(255, 255, 255, 0.45);
+  backdrop-filter: blur(2px);
+  -webkit-backdrop-filter: blur(2px);
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.25s ease, visibility 0.25s ease;
+  pointer-events: none;
+}
+.fp-loader-overlay--visible {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+}
+.fp-loader-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.75rem;
+}
+.fp-loader-gif {
+  width: 6rem;
+  height: 6rem;
+  object-fit: contain;
+  mix-blend-mode: multiply;
+}
+
+/* ── Table structure (table.tsx) ──────────────────────────────────────────
+   Only the classNames Table itself renders. Per-page column layouts
+   (`.flows-cols`, `.appt-cols`, etc. — passed as the `variant` prop) are
+   business/page-specific grid-template-columns and are NOT included here;
+   supply your own to match your own data columns. Row/cell styling for the
+   children you render inside Table is likewise left to you. */
+.item-table__wrapper {
+  overflow-x: auto;
+  border: 1px solid #f3f4f6;
+  border-top: 0;
+  border-bottom-left-radius: 1rem;
+  border-bottom-right-radius: 1rem;
+  background-color: #ffffff;
+  margin-top: 0 !important;
+}
+.item-table__head {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  display: grid;
+  align-items: center;
+  gap: 0;
+  min-width: 36rem;
+  padding: 0.75rem 1.25rem;
+  background-color: var(--color-ext-f8f9fa);
+  border: 1px solid #f3f4f6;
+  border-bottom: 0;
+  border-top-left-radius: 1rem;
+  border-top-right-radius: 1rem;
+}
+.item-table__head > div {
+  font-size: 0.75rem;
+  font-weight: 700;
+  color: #9ca3af;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+.item-table__body {
+  width: 100%;
+}
+.item-table__head--comfortable {
+  border: 0;
+  border-bottom: 1px solid;
+  border-radius: 0;
+  min-height: 2.375rem;
+  background-color: var(--component-table-header-bg);
+  border-color: var(--component-table-border);
+  padding: 0.75rem 1.875rem;
+}
+.item-table__head--comfortable > div {
+  font-size: 0.6875rem;
+  color: var(--component-table-header-text);
+  word-break: break-word;
+  overflow-wrap: break-word;
+  white-space: normal;
+  line-height: normal;
+}
+.item-table__wrapper--comfortable {
+  border: 0;
+  border-radius: 0;
+  background-color: transparent;
+}
+.item-table__content--comfortable {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 0.5rem 0;
+}
+.item-table__head--scrollable {
+  width: max-content;
+  min-width: 100%;
+}