@lincyaw/host 1.0.0-rc.12 → 1.0.0-rc.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lincyaw/host",
-  "version": "1.0.0-rc.12",
+  "version": "1.0.0-rc.14",
   "description": "Presmium's host interface for plugin components in every form: step state, services, interface text, and the design system (tokens, components, fonts)",
   "license": "Apache-2.0",
   "repository": {
@@ -16,6 +16,9 @@
     "design-system"
   ],
   "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
   "engines": {
     "node": ">=22.19"
   },
@@ -41,8 +44,8 @@
     "@radix-ui/react-tooltip": "^1.2.8",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "@lincyaw/design": "1.0.0-rc.12",
-    "@lincyaw/kernel": "1.0.0-rc.12"
+    "@lincyaw/design": "1.0.0-rc.14",
+    "@lincyaw/kernel": "1.0.0-rc.14"
   },
   "devDependencies": {
     "@types/react": "18.3.28",

package/src/contracts.ts

@@ -143,6 +143,16 @@ export interface TimedCaptions {
 }
 export const TIMED_CAPTIONS = defineService<TimedCaptions>('presmium.timedCaptions')
 
+/**
+ * A component that draws asynchronously (a scene loading its code) holds the page as not yet drawn until it has: the
+ * viewer tells an embedding page when the current slide is drawn (`notifyEmbedder`).
+ */
+export interface PageReadiness {
+  readonly pending: Store<number>
+  hold(): Unsubscribe
+}
+export const PAGE_READINESS = defineService<PageReadiness>('presmium.pageReadiness')
+
 export interface StepClockDriver {
   readonly elapsed: Store<number | undefined>
   readonly recording?: boolean

package/src/design/components.ts

@@ -2,10 +2,8 @@ import { createContext, createElement as h, forwardRef, useContext, useEffect, u
 import type { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from 'react'
 import * as Dialog from '@radix-ui/react-dialog'
 import * as Popover from '@radix-ui/react-popover'
-import * as Dropdown from '@radix-ui/react-dropdown-menu'
 import * as Tabs from '@radix-ui/react-tabs'
 import * as Tooltip from '@radix-ui/react-tooltip'
-import * as RadioGroup from '@radix-ui/react-radio-group'
 import { useLocale } from '../locale.ts'
 import { HOST_MESSAGES } from '../messages.ts'
 import { ICONS } from '@lincyaw/design'
@@ -13,11 +11,13 @@ import type { IconName } from '@lincyaw/design'
 import type { ToolbarPlacement } from '../contracts.ts'
 export type ButtonVariant = 'default' | 'primary' | 'accent' | 'ghost' | 'danger'
 export type ControlDensity = 'compact' | 'regular' | 'touch'
+/** `overlay`: one large round control laid over media, such as the Play that starts a lecture the browser would not autoplay. */
+export type IconButtonVariant = 'default' | 'overlay'
 export type Tone = 'neutral' | 'accent' | 'ok' | 'warn' | 'danger' | 'outline'
 export type PopoverPlacement = 'below-end' | 'below-start' | 'above-end' | 'above-start' | 'above' | 'below'
 export interface Choice { value: string, label: string, icon?: IconName, disabled?: boolean }
 export interface MenuItem { id: string, label: string, icon?: IconName, danger?: boolean, disabled?: boolean, shortcut?: string, checked?: boolean, separator?: boolean }
-const cls = (...values: (string | false | undefined)[]) => values.filter(Boolean).join(' ')
+export const cls = (...values: (string | false | undefined)[]) => values.filter(Boolean).join(' ')
 export function PmIcon({ name, size: _size, strokeWidth = 1.7, ...attrs }: { name: IconName, size?: number | string, strokeWidth?: number } & HTMLAttributes<SVGElement>) {
   return h('svg', { ...attrs, className: cls('pm-ui-icon', attrs.className), viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth, strokeLinecap: 'round', strokeLinejoin: 'round', 'aria-hidden': true, focusable: false }, ICONS[name]?.map(([tag, attributes], key) => h(tag, { ...attributes, key })))
 }
@@ -33,8 +33,8 @@ export function PmTooltip({ label, shortcut, children }: { label: string, shortc
     h(Tooltip.Root, {}, h(Tooltip.Trigger, { asChild: true }, children), h(Tooltip.Portal, {},
       h(Tooltip.Content, { className: 'pm-ui-tooltip pm-ui', side: 'top', sideOffset: 6, collisionPadding: 8 }, label, shortcut ? h('kbd', { className: 'pm-ui-shortcut' }, shortcut) : null))) })
 }
-export const PmIconButton = forwardRef<HTMLButtonElement, ButtonProps & { icon: IconName, label: string, hint?: string, shortcut?: string }>(function PmIconButton({ icon, label, hint, shortcut, small, density = small ? 'compact' : 'regular', loading, className, disabled, ...rest }, ref) {
-  const button = h('button', { ...rest, ref, type: 'button', 'data-density': density, 'aria-label': label, 'aria-busy': loading || undefined, disabled: disabled || loading || rest['aria-disabled'] === true || rest['aria-disabled'] === 'true', className: cls('pm-ui-icon-button', className) }, h(PmIcon, { name: loading ? 'loading' : icon, className: loading ? 'pm-ui-loading' : undefined }))
+export const PmIconButton = forwardRef<HTMLButtonElement, Omit<ButtonProps, 'variant'> & { variant?: IconButtonVariant, icon: IconName, label: string, hint?: string, shortcut?: string }>(function PmIconButton({ variant = 'default', icon, label, hint, shortcut, small, density = small ? 'compact' : 'regular', loading, className, disabled, ...rest }, ref) {
+  const button = h('button', { ...rest, ref, type: 'button', 'data-density': density, 'aria-label': label, 'aria-busy': loading || undefined, disabled: disabled || loading || rest['aria-disabled'] === true || rest['aria-disabled'] === 'true', className: cls('pm-ui-icon-button', variant !== 'default' && `pm-ui-icon-button--${variant}`, className) }, h(PmIcon, { name: loading ? 'loading' : icon, className: loading ? 'pm-ui-loading' : undefined }))
   return h(PmTooltip, { label: hint ?? label, shortcut, children: button })
 })
 export function PmBadge({ tone = 'neutral', pill, children, className, ...rest }: HTMLAttributes<HTMLSpanElement> & { tone?: Tone, pill?: boolean }) { return h('span', { ...rest, className: cls('pm-ui-badge', tone !== 'neutral' && `pm-ui-badge--${tone}`, pill && 'pm-ui-badge--pill', className) }, children) }
@@ -102,18 +102,8 @@ function DialogSurface({ open, label, closeLabel, name, children, actions, trigg
 }
 export function PmDialog(props: OverlayProps) { return h(DialogSurface, props) }
 export function PmDrawer(props: OverlayProps) { return h(DialogSurface, { ...props, drawer: true }) }
-const placement = (value: PopoverPlacement) => ({ side: value.startsWith('above') ? 'top' as const : 'bottom' as const, align: value.endsWith('start') ? 'start' as const : 'end' as const })
+export const placement = (value: PopoverPlacement) => ({ side: value.startsWith('above') ? 'top' as const : 'bottom' as const, align: value.endsWith('start') ? 'start' as const : 'end' as const })
 export function PmPopover({ open, label, name, children, trigger, placement: place = 'below-end', onOpenChange }: OverlayProps & { placement?: PopoverPlacement }) { return h(Popover.Root, { open, onOpenChange }, trigger ? h(Popover.Trigger, { asChild: true }, trigger) : null, h(Popover.Portal, {}, h(Popover.Content, { ...placement(place), className: cls('pm-ui-popover pm-ui-floating pm-ui', name), 'aria-label': label, onEscapeKeyDown: event => event.stopPropagation() }, children))) }
-export function PmMenu({ label, items, icon = 'more', placement: place = 'below-end', onSelect }: { label: string, items: MenuItem[], icon?: IconName, placement?: PopoverPlacement, onSelect?(id: string): void }) {
-  return h(Dropdown.Root, {},
-    h(Dropdown.Trigger, { asChild: true }, h(PmIconButton, { icon, label, small: true })),
-    h(Dropdown.Portal, {}, h(Dropdown.Content, { ...placement(place), className: 'pm-ui-menu pm-ui-floating pm-ui', ...{ 'data-density': 'compact' }, 'aria-label': label, onEscapeKeyDown: event => event.stopPropagation() },
-      items.map(item => h(Dropdown.Group, { key: item.id }, item.separator ? h(Dropdown.Separator, { className: 'pm-ui-menu__separator' }) : null,
-        item.checked === undefined ? h(Dropdown.Item, { disabled: item.disabled, textValue: item.label, className: cls('pm-ui-menu__item', item.danger && 'pm-ui-menu__item--danger'), onSelect: () => onSelect?.(item.id) },
-          item.icon ? h(PmIcon, { name: item.icon }) : null, item.label, item.shortcut ? h('kbd', { className: 'pm-ui-shortcut' }, item.shortcut) : null)
-        : h(Dropdown.CheckboxItem, { checked: item.checked, disabled: item.disabled, textValue: item.label, className: cls('pm-ui-menu__item', item.danger && 'pm-ui-menu__item--danger'), onSelect: () => onSelect?.(item.id) },
-          h(Dropdown.ItemIndicator, {}, h(PmIcon, { name: 'check' })), item.label))))))
-}
 export function PmTabs({ value, modelValue, tabs, label, children, onValueChange, iconOnly, density = 'compact' }: { value?: string, modelValue?: string, tabs: Choice[], label: string, children?: ReactNode, iconOnly?: boolean, density?: ControlDensity, onValueChange?(value: string): void }) {
   return h(Tabs.Root, { value: value ?? modelValue, onValueChange, activationMode: 'manual', className: 'pm-ui-tabs-root', ...{ 'data-density': density } },
     h(Tabs.List, { className: 'pm-ui-tabs', 'aria-label': label }, tabs.map(tab => {
@@ -122,10 +112,6 @@ export function PmTabs({ value, modelValue, tabs, label, children, onValueChange
     })), children)
 }
 export function PmTabPanel({ value, children, forceMount, hidden }: { value: string, children?: ReactNode, forceMount?: true, hidden?: boolean }) { return h(Tabs.Content, { value, forceMount, hidden, className: 'pm-ui-tab-panel' }, children) }
-export function PmSegmented({ value, modelValue, choices, items, label, onValueChange, density = 'compact', disabled }: { value?: string, modelValue?: string, choices?: Choice[], items?: Choice[], label: string, density?: ControlDensity, disabled?: boolean, onValueChange?(value: string): void }) {
-  return h(RadioGroup.Root, { className: 'pm-ui-segmented', 'aria-label': label, value: value ?? modelValue, onValueChange, orientation: 'horizontal', ...{ 'data-density': density }, disabled },
-    (choices ?? items ?? []).map(item => h(RadioGroup.Item, { key: item.value, value: item.value, className: 'pm-ui-segmented__option', disabled: item.disabled }, item.icon ? h(PmIcon, { name: item.icon }) : null, item.label)))
-}
 export function PmNotice({ tone = 'neutral', children, className, ...rest }: HTMLAttributes<HTMLDivElement> & { tone?: Tone }) { return h('div', { ...rest, className: cls('pm-ui-notice', tone !== 'neutral' && `pm-ui-notice--${tone}`, className), role: tone === 'danger' ? 'alert' : 'status' }, children) }
 export function PmEmpty({ title, icon, action, children }: { title?: string, icon?: IconName, action?: ReactNode, children?: ReactNode }) { return h('div', { className: 'pm-ui-empty' }, icon ? h(PmIcon, { name: icon }) : null, title ? h('p', { className: 'pm-ui-empty__title' }, title) : null, children, action) }
 /** Loading in the shape of the content: `document` headings and paragraphs, `list` rows, `preview` a slide-shaped area. */

package/src/design/menu.ts

@@ -0,0 +1,18 @@
+import { createElement as h } from 'react'
+import * as Dropdown from '@radix-ui/react-dropdown-menu'
+import type { IconName } from '@lincyaw/design'
+import { cls, placement, PmIcon, PmIconButton } from './components.ts'
+import type { MenuItem, PopoverPlacement } from './components.ts'
+
+// A module of its own, as `segmented.ts` is: a page whose code shows no menu loads none of Radix's menus.
+
+export function PmMenu({ label, items, icon = 'more', placement: place = 'below-end', onSelect }: { label: string, items: MenuItem[], icon?: IconName, placement?: PopoverPlacement, onSelect?(id: string): void }) {
+  return h(Dropdown.Root, {},
+    h(Dropdown.Trigger, { asChild: true }, h(PmIconButton, { icon, label, small: true })),
+    h(Dropdown.Portal, {}, h(Dropdown.Content, { ...placement(place), className: 'pm-ui-menu pm-ui-floating pm-ui', ...{ 'data-density': 'compact' }, 'aria-label': label, onEscapeKeyDown: event => event.stopPropagation() },
+      items.map(item => h(Dropdown.Group, { key: item.id }, item.separator ? h(Dropdown.Separator, { className: 'pm-ui-menu__separator' }) : null,
+        item.checked === undefined ? h(Dropdown.Item, { disabled: item.disabled, textValue: item.label, className: cls('pm-ui-menu__item', item.danger && 'pm-ui-menu__item--danger'), onSelect: () => onSelect?.(item.id) },
+          item.icon ? h(PmIcon, { name: item.icon }) : null, item.label, item.shortcut ? h('kbd', { className: 'pm-ui-shortcut' }, item.shortcut) : null)
+        : h(Dropdown.CheckboxItem, { checked: item.checked, disabled: item.disabled, textValue: item.label, className: cls('pm-ui-menu__item', item.danger && 'pm-ui-menu__item--danger'), onSelect: () => onSelect?.(item.id) },
+          h(Dropdown.ItemIndicator, {}, h(PmIcon, { name: 'check' })), item.label))))))
+}

package/src/design/segmented.ts

@@ -0,0 +1,11 @@
+import { createElement as h } from 'react'
+import * as RadioGroup from '@radix-ui/react-radio-group'
+import { PmIcon } from './components.ts'
+import type { Choice, ControlDensity } from './components.ts'
+
+// A module of its own, as `menu.ts` is: a page whose code shows no segmented control loads none of Radix's radio group.
+
+export function PmSegmented({ value, modelValue, choices, items, label, onValueChange, density = 'compact', disabled }: { value?: string, modelValue?: string, choices?: Choice[], items?: Choice[], label: string, density?: ControlDensity, disabled?: boolean, onValueChange?(value: string): void }) {
+  return h(RadioGroup.Root, { className: 'pm-ui-segmented', 'aria-label': label, value: value ?? modelValue, onValueChange, orientation: 'horizontal', ...{ 'data-density': density }, disabled },
+    (choices ?? items ?? []).map(item => h(RadioGroup.Item, { key: item.value, value: item.value, className: 'pm-ui-segmented__option', disabled: item.disabled }, item.icon ? h(PmIcon, { name: item.icon }) : null, item.label)))
+}

package/src/index.ts

@@ -18,10 +18,8 @@ export {
   PmField,
   PmIcon,
   PmIconButton,
-  PmMenu,
   PmNotice,
   PmPopover,
-  PmSegmented,
   PmTabs,
   PmTabPanel,
   PmTooltip,
@@ -29,7 +27,9 @@ export {
   provideToolbarPlacement,
   useToolbarPlacement,
 } from './design/components.ts'
-export type { ButtonVariant, Choice, ControlDensity, MenuItem, PopoverPlacement, Tone } from './design/components.ts'
+export type { ButtonVariant, Choice, ControlDensity, IconButtonVariant, MenuItem, PopoverPlacement, Tone } from './design/components.ts'
+export { PmMenu } from './design/menu.ts'
+export { PmSegmented } from './design/segmented.ts'
 export { PmColumns, PmStack, PmTabGroup } from './design/layout.ts'
 export { PmCaption, PmCaptionProvider } from './design/caption.ts'
 export type { CaptionProps } from './design/caption.ts'
@@ -73,8 +73,8 @@ export type { StepScope as StepScopeValue } from './step-scope.ts'
 export { createSharedStates } from './shared-state.ts'
 export type { SharedStates } from './shared-state.ts'
 export { PmToolbar } from './panels.ts'
-export { NAVIGATION, OPERATIONS, PLAYBACK_CONTROL, PRODUCTION_PLAYBACK, STATUS, STEP_CLOCK, SYNC_TRANSPORTS, TIMED_CAPTIONS, TOOLBAR } from './contracts.ts'
-export type { TimedCaptions } from './contracts.ts'
+export { NAVIGATION, OPERATIONS, PAGE_READINESS, PLAYBACK_CONTROL, PRODUCTION_PLAYBACK, STATUS, STEP_CLOCK, SYNC_TRANSPORTS, TIMED_CAPTIONS, TOOLBAR } from './contracts.ts'
+export type { PageReadiness, TimedCaptions } from './contracts.ts'
 export { joinWindows } from './windows.ts'
 export { setSiteBase, siteBase } from './site.ts'
 export type { WindowChannel } from './windows.ts'

package/src/registries.ts

@@ -2,7 +2,7 @@ import type { PresenterPanel, PresenterPanels, Unsubscribe } from '@lincyaw/kern
 import { currentLocale } from './locale.ts'
 import { HOST_MESSAGES } from './messages.ts'
 import StartReportPanel from './start-report-panel.ts'
-import type { StatusProvider, StatusRegistry, TimedCaptions, Toolbar, ToolbarItem } from './contracts.ts'
+import type { PageReadiness, StatusProvider, StatusRegistry, TimedCaptions, Toolbar, ToolbarItem } from './contracts.ts'
 import { createStore } from './store.ts'
 
 export function createTimedCaptions(): TimedCaptions {
@@ -14,6 +14,15 @@ export function createTimedCaptions(): TimedCaptions {
   } }
 }
 
+export function createPageReadiness(): PageReadiness {
+  const holders = new Set<symbol>(), pending = createStore(0)
+  return { pending, hold() {
+    const holder = Symbol()
+    holders.add(holder); pending.set(holders.size)
+    return () => { if (holders.delete(holder)) pending.set(holders.size) }
+  } }
+}
+
 interface Item {
   id: string
   order?: number

package/src/runtime.ts

@@ -3,7 +3,7 @@ import type { EnvironmentSpec, Logger, PluginDefinition, PluginReport, Presentat
 import { createStore } from './store.ts'
 import { connectActions } from './actions.ts'
 import { PmApprovals } from './approvals.ts'
-import { NAVIGATION, OPERATIONS, PLAYBACK_CONTROL, STATUS, STEP_CLOCK, SYNC_TRANSPORTS, TIMED_CAPTIONS, TOOLBAR } from './contracts.ts'
+import { NAVIGATION, OPERATIONS, PAGE_READINESS, PLAYBACK_CONTROL, STATUS, STEP_CLOCK, SYNC_TRANSPORTS, TIMED_CAPTIONS, TOOLBAR } from './contracts.ts'
 import type { Navigation, ServerClient, SyncTransports } from './contracts.ts'
 import { connectControl } from './control.ts'
 import { componentErrors } from './error-boundary.ts'
@@ -11,7 +11,7 @@ import { currentLocale } from './locale.ts'
 import { HOST_MESSAGES } from './messages.ts'
 import { createOperations } from './operations.ts'
 import { createPlaybackControl } from './playback-control.ts'
-import { createPresenterPanels, createStatusRegistry, createTimedCaptions, createToolbar } from './registries.ts'
+import { createPageReadiness, createPresenterPanels, createStatusRegistry, createTimedCaptions, createToolbar } from './registries.ts'
 import { provideServer } from './server.ts'
 import { createStepClock } from './step-clock.ts'
 
@@ -156,6 +156,7 @@ export function startHost(options: HostStart): Promise<StartReport> {
       kernel.provide(OPERATIONS, operations)
       kernel.provide(PLAYBACK_CONTROL, createPlaybackControl())
       kernel.provide(TIMED_CAPTIONS, createTimedCaptions())
+      kernel.provide(PAGE_READINESS, createPageReadiness())
       const stepClock = createStepClock(options.navigation)
       release(stepClock.stop)
       kernel.provide(STEP_CLOCK, stepClock.clock)