@lincyaw/design 1.0.0-rc.0 → 1.0.0-rc.2

package/README.md

@@ -2,11 +2,11 @@
 
 Presmium's design system, shared by its outputs (the web form and the slides) and its workbench (`presmium studio`): the tokens (`--pm-*` CSS custom properties, light and dark), the classes of the shared components (`pm-ui-*`), the fonts (IBM Plex Sans, IBM Plex Mono and Source Serif 4, SIL Open Font License 1.1, from Fontsource) and the line icons. It uses no framework.
 
-Part of [Presmium](https://github.com/Lincyaw/presmium), which turns lectures written in MyST Markdown into web pages, slides, Jupyter notebooks and narrated lectures.
+Part of [Presmium](https://github.com/Lincyaw/presmium), which compiles canonical lecture.json teaching documents into web pages, slides, Jupyter notebooks and narrated playback.
 
 ## Usage
 
-Plugin components do not import it: `@lincyaw/host` loads it into every page and draws the components in Vue (`PmButton`, `PmIcon` and the others); the workbench's panels draw the same classes in React (`@lincyaw/workbench`). A page outside both loads the styles itself:
+Plugin components do not import it: `@lincyaw/host` loads it into every page and draws the components in React (`PmButton`, `PmIcon` and the others); the workbench's panels draw the same classes in React (`@lincyaw/workbench`). A page outside both loads the styles itself:
 
 ```ts
 import '@lincyaw/design/design.css'
@@ -20,6 +20,9 @@ button.innerHTML = `${iconMarkup('play')} Run`
 | `@lincyaw/design/design.css` | the fonts, the tokens and the components' classes |
 | `@lincyaw/design/tokens.css`, `components.css`, `fonts.css` | each part alone |
 | `ICONS`, `iconMarkup(name, size?)` | the line icons, as shapes or as SVG markup |
+| `brandMarkup()` | the existing Presmium P as decorative SVG; load `design.css` for its token colors and size |
 | `COLORS`, `color(name)`, `colorToken(name)` | the names of the colour tokens, as `var(--pm-color-<name>)` or the property |
 
+`pm-ui-appbar` supplies the shared application chrome, `pm-ui-appbar__context` its muted context label, and `pm-ui-toolbar` the typography and minimum height of a tool group. `pm-ui-toolbar__group` and `pm-ui-toolbar__separator` group and separate public controls. Their host arranges the bars and supplies outer spacing; these classes do not replace toolbar keyboard behavior.
+
 The tokens and the components are described in `docs/architecture.md` (section 5.10) of the repository.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lincyaw/design",
-  "version": "1.0.0-rc.0",
+  "version": "1.0.0-rc.2",
   "description": "Presmium's design system, shared by its outputs and its workbench: the tokens, the classes of the shared components, the fonts and the line icons, bound to no framework",
   "license": "Apache-2.0",
   "repository": {
@@ -24,10 +24,12 @@
   },
   "exports": {
     ".": "./src/index.ts",
+    "./mascot": "./src/assets/mascot.ts",
     "./design.css": "./src/design.css",
     "./tokens.css": "./src/tokens.css",
     "./components.css": "./src/components.css",
-    "./fonts.css": "./src/fonts.css"
+    "./fonts.css": "./src/fonts.css",
+    "./block-preview.css": "./src/block-preview.css"
   },
   "files": [
     "src"
@@ -37,5 +39,8 @@
     "@fontsource/ibm-plex-sans": "5.3.0",
     "@fontsource/source-serif-4": "5.3.1",
     "lucide": "1.59.0"
+  },
+  "scripts": {
+    "mascot": "node tools/mascot/build.ts"
   }
 }

package/src/assets/brand.ts

@@ -0,0 +1,4 @@
+/** Presmium's existing P mark. Decorative beside the product name; geometry is independent of its host. */
+export function brandMarkup(): string {
+  return '<svg xmlns="http://www.w3.org/2000/svg" class="pm-ui-brand-mark" viewBox="0 0 32 32" aria-hidden="true" focusable="false"><rect width="32" height="32" rx="7" fill="var(--pm-color-accent)"/><path d="M11 8h7.5a6.5 6.5 0 0 1 0 13H15v4h-4zM15 12v5h3.5a2.5 2.5 0 0 0 0-5z" fill="var(--pm-color-bg)" fill-rule="evenodd"/></svg>'
+}

package/src/assets/manifest.json

@@ -0,0 +1,75 @@
+{
+  "version": 1,
+  "owner": "@lincyaw/design",
+  "ownerRole": "Registry maintainer; not the copyright owner of third-party assets.",
+  "scope": "Application UI assets only; project materials and generated content are excluded.",
+  "assets": [
+    {
+      "id": "presmium-brand-mark",
+      "kind": "brand-mark",
+      "owner": "Presmium repository contributors",
+      "license": "Apache-2.0",
+      "licenseEvidence": "../../LICENSE",
+      "source": "https://github.com/Lincyaw/presmium/blob/main/packages/dsh/src/client/brand.tsx",
+      "entry": "./brand.ts",
+      "usage": "Existing Presmium P geometry shared by product and authentication surfaces through brandMarkup(); dimensions and appearance follow public design tokens.",
+      "variants": "One inline SVG for light and dark; accent fill and background-colored P follow the host tokens."
+    },
+    {
+      "id": "presmium-mascot",
+      "kind": "mascot",
+      "owner": "Presmium repository contributors",
+      "license": "Apache-2.0",
+      "licenseEvidence": "../../LICENSE",
+      "source": "../../tools/mascot/poses.ts",
+      "entry": "./mascot.ts",
+      "usage": "The Presmium kitten (a black Bombay silhouette) showing what the assistant and long tasks are doing; key poses drawn by tools/mascot/draw.ts, played by mountMascot().",
+      "variants": "mascot/cat.png (black cat, light backgrounds) and mascot/cat-light.png (white cat, dark backgrounds); both 3 px per drawing unit, frames 4:3, sized by --pm-size-mascot and --pm-size-mascot-sm."
+    },
+    {
+      "id": "semantic-icons",
+      "kind": "icon-library",
+      "sourcePackage": "lucide",
+      "license": "ISC",
+      "source": "https://lucide.dev",
+      "entry": "../icons.ts",
+      "usage": "Semantic UI icons; consumers use the shared icon map rather than copying SVG paths."
+    },
+    {
+      "id": "ui-font",
+      "kind": "font",
+      "sourcePackage": "@fontsource/ibm-plex-sans",
+      "license": "OFL-1.1",
+      "source": "https://fontsource.org/fonts/ibm-plex-sans",
+      "entry": "../fonts.css",
+      "usage": "Application interface typography with the declared CJK system fallbacks."
+    },
+    {
+      "id": "reading-font",
+      "kind": "font",
+      "sourcePackage": "@fontsource/source-serif-4",
+      "license": "OFL-1.1",
+      "source": "https://fontsource.org/fonts/source-serif-4",
+      "entry": "../fonts.css",
+      "usage": "Document reading typography."
+    },
+    {
+      "id": "code-font",
+      "kind": "font",
+      "sourcePackage": "@fontsource/ibm-plex-mono",
+      "license": "OFL-1.1",
+      "source": "https://fontsource.org/fonts/ibm-plex-mono",
+      "entry": "../fonts.css",
+      "usage": "Authored teaching code and technical surfaces."
+    }
+  ],
+  "newAssetRequirements": [
+    "Register source, license, owner, usage, local entry and required light/dark variants before use.",
+    "For new product assets, record the author or provider, required attribution, permitted modifications and the license evidence; registry maintenance does not imply ownership or extra permissions.",
+    "For new product assets, register the original source file, exported variants, applicable resolution or cropping rules, Figma node URL and consuming code locations.",
+    "Do not invent missing authorization details for existing dependency assets; keep their declared license and distribution pipeline, and resolve unknown rights before adding new product files.",
+    "Keep UI images and marks under this directory; reference a named asset instead of embedding an ad hoc data URL in a business component.",
+    "Keep font binaries and their licenses with the declared dependency/build pipeline.",
+    "Do not put user uploads, generated teaching assets or credentials in this registry."
+  ]
+}

package/src/assets/mascot/images.d.ts

@@ -0,0 +1,5 @@
+// The sprite sheets are imported as modules; a bundler resolves each to the address of the image.
+declare module '*.png' {
+  const url: string
+  export default url
+}

package/src/assets/mascot/sheet.ts

@@ -0,0 +1,2 @@
+// Generated by tools/mascot/build.ts from the key poses in tools/mascot/poses.ts; do not edit.
+export const SHEET = {"frame":[216,162],"columns":13,"rows":22,"tickMs":80,"ground":144,"unit":3,"actions":{"idle":{"row":0,"timeline":[[0,3],[1,3],[2,3],[3,3],[4,3],[5,3],[0,2],[6,1],[7,1],[8,1],[1,3],[2,2],[9,1],[10,1],[2,2],[3,3],[4,3],[11,2],[12,10],[11,2],[5,3]]},"walk":{"row":1,"timeline":[[0,2,1.9],[1,2,1.9],[2,2,1.9],[3,2,1.9],[4,2,1.9],[5,2,1.9],[6,2,1.9],[7,2,1.9]]},"run":{"row":2,"timeline":[[0,1,3.2],[1,1,3.2],[2,1,3.2],[3,1,3.2],[4,1,3.2]]},"sit":{"row":3,"timeline":[[0,8],[1,5],[0,3],[2,1],[3,2],[4,3],[3,2],[2,1],[0,5],[5,1],[6,1],[7,1],[1,5],[0,4],[8,1],[9,1],[0,5]]},"curious":{"row":4,"timeline":[[0,4],[1,1],[2,10],[1,1],[0,3],[3,1],[4,10],[3,1],[0,5]]},"meow":{"row":5,"timeline":[[0,8],[1,1],[2,6],[1,2],[0,10]]},"groom":{"row":6,"timeline":[[0,3],[1,1],[2,2],[3,2],[2,2],[3,2],[2,2],[3,2],[4,2],[5,3],[4,2],[5,3],[2,2],[1,1],[0,4]]},"stretch":{"row":7,"timeline":[[0,6],[1,2],[2,2],[3,14],[2,2],[1,2],[0,3],[4,2],[5,12],[4,2],[0,8]]},"loaf":{"row":8,"timeline":[[0,6],[1,6],[0,6],[2,2],[0,2],[1,6],[3,3],[0,6]]},"knead":{"row":9,"timeline":[[0,3],[1,3]]},"sleep":{"row":10,"timeline":[[0,6],[1,6],[2,6],[3,6]]},"play":{"row":11,"timeline":[[0,8],[1,2],[2,2],[3,2],[4,6],[5,6]]},"pounce":{"row":12,"timeline":[[0,6],[1,2],[2,2],[1,2],[2,2],[1,1],[2,1],[0,2],[3,2,3],[4,3,6],[5,2,3],[0,3,0.8],[6,2],[7,8]]},"jump":{"row":13,"timeline":[[0,6],[1,2],[2,3],[3,2],[4,1],[5,4],[6,2],[2,3],[7,2],[0,6]]},"scared":{"row":14,"timeline":[[0,1],[1,1]]},"scratch":{"row":15,"timeline":[[0,6],[1,1],[2,1],[1,1],[2,1],[1,1],[2,1],[1,1],[2,1],[3,6],[0,6]]},"lounge":{"row":16,"timeline":[[0,8],[1,2],[2,10],[1,2],[0,8]]},"think":{"row":17,"timeline":[[0,4],[1,4],[2,4],[3,6],[4,4],[5,1],[6,3]]},"read":{"row":18,"timeline":[[0,4],[1,3],[2,3],[3,4],[4,1],[5,3],[6,3],[7,3],[8,3],[9,3]]},"write":{"row":19,"timeline":[[0,2],[1,2],[2,2],[3,3],[4,1],[5,2]]},"ask":{"row":20,"timeline":[[0,4],[1,2],[2,3],[1,2],[2,3],[1,2],[3,1],[4,4],[0,6]]},"done":{"row":21,"timeline":[[0,3],[1,2],[2,4],[1,2],[3,10],[0,6]]}}} as const

package/src/assets/mascot.ts

@@ -0,0 +1,65 @@
+// Presmium's mascot: a black Bombay kitten in silhouette. Each action is a few drawn key poses with a timeline of how
+// many ticks each one holds, like a hand-drawn sprite; the sheets and timelines are generated by
+// tools/mascot/build.ts. `mascotFrame` is a pure function of the time, so a film can seek it; `mountMascot` plays it
+// in an element on the page's clock. The black cat shows on light backgrounds and a white one on dark.
+import catSheet from './mascot/cat.png'
+import whiteCatSheet from './mascot/cat-light.png'
+import { SHEET } from './mascot/sheet.ts'
+
+export type MascotAction = keyof typeof SHEET.actions
+
+export const MASCOT_ACTIONS = Object.keys(SHEET.actions) as MascotAction[]
+
+// Imported as modules: a bundler gives each sheet its address (Vite a file URL, the Studio client a data URL).
+const SHEETS = { light: catSheet, dark: whiteCatSheet }
+
+/** The pose shown at `ms` into an action, its column and row on the sheet, and how far (in frame widths) the cat
+ * has moved forward since the action began, for a host that carries it across the page. */
+export function mascotFrame(action: MascotAction, ms: number): { column: number, row: number, travel: number } {
+  const { row, timeline } = SHEET.actions[action] as { row: number, timeline: readonly (readonly number[])[] }
+  const total = timeline.reduce((sum, [, ticks = 0]) => sum + ticks, 0)
+  const perLoop = timeline.reduce((sum, [, ticks = 0, move = 0]) => sum + ticks * move, 0)
+  const ticks = Math.max(0, Math.floor(ms / SHEET.tickMs))
+  let n = ticks % total, travel = Math.floor(ticks / total) * perLoop
+  for (const [column = 0, length = 0, move = 0] of timeline) {
+    if (n < length) return { column, row, travel: (travel + n * move) * SHEET.unit / SHEET.frame[0] }
+    n -= length; travel += length * move
+  }
+  return { column: 0, row, travel: 0 }
+}
+
+/** Shows one frame of the sheet in `el`; the `pm-ui-mascot` class sizes it and picks the sheet for the theme. */
+function show(el: HTMLElement, column: number, row: number) {
+  el.style.setProperty('--pm-mascot-x', `${column / (SHEET.columns - 1) * 100}%`)
+  el.style.setProperty('--pm-mascot-y', `${row / (SHEET.rows - 1) * 100}%`)
+}
+
+/**
+ * Plays the mascot in `el` until stopped; `set` changes the action, starting it from its beginning. Under reduced
+ * motion it shows the first pose of each action and stays still.
+ */
+export function mountMascot(el: HTMLElement, action: MascotAction = 'idle') {
+  el.classList.add('pm-ui-mascot')
+  el.setAttribute('aria-hidden', 'true')
+  el.style.setProperty('--pm-mascot-sheet', `url("${SHEETS.light}")`)
+  el.style.setProperty('--pm-mascot-sheet-dark', `url("${SHEETS.dark}")`)
+  el.style.setProperty('--pm-mascot-columns', String(SHEET.columns))
+  el.style.setProperty('--pm-mascot-rows', String(SHEET.rows))
+  const still = typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches
+  let current = action, start = performance.now(), frame = 0, shown = ''
+  const tick = (now: number) => {
+    const { column, row } = mascotFrame(current, still ? 0 : now - start)
+    const key = `${column}:${row}`
+    if (key !== shown) { show(el, column, row); shown = key }
+    if (!still) frame = requestAnimationFrame(tick)
+  }
+  tick(start)
+  return {
+    set(next: MascotAction) {
+      if (next === current) return
+      current = next; start = performance.now()
+      if (still) tick(start)
+    },
+    stop() { cancelAnimationFrame(frame) },
+  }
+}

package/src/block-preview.css

@@ -0,0 +1,20 @@
+/* A native editor's read-only content widget. Selection and saving stay in the parent editor. */
+.pm-ui-block-preview { min-width: 0; overflow: hidden; margin-block: var(--pm-space-3); border: var(--pm-size-hairline) solid var(--pm-color-line); border-radius: var(--pm-radius-control); background: var(--pm-color-surface); color: var(--pm-color-ink); }
+.pm-ui-block-preview__header { display: flex; align-items: center; justify-content: space-between; gap: var(--pm-space-2); padding: var(--pm-space-2) var(--pm-space-3); border-block-end: var(--pm-size-hairline) solid var(--pm-color-line); }
+.pm-ui-block-preview__label { display: inline-flex; align-items: center; gap: var(--pm-space-2); min-width: 0; color: var(--pm-color-muted); font-size: var(--pm-text-sm); }
+.pm-ui-block-preview__viewport, .pm-ui-block-preview__frame { display: block; width: 100%; height: var(--pm-block-content-height, var(--pm-block-preview-height)); min-height: var(--pm-block-preview-min-height); max-height: var(--pm-block-preview-max-height); border: 0; background: var(--pm-color-surface); }
+.pm-ui-block-preview__viewport { overflow: auto; }
+.pm-ui-block-preview__viewport:focus-visible { outline: var(--pm-space-px) solid var(--pm-color-accent); outline-offset: calc(var(--pm-space-px) * -1); }
+.pm-ui-block-preview__frame[inert] { pointer-events: none; }
+/* Scoped to the card so that an editor's own paragraph rules (BlockNote's `.bn-default-styles p`) do not reset it. */
+.pm-ui-block-preview .pm-ui-block-preview__pending { margin: 0; padding: var(--pm-space-3); font-size: var(--pm-text-sm); color: var(--pm-color-muted); }
+.pm-ui-block-preview[data-status="failed"] .pm-ui-block-preview__label { color: var(--pm-color-danger); }
+.pm-ui-block-preview[data-status="failed"] .pm-ui-block-preview__viewport { height: auto; min-height: 0; }
+
+.pm-ui-block-preview__actions { display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: var(--pm-space-1); }
+
+.pm-ui-block-preview__narration { display: grid; gap: var(--pm-space-2); padding: var(--pm-space-3); border-block-start: var(--pm-size-hairline) solid var(--pm-color-line); }
+.pm-ui-block-preview__narration-header { display: flex; align-items: center; justify-content: space-between; gap: var(--pm-space-2); }
+.pm-ui-block-preview__step-label { min-width: 0; color: var(--pm-color-ink); font-size: var(--pm-text-sm); overflow-wrap: anywhere; }
+.pm-ui-block-preview__narration-fields { display: grid; gap: var(--pm-space-2); min-width: 0; }
+.pm-ui-block-preview__caption { margin: 0; color: var(--pm-color-ink); white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--pm-text-sm); }

package/src/caption.css

@@ -0,0 +1,27 @@
+.pm-ui-caption {
+  box-sizing: border-box;
+  max-width: var(--pm-caption-max-width);
+  max-height: var(--pm-caption-max-height);
+  overflow: auto;
+  padding: var(--pm-space-2) var(--pm-space-4);
+  border: var(--pm-size-hairline) solid var(--pm-color-line);
+  border-radius: var(--pm-radius-control);
+  background: var(--pm-color-chrome);
+  color: var(--pm-color-ink);
+  font-family: var(--pm-font-sans);
+  font-size: var(--pm-text-lg);
+  line-height: var(--pm-leading-ui);
+  text-align: center;
+  overflow-wrap: anywhere;
+  white-space: pre-wrap;
+}
+.pm-ui-caption[data-overlay] {
+  max-height: min(var(--pm-caption-max-height), var(--pm-caption-overlay-max-height));
+}
+.pm-ui-caption .pm-ui-caption__line,
+.pm-ui-caption .pm-ui-caption__hint { margin: 0; }
+.pm-ui-caption .pm-ui-caption__line + .pm-ui-caption__line { margin-top: var(--pm-space-1); }
+.pm-ui-caption .pm-ui-caption__hint {
+  color: var(--pm-color-muted);
+  font-size: var(--pm-text-xs);
+}