graham.systems / morkdeck

0

Generate web slides from Comark

0

morkdeck / packages / wc

1 folder 6 files

at main

graham.systems refactor(wc): redesign the presenter chrome end to end 2mo ago

refactor(wc): redesign the presenter chrome end to end The previous chrome was a single flex strip with `grid-template-columns: 1fr auto 1fr`, which sorted items by horizontal position rather than by meaning. Four unlabeled time displays (elapsed, countdown, target, clock) read as an undifferentiated row of MM:SS digits. The slide counter wrapped to two lines. The exit button clipped at the right edge. Icons were a mix of Unicode glyphs and Tabler SVGs. This rebuild lands the chrome in its final shape: Structure. Three free-floating overlay panels (Time, Navigate, Status) on the presenter's base canvas, sharing the visual language of the drawing toolbar (overlay background, hairline border, radius.md). The Overlay tonal tier reads as "interactive control surface"; the Surface tier is reserved for informative content (notes, stage, sidebar). The chrome strip wraps the panels with horizontal padding to redistribute the inter-panel space. Cell grid within each panel. Adjacent children get a `border-left: 1px solid highlight.med` (the audience toolbar's `.toolset > * + *` pattern). The slide counter is exempt; its text-only natural height makes its border shorter than the bordered buttons around it. Labeled time cells. ELAPSED in the Time panel and CLOCK in the Status panel render as two-line dashboard cells (small mono uppercase label + tabular-numeral value). Cell width is locked to `calc(5ch + 0.2em)` so the panel never reflows as digits tick. Square icon buttons. `align-self: stretch` ties button height to the panel content; `aspect-ratio: 1 / 1` locks width to height. Icons sit centered at 1.2em. Tabler icons everywhere. The remaining Unicode glyph buttons (prev/next arrows, play/pause, refresh) are now proper Tabler SVGs in the same outline-or-filled language as the existing overview/exit/draw-tools icons. Floating jumpback callout. Pulled out of the navigation cluster entirely and anchored to the bottom-left of the stage when a return slide is stored. Renders at stage scale in the link tier for prominence, so the affordance actually captures attention instead of getting lost as a tiny icon in a row of controls. Layout in the chrome stays stable regardless of whether a jumpback is set. Countdown timer removed. The elapsed timer covers what most presenters need; the countdown added permanent chrome noise without enough function to justify it. The actor state machine's countdown fields stay in place so it can be reintroduced later without re-plumbing the runtime, but the UI and click-to-edit target machinery are gone. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

2 months ago

refactor(wc): redesign the presenter chrome end to end The previous chrome was a single flex strip with `grid-template-columns: 1fr auto 1fr`, which sorted items by horizontal position rather than by meaning. Four unlabeled time displays (elapsed, countdown, target, clock) read as an undifferentiated row of MM:SS digits. The slide counter wrapped to two lines. The exit button clipped at the right edge. Icons were a mix of Unicode glyphs and Tabler SVGs. This rebuild lands the chrome in its final shape: Structure. Three free-floating overlay panels (Time, Navigate, Status) on the presenter's base canvas, sharing the visual language of the drawing toolbar (overlay background, hairline border, radius.md). The Overlay tonal tier reads as "interactive control surface"; the Surface tier is reserved for informative content (notes, stage, sidebar). The chrome strip wraps the panels with horizontal padding to redistribute the inter-panel space. Cell grid within each panel. Adjacent children get a `border-left: 1px solid highlight.med` (the audience toolbar's `.toolset > * + *` pattern). The slide counter is exempt; its text-only natural height makes its border shorter than the bordered buttons around it. Labeled time cells. ELAPSED in the Time panel and CLOCK in the Status panel render as two-line dashboard cells (small mono uppercase label + tabular-numeral value). Cell width is locked to `calc(5ch + 0.2em)` so the panel never reflows as digits tick. Square icon buttons. `align-self: stretch` ties button height to the panel content; `aspect-ratio: 1 / 1` locks width to height. Icons sit centered at 1.2em. Tabler icons everywhere. The remaining Unicode glyph buttons (prev/next arrows, play/pause, refresh) are now proper Tabler SVGs in the same outline-or-filled language as the existing overview/exit/draw-tools icons. Floating jumpback callout. Pulled out of the navigation cluster entirely and anchored to the bottom-left of the stage when a return slide is stored. Renders at stage scale in the link tier for prominence, so the affordance actually captures attention instead of getting lost as a tiny icon in a row of controls. Layout in the chrome stays stable regardless of whether a jumpback is set. Countdown timer removed. The elapsed timer covers what most presenters need; the countdown added permanent chrome noise without enough function to justify it. The actor state machine's countdown fields stay in place so it can be reintroduced later without re-plumbing the runtime, but the UI and click-to-edit target machinery are gone. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

2 months ago

refactor: use Deno workspaces Split the project into `cli`, `server`, `core`, `wc`, and `runtime`

11 months ago

feat(core): avatar + QR + restructured colophon byline Three additions to the title/outro colophon: 1. Optional avatar (`avatar: <url>` in frontmatter). On the outro, a large circular byline portrait sits at the top of the right-column stack. On the title, a smaller circular avatar pairs with the speaker name in a CSS grid: avatar in column 1, name in column 2, byline and context hang-indented under the name in column 2 so every text line shares the same left edge. Avatar center y-aligns with name center y (1px optical match). 2. Optional QR code on the outro (`qr: true` for current-URL, `qr: <url>` for a fixed canonical link). New <morkdeck-qr> Lit component renders client-side via @levischuck/tiny-qr + @levischuck/tiny-qr-svg — a dependency-free TypeScript encoder so the runtime bundle stays clean of Node-only modules. QR sits in the bottom-left of the outro grid below the "Thank you" wordmark with a "scan for these slides" label slotted in, left-aligned to match the rest of the slide's editorial flow. 3. Colophon markup unification. Dropped the .colophon-attribution wrapper. Avatar, speaker, byline, and context now live as siblings inside .colophon-author, with per-layout CSS arranging them: title uses a 2-column grid (avatar | text), outro uses a flex column (avatar above text). Same DOM, purposeful compositions. Density tier overrides for .colophon-speaker / .colophon-byline / .colophon-context margin: 0 with a 2-class selector (`.colophon .colophon-speaker`) — the slide-wide `[data-density="dense"] p` rule's margin-bottom was bleeding into the colophon text and shifting each line's optical position away from where align-self placed it. examples/showcase.md gains `avatar` + `qr: true` so the demo exercises both fields. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

2 months ago

feat(wc): tier 2 density auto-fit, pure JS prediction Density tiers now pick from a JS-side spec that mirrors the CSS density rules in slide-styles.eta. predictContentHeight() walks the slotted children and runs pretext against each text element using the tier's font-size, line-height, and margins derived from cqi tokens — no setAttribute, no per-tier reflow. One DOM read per fit pass, one DOM write at the end. The cq basis for descendants is the section's content-box (not its border-box), so snapshotSectionBox() subtracts the section's own padding before exposing cqInline/cqBlock. Without this, predicted font sizes ran ~10% larger than what the browser renders. A small FIT_SLACK (8%) compensates for pretext's wrap predictions running stricter than the browser's CSS `text-wrap: pretty`. Empirical matches Recursive at these sizes; tuneable per-deck if needed. Trade: the JS spec duplicates CSS rules. Every density-aware CSS rule needs a matching entry. The trade is paint-independent prediction that can also feed build-time precomputation later. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

2 months ago

refactor: use Deno workspaces Split the project into `cli`, `server`, `core`, `wc`, and `runtime`

11 months ago

feat(core): avatar + QR + restructured colophon byline Three additions to the title/outro colophon: 1. Optional avatar (`avatar: <url>` in frontmatter). On the outro, a large circular byline portrait sits at the top of the right-column stack. On the title, a smaller circular avatar pairs with the speaker name in a CSS grid: avatar in column 1, name in column 2, byline and context hang-indented under the name in column 2 so every text line shares the same left edge. Avatar center y-aligns with name center y (1px optical match). 2. Optional QR code on the outro (`qr: true` for current-URL, `qr: <url>` for a fixed canonical link). New <morkdeck-qr> Lit component renders client-side via @levischuck/tiny-qr + @levischuck/tiny-qr-svg — a dependency-free TypeScript encoder so the runtime bundle stays clean of Node-only modules. QR sits in the bottom-left of the outro grid below the "Thank you" wordmark with a "scan for these slides" label slotted in, left-aligned to match the rest of the slide's editorial flow. 3. Colophon markup unification. Dropped the .colophon-attribution wrapper. Avatar, speaker, byline, and context now live as siblings inside .colophon-author, with per-layout CSS arranging them: title uses a 2-column grid (avatar | text), outro uses a flex column (avatar above text). Same DOM, purposeful compositions. Density tier overrides for .colophon-speaker / .colophon-byline / .colophon-context margin: 0 with a 2-class selector (`.colophon .colophon-speaker`) — the slide-wide `[data-density="dense"] p` rule's margin-bottom was bleeding into the colophon text and shifting each line's optical position away from where align-self placed it. examples/showcase.md gains `avatar` + `qr: true` so the demo exercises both fields. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

2 months ago

README.md

@morkdeck/wc#

Lit-based Web Components that provide the core frontend functionality for morkdeck. Compiled and bundled with your presentation.