@estiva-app/ui 0.64.0 → 0.65.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@estiva-app/ui",
-  "version": "0.64.0",
+  "version": "0.65.1",
   "description": "Estiva's design tokens (the contract) and a small set of primitives (a convenience) for every Estiva app.",
   "type": "module",
   "license": "MIT",

package/registry.json

@@ -4,7 +4,7 @@
     "kind": "package",
     "repo": "estiva-ui",
     "package": "@estiva-app/ui",
-    "packageVersion": "0.64.0",
+    "packageVersion": "0.65.1",
     "exports": 140,
     "typeExports": 145,
     "files": null
@@ -1248,6 +1248,12 @@
           "required": false,
           "note": null
         },
+        {
+          "name": "pending",
+          "takes": "true/false",
+          "required": false,
+          "note": "Opened, and its rows are not in yet: the title says open — the arrow turned, `aria-expanded`, `aria-busy` — and the panel stays shut until this is false, then slides open once, rows and all."
+        },
         {
           "name": "storageKey",
           "takes": "text",
@@ -4378,6 +4384,12 @@
           "required": false,
           "note": "Its rows are being read: a skeleton in their place."
         },
+        {
+          "name": "pending",
+          "takes": "true/false",
+          "required": false,
+          "note": "Opened, and its rows are being read: the arrow turns and the group stays shut until they are in, then opens once — `CollapsibleSection`'s."
+        },
         {
           "name": "storageKey",
           "takes": "text",
@@ -5415,7 +5427,7 @@
       "looks": [
         "[&_:is(ul,ol)]:pl-5 [&_li>p]:m-0 [&_li]:break-words [&_li]:marker:text-text-secondary [&_ol]:list-decimal [&_ul]:list-disc",
         "[&_blockquote>p]:m-0 [&_blockquote]:border-l-[3px] [&_blockquote]:border-text-muted [&_blockquote]:pl-2.5",
-        "[&_:not(pre)>code]:rounded-sm [&_:not(pre)>code]:bg-bg-code [&_:not(pre)>code]:px-1 [&_:not(pre)>code]:py-0.5 [&_:not(pre)>code]:text-text-code [&_code]:font-mono [&_code]:text-[0.85em] [&_code]:text-text-primary",
+        "[&_:not(pre)>code]:rounded-sm [&_:not(pre)>code]:bg-bg-code [&_:not(pre)>code]:px-1 [&_:not(pre)>code]:py-0.5 [&_:not(pre)>code]:border [&_:not(pre)>code]:border-border-default [&_code]:font-mono [&_code]:text-[0.85em] [&_code]:text-text-primary",
         "[&_pre>code]:text-[1em] [&_pre]:whitespace-pre-wrap [&_pre]:break-words [&_pre]:rounded-md [&_pre]:bg-bg-code [&_pre]:px-3 [&_pre]:py-2.5 [&_pre]:font-mono [&_pre]:text-[0.85em] [&_pre]:leading-relaxed [&_pre]:text-text-primary",
         "[&_:is(.hljs-keyword,.hljs-doctag,.hljs-type,.hljs-template-tag,.hljs-template-variable)]:text-syntax-keyword [&_.hljs-title]:text-syntax-function [&_:is(.hljs-number,.hljs-literal,.hljs-attr,.hljs-attribute,.hljs-meta,.hljs-variable,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id)]:text-syntax-constant [&_:is(.hljs-string,.hljs-regexp)]:text-syntax-string [&_:is(.hljs-built_in,.hljs-symbol)]:text-syntax-variable [&_.hljs-comment]:text-syntax-comment [&_:is(.hljs-name,.hljs-quote,.hljs-selector-tag,.hljs-selector-pseudo)]:text-syntax-tag",
         "[&_:is(th,td)>p]:m-0 [&_:is(th,td)]:border [&_:is(th,td)]:border-border-default [&_:is(th,td)]:px-2 [&_:is(th,td)]:py-1 [&_:is(th,td)]:text-left [&_:is(th,td)]:align-top [&_table]:w-full [&_table]:border-collapse [&_th]:bg-bg-code [&_th]:font-medium [&_th]:text-text-primary",

package/src/CodeBlockColours.mdx

@@ -19,7 +19,7 @@ are the ones RichText reads it in, so writing looks the same as reading.
 
 - Drawing text that is already written → **RichText**, which colours its code
   blocks itself.
-- Code in a sentence → the code mark. It is amber and takes no other colours.
+- Code in a sentence → the code mark. It takes no colours.
 
 ## How
 
@@ -38,8 +38,9 @@ useEditor({
   class list; without it the words are named but drawn in one colour.
 - The block keeps the name `codeBlock` and its `language`, so text written
   before it was added reads the same.
-- It colours highlight.js's 37 everyday languages. A block in any other
-  language, or in none, stays one colour.
+- It colours highlight.js's 37 everyday languages, only by the language the
+  block names (```` ```ts ```` then Enter). A block in any other language, or
+  in none, stays one colour: it never guesses, so it looks the same once read.
 - The app installs `@tiptap/extension-code-block-lowlight`, as it installs the
   other Tiptap parts.
 

package/src/CodeBlockColours.test.ts

@@ -0,0 +1,36 @@
+// @vitest-environment jsdom
+/**
+ * CodeBlockColours colours a block only by the language it names, as RichText
+ * does when the text is read (Katerina, 9 October: never guess).
+ */
+import { afterEach, describe, expect, it } from 'vitest'
+import { Editor } from '@tiptap/core'
+import StarterKit from '@tiptap/starter-kit'
+import { CodeBlockColours } from './CodeBlockColours'
+
+let editor: Editor | undefined
+afterEach(() => editor?.destroy())
+
+const coloured = (content: string) => {
+  editor = new Editor({ element: document.createElement('div'), extensions: [StarterKit.configure({ codeBlock: false }), CodeBlockColours], content })
+  return editor.view.dom.querySelectorAll('pre [class*="hljs-"]').length
+}
+
+describe('CodeBlockColours', () => {
+  it('colours a block that names its language', () => {
+    expect(coloured('<pre><code class="language-ts">const done = items.length</code></pre>')).toBeGreaterThan(0)
+  })
+
+  it('leaves a block that names no language in one colour, as RichText reads it', () => {
+    expect(coloured('<pre><code>const done = items.length</code></pre>')).toBe(0)
+  })
+
+  it('leaves a block in a language it does not know in one colour', () => {
+    expect(coloured('<pre><code class="language-nothing">const done = items.length</code></pre>')).toBe(0)
+  })
+
+  it('keeps the block a code block, with its language', () => {
+    coloured('<pre><code class="language-ts">const done = 1</code></pre>')
+    expect(editor!.getJSON().content?.[0]).toMatchObject({ type: 'codeBlock', attrs: { language: 'ts' } })
+  })
+})

package/src/CodeBlockColours.ts

@@ -2,6 +2,20 @@
 import { CodeBlockLowlight } from '@tiptap/extension-code-block-lowlight'
 import { lowlight } from './codeColours'
 
+/*
+  The editor library guesses a language for a block that names none, or names
+  one it does not know, and colours it by the guess. RichText never guesses, so
+  that block was coloured while written and plain once read. A block is
+  coloured only by the language it names, while written and when read
+  (Katerina, 9 October: never guess).
+*/
+const namedOnly = {
+  highlight: (language: string, value: string) => lowlight().highlight(language, value),
+  highlightAuto: (value: string) => ({ type: 'root' as const, children: [{ type: 'text' as const, value }], data: { language: undefined, relevance: 0 } }),
+  listLanguages: () => lowlight().listLanguages(),
+  registered: (language: string) => lowlight().registered(language),
+}
+
 /**
  * A code block in the editor, with the colours RichText reads it in (Katerina,
  * 9 October): the same highlight.js languages, the same classes, and the
@@ -11,4 +25,4 @@ import { lowlight } from './codeColours'
  * then add `CodeBlockColours`. The block keeps its name, `codeBlock`, and its
  * `language` attribute, so nothing already written changes.
  */
-export const CodeBlockColours = CodeBlockLowlight.configure({ lowlight })
+export const CodeBlockColours = CodeBlockLowlight.configure({ lowlight: namedOnly })

package/src/CollapsibleSection.mdx

@@ -20,6 +20,13 @@ toggle, and the rows under it, sliding shut and open.
   reloads: this browser remembers, under that key. The app prefixes the
   key (`app.sidebar.starred`).
 - `open` + `onOpenChange` when the app owns the state.
+- `pending` when the rows are read as it opens and usually arrive quickly:
+  the title turns open at once (and says `aria-busy`), the panel stays shut
+  until `pending` is false, then opens once with every row. A skeleton that
+  the rows replace would move everything below it twice. Only for rows not
+  yet drawn: on a section already showing its rows, `pending` shuts them
+  until it is false. The tests pin the state (open, busy, rows hidden); the
+  single slide is Chrome's to show, measured in Peek (OPT-11).
 - `actions` for add, sort, filter beside the title — SectionHeader's,
   revealed while the row is hovered or keyboard-focused.
 - `look="row"` when the section is a row among rows — a folder in a

package/src/CollapsibleSection.test.tsx

@@ -81,6 +81,36 @@ describe('CollapsibleSection', () => {
   })
 })
 
+/** Opened before its rows are in (0.65.1, OPT-11): the title says open, the panel waits. */
+describe('CollapsibleSection, pending', () => {
+  it('the title says open and busy while the rows stay shut, then they open', () => {
+    const { rerender } = render(<CollapsibleSection title="Section" open pending>{rows}</CollapsibleSection>)
+    expect(title().getAttribute('aria-expanded')).toBe('true')
+    expect(title().getAttribute('aria-busy')).toBe('true')
+    expect(screen.getByText('Item one').closest('[hidden]')).not.toBeNull()
+    rerender(<CollapsibleSection title="Section" open>{rows}</CollapsibleSection>)
+    expect(title().getAttribute('aria-expanded')).toBe('true')
+    expect(title().getAttribute('aria-busy')).toBeNull()
+    expect(screen.getByText('Item one').closest('[hidden]')).toBeNull()
+  })
+
+  it('a click while pending closes it', async () => {
+    const onOpenChange = vi.fn()
+    render(<CollapsibleSection title="Section" open pending onOpenChange={onOpenChange}>{rows}</CollapsibleSection>)
+    await userEvent.click(title())
+    expect(onOpenChange).toHaveBeenCalledWith(false)
+  })
+
+  it('a closed section is not busy, and a click opens it', async () => {
+    const onOpenChange = vi.fn()
+    render(<CollapsibleSection title="Section" open={false} pending onOpenChange={onOpenChange}>{rows}</CollapsibleSection>)
+    expect(title().getAttribute('aria-expanded')).toBe('false')
+    expect(title().getAttribute('aria-busy')).toBeNull()
+    await userEvent.click(title())
+    expect(onOpenChange).toHaveBeenCalledWith(true)
+  })
+})
+
 /** What it hands its header (0.56.0): the folder's ⋮, the ⋮'s name, and the icon before the title. */
 describe('CollapsibleSection, its header', () => {
   it('passes menu and menuLabel on: the ⋮ is named by menuLabel and opens the menu', async () => {

package/src/CollapsibleSection.tsx

@@ -30,6 +30,15 @@ export interface CollapsibleSectionProps {
   /** The caller owns the state. */
   open?: boolean
   onOpenChange?: (open: boolean) => void
+  /**
+   * Opened, and its rows are not in yet: the title says open — the arrow
+   * turned, `aria-expanded`, `aria-busy` — and the panel stays shut until
+   * this is false, then slides open once, rows and all. A skeleton the rows
+   * then replace moves everything below twice (Peek's Folders, OPT-11). A
+   * click while pending closes it, as on an open section. Not for a re-read:
+   * on a section already showing its rows it shuts them until it is false.
+   */
+  pending?: boolean
   /** Remember open or closed in this browser, under this key. The app prefixes it. */
   storageKey?: string
   /** 16px, before the title; the arrow takes its place on hover — `SectionHeader`'s. */
@@ -85,7 +94,7 @@ function writeStored(key: string | undefined, open: boolean) {
   }
 }
 
-export function CollapsibleSection({ title, defaultOpen = true, open: openProp, onOpenChange, storageKey, icon, trailing, actions, menu, menuLabel, showActions, look = 'heading', indent = false, children, className, contentClassName }: CollapsibleSectionProps) {
+export function CollapsibleSection({ title, defaultOpen = true, open: openProp, onOpenChange, pending = false, storageKey, icon, trailing, actions, menu, menuLabel, showActions, look = 'heading', indent = false, children, className, contentClassName }: CollapsibleSectionProps) {
   const [openState, setOpenState] = useState(() => readStored(storageKey) ?? defaultOpen)
   const open = openProp ?? openState
   const setOpen = (next: boolean) => {
@@ -93,9 +102,12 @@ export function CollapsibleSection({ title, defaultOpen = true, open: openProp,
     writeStored(storageKey, next)
     onOpenChange?.(next)
   }
+  // Pending, Base UI holds the panel shut and so would open it on a click: the click is the title's, and the title says open.
+  // Only a click: find-in-page reaching into the shut panel asks to open it, and it is open.
+  const shown = open && !pending
   return (
-    <Collapsible.Root open={open} onOpenChange={setOpen} className={cn('flex flex-col', className)}>
-      <SectionHeader title={title} chevron icon={icon} isExpanded={open} trailing={trailing} actions={actions} menu={menu} menuLabel={menuLabel} showActions={showActions} look={look} className="shrink-0" render={<Collapsible.Trigger />} />
+    <Collapsible.Root open={shown} onOpenChange={(next, details) => setOpen(pending && details.reason === 'trigger-press' ? !open : next)} className={cn('flex flex-col', className)}>
+      <SectionHeader title={title} chevron icon={icon} isExpanded={open} trailing={trailing} actions={actions} menu={menu} menuLabel={menuLabel} showActions={showActions} look={look} className="shrink-0" render={<Collapsible.Trigger aria-expanded={open} aria-busy={pending && open ? true : undefined} />} />
       {/* The slide: Base UI measures the panel and writes its height to a
           variable — `auto` again once the slide ends, so rows that arrive
           later are not clipped — and the panel is 0 high on its opening frame

package/src/NavTree.mdx

@@ -54,7 +54,10 @@ rows to any depth.
   skeleton under it once open, and `onOpenChange` says when to read them;
   `childrenMessage` is the line under it. `onIntent` on a group says the
   pointer rests on it or the keyboard reached it: read it then, so opening
-  it draws rows.
+  it draws rows. A `NavTreeSection` opened while its read is in flight takes
+  `pending`: its arrow turns and it opens once the rows are in, in one move,
+  instead of a skeleton the rows then replace; keep `loading` for a read
+  that turns out slow.
 
 <Canvas of={NavTreeStories.ReadAsItOpens} />
 

package/src/NavTree.test.tsx

@@ -121,6 +121,16 @@ describe('NavTree drawn by the app', () => {
     expect(screen.getByText('Item a')).not.toBeNull()
     expect(screen.getByText('Nothing in this yet.')).not.toBeNull()
   })
+
+  it('a pending NavTreeSection says open and busy, its rows shut until it is not (OPT-11)', () => {
+    const { rerender } = render(<NavTreeSection title="Group a" open pending><a href="#a">Item a</a></NavTreeSection>)
+    const heading = screen.getByRole('button', { name: 'Group a' })
+    expect(heading.getAttribute('aria-expanded')).toBe('true')
+    expect(heading.getAttribute('aria-busy')).toBe('true')
+    expect(screen.getByText('Item a').closest('[hidden]')).not.toBeNull()
+    rerender(<NavTreeSection title="Group a" open><a href="#a">Item a</a></NavTreeSection>)
+    expect(screen.getByText('Item a').closest('[hidden]')).toBeNull()
+  })
 })
 
 describe('NavTree marks its groups', () => {

package/src/NavTree.tsx

@@ -186,6 +186,12 @@ export interface NavTreeSectionProps {
   onIntent?: () => void
   /** Its rows are being read: a skeleton in their place. */
   loading?: boolean
+  /**
+   * Opened, and its rows are being read: the arrow turns and the group stays
+   * shut until they are in, then opens once — `CollapsibleSection`'s. For a
+   * read that is usually quick; a slow one is `loading`'s skeleton.
+   */
+  pending?: boolean
   /** Remember it open or closed in this browser, under this key. */
   storageKey?: string
   /** The rows: `NavItem`s. */
@@ -199,7 +205,7 @@ export interface NavTreeSectionProps {
  * `groups`; an app whose groups each read their own data draws them itself,
  * as `NavTree`'s children.
  */
-export function NavTreeSection({ id, title, message, loading = false, trailing, actions, menu, icon, defaultOpen = true, open, onOpenChange, storageKey, onIntent, children }: NavTreeSectionProps) {
+export function NavTreeSection({ id, title, message, loading = false, pending, trailing, actions, menu, icon, defaultOpen = true, open, onOpenChange, storageKey, onIntent, children }: NavTreeSectionProps) {
   const timer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)
   useEffect(() => () => clearTimeout(timer.current), [])
   const intent = onIntent
@@ -225,6 +231,7 @@ export function NavTreeSection({ id, title, message, loading = false, trailing,
         defaultOpen={defaultOpen}
         open={open}
         onOpenChange={onOpenChange}
+        pending={pending}
         storageKey={storageKey}
         trailing={trailing}
         actions={actions}

package/src/RichText.tsx

@@ -95,9 +95,9 @@ const RICH_TEXT_CLASSES = {
   /* The line in the muted text grey, not the border grey: a border grey was 1.3 : 1 in Leaf (Katerina, 9 October). */
   // eslint-disable-next-line token-spacing/no-restricted-classes -- @estiva-escape: the quote line is Peek's, 3px, between the ramp's 2 and 4
   quote: '[&_blockquote>p]:m-0 [&_blockquote]:border-l-[3px] [&_blockquote]:border-text-muted [&_blockquote]:pl-2.5',
-  /* Code in a sentence is amber, its own colour (Katerina, 9 October: option I). */
+  /* Code in a sentence: the code fill and a thin border, in the heading colour (Katerina, 9 October: option B; the amber of 0.64.0 was too much). */
   // eslint-disable-next-line token-values/no-restricted-classes -- @estiva-escape: code is 0.85 of the text around it, so it scales with a heading and with `small`; a named size is fixed
-  code: '[&_:not(pre)>code]:rounded-sm [&_:not(pre)>code]:bg-bg-code [&_:not(pre)>code]:px-1 [&_:not(pre)>code]:py-0.5 [&_:not(pre)>code]:text-text-code [&_code]:font-mono [&_code]:text-[0.85em] [&_code]:text-text-primary',
+  code: '[&_:not(pre)>code]:rounded-sm [&_:not(pre)>code]:bg-bg-code [&_:not(pre)>code]:px-1 [&_:not(pre)>code]:py-0.5 [&_:not(pre)>code]:border [&_:not(pre)>code]:border-border-default [&_code]:font-mono [&_code]:text-[0.85em] [&_code]:text-text-primary',
   /* 12px either side, 10px above and below, looser lines than the text (Katerina, 9 October; 8px all round before). */
   // eslint-disable-next-line token-values/no-restricted-classes -- @estiva-escape: code is 0.85 of the text around it; the code inside the block is the block's own size, not 0.85 of it again
   codeBlock: '[&_pre>code]:text-[1em] [&_pre]:whitespace-pre-wrap [&_pre]:break-words [&_pre]:rounded-md [&_pre]:bg-bg-code [&_pre]:px-3 [&_pre]:py-2.5 [&_pre]:font-mono [&_pre]:text-[0.85em] [&_pre]:leading-relaxed [&_pre]:text-text-primary',

package/src/codeColours.ts

@@ -11,8 +11,16 @@ import { common, createLowlight } from 'lowlight'
  *
  * `common` is highlight.js's 37 everyday languages. A language outside them, or
  * none, leaves the code in one colour.
+ *
+ * Made the first time code is coloured, not when the package loads: a call at
+ * the top of the file is kept by every app's bundler, so an app that never draws
+ * code carried highlight.js too (measured: an app importing only `Link` was
+ * 55 KB gzipped).
  */
-export const lowlight = createLowlight(common)
+let instance: ReturnType<typeof createLowlight> | undefined
+export function lowlight() {
+  return (instance ??= createLowlight(common))
+}
 
 interface HastNode {
   type: string
@@ -28,6 +36,6 @@ function draw(node: HastNode, key: number): ReactNode {
 
 /** The code, its words wrapped in highlight.js's classes; the text as it is when the language is unknown. */
 export function codeColours(text: string, language?: string): ReactNode {
-  if (!language || !lowlight.registered(language)) return text
-  return (lowlight.highlight(language, text).children as HastNode[]).map(draw)
+  if (!language || !lowlight().registered(language)) return text
+  return (lowlight().highlight(language, text).children as HastNode[]).map(draw)
 }

package/tailwind-preset.js

@@ -155,7 +155,6 @@ export default {
         'bg-tooltip-key': 'var(--bg-tooltip-key)',
         'bg-field':     'var(--bg-field)',
         'bg-code':      'var(--bg-code)',
-        'text-code':    'var(--text-code)',
         'syntax-keyword': 'var(--syntax-keyword)',
         'syntax-function': 'var(--syntax-function)',
         'syntax-constant': 'var(--syntax-constant)',

package/tokens.css

@@ -101,8 +101,6 @@
   /* Code, in a sentence and as a block, and a table's header row (RichText, UIG-30).
      Here, the hover fill: bg-active, #D4D4D8, was the darkest thing on a white card (Katerina, 28 September). */
   --bg-code:     #E9E9EB;
-  /* Inline code's text: amber, on --bg-code (Katerina, 9 October: option I). Darker than the warning amber, which is 3.8 : 1 on the code fill; this is 4.8. */
-  --text-code:   #855f00;
   /* Colours inside a code block, by language (Katerina, 9 October). GitHub's light set; the keyword one shade darker (#cf222e is 4.4 : 1 on our fill, this 4.9). */
   --syntax-keyword: #c21f2b;
   --syntax-function: #6639ba;
@@ -194,8 +192,6 @@
   /* Code, in a sentence and as a block, and a table's header row (RichText, UIG-30).
      Here, bg-active, as Peek draws code (Katerina, 28 September). */
   --bg-code:     #2D2D31;
-  /* Inline code's text: amber, on --bg-code (Katerina, 9 October: option I). Amber 400, as on GitHub's dark ground. */
-  --text-code:   #fbbf24;
   /* Colours inside a code block, by language (Katerina, 9 October). GitHub's dark set. */
   --syntax-keyword: #ff7b72;
   --syntax-function: #d2a8ff;
@@ -291,8 +287,6 @@
   /* Code, in a sentence and as a block, and a table's header row (RichText, UIG-30).
      Here, bg-active, as Peek draws code (Katerina, 28 September). */
   --bg-code:     rgba(255, 255, 255, 0.08);
-  /* Inline code's text: amber, on --bg-code (Katerina, 9 October: option I). Signal's warning amber. */
-  --text-code:   #ffb020;
   /* Colours inside a code block, by language (Katerina, 9 October). GitHub's dark set. */
   --syntax-keyword: #ff7b72;
   --syntax-function: #d2a8ff;
@@ -402,8 +396,6 @@
   /* Code, in a sentence and as a block, and a table's header row (RichText, UIG-30).
      Here, bg-active, as Peek draws code (Katerina, 28 September). */
   --bg-code:     rgba(255, 255, 255, 0.08);
-  /* Inline code's text: amber, on --bg-code (Katerina, 9 October: option I). Ship's warning amber. */
-  --text-code:   #e0b04a;
   /* Colours inside a code block, by language (Katerina, 9 October). GitHub's dark set. */
   --syntax-keyword: #ff7b72;
   --syntax-function: #d2a8ff;
@@ -505,8 +497,6 @@
   /* Code, in a sentence and as a block, and a table's header row (RichText, UIG-30).
      Here, the inset fill: lighter than bg-active on a white card (Katerina, 28 September). */
   --bg-code:     #e9e9ea;
-  /* Inline code's text: amber, on --bg-code (Katerina, 9 October: option I). Darker than Leaf's warning amber (#967000, 3.8 : 1 on the code fill); this is 4.8. */
-  --text-code:   #855f00;
   /* Colours inside a code block, by language (Katerina, 9 October). GitHub's light set; the keyword one shade darker (#cf222e is 4.4 : 1 on our fill, this 4.9). */
   --syntax-keyword: #c21f2b;
   --syntax-function: #6639ba;