@startsimpli/ui 0.4.148 → 0.4.150

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startsimpli/ui",
-  "version": "0.4.148",
+  "version": "0.4.150",
   "description": "Shared UI components package for StartSimpli applications",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -56,8 +56,8 @@
     "@codemirror/state": "^6.0.0",
     "@codemirror/view": "^6.0.0",
     "@startsimpli/auth": "^0.4.39",
-    "@startsimpli/api": "^0.5.66",
-    "@startsimpli/i18n": "^0.1.3"
+    "@startsimpli/i18n": "^0.1.3",
+    "@startsimpli/api": "^0.5.66"
   },
   "peerDependenciesMeta": {
     "@startsimpli/api": {

package/src/components/navigation/__tests__/nav-drawer.test.tsx

@@ -0,0 +1,73 @@
+/**
+ * NavDrawer — the phone-width home of an app's left rail (bd startsim-g2m75).
+ *
+ * At 390px a fixed 240px rail left the content column ~52px wide. Below the
+ * breakpoint the rail must become a menu button that opens the same nav as a
+ * modal drawer: focus trapped inside, Escape closes, choosing a link closes.
+ * jsdom has no viewport, so width is proven in Playwright; this pins behaviour.
+ */
+import { useState } from 'react'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { NavDrawer, NavDrawerButton } from '../nav-drawer'
+
+function Harness() {
+  const [open, setOpen] = useState(false)
+  return (
+    <>
+      <NavDrawerButton open={open} onOpenChange={setOpen} />
+      <NavDrawer open={open} onOpenChange={setOpen} title="Navigation">
+        <a href="/t/topic" onClick={() => setOpen(false)}>
+          Topics
+        </a>
+        <button type="button">Log out</button>
+      </NavDrawer>
+    </>
+  )
+}
+
+describe('NavDrawer', () => {
+  it('is closed until the menu button is pressed, and says so', () => {
+    render(<Harness />)
+    const btn = screen.getByRole('button', { name: /open navigation/i })
+    expect(btn).toHaveAttribute('aria-expanded', 'false')
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
+  })
+
+  it('opens the nav as a labelled modal dialog', () => {
+    render(<Harness />)
+    fireEvent.click(screen.getByRole('button', { name: /open navigation/i }))
+    const dialog = screen.getByRole('dialog', { name: 'Navigation' })
+    expect(dialog).toContainElement(screen.getByRole('link', { name: 'Topics' }))
+    expect(screen.getByRole('button', { name: /open navigation/i, hidden: true })).toHaveAttribute(
+      'aria-expanded',
+      'true',
+    )
+  })
+
+  it('moves focus into the drawer when it opens', () => {
+    render(<Harness />)
+    fireEvent.click(screen.getByRole('button', { name: /open navigation/i }))
+    expect(screen.getByRole('dialog')).toContainElement(document.activeElement as HTMLElement)
+  })
+
+  it('closes on Escape', () => {
+    render(<Harness />)
+    fireEvent.click(screen.getByRole('button', { name: /open navigation/i }))
+    fireEvent.keyDown(screen.getByRole('dialog'), { key: 'Escape' })
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
+  })
+
+  it('closes from its own close button', () => {
+    render(<Harness />)
+    fireEvent.click(screen.getByRole('button', { name: /open navigation/i }))
+    fireEvent.click(screen.getByRole('button', { name: /close navigation/i }))
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
+  })
+
+  it('closes when a nav link is chosen', () => {
+    render(<Harness />)
+    fireEvent.click(screen.getByRole('button', { name: /open navigation/i }))
+    fireEvent.click(screen.getByRole('link', { name: 'Topics' }))
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
+  })
+})

package/src/components/navigation/index.ts

@@ -5,3 +5,4 @@ export * from './app-shell'
 export * from './grouped-nav'
 export * from './entity-switcher'
 export * from './breadcrumbs'
+export * from './nav-drawer'

package/src/components/navigation/nav-drawer.tsx

@@ -0,0 +1,98 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { Menu, X } from 'lucide-react';
+import { cn } from '../../lib/utils';
+
+/**
+ * The phone-width home of an app's left rail (bd startsim-g2m75).
+ *
+ * A fixed 240px rail beside the content works on a laptop and leaves ~52px of
+ * content at 390px. Below the app's breakpoint the rail should become a
+ * <NavDrawerButton/> that opens the SAME nav inside a <NavDrawer/>: a modal
+ * left drawer built on Radix Dialog, so focus is trapped, Escape and an outside
+ * tap close it, focus returns to the button, and the page behind can't scroll.
+ *
+ * The open state is the caller's client state — never a search param, since a
+ * Next layout doesn't re-render on soft navigation. Close it from the nav
+ * link's own onClick (it then also closes on a tap of the current page, which a
+ * pathname effect would miss).
+ *
+ *   const [open, setOpen] = useState(false)
+ *   <div className="md:hidden"><NavDrawerButton open={open} onOpenChange={setOpen} /></div>
+ *   <NavDrawer open={open} onOpenChange={setOpen} title="Navigation">{nav}</NavDrawer>
+ */
+export interface NavDrawerProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  /** Accessible name of the drawer (visually hidden). */
+  title?: string;
+  /** Classes for the drawer panel — e.g. a width or a dark rail background. */
+  className?: string;
+  children: ReactNode;
+}
+
+export function NavDrawer({
+  open,
+  onOpenChange,
+  title = 'Navigation',
+  className,
+  children,
+}: NavDrawerProps) {
+  return (
+    <DialogPrimitive.Root open={open} onOpenChange={onOpenChange}>
+      <DialogPrimitive.Portal>
+        <DialogPrimitive.Overlay className="fixed inset-0 z-50 bg-black/40" />
+        <DialogPrimitive.Content
+          aria-describedby={undefined}
+          className={cn(
+            'fixed inset-y-0 left-0 z-50 flex w-72 max-w-[85vw] flex-col overflow-hidden bg-white shadow-xl focus:outline-none',
+            className,
+          )}
+        >
+          <DialogPrimitive.Title className="sr-only">{title}</DialogPrimitive.Title>
+          {children}
+          <DialogPrimitive.Close
+            aria-label="Close navigation"
+            className="absolute right-2 top-2 flex h-10 w-10 items-center justify-center rounded-md opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary"
+          >
+            <X className="h-5 w-5" aria-hidden />
+          </DialogPrimitive.Close>
+        </DialogPrimitive.Content>
+      </DialogPrimitive.Portal>
+    </DialogPrimitive.Root>
+  );
+}
+
+export interface NavDrawerButtonProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  className?: string;
+  /** Accessible label (default "Open navigation"). */
+  label?: string;
+}
+
+/** The menu button that opens a <NavDrawer/>. Hide it at the rail's breakpoint. */
+export function NavDrawerButton({
+  open,
+  onOpenChange,
+  className,
+  label = 'Open navigation',
+}: NavDrawerButtonProps) {
+  return (
+    <button
+      type="button"
+      aria-label={label}
+      aria-expanded={open}
+      aria-haspopup="dialog"
+      onClick={() => onOpenChange(!open)}
+      className={cn(
+        'flex h-10 w-10 items-center justify-center rounded-md text-gray-700 transition hover:bg-gray-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary',
+        className,
+      )}
+    >
+      <Menu className="h-5 w-5" aria-hidden />
+    </button>
+  );
+}

package/src/foundry/LinkPanel.tsx

@@ -33,6 +33,7 @@ import { Button } from '../components/ui/button';
 import { Input } from '../components/ui/input';
 import { notify } from '../components/toast/use-notify';
 import { useNow } from '../hooks/use-now';
+import { can } from './permissions';
 import {
   edgeEndpoints,
   edgesForSide,
@@ -191,6 +192,9 @@ export function LinkPanel({
   dateAttributeFor,
 }: LinkPanelProps) {
   const qc = useQueryClient();
+  // Adding or removing a link is editing the record (bd startsim-768w.71). A
+  // tenant that sends no permissions keeps the controls, as before.
+  const mayLink = can(record, 'canLink', true);
   const [picking, setPicking] = useState(false);
   const [search, setSearch] = useState('');
   const [busy, setBusy] = useState(false);
@@ -276,7 +280,7 @@ export function LinkPanel({
           </h3>
           {description ? <p className="mt-0.5 text-xs text-neutral-500">{description}</p> : null}
         </div>
-        <Button
+        {mayLink ? <Button
           size="sm"
           variant={picking ? 'outline' : 'default'}
           onClick={() => {
@@ -291,7 +295,7 @@ export function LinkPanel({
               <Plus className="mr-1 h-3.5 w-3.5" aria-hidden /> Add
             </>
           )}
-        </Button>
+        </Button> : null}
       </header>
 
       {picking ? (
@@ -373,7 +377,7 @@ export function LinkPanel({
                       </span>
                     )}
                   </span>
-                  <button
+                  {mayLink ? <button
                     type="button"
                     disabled={busy}
                     onClick={() => unlink(edge.id, label)}
@@ -382,7 +386,7 @@ export function LinkPanel({
                     className="shrink-0 rounded p-1 text-neutral-400 hover:bg-red-50 hover:text-red-600 disabled:opacity-50"
                   >
                     <X className="h-4 w-4" aria-hidden />
-                  </button>
+                  </button> : null}
                 </li>
               );
             })}

package/src/foundry/__tests__/permissions.test.tsx

@@ -0,0 +1,74 @@
+/**
+ * Controls follow the record's `permissions` object (bd startsim-768w.71), and a
+ * tenant that sends none keeps the old behaviour.
+ */
+import { render, screen } from '@testing-library/react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { LinkPanel, type LinkPanelApi } from '../LinkPanel'
+import { linkSidesFor, type LinkSide } from '../links'
+import { can, permissionsOf, SHARE_LEVELS, type RecordPermissions } from '../permissions'
+import type { EntityRecordShape, EntityTypeShape, RelationshipEdgeShape } from '../types'
+
+const PRODUCT: EntityTypeShape = { id: 't1', key: 'product', label: 'Products', attributes: [] }
+const PATENT: EntityTypeShape = { id: 't2', key: 'patent', label: 'Patents', attributes: [] }
+const side = linkSidesFor(PRODUCT, [{ key: 'marked_with', sourceType: 't1', targetType: 't2' }], [
+  PRODUCT,
+  PATENT,
+])[0] as LinkSide
+
+const VIEW: RecordPermissions = {
+  level: 'view', canComment: true, canSuggest: true, canEdit: false, canAccept: false,
+  canRestore: false, canTag: false, canLink: false, canShare: false, canDelete: false,
+  canTransfer: false,
+}
+const EDIT: RecordPermissions = { ...VIEW, level: 'edit', canEdit: true, canAccept: true,
+  canRestore: true, canTag: true, canLink: true, canShare: true }
+
+const api: LinkPanelApi = {
+  listTypes: async () => ({ results: [PRODUCT, PATENT] }),
+  listEdgesFor: async () => [{ id: 'E1', relType: 'marked_with', source: 'P1', target: 'X1' }] as RelationshipEdgeShape[],
+  listRelated: async () => ({ results: [{ id: 'X1', name: 'A patent', data: {} }], next: null }),
+  searchRecords: async () => ({ results: [] as EntityRecordShape[] }),
+  createEdge: async () => undefined,
+  deleteEdge: async () => undefined,
+}
+
+function renderPanel(record: EntityRecordShape) {
+  const qc = new QueryClient({ defaultOptions: { queries: { retry: false } } })
+  return render(
+    <QueryClientProvider client={qc}>
+      <LinkPanel record={record} side={side} api={api} />
+    </QueryClientProvider>,
+  )
+}
+
+describe('permissions', () => {
+  it('reads the object, and falls back when a tenant sends none', () => {
+    expect(permissionsOf({ permissions: EDIT })).toEqual(EDIT)
+    expect(permissionsOf({})).toBeNull()
+    expect(can({ permissions: VIEW }, 'canEdit', true)).toBe(false)
+    expect(can({}, 'canEdit', true)).toBe(true)
+    expect(can({}, 'canEdit')).toBe(false)
+  })
+
+  it('offers exactly the two enforced share levels', () => {
+    expect(SHARE_LEVELS.map((l) => [l.value, l.label])).toEqual([
+      ['viewer', 'Can view'],
+      ['editor', 'Can edit'],
+    ])
+  })
+
+  it('hides Add and Unlink from someone who can only view the record', async () => {
+    renderPanel({ id: 'P1', name: 'A product', data: {}, permissions: VIEW })
+    expect(await screen.findByText('A patent')).toBeInTheDocument()
+    expect(screen.queryByRole('button', { name: /add/i })).toBeNull()
+    expect(screen.queryByRole('button', { name: /unlink/i })).toBeNull()
+  })
+
+  it('shows them to someone who can edit it', async () => {
+    renderPanel({ id: 'P1', name: 'A product', data: {}, permissions: EDIT })
+    expect(await screen.findByText('A patent')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: /add/i })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: /unlink/i })).toBeInTheDocument()
+  })
+})

package/src/foundry/index.ts

@@ -17,5 +17,6 @@ export * from './list-query';
 export * from './publication';
 export * from './record-validation';
 export * from './system-attrs';
+export * from './permissions';
 export { LinkPanel, linkQueryKey } from './LinkPanel';
 export type { LinkPanelApi, LinkPanelProps, LinkPanelPage } from './LinkPanel';

package/src/foundry/permissions.ts

@@ -0,0 +1,65 @@
+/**
+ * WHAT THE CALLER MAY DO TO A RECORD, as the tenant says it (bd startsim-768w.71).
+ *
+ * Every record a foundry tenant serves carries a `permissions` object, computed
+ * by the same code that refuses the writes (tenant-starter
+ * `apps/schema_registry/rights.py`; the model in plain words is
+ * `tenant-starter/PERMISSIONS.md`). A screen shows or hides each control from
+ * this ONE answer, and never re-derives it from the workspace role: a Viewer
+ * with a "Can edit" share edits that record, and a Member with "Can view" on a
+ * space does not edit what is in it.
+ *
+ * An older tenant that does not send the object yields `null`, and `can()`
+ * falls back to whatever the caller says the old behaviour was, so a tenant
+ * that has not rolled yet keeps its controls.
+ */
+import type { EntityRecordShape } from './types';
+
+export type AccessLevel = 'view' | 'edit' | 'full';
+
+export interface RecordPermissions {
+  level: AccessLevel;
+  canComment: boolean;
+  canSuggest: boolean;
+  canEdit: boolean;
+  canAccept: boolean;
+  canRestore: boolean;
+  canTag: boolean;
+  canLink: boolean;
+  canShare: boolean;
+  canDelete: boolean;
+  canTransfer: boolean;
+}
+
+export type Permission = Exclude<keyof RecordPermissions, 'level'>;
+
+/** The record's permissions object, or `null` when the tenant sent none. */
+export function permissionsOf(
+  record: Pick<EntityRecordShape, 'permissions'> | null | undefined,
+): RecordPermissions | null {
+  const p = record?.permissions;
+  return p && typeof p === 'object' ? (p as RecordPermissions) : null;
+}
+
+/** May the caller do `what` to `record`? `fallback` answers for a tenant that
+ *  sends no permissions object yet. */
+export function can(
+  record: Pick<EntityRecordShape, 'permissions'> | null | undefined,
+  what: Permission,
+  fallback = false,
+): boolean {
+  const p = permissionsOf(record);
+  if (!p) return fallback;
+  return p[what] === true;
+}
+
+/**
+ * The share levels, exactly the ones the tenant enforces (Quinn 2026-10-08:
+ * "Can view" and "Can edit", nothing else). `value` is what a grant stores.
+ */
+export const SHARE_LEVELS = [
+  { value: 'viewer', label: 'Can view', description: 'Read, suggest and comment' },
+  { value: 'editor', label: 'Can edit', description: 'Change, accept suggestions and share' },
+] as const;
+
+export type ShareLevel = (typeof SHARE_LEVELS)[number]['value'];

package/src/foundry/types.ts

@@ -61,6 +61,9 @@ export interface EntityRecordShape {
   name?: string | null;
   externalId?: string | null;
   data?: Record<string, unknown>;
+  /** What the caller may do to this record (bd startsim-768w.71). Absent on a
+   *  tenant that has not rolled the permission model; see ./permissions. */
+  permissions?: import('./permissions').RecordPermissions | null;
 }
 
 /** A declared relationship: a fixed source type -> target type edge. */