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

package/src/design/components.ts

@@ -1,327 +1,143 @@
-import type { InjectionKey, PropType, VNode } from 'vue'
-import { defineComponent, cloneVNode, h, inject, provide, ref, useId } from 'vue'
-import { DialogClose, DialogContent, DialogPortal, DialogRoot, DialogTitle, DialogTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuPortal, DropdownMenuRoot, DropdownMenuTrigger, PopoverAnchor, PopoverContent, PopoverPortal, PopoverRoot, TabsContent, TabsList, TabsRoot, TabsTrigger, ToggleGroupItem, ToggleGroupRoot } from 'reka-ui'
-import type { ToolbarPlace } from '../types.ts'
+import { createContext, createElement as h, forwardRef, useContext, useEffect, useId, useRef } from 'react'
+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'
 import type { IconName } from '@lincyaw/design'
-
-const PLACE: InjectionKey<ToolbarPlace> = Symbol('presmium.toolbarPlace')
-const OVERLAY_Z: InjectionKey<string> = Symbol('presmium.overlayZ')
-
-function overlayStyle(kind: 'popover' | 'dialog') {
-  const parent = inject(OVERLAY_Z, undefined)
-  const zIndex = parent ? `calc(${parent} + 1)` : `var(--pm-z-${kind})`
-  provide(OVERLAY_Z, zIndex)
-  return { zIndex }
-}
-
-
-/** @experimental */
-export function useToolbarPlace(): ToolbarPlace {
-  return inject(PLACE, 'bar')
-}
-
-/** @experimental */
-export function provideToolbarPlace(place: ToolbarPlace): void {
-  provide(PLACE, place)
-}
-
-export const PmIcon = defineComponent({
-  name: 'PmIcon',
-  props: {
-    name: { type: String as PropType<IconName>, required: true },
-    size: { type: [Number, String], default: 20 },
-    strokeWidth: { type: Number, default: 1.7 },
-  },
-  setup(props) {
-    return () => h('svg', {
-      'class': 'pm-ui-icon',
-      'width': props.size,
-      'height': props.size,
-      'viewBox': '0 0 24 24',
-      'fill': 'none',
-      'stroke': 'currentColor',
-      'stroke-width': props.strokeWidth,
-      'stroke-linecap': 'round',
-      'stroke-linejoin': 'round',
-      'aria-hidden': 'true',
-      'focusable': 'false',
-    }, (ICONS[props.name] ?? []).map(([tag, attrs]) => h(tag, attrs)))
-  },
-})
-
+import type { ToolbarPlacement } from '../contracts.ts'
 export type ButtonVariant = 'default' | 'primary' | 'accent' | 'ghost' | 'danger'
-
-export const PmButton = defineComponent({
-  name: 'PmButton',
-  props: {
-    variant: { type: String as PropType<ButtonVariant>, default: 'default' },
-    small: Boolean,
-    icon: String as PropType<IconName>,
-    type: { type: String as PropType<'button' | 'submit' | 'reset'>, default: 'button' },
-  },
-  setup(props, { slots }) {
-    return () => h('button', {
-      type: props.type,
-      class: ['pm-ui-button', props.variant !== 'default' && `pm-ui-button--${props.variant}`, props.small && 'pm-ui-button--small'],
-    }, [props.icon ? h(PmIcon, { name: props.icon, size: props.small ? 14 : 16, strokeWidth: 2 }) : null, slots.default?.()])
-  },
-})
-
-export const PmIconButton = defineComponent({
-  name: 'PmIconButton',
-  props: {
-    icon: { type: String as PropType<IconName>, required: true },
-    label: { type: String, required: true },
-    small: Boolean,
-  },
-  setup(props) {
-    return () => h('button', {
-      'type': 'button',
-      'class': ['pm-ui-icon-button', props.small && 'pm-ui-icon-button--small'],
-      'aria-label': props.label,
-      'title': props.label,
-    }, [h(PmIcon, { name: props.icon, size: props.small ? 16 : 20 })])
-  },
-})
-
+export type ControlDensity = 'compact' | 'regular' | 'touch'
 export type Tone = 'neutral' | 'accent' | 'ok' | 'warn' | 'danger' | 'outline'
