@arbidocs/blocks 0.4.5 → 0.4.6

package/README.md

@@ -96,24 +96,34 @@ import { PassagePill } from '@arbidocs/blocks/citations'
 
 ## Assistant chat page
 
-`ChatPage` (`@arbidocs/blocks/chat`) is a whole assistant chat: conversations with auto-titles, markdown
-answers, composer with a document chip and upload, empty, error and retry states, plus `header` and `aside`
-(workflow launcher) slots. It sizes to its container, so it holds up beside an open dock. Bind it with the
-`@arbidocs/react` hook:
+`ChatPage` (`@arbidocs/blocks/chat`) is a whole assistant chat: the workspace's stored conversations (backend
+titles, history loads on open), markdown answers whose citations are quiet numbered marks with a source popover
+(document, page, passage, an open action through `onOpenCitation`), composer with a document chip, upload and a stop
+button, empty, error and retry states, plus `header` and `aside` (workflow launcher) slots. It lays itself out by
+its own width (`asideBreakpoint`, default 60rem: column above, one floating panel below) and has `fillHeight` /
+`compactHeader` for a chat card under a page header. Bind it with the `@arbidocs/react` hook:
 
 ```tsx
 import { ChatPage, useChatSurface } from '@arbidocs/blocks/chat'
 import { useConnectedChat } from '@arbidocs/blocks/connect' // or useArbiChat({ workspaceId }) from @arbidocs/react
 
 const chat = useConnectedChat()
-<ChatPage chat={chat} header={<h2>Assistant</h2>} aside={<WorkflowLauncher … />} />
+<ChatPage
+  chat={chat}
+  fillHeight compactHeader
+  onOpenCitation={(t) => openDocument(t.documentId, t.page)}
+  aside={<WorkflowLauncher … />}
+/>
 
 // The dock yields to a mounted page chat:
 const { isDockAvailable } = useChatSurface()
 {isDockAvailable && <MyDock />}
 ```
 
-Theme the user bubble with `--chat-user-bubble` and `--chat-user-bubble-foreground` (HSL triplets).
+Theme the user bubble with `--chat-user-bubble` and `--chat-user-bubble-foreground` (HSL triplets). The
+live example (`examples/react-chat`, sign in, pick a workspace, chat) and the mock-data
+`packages/arbi-blocks/examples/custom-ui` (`npm run example:dev`) both mount it.
+
 ## Edit an artifact, save versions, compare
 
 `/artifacts` is the surface for an AI-drafted document the user may edit: a toolbar (Edit, Cancel,
@@ -160,6 +170,36 @@ import { EditorialHero, EditorialSection, PanelGrid, CtaBand } from '@arbidocs/b
 See `examples/custom-ui/MarketingPage.tsx` for a full page and `docs/design/blocks-package.md` for
 the part table.
 
+## Phone shell: tab bar, install prompt, bottom inset
+
+```tsx
+import { InstallPrompt, MobileTabBar, Shell } from '@arbidocs/blocks/shell'
+
+const items: NavItem[] = [
+  { id: 'chat', label: 'AI Assistant', shortLabel: 'Assistant', icon: <Chat />, onSelect },
+  // ...
+]
+<Shell.Root tabBar={<MobileTabBar items={items} />} overlays={<InstallPrompt appName="Clarum" />}>
+```
+
+- `MobileTabBar` labels wrap at word boundaries and are never ellipsised. Give an item a `shortLabel`
+  and a tab narrower than 5.5rem shows it (the full label stays the accessible name).
+- `InstallPrompt` is a floating "Install app" pill: shown only when the browser fired
+  `beforeinstallprompt` (or on iOS, where it expands the Add to Home Screen steps), not when already
+  installed, dismissible with the dismissal remembered (`dismissDays`, default 30). Both targets are
+  44px on a phone. `useInstallPrompt()` / `initInstallPrompt()` / `getInstallInstructions()` are the
+  headless parts (call `initInstallPrompt()` at app start so the one-shot event is not missed).
+  `autoPromptParam="install"` makes `/?install=true` open the native dialog.
+- `--shell-bottom-inset` (on `<html>`) is how far the bottom bars reach up from the screen edge:
+  `MobileTabBar` and `Composer.Root` publish it (`useShellBottomInset(ref)` for your own bar). The
+  install prompt, and anything else floating at the bottom, positions itself with
+  `calc(var(--shell-bottom-inset, 0px) + 0.75rem)` so it never covers a tab label or the composer.
+- Scroll containers use the `scrollbar-themed` utility class from `blocks.css` (thin, token-coloured;
+  override with `--scrollbar-thumb` / `--scrollbar-track`). Sidebar, dialogs and the chat list have it.
+- Browser check: `npm run example:dev` (add `-- --port 5331`), or `npm run example:build` then
+  `npm run example:preview`; `npm run example:test:e2e` measures the example at 360 and 390px
+  against the production build.
+
 ## Workspaces: gallery and switcher in a few lines
 
 ```tsx