@estiva-app/ui 0.62.1 → 0.64.0

package/src/registry/registry.test.ts

@@ -26,7 +26,7 @@ import { SCHEMA_VERSION, validateRegistry, type Registry, type RegistryEntry } f
 const root = process.cwd()
 const registry = buildRegistry({ root })
 /** Editor extensions: named like components by the catalogue, and not React components. */
-const EDITOR_EXTENSIONS = ['KeptSelection', 'BlockId', 'UnknownBlock', 'ReferenceNode', 'AttachmentNode', 'PersonMention', 'UrgentPersonMention', 'CaptionedReference', 'ReferenceTrigger', 'SlashCommands']
+const EDITOR_EXTENSIONS = ['KeptSelection', 'BlockId', 'UnknownBlock', 'ReferenceNode', 'AttachmentNode', 'PersonMention', 'UrgentPersonMention', 'CaptionedReference', 'ReferenceTrigger', 'SlashCommands', 'PastedImages', 'CodeBlockColours']
 const entry = (name: string): RegistryEntry => {
   const found = registry.entries.find((candidate) => candidate.name === name)
   if (!found) throw new Error(`no entry for ${name}`)
@@ -48,20 +48,20 @@ describe('the registry builds', () => {
     expect(registry.entries.map((one) => one.name).sort()).toEqual(values.map((one) => one.name).sort())
   })
 
-  it('counts 134 names over 73 files: 104 components, 29 helpers and 1 hook (NavTree, NavTreeSection, the composer triggers and UnreadDot joined on 2 October; BlockHandle and EditorBlockHandle (RIC-18) on 2 October, moveBlock and blockDropCursor, the drop in the gutter, on 5 October, MembersPill and MembersDialog, moved from Peek (SHI-31), on 6 October, ShowMore on 7 October, and AppProvider on 8 October)', () => {
+  it('counts 140 names over 76 files: 107 components, 32 helpers and 1 hook (NavTree, NavTreeSection, the composer triggers and UnreadDot joined on 2 October; BlockHandle and EditorBlockHandle (RIC-18) on 2 October, moveBlock and blockDropCursor, the drop in the gutter, on 5 October, MembersPill and MembersDialog, moved from Peek (SHI-31), on 6 October, ShowMore on 7 October, AppProvider on 8 October, and KindIcon, thingKindOf and PastedImages with its two helpers, moved from Peek, on 8 October; CodeBlockColours, the coloured code block of the editor, on 9 October)', () => {
     // The reconciliation GATES.md §24 explains. If this changes, that changes.
-    // The ten `EDITOR_EXTENSIONS` count as components by their names; they are
+    // The `EDITOR_EXTENSIONS` count as components by their names; they are
     // editor extensions, documented on SelectionToolbar's, BlockNodes' and
     // ComposerTriggers' pages.
     const kinds = registry.entries.reduce<Record<string, number>>((all, one) => ({ ...all, [one.kind]: (all[one.kind] ?? 0) + 1 }), {})
-    expect(kinds).toEqual({ component: 104, helper: 29, hook: 1 })
-    expect(new Set(registry.entries.map((one) => one.sourceFile)).size).toBe(73)
+    expect(kinds).toEqual({ component: 107, helper: 32, hook: 1 })
+    expect(new Set(registry.entries.map((one) => one.sourceFile)).size).toBe(76)
   })
 
   it('gives every entry a purpose, from its own page or from the comment above it', () => {
     expect(registry.entries.filter((one) => one.purpose.trim() === '')).toEqual([])
-    expect(registry.entries.filter((one) => one.purposeFrom === 'page').length).toBe(69)
-    expect(registry.entries.filter((one) => one.purposeFrom === 'comment').length).toBe(65)
+    expect(registry.entries.filter((one) => one.purposeFrom === 'page').length).toBe(72)
+    expect(registry.entries.filter((one) => one.purposeFrom === 'comment').length).toBe(68)
   })
 
   it('takes a name with a page of its own from the page, and a name without one from the code', () => {

package/stories/Choosing.mdx

@@ -96,7 +96,10 @@ fork freely, owe nothing back, mention it on the package's ticket.
 | Where am I, and the way back up | **Breadcrumb** |
 | A link — in text, on a title, beside a note, or a whole box | **Link** — `text`, `quiet`, `underlined`, `plain`; `external` for a new tab |
 | A document or an image attached to something, posted or waiting to be sent | **AttachmentCard** — the file decides the shape; `pending` in a composer |
+| A picture pasted into an editor, attached rather than pasted | **PastedImages** — from `@estiva-app/ui/editor`; the app hands it its upload |
+| A code block in an editor, coloured by its language as you type | **CodeBlockColours** — from `@estiva-app/ui/editor`, in place of the starter kit's code block |
 | A person or a thing named inside a sentence | **InlineChip** — one line high, level with the words; `href` makes it a link |
+| What kind of thing a name stands for — a topic, a project, an issue, a file, a message | **KindIcon** — before the name in a row, or inside an **InlineChip**; `thingKindOf` turns an event kind into one |
 | Formatted text: headings, lists, a quote, code, a table, links | **RichText** — pass the parsed tree; `small` inside a card |
 | The key that does this too | **Kbd** — or the `shortcut` prop on **MenuItem**, **Tooltip** and **SearchInput** |
 

package/tailwind-preset.js

@@ -155,6 +155,14 @@ 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)',
+        'syntax-string': 'var(--syntax-string)',
+        'syntax-variable': 'var(--syntax-variable)',
+        'syntax-comment': 'var(--syntax-comment)',
+        'syntax-tag': 'var(--syntax-tag)',
         // text
         'text-primary':   'var(--text-primary)',
         'text-secondary': 'var(--text-secondary)',

package/tokens.css

@@ -101,6 +101,16 @@
   /* 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;
+  --syntax-constant: #0550ae;
+  --syntax-string: #0a3069;
+  --syntax-variable: #953800;
+  --syntax-comment: #59636e;
+  --syntax-tag: #116329;
 }
 
 /* ─── dark ─── Peek's dark theme (peek/src/index.css .dark, 2026-08-28). */
@@ -184,6 +194,16 @@
   /* 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;
+  --syntax-constant: #79c0ff;
+  --syntax-string: #a5d6ff;
+  --syntax-variable: #ffa657;
+  --syntax-comment: #9198a1;
+  --syntax-tag: #7ee787;
 }
 
 
@@ -271,6 +291,16 @@
   /* 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;
+  --syntax-constant: #79c0ff;
+  --syntax-string: #a5d6ff;
+  --syntax-variable: #ffa657;
+  --syntax-comment: #9198a1;
+  --syntax-tag: #7ee787;
 }
 
 /* ─── ship ─── Ship's palette (Katerina's ruling, 2026-08-28; ship/web/src/index.css). */
@@ -372,6 +402,16 @@
   /* 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;
+  --syntax-constant: #79c0ff;
+  --syntax-string: #a5d6ff;
+  --syntax-variable: #ffa657;
+  --syntax-comment: #9198a1;
+  --syntax-tag: #7ee787;
 }
 
 /* ─── leaf ─── Leaf's theme: Linear's light theme on these same tokens (Katerina,
@@ -465,4 +505,14 @@
   /* 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;
+  --syntax-constant: #0550ae;
+  --syntax-string: #0a3069;
+  --syntax-variable: #953800;
+  --syntax-comment: #59636e;
+  --syntax-tag: #116329;
 }