-
-export const PmBadge = defineComponent({
-  name: 'PmBadge',
-  props: {
-    tone: { type: String as PropType<Tone>, default: 'neutral' },
-    pill: Boolean,
-  },
-  setup(props, { slots }) {
-    return () => h('span', { class: ['pm-ui-badge', props.tone !== 'neutral' && `pm-ui-badge--${props.tone}`, props.pill && 'pm-ui-badge--pill'] }, slots.default?.())
-  },
-})
-
-export const PmCard = defineComponent({
-  name: 'PmCard',
-  props: {
-    variant: { type: String as PropType<'default' | 'interactive' | 'dashed'>, default: 'default' },
-    tag: { type: String, default: 'div' },
-  },
-  setup(props, { slots }) {
-    return () => h(props.tag, { class: ['pm-ui-card', props.variant !== 'default' && `pm-ui-card--${props.variant}`] }, slots.default?.())
-  },
-})
-
-export const PmField = defineComponent({
-  name: 'PmField',
-  props: {
-    label: { type: String, required: true },
-    inline: Boolean,
-  },
-  setup(props, { slots }) {
-    return () => h('label', { class: ['pm-ui-field', props.inline && 'pm-ui-field--inline'] }, props.inline
-      ? [slots.default?.(), h('span', { class: 'pm-ui-field__label' }, props.label)]
-      : [h('span', { class: 'pm-ui-field__label' }, props.label), slots.default?.()])
-  },
-})
-
-export interface Choice {
-  value: string
-  label: string
+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 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 })))
 }
-
-export const PmSegmented = defineComponent({
-  name: 'PmSegmented',
-  props: {
-    modelValue: { type: String, required: true },
-    options: { type: Array as PropType<Choice[]>, required: true },
-    label: { type: String, required: true },
-  },
-  emits: ['update:modelValue'],
-  setup(props, { emit }) {
-    return () => h(ToggleGroupRoot, {
-      'type': 'single', 'class': 'pm-ui-segmented', 'aria-label': props.label, 'modelValue': props.modelValue,
-      'onUpdate:modelValue': value => { if (typeof value === 'string' && value) emit('update:modelValue', value) },
-    }, () => props.options.map(option => h(ToggleGroupItem, {
-      key: option.value, value: option.value, class: 'pm-ui-segmented__option',
-    }, () => option.label)))
-  },
-})
-
-export const PmTabs = defineComponent({
-  name: 'PmTabs',
-  props: {
-    modelValue: { type: String, required: true },
-    tabs: { type: Array as PropType<Choice[]>, required: true },
-    label: { type: String, required: true },
-  },
-  emits: ['update:modelValue'],
-  setup(props, { emit, slots }) {
-    return () => h(TabsRoot, {
-      'class': 'pm-ui-tabset', 'modelValue': props.modelValue,
-      'onUpdate:modelValue': value => emit('update:modelValue', String(value)),
-    }, () => [
-      h(TabsList, { class: 'pm-ui-tabs', 'aria-label': props.label }, () => props.tabs.map(tab =>
-        h(TabsTrigger, { key: tab.value, value: tab.value, class: 'pm-ui-tab' }, () => tab.label))),
-      slots.default ? h(TabsContent, { key: props.modelValue, value: props.modelValue, class: 'pm-ui-tabpanel', tabindex: 0 }, () => slots.default?.({ value: props.modelValue })) : null,
-    ])
-  },
+type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & { variant?: ButtonVariant, small?: boolean, icon?: IconName, density?: ControlDensity, loading?: boolean }
+export const PmButton = forwardRef<HTMLButtonElement, ButtonProps>(function PmButton({ variant = 'default', small, density = small ? 'compact' : 'regular', loading, icon, className, children, disabled, ...rest }, ref) {
+  return h('button', { ...rest, ref, type: rest.type ?? 'button', 'data-density': density, 'aria-busy': loading || undefined, disabled: disabled || loading || rest['aria-disabled'] === true || rest['aria-disabled'] === 'true', className: cls('pm-ui-button', variant !== 'default' && `pm-ui-button--${variant}`, className) },
+    h('span', { className: cls('pm-ui-button__content', !icon && loading !== undefined && 'pm-ui-button__content--loading-text') },
+      icon || loading !== undefined ? h('span', { className: 'pm-ui-button__icon', 'aria-hidden': true }, loading ? h(PmIcon, { name: 'loading', className: 'pm-ui-loading' }) : icon ? h(PmIcon, { name: icon }) : null) : null,
+      children))
 })
-
-export type PopoverPlacement = 'below-end' | 'below-start' | 'above-end' | 'above-start'
-
-function placement(value: PopoverPlacement) {
-  return { side: value.startsWith('above') ? 'top' as const : 'bottom' as const, align: value.endsWith('start') ? 'start' as const : 'end' as const, sideOffset: 6, collisionPadding: 16 }
+export function PmTooltip({ label, shortcut, children }: { label: string, shortcut?: string, children: ReactNode }) {
+  return h(Tooltip.Provider, { delayDuration: 300, skipDelayDuration: 0, children:
+    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 PmPopover = defineComponent({
-  name: 'PmPopover',
-  props: {
-    open: Boolean,
-    label: { type: String, required: true },
-    placement: { type: String as PropType<PopoverPlacement>, default: 'below-end' },
-    name: String,
-  },
-  emits: ['update:open'],
-  setup(props, { emit, slots }) {
-    const style = overlayStyle('popover')
-    const anchor = ref<HTMLElement>()
-    const id = useId()
-    let outside = false
-    return () => h(PopoverRoot, { 'open': props.open, 'onUpdate:open': value => emit('update:open', value) }, () => [
-      h(PopoverAnchor, { asChild: true }, () => h('span', { ref: anchor, class: ['pm-ui-anchor', props.name] }, slots.trigger?.().map(node => cloneVNode(node, {
-        'aria-haspopup': 'dialog', 'aria-expanded': props.open, 'aria-controls': props.open ? id : undefined,
-      })))),
-      h(PopoverPortal, {}, () => h(PopoverContent, {
-        ...placement(props.placement), 'id': id, style,
-        onOpenAutoFocus: () => { outside = false },
-        onInteractOutside: () => { outside = true },
-        onCloseAutoFocus: (event: Event) => { event.preventDefault(); if (!outside) anchor.value?.querySelector<HTMLElement>('button, [href]')?.focus() },
-        'class': ['pm-ui-popover', 'pm-ui-floating', 'pm-ui', props.name && `${props.name}__panel`], 'aria-label': props.label,
-      }, slots.default)),
-    ])
-  },
+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 }))
+  return h(PmTooltip, { label: hint ?? label, shortcut, children: button })
 })
-
-const dialogProps = {
-  open: Boolean,
-  label: { type: String, required: true },
-  closeLabel: { type: String, required: true },
-  name: String,
-} as const
-
-function dialogComponent(drawer: boolean) {
-  return defineComponent({
-    name: drawer ? 'PmDrawer' : 'PmDialog',
-    props: dialogProps,
-    emits: ['update:open'],
-    setup(props, { emit, slots }) {
-      const style = overlayStyle(drawer ? 'popover' : 'dialog')
-      const kind = drawer ? 'pm-ui-drawer' : 'pm-ui-dialog'
-      let opener: HTMLElement | undefined
-      return () => h(DialogRoot, { 'open': props.open, 'onUpdate:open': value => emit('update:open', value) }, () => [
-        slots.trigger ? h(DialogTrigger, { asChild: true }, slots.trigger) : null,
-        h(DialogPortal, {}, () => h(DialogContent, {
-          'class': [kind, 'pm-ui', props.name && `${props.name}__panel`], 'style': style, 'aria-describedby': undefined,
-          onOpenAutoFocus: () => { opener = document.activeElement instanceof HTMLElement ? document.activeElement : undefined },
-          onCloseAutoFocus: (event: Event) => {
-            if (slots.trigger || !opener?.isConnected) return
-            event.preventDefault()
-            opener.focus()
-          },
-        }, () => [
-          h('div', { class: `${kind}__header` }, [
-            h(DialogTitle, { as: 'h2', class: `${kind}__title` }, () => props.label),
-            slots.actions?.(),
-            h(DialogClose, { asChild: true }, () => h(PmIconButton, { icon: 'close', label: props.closeLabel, small: true })),
-          ]),
-          h('div', { class: `${kind}__body` }, slots.default?.()),
-        ])),
-      ])
-    },
-  })
-}
-
-export const PmDrawer = dialogComponent(true)
-export const PmDialog = dialogComponent(false)
-
-export interface MenuItem {
-  id: string
+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) }
+export function PmCard({ variant = 'default', className, children, ...rest }: HTMLAttributes<HTMLDivElement> & { variant?: string }) { return h('div', { ...rest, className: cls('pm-ui-card', variant !== 'default' && `pm-ui-card--${variant}`, className) }, children) }
+export function PmField({ label, inline, group, children }: { label: string, inline?: boolean, group?: boolean, children?: ReactNode }) { return h(group ? 'div' : 'label', { className: cls('pm-ui-field', inline && 'pm-ui-field--inline'), ...(group ? { role: 'group', 'aria-label': label } : {}) }, h('span', { className: 'pm-ui-field__label' }, label), children) }
+interface OverlayProps {
+  open: boolean
   label: string
-  icon?: IconName
-  danger?: boolean
-  disabled?: boolean
+  closeLabel?: string
+  name?: string
+  children?: ReactNode
+  trigger?: ReactNode
+  actions?: ReactNode
+  description?: string
+  footer?: ReactNode
+  busy?: boolean
+  onOpenChange?(open: boolean): void
+  onClose?(): void
+  onOpenAutoFocus?(event: Event): void
+  onCloseAutoFocus?(event: Event): void
 }
-
-export const PmMenu = defineComponent({
-  name: 'PmMenu',
-  props: {
-    label: { type: String, required: true },
-    items: { type: Array as PropType<MenuItem[]>, required: true },
-    icon: { type: String as PropType<IconName>, default: 'more' },
-    placement: { type: String as PropType<PopoverPlacement>, default: 'below-end' },
-  },
-  emits: ['select'],
-  setup(props, { emit }) {
-    const style = overlayStyle('popover')
-    return () => h(DropdownMenuRoot, {}, () => [
-      h(DropdownMenuTrigger, { asChild: true }, () => h(PmIconButton, { icon: props.icon, label: props.label, small: true })),
-      h(DropdownMenuPortal, {}, () => h(DropdownMenuContent, { ...placement(props.placement), style, class: ['pm-ui-menu', 'pm-ui-floating', 'pm-ui'], 'aria-label': props.label }, () => props.items.map(item =>
-        h(DropdownMenuItem, {
-          key: item.id, disabled: item.disabled, textValue: item.label,
-          class: ['pm-ui-menu__item', item.danger && 'pm-ui-menu__item--danger'],
-          onSelect: () => emit('select', item.id),
-        }, () => [item.icon ? h(PmIcon, { name: item.icon, size: 16 }) : null, item.label])))),
-    ])
-  },
-})
-
-export const PmEmpty = defineComponent({
-  name: 'PmEmpty',
-  props: {
-    title: String,
-    icon: String as PropType<IconName>,
-  },
-  setup(props, { slots }) {
-    return () => h('div', { class: 'pm-ui-empty' }, [
-      props.icon ? h(PmIcon, { name: props.icon, size: 28 }) : null,
-      props.title ? h('p', { class: 'pm-ui-empty__title' }, props.title) : null,
-      slots.default ? h('p', { style: { margin: 0 } }, slots.default()) : null,
-      slots.action?.(),
-    ])
-  },
-})
-
-export const PmNotice = defineComponent({
-  name: 'PmNotice',
-  props: {
-    tone: { type: String as PropType<'neutral' | 'accent' | 'ok' | 'warn' | 'danger'>, default: 'neutral' },
-  },
-  setup(props, { slots }) {
-    return (): VNode => h('p', { class: ['pm-ui-notice', props.tone !== 'neutral' && `pm-ui-notice--${props.tone}`], role: props.tone === 'danger' ? 'alert' : 'status' }, slots.default?.())
-  },
-})
-
-export const PmToolbarEntry = defineComponent({
-  name: 'PmToolbarEntry',
-  props: {
-    name: { type: String, required: true },
-    label: { type: String, required: true },
-    closeLabel: { type: String, required: true },
-    icon: String as PropType<IconName>,
-    open: Boolean,
-  },
-  emits: ['update:open'],
-  setup(props, { emit, slots }) {
-    const place = useToolbarPlace()
-    const update = (open: boolean) => emit('update:open', open)
-    const toggleAttrs = () => ({
-      'class': `${props.name}__toggle`,
-      'aria-expanded': props.open ? 'true' : 'false',
-      'onClick': () => update(!props.open),
-    })
-    return () => {
-      return h(PmPopover, { 'open': props.open, 'label': props.label, 'name': props.name, 'placement': place === 'status' ? 'above-start' : 'below-end', 'onUpdate:open': update }, {
-        trigger: () => h(PmButton, { variant: 'ghost', small: true, icon: props.icon, ...toggleAttrs() }, () => props.label),
-        default: () => slots.default?.(),
-      })
+function DialogSurface({ open, label, closeLabel, name, children, actions, trigger, description, footer, busy, onOpenChange, onClose, onOpenAutoFocus, onCloseAutoFocus, drawer = false }: OverlayProps & { drawer?: boolean }) {
+  const kind = drawer ? 'pm-ui-drawer' : 'pm-ui-dialog'
+  const locale = useLocale()
+  const id = useId()
+  const focusTarget = useRef<HTMLElement | null>(typeof document === 'undefined' ? null : document.activeElement as HTMLElement)
+  useEffect(() => {
+    if (open) return
+    const remember = (event: FocusEvent) => {
+      if (event.target instanceof HTMLElement && event.target !== document.body && event.target.closest('[data-pm-dialog]')?.getAttribute('data-pm-dialog') !== id) focusTarget.current = event.target
     }
-  },
-})
+    document.addEventListener('focusin', remember, true)
+    return () => document.removeEventListener('focusin', remember, true)
+  }, [id, open])
+  return h(Dialog.Root, { open, modal: true, onOpenChange: next => { if (!next && busy) return; onOpenChange?.(next); if (!next) onClose?.() } },
+    trigger ? h(Dialog.Trigger, { asChild: true }, trigger) : null,
+    h(Dialog.Portal, {}, h(Dialog.Overlay, { className: 'pm-ui-dialog-overlay' }),
+      h(Dialog.Content, {
+        className: cls(kind, 'pm-ui', name && `${name}__panel`), ...{ 'data-density': 'regular', 'data-pm-dialog': id }, 'aria-busy': busy || undefined,
+        ...description ? {} : { 'aria-describedby': undefined },
+        onInteractOutside: event => event.preventDefault(),
+        onEscapeKeyDown: event => { event.stopPropagation(); if (busy) event.preventDefault() },
+        onOpenAutoFocus: event => {
+          onOpenAutoFocus?.(event)
+          if (event.defaultPrevented || !(event.target instanceof HTMLElement)) return
+          const panel = event.target
+          if (panel.contains(document.activeElement)) { event.preventDefault(); return }
+          const target = [...panel.querySelectorAll<HTMLElement>(`.${kind}__body :is(button, input, textarea, select, a[href], [tabindex]), .pm-ui-dialog__footer :is(button, input, textarea, select, a[href], [tabindex])`)].find(element => element.tabIndex >= 0 && !element.closest('[inert], [hidden]') && !element.matches(':disabled, [aria-disabled="true"]') && element.getClientRects().length && getComputedStyle(element).visibility === 'visible')
+          if (target) { event.preventDefault(); target.focus() }
+        },
+        onCloseAutoFocus: event => {
+          onCloseAutoFocus?.(event)
+          if (event.defaultPrevented) return
+          event.preventDefault()
+          const available = (element: HTMLElement | null): element is HTMLElement => Boolean(element?.isConnected && element !== document.body && !element.closest(`[data-pm-dialog="${id}"], [inert], [hidden]`) && !element.matches(':disabled, [aria-disabled="true"]') && element.getClientRects().length && getComputedStyle(element).visibility === 'visible')
+          const target = available(focusTarget.current) ? focusTarget.current : [...document.querySelectorAll<HTMLElement>('[role="toolbar"] button, main button')].find(available)
+          target?.focus()
+        },
+      }, h('div', { className: `${kind}__header` },
+        h(Dialog.Title, { className: `${kind}__title` }, label), actions,
+        h(Dialog.Close, { asChild: true }, h(PmIconButton, { icon: 'close', label: closeLabel ?? HOST_MESSAGES[locale].close, small: true, disabled: busy }))),
+      description ? h(Dialog.Description, { className: 'pm-ui-dialog__description' }, description) : null,
+      h('div', { className: `${kind}__body` }, children),
+      footer ? h('div', { className: 'pm-ui-dialog__footer' }, footer) : null)))
+}
+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 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 => {
+      const trigger = h(Tabs.Trigger, { key: tab.value, value: tab.value, className: 'pm-ui-tab', disabled: tab.disabled, 'aria-label': tab.label, ...{ 'data-icon-only': iconOnly || undefined } }, tab.icon ? h(PmIcon, { name: tab.icon }) : null, iconOnly ? null : tab.label)
+      return iconOnly ? h(PmTooltip, { key: tab.value, label: tab.label, children: trigger }) : trigger
+    })), 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. */
+export function PmSkeleton({ label, shape = 'document' }: { label: string, shape?: 'document' | 'list' | 'preview' }) {
+  const bar = (kind?: string, key?: number) => h('span', { key, className: 'pm-ui-skeleton__bar', 'data-kind': kind })
+  const paragraph = (lines: number, key: number) => h('span', { key, className: 'pm-ui-skeleton__group' }, Array.from({ length: lines }, (_, index) => bar(undefined, index)))
+  const bars = shape === 'list' ? Array.from({ length: 5 }, (_, index) => bar('row', index))
+    : shape === 'preview' ? [bar('media', 0), paragraph(2, 1)]
+      : [bar('heading', 0), paragraph(4, 1), paragraph(3, 2), bar('heading', 3), paragraph(4, 4)]
+  return h('div', { className: 'pm-ui-skeleton', 'data-shape': shape, role: 'status', 'aria-busy': 'true' }, h('span', { className: 'pm-ui-sr-only' }, label), h('span', { className: 'pm-ui-skeleton', 'aria-hidden': 'true' }, bars))
+}
+export const ToolbarPlacementContext = createContext<ToolbarPlacement>('bar')
+export const provideToolbarPlacement = ToolbarPlacementContext.Provider
+export function useToolbarPlacement() { return useContext(ToolbarPlacementContext) }
+export function PmToolbarEntry({ title, label = title ?? '', name, icon = 'more', open = false, onOpenChange, children }: { title?: string, name?: string, label?: string, closeLabel?: string, icon?: IconName, open?: boolean, onOpenChange?(open: boolean): void, children?: ReactNode }) { const where = useToolbarPlacement(); return h(PmPopover, { open, onOpenChange, name, label, placement: where === 'status' ? 'above-start' : 'below-end', trigger: h(PmIconButton, { icon, label, small: true, className: name && `${name}__toggle`, 'aria-expanded': open }) }, children) }

package/src/design/design.css

@@ -1 +1,9 @@
 @import '@lincyaw/design/design.css';
+
+.pm-toolbar { display: inline-flex; align-items: center; gap: var(--pm-space-2); }
+.pm-toolbar[data-placement='status'] { gap: var(--pm-space-4); }
+.pm-presenter-panels { position: fixed; right: var(--pm-space-2); bottom: var(--pm-overlay-bar, var(--pm-space-12)); z-index: var(--pm-z-overlay-view); max-width: var(--pm-aside-width); max-height: 50vh; overflow: auto; padding: var(--pm-space-1) var(--pm-space-3); border: var(--pm-size-hairline) solid var(--pm-color-line); border-radius: var(--pm-radius-small); background: var(--pm-color-surface); color: var(--pm-color-ink); font-size: var(--pm-text-sm); box-shadow: var(--pm-shadow-float); }
+.pm-presenter-panels--docked { position: static; max-width: none; max-height: none; margin-top: var(--pm-space-4); box-shadow: none; }
+.pm-presenter-panels summary { cursor: pointer; font-weight: 600; }
+.pm-presenter-panels__badge { display: inline-block; padding: 0 var(--pm-space-1); border-radius: var(--pm-radius-pill); background: var(--pm-color-danger); color: var(--pm-color-surface); text-align: center; }
+.pm-presenter-panels h3 { margin: var(--pm-space-2) 0 var(--pm-space-1); font-size: var(--pm-text-md); }

package/src/design/layout.ts

@@ -0,0 +1,28 @@
+import { Children, createElement as h, useState } from 'react'
+import type { CSSProperties, ReactNode } from 'react'
+import { PmTabs, PmTabPanel } from './components.ts'
+
+export interface ContentLayoutProps { title?: string, children?: ReactNode }
+export interface ColumnsLayoutProps extends ContentLayoutProps { columnWidths?: number[] }
+const heading = (title?: string) => title ? h('h3', { className: 'pm-layout__title' }, title) : null
+
+/** Authored column proportions are content geometry; narrow surfaces stack the same children. */
+export function PmColumns({ title, columnWidths, children }: ColumnsLayoutProps) {
+  const items = Children.toArray(children)
+  const columns = items.map((_, index) => `minmax(0, ${Number.isFinite(columnWidths?.[index]) && columnWidths![index]! > 0 ? columnWidths![index] : 1}fr)`).join(' ')
+  const style: CSSProperties & { '--pm-layout-columns': string } = { '--pm-layout-columns': columns || 'minmax(0, 1fr)' }
+  return h('div', { className: 'pm-layout-columns', style }, heading(title), items.map((item, index) => h('div', { className: 'pm-layout__item', key: index }, item)))
+}
+export function PmStack({ title, children }: ContentLayoutProps) {
+  return h('div', { className: 'pm-layout-stack' }, heading(title), children)
+}
+export interface TabLayoutEntry { id: string, title: string, content: ReactNode, visible?: boolean }
+export function PmTabGroup({ title, label, tabs, staticView = false }: { title?: string, label: string, tabs: TabLayoutEntry[], staticView?: boolean }) {
+  const [chosen, setChosen] = useState<string>()
+  if (staticView) return h('div', { className: 'pm-layout-stack', 'data-layout-static': 'tabs' }, heading(title), tabs.map(tab => h('section', { key: tab.id, className: 'pm-layout-stack' }, h('h4', { className: 'pm-layout__title' }, tab.title), tab.content)))
+  const visible = tabs.filter(tab => tab.visible !== false)
+  const active = visible.find(tab => tab.id === chosen)?.id ?? visible[0]?.id ?? ''
+  return h('div', { className: 'pm-layout-stack' }, heading(title), h(PmTabs, {
+    label: title || label, value: active, tabs: visible.map(tab => ({ value: tab.id, label: tab.title })), onValueChange: setChosen,
+  }, tabs.map(tab => h(PmTabPanel, { key: tab.id, value: tab.id, forceMount: true, hidden: tab.id !== active || tab.visible === false }, tab.content))))
+}

package/src/error-boundary.ts

@@ -0,0 +1,18 @@
+import { Component, createElement as h } from 'react'
+import type { ReactNode, ErrorInfo } from 'react'
+import { errorMessage } from '@lincyaw/kernel'
+import { createStore } from './store.ts'
+import { HOST_MESSAGES } from './messages.ts'
+import { currentLocale } from './locale.ts'
+export interface ComponentError { component: string, message: string }
+export const componentErrorRevision = createStore(0)
+const errors = new Map<object, ComponentError>()
+export function componentErrors(): readonly ComponentError[] { return [...errors.values()] }
+export class PmBoundary extends Component<{ name?: string, resetKey?: unknown, children?: ReactNode }, { error?: ComponentError }> {
+  state: { error?: ComponentError } = {}
+  static getDerivedStateFromError(error: unknown) { return { error: { component: 'component', message: errorMessage(error) } } }
+  componentDidCatch(error: unknown, _info: ErrorInfo) { const problem = { component: this.props.name ?? 'component', message: errorMessage(error) }; errors.set(this, problem); componentErrorRevision.set(n => n + 1); this.setState({ error: problem }); console.error(`[presmium] ${problem.component} failed`, error) }
+  componentDidUpdate(before: Readonly<{ name?: string, resetKey?: unknown }>) { if (before.resetKey !== this.props.resetKey && this.state.error) { errors.delete(this); componentErrorRevision.set(n => n + 1); this.setState({ error: undefined }) } }
+  componentWillUnmount() { if (errors.delete(this)) componentErrorRevision.set(n => n + 1) }
+  render() { const error = this.state.error; return error ? h('div', { className: 'pm-boundary-error', role: 'alert', 'data-pm-error': error.component }, HOST_MESSAGES[currentLocale()].componentError(error.component, error.message)) : this.props.children }
+}

package/src/host-key.ts

@@ -0,0 +1,4 @@
+import { createContext } from 'react'
+import type { HostAdapter } from './contracts.ts'
+export const HOST = createContext<HostAdapter | undefined>(undefined)
+export const installed: { adapter?: HostAdapter } = {}