@neuronection/assistant-ui 0.8.0 → 0.9.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @neuronection/assistant-ui
 
+## 0.9.0
+
+### Minor Changes
+
+- [`71f029b`](https://github.com/neuronection/assistant-ui/commit/71f029b3193460db28293b811186a2f46516bf10) Thanks [@constLiakos](https://github.com/constLiakos)! - Add about module: a uniform family "about page" kit. `AboutPanel` composes hero (logo, name, tagline, version badge), creator/license/links cards, tech chips, a toned note (e.g. medical disclaimer), the `FamilyBadge` showcase and a version/copyright footer — all content via props so apps keep their i18n and data. `FamilyBadge` presents the Neuronection brand lockup (mark + wordmark), an open-source/self-hosted family blurb, a prominent hub CTA, and one tile per app (logo, name, tagline, links to its presentation page, GitHub and website where applicable) with the current app highlighted. Building blocks (`AboutCard`, `AboutLinkList`, `AboutNote`, `AboutFooterLine`, `FamilyBadge`, `TechChips`) are also exported individually.
+
+- [`71f029b`](https://github.com/neuronection/assistant-ui/commit/71f029b3193460db28293b811186a2f46516bf10) Thanks [@constLiakos](https://github.com/constLiakos)! - Add logo module with inline brand marks for the Assistant family: `NeuronectionMark`, `NeuronectionWordmark`, `CareerMark`, `StudyMark`, `HealthMark`. All are theme-aware (`theme="light" | "dark"`, mirroring the hub artwork pairs), decorative and non-focusable by default, labeled via an optional `title` prop, sized via `size`, and use per-instance gradient ids so several marks can share a page. The wordmark also accepts `mono` for a `currentColor` fill. Brand artwork keeps its fixed fills as a deliberate exception to the semantic-token rule.
+
+## 0.8.1
+
+### Patch Changes
+
+- [`0421e0e`](https://github.com/neuronection/assistant-ui/commit/0421e0e02ed994182ac3d2e79c23f786aff87b36) Thanks [@constLiakos](https://github.com/constLiakos)! - README: family showcase — neuronection.com, the three Assistant apps
+  (career / study / health-assistant.io) front and center; complete component
+  index incl. PanelModal, Textarea and the dark-mode / z-token theming notes.
+  Docs: correct CSS import order in theming.md, TW3 translate-collision +
+  z-index notes in adoption.md, positioning/z-index/audit-import rules in
+  adding-a-component.md, AGENTS.md gotchas updated.
+
 ## 0.8.0
 
 ### Minor Changes

package/README.md

@@ -1,14 +1,25 @@
 # assistant-ui
 
-Shared React component library for the **Assistant family** of apps
-([career-assistant](https://github.com/neuronection/career-assistant),
-[study-assistant](https://github.com/neuronection/study-assistant),
-[health-assistant](https://github.com/health-assistant-io/health-assistant)).
+Shared React component library for the **Assistant family** — three sibling
+apps that AI-help people with career, study, and health. One package, three
+apps: family look by default, app flavor via CSS-variable design tokens.
+Works in React 18 & 19 and alongside Tailwind 3 or 4 — the library ships
+**precompiled CSS**, so your app's Tailwind never compiles library classes.
 
-One package, three apps: family look by default, app flavor via CSS-variable
-design tokens. Works in React 18 & 19 and alongside Tailwind 3 or 4 — the
-library ships **precompiled CSS**, so your app's Tailwind never compiles
-library classes.
+**[neuronection.com](https://neuronection.com)** — the family hub.
+
+| App | What it is |
+|---|---|
+| [**career-assistant**](https://github.com/neuronection/career-assistant) | Job discovery, AI matching and university pathways for students |
+| [**study-assistant**](https://github.com/neuronection/study-assistant) | Study workspace: notes, materials, chat with math & code rendering |
+| [**health-assistant**](https://health-assistant.io) | Universal health data platform — self-hosted, privacy-first, [open source](https://github.com/health-assistant-io/health-assistant) |
+
+The family shares its UI DNA here: **40+ modules, 260+ tests** (keyboard-nav
++ axe per component), built on Radix, token-themed so every app looks like a
+sibling without sharing a stack. Patterns the apps actually use — provider &
+model settings blocks, AI affordances (ask/fill/act), date & clock pickers,
+async comboboxes, file attachment surfaces — live in the package, not
+copy-pasted in three repos.
 
 ## Install
 
@@ -30,8 +41,8 @@ import { Button, ConfirmationModal, Input } from '@neuronection/assistant-ui'
 ## Theming
 
 All visuals flow through `--as-*` CSS variables. The defaults are the family
-look (extracted from study-assistant); each app overrides identity tokens in a
-small `theme.css`:
+look (extracted from study-assistant); each app overrides identity tokens in
+a small `theme.css`:
 
 ```css
 :root {
@@ -40,28 +51,10 @@ small `theme.css`:
 }
 ```
 
-See [`themes/`](./themes) for per-app starting points and
-`ThemeScope` for scoping tokens to a subtree. Override **tokens**, not
-internal class names — class names are not API.
-
-## Peer requirements
-
-| Package | Range |
-|---|---|
-| react / react-dom | `>=18 <20` |
-| lucide-react | `>=0.460 <2` |
-
-Tailwind is **not** required — but if your app uses Tailwind 3 or 4, both work
-without configuration. Do **not** add this package to your Tailwind
-`content`/`@source`.
-
-## Documentation
-
-- [Local development](./docs/local-development.md) — live-test library changes in the family apps without publishing
-- [Adopting in an app](./docs/adoption.md) — the install/switchover recipe each family app follows
-- [Theming](./docs/theming.md) — tokens, app themes, styling hooks
-- [Publishing](./docs/publishing.md) — the Changesets release flow and CI setup
-- [Adding a component](./docs/adding-a-component.md) — rules, checklist, required companions
+Dark mode is the same story: remap the tokens under `.dark` (health-assistant
+ships a class-based dark theme this way) — no component rewrites. Overlay
+stacking is token-driven too (`--as-z-modal`, `--as-z-popover`) so library
+dialogs clear your app chrome. Full guide: [docs/theming.md](./docs/theming.md).
 
 ## Components
 
@@ -74,26 +67,25 @@ files in the package's `dist/`. Visual reference:
 | Module | Exports |
 |---|---|
 | `button` / `badge` / `card` | `Button`, `buttonVariants` · `Badge`, `badgeVariants` · `Card`, `CardHeader/Title/Description/Content/Footer` |
-| `modal` / `confirmation-modal` / `form-modal` | `Modal` + parts, `modalContentVariants` · `ConfirmationModal` · `FormModal` (form-in-modal shell) |
+| `modal` / `panel-modal` | `Modal` + parts (compound Radix dialog) · `PanelModal` (header/body/footer shell, full-screen on mobile) |
+| `confirmation-modal` / `form-modal` | `ConfirmationModal` · `FormModal` (form-in-modal shell: `headerActions`, reject button, busy states) |
 | `popover` / `popover-button` | compound Radix `Popover` + parts · `PopoverButton` (self-contained trigger + panel, hover-open, lazy children, `closeSignal`) |
 | `menu` / `context-menu` | `Menu`, `MenuTrigger/Content/Item/Separator/Label`, `ActionMenu` (items-driven) · `ContextMenu` (coordinate-anchored, `{x, y, items, onClose}`) |
-| `combobox` | `Combobox`, `ComboboxMulti` — async mode (`onSearchChange` + `loading`), grouping, full keyboard nav |
+| `combobox` | `Combobox`, `ComboboxMulti` — async mode (`onSearchChange` + `loading`), grouping, capability badges, full keyboard nav |
 | `tooltip` | `Tooltip` + parts, `InfoTooltip` |
 | `wizard` | `Wizard` (steps config + `renderStep`, per-step validation gates, modal/drawer variants), `Stepper` (dots/labels) |
-| `input` / `search-input` / `expandable-search` | `Input` (label/hint/error wiring) · `SearchInput` · `ExpandableSearch` |
+| `input` / `textarea` / `search-input` / `expandable-search` | `Input` (label/hint/error wiring) · `Textarea` · `SearchInput` · `ExpandableSearch` |
 | `chip-input` / `chip-list` | `ChipInput` (Enter/comma commit, paste-splits, Backspace-removes) · `ChipList` (variant pills, clickable, removable) |
-| `time-picker` / `time-list` | `TimePicker` (clock face, 24h value, 12h UI) · `TimeList` (time chips) |
-| `date-picker` | `DatePicker` (popover calendar: days/months/years views, min/max, `allowClear`, arrow-key day grid) |
+| `time-picker` / `time-list` | `TimePicker` (clock face, 24h value, 12h UI, editable fields) · `TimeList` (time chips with per-chip pickers) |
+| `date-picker` | `DatePicker` (popover calendar: days/months/years views, min/max, `allowClear`, arrow-key day grid, `unstyled` variant) |
 | `range-bar` / `scale-slider` | `RangeBar` (low–high band + value dot) · `ScaleSlider` (+ `scaleColorForValue`) |
-| `table` | `Table` (headers/rows, built-in empty state) |
+| `table` | `Table` (headers/rows, opt-in empty state) |
 | `check-indicator` / `selection-bar` / `view-toggle` | `CheckIndicator` (tri-state) · `SelectionBar` (bulk-select bar) · `ViewToggle` (grid/list) |
 | `error-banner` / `undo-notice` / `empty-state` / `spinner` | presentational feedback: alert banner with `action` slot · undo toast · `EmptyState` · `Spinner` |
-| `info-button` / `field-label` | `InfoButton` (info popover) · `FieldLabel` (label + info affordance) |
+| `info-button` / `field-label` / `copy-button` / `breadcrumbs` | `InfoButton` · `FieldLabel` · `CopyButton` (clipboard + copied state) · `Breadcrumbs` (SPA links via `linkComponent`) |
+| `ai-button` / `ai-actions-dropdown` / `ai-magic-fill` | AI affordances: ask-with-suggestions (controlled open, icon-only mode) · action menu + custom prompt · describe-in-words fill modal — API calls stay app-side |
+| `settings-shell` / `provider-form` / `connection-test-row` | `SettingsShell` (controlled two-pane nav) · `ProviderForm` (write-only API-key field) · `ConnectionTestRow` (idle/testing/ok/fail + latency) |
 | `model-picker` / `task-assignment-picker` | `ModelPicker` (grouped provider→model combobox, capability chips) · `TaskAssignmentPicker` (task → model mapping rows) |
-| `settings-shell` / `provider-form` / `connection-test-row` | `SettingsShell` (controlled two-pane nav) · `ProviderForm` (write-only key field) · `ConnectionTestRow` (idle/testing/ok/fail) |
-| `copy-button` / `breadcrumbs` | `CopyButton` (clipboard + copied state) · `Breadcrumbs` (SPA links via `linkComponent`) |
-| `ai-magic-fill` | `AiMagicFill` (describe-in-words → structured data prompt modal; app applies the data) |
-| `ai-button` / `ai-actions-dropdown` | `AiButton` (suggestions + prompt + response slot) · `AiActionsDropdown` (action list + custom prompt) |
 | `upload-dropzone` / `file-card` / `file-queue` | file attachment surface: dropzone (block/row) · card (status, include toggle) · queue (summary + reorder) |
 | `marquee` | `useMarquee`, `MarqueeSurface`, `MarqueeBand` (rubber-band selection) |
 | `portal` / `theme-scope` / `tokens` | `Portal` · `ThemeScope` · token name lists + types |
@@ -103,6 +95,15 @@ where it makes sense, refs forwarded everywhere, English label props with
 defaults (translate at call sites), icons as props. No fetching, no stores,
 no router — data in, events out.
 
+## Documentation
+
+- [Adopting in an app](./docs/adoption.md) — the install/switchover recipe each family app follows (incl. the TW3 cascade notes)
+- [Theming](./docs/theming.md) — tokens, app themes, dark mode, styling hooks
+- [Accessibility](./docs/accessibility.md) — the keyboard + ARIA contract per module (test-asserted)
+- [Adding a component](./docs/adding-a-component.md) — rules, checklist, required companions
+- [Local development](./docs/local-development.md) — live-test library changes in the family apps without publishing
+- [Publishing](./docs/publishing.md) — the Changesets release flow and CI setup
+
 ## Development
 
 ```bash
@@ -110,16 +111,7 @@ pnpm install
 pnpm dev          # Ladle playground on :61000 (CSS watches alongside)
 pnpm test --watch
 pnpm verify       # lint + typecheck + test + build
-```
-
-Testing library changes inside a real app (no publishing needed) — full
-guide in [docs/local-development.md](./docs/local-development.md):
-
-```bash
-pnpm watch                                  # library: rebuild TS + CSS on change
-node scripts/dev-link.mjs link <app-dir>    # wire app (pnpm override / npm file:)
-# ...run the app dev server; reload picks up library changes
-node scripts/dev-link.mjs unlink <app-dir>  # restore before committing in the app
+pnpm test:visual  # Playwright screenshots of every story vs committed baselines
 ```
 
 Releases happen via [Changesets](./CONTRIBUTING.md) — CI publishes, never a

package/dist/Logo-D8DEBUoL.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+
+type LogoTheme = 'light' | 'dark';
+interface LogoProps extends Omit<React.ComponentProps<'svg'>, 'children'> {
+    size?: number | string;
+    theme?: LogoTheme;
+    title?: string;
+}
+declare const useLogoId: () => string;
+
+export { type LogoProps as L, type LogoTheme as a, useLogoId as u };

package/dist/about.d.ts

@@ -0,0 +1,124 @@
+import * as React from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+import { a as LogoTheme } from './Logo-D8DEBUoL.js';
+
+interface AboutCardProps extends Omit<React.ComponentProps<'div'>, 'title'> {
+    icon?: React.ReactNode;
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    heading?: 'h2' | 'h3' | 'h4';
+}
+declare const AboutCard: React.ForwardRefExoticComponent<Omit<AboutCardProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+
+interface AboutLinkItem {
+    href?: string;
+    label: React.ReactNode;
+    subtitle?: React.ReactNode;
+    icon?: React.ComponentType<{
+        className?: string;
+    }>;
+    external?: boolean;
+    group?: React.ReactNode;
+    copyValue?: string;
+    copyLabel?: string;
+    copiedLabel?: string;
+}
+interface AboutLinkListProps extends React.ComponentProps<'ul'> {
+    links: ReadonlyArray<AboutLinkItem>;
+}
+declare const AboutLinkList: React.ForwardRefExoticComponent<Omit<AboutLinkListProps, "ref"> & React.RefAttributes<HTMLUListElement>>;
+
+declare const noteStyles: (props?: ({
+    tone?: "info" | "warning" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface AboutNoteProps extends Omit<React.ComponentProps<'div'>, 'title'>, VariantProps<typeof noteStyles> {
+    title?: React.ReactNode;
+}
+declare const AboutNote: React.ForwardRefExoticComponent<Omit<AboutNoteProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+
+interface AboutFooterLineProps extends React.ComponentProps<'p'> {
+    version?: string;
+    copyright?: React.ReactNode;
+}
+declare const AboutFooterLine: React.ForwardRefExoticComponent<Omit<AboutFooterLineProps, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+
+type FamilyApp = 'health' | 'career' | 'study';
+interface FamilyMember {
+    app: FamilyApp;
+    name: string;
+    tagline?: string;
+    href?: string;
+    github?: string;
+    website?: string;
+}
+interface FamilyCreator {
+    name: React.ReactNode;
+    role?: React.ReactNode;
+    href?: string;
+}
+interface FamilyBadgeProps extends Omit<React.ComponentProps<'div'>, 'title'> {
+    current: FamilyApp;
+    members?: ReadonlyArray<FamilyMember>;
+    creator?: FamilyCreator;
+    creatorLabel?: string;
+    hubUrl?: string;
+    label?: string;
+    blurb?: React.ReactNode;
+    ctaLabel?: string;
+    currentLabel?: string;
+    githubLabel?: string;
+    websiteLabel?: string;
+    theme?: LogoTheme;
+}
+declare const FamilyBadge: React.ForwardRefExoticComponent<Omit<FamilyBadgeProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+
+interface TechChipsProps extends React.ComponentProps<'div'> {
+    items: ReadonlyArray<string | null | undefined>;
+}
+declare const TechChips: React.ForwardRefExoticComponent<Omit<TechChipsProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+
+interface AboutCreator {
+    name: React.ReactNode;
+    role?: React.ReactNode;
+    href?: string;
+    links?: ReadonlyArray<AboutLinkItem>;
+}
+interface AboutLicense {
+    name: string;
+    href?: string;
+}
+interface AboutNoteContent {
+    tone?: 'info' | 'warning';
+    title?: React.ReactNode;
+    children: React.ReactNode;
+}
+interface AboutPanelProps extends React.ComponentProps<'div'> {
+    appName: string;
+    familyCurrent?: FamilyApp;
+    logo?: React.ReactNode;
+    tagline?: React.ReactNode;
+    description?: React.ReactNode;
+    version?: string;
+    license?: AboutLicense;
+    licenseTitle?: string;
+    licenseLinkLabel?: string;
+    links?: ReadonlyArray<AboutLinkItem>;
+    linksTitle?: string;
+    creator?: AboutCreator;
+    creatorTitle?: string;
+    tech?: ReadonlyArray<string>;
+    techTitle?: string;
+    note?: AboutNoteContent;
+    familyMembers?: ReadonlyArray<FamilyMember>;
+    hubUrl?: string;
+    familyLabel?: string;
+    familyBlurb?: React.ReactNode;
+    familyCtaLabel?: string;
+    familyCurrentLabel?: string;
+    theme?: LogoTheme;
+    copyright?: React.ReactNode;
+}
+declare const AboutPanel: React.ForwardRefExoticComponent<Omit<AboutPanelProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+
+export { AboutCard, type AboutCardProps, type AboutCreator, AboutFooterLine, type AboutFooterLineProps, type AboutLicense, type AboutLinkItem, AboutLinkList, type AboutLinkListProps, AboutNote, type AboutNoteContent, type AboutNoteProps, AboutPanel, type AboutPanelProps, type FamilyApp, FamilyBadge, type FamilyBadgeProps, type FamilyCreator, type FamilyMember, TechChips, type TechChipsProps };

package/dist/about.js

@@ -0,0 +1,3 @@
+export { AboutCard, AboutFooterLine, AboutLinkList, AboutNote, AboutPanel, FamilyBadge, TechChips } from './chunk-3QGVWTBU.js';
+//# sourceMappingURL=about.js.map
+//# sourceMappingURL=about.js.map

package/dist/about.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"about.js"}

package/dist/badge.d.ts

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const badgeVariants: (props?: ({
-    variant?: "default" | "secondary" | "outline" | "success" | "warning" | "danger" | "ai" | null | undefined;
+    variant?: "default" | "warning" | "success" | "danger" | "secondary" | "outline" | "ai" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface BadgeProps extends React.ComponentProps<'span'>, VariantProps<typeof badgeVariants> {
 }

package/dist/badge.js

@@ -1,3 +1,3 @@
-export { Badge, badgeVariants } from './chunk-SKTLC2XY.js';
+export { Badge, badgeVariants } from './chunk-F4DP4PIM.js';
 //# sourceMappingURL=badge.js.map
 //# sourceMappingURL=badge.js.map

package/dist/card.js

@@ -1,3 +1,3 @@
-export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './chunk-HSWSYEFQ.js';
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './chunk-RYE5YCFF.js';
 //# sourceMappingURL=card.js.map
 //# sourceMappingURL=card.js.map

package/dist/chip-list.js

@@ -1,3 +1,3 @@
-export { ChipList } from './chunk-BN3YHYYL.js';
+export { ChipList } from './chunk-QUPGIPTT.js';
 //# sourceMappingURL=chip-list.js.map
 //# sourceMappingURL=chip-list.js.map