@mohou/panel 1.0.20

package/src/gallery/client.ts

@@ -0,0 +1,26 @@
+import type { GalleryApp } from './list.ts'
+
+/** Host calls the view may make. No route string lives here. */
+export interface PanelClient {
+  list(): Promise<readonly GalleryApp[]>
+  open(appId: string, title?: string): Promise<void>
+  deleteApp(appId: string): Promise<void>
+  reload?(appId: string): Promise<void>
+  listTrash?(): Promise<readonly GalleryApp[]>
+  undeleteApp?(appId: string): Promise<void>
+}
+
+/** A client failure the view can tell from an empty list. */
+export class PanelClientError extends Error {
+  readonly code: 'unreachable' | 'failed'
+
+  /**
+   * @param code - `unreachable` is not an empty gallery
+   * @param message - human text
+   */
+  constructor(code: 'unreachable' | 'failed', message: string) {
+    super(message)
+    this.name = 'PanelClientError'
+    this.code = code
+  }
+}

package/src/gallery/desk.tsx

@@ -0,0 +1,54 @@
+import { LayoutGrid } from 'lucide-react'
+import { useLayoutEffect, useRef, useState, type ReactNode } from 'react'
+
+export interface DeskChoice {
+  readonly id: string
+  readonly name: string
+  readonly icon?: 'library'
+  readonly mark?: string
+}
+
+/** Glass switch for the home slot. It does not write the stored id. */
+export function DeskBar(props: {
+  readonly label: string
+  readonly choices: readonly DeskChoice[]
+  readonly selected: string
+  readonly fit?: boolean
+  onSelect(id: string): void
+}): ReactNode {
+  const row = useRef<HTMLDivElement>(null)
+  const [pill, setPill] = useState<{ left: number; width: number } | undefined>(undefined)
+  useLayoutEffect(() => {
+    const root = row.current
+    if (root === null) return
+    const current = root.querySelector('[data-on="1"]')
+    if (!(current instanceof HTMLElement)) return
+    setPill({ left: current.offsetLeft, width: current.offsetWidth })
+  }, [props.selected, props.choices])
+  return (
+    <div ref={row} className={props.fit === true ? 'mma-desk mma-desk-fit' : 'mma-desk'} role="tablist" aria-label={props.label}>
+      {pill === undefined ? null : (
+        <span className="mma-desk-pill" style={{ width: pill.width, transform: `translateX(${pill.left}px)` }} />
+      )}
+      {props.choices.map(choice => (
+        <button
+          key={choice.id}
+          type="button"
+          role="tab"
+          className="mma-desk-item"
+          data-desk={choice.id}
+          data-on={choice.id === props.selected ? '1' : '0'}
+          aria-selected={choice.id === props.selected}
+          onClick={() => {
+            if (choice.id === props.selected) return
+            props.onSelect(choice.id)
+          }}
+        >
+          {choice.icon === 'library' ? <LayoutGrid size={14} strokeWidth={2} /> : null}
+          {choice.mark === undefined ? null : <span className="mma-desk-mark">{choice.mark}</span>}
+          <span className="mma-desk-name">{choice.name}</span>
+        </button>
+      ))}
+    </div>
+  )
+}

package/src/gallery/list.ts

@@ -0,0 +1,54 @@
+/** Card styles. Panel-local. Not a host field. */
+export const galleryCardStyles = ['glass', 'stamp', 'etch', 'hero', 'pulse', 'list'] as const
+
+export type GalleryCardStyle = (typeof galleryCardStyles)[number]
+
+export interface GalleryApp {
+  readonly id: string
+  readonly name: string
+  readonly description: string
+  readonly version: string
+  readonly acronym: string
+  readonly tags?: readonly string[]
+  readonly createdAt?: string
+  readonly updatedAt?: string
+  readonly activity?: { readonly openCount: number; readonly lastOpenedAt: string }
+  readonly kind?: 'workbench'
+}
+
+export type GalleryKind = 'unreachable' | 'failed' | 'empty' | 'none' | 'ready'
+
+/**
+ * Search the visible card fields. An empty query returns the list unchanged.
+ * @param apps - host list
+ * @param query - panel-local search
+ */
+export function filterGallery(apps: readonly GalleryApp[], query: string): GalleryApp[] {
+  const needle = query.trim().toLowerCase()
+  if (needle.length === 0) return [...apps]
+  return apps.filter(app =>
+    app.name.toLowerCase().includes(needle)
+    || app.description.toLowerCase().includes(needle)
+    || app.acronym.toLowerCase().includes(needle)
+    || app.version.toLowerCase().includes(needle))
+}
+
+/**
+ * Host unreachable is not an empty gallery. An empty ready list is the empty state.
+ * @param input - the list call outcome
+ */
+export function galleryKind(input: {
+  readonly reachable: boolean
+  readonly failed?: string
+  readonly apps: readonly GalleryApp[]
+  readonly query?: string
+}): GalleryKind {
+  if (!input.reachable) return 'unreachable'
+  if (input.failed !== undefined) return 'failed'
+  if (input.apps.length === 0) return input.query !== undefined && input.query.trim().length > 0 ? 'none' : 'empty'
+  return 'ready'
+}
+
+export function isGalleryCardStyle(value: string): value is GalleryCardStyle {
+  return (galleryCardStyles as readonly string[]).includes(value)
+}

package/src/gallery/sort.ts

@@ -0,0 +1,72 @@
+import type { GalleryApp } from './list.ts'
+
+/** Built-in orders for the workbench app list. */
+export const appSortings = {
+  createdTime: 'created-time',
+  updatedTime: 'updated-time',
+  heat: 'heat',
+} as const
+
+export type AppSorting = typeof appSortings[keyof typeof appSortings]
+
+export type SortDirection = 'asc' | 'desc'
+
+/** The heat fields this sort reads. An id that is absent counts as zero opens. */
+export interface SortHeat {
+  readonly lastOpenedAt: string
+  readonly openCount: number
+}
+
+/**
+ * Return a new array. Does not write the source.
+ * Heat uses `openCount`, then `lastOpenedAt`. A missing time sorts last in both directions.
+ * @param apps - the list to order
+ * @param sorting - created time, updated time, or heat
+ * @param direction - `asc` or `desc`
+ * @param heat - heat snapshot; ignored by the time sorts
+ */
+export function sortApps(
+  apps: readonly GalleryApp[],
+  sorting: AppSorting,
+  direction: SortDirection,
+  heat: Readonly<Record<string, SortHeat>>,
+): GalleryApp[] {
+  return apps.map((app, index) => ({ app, index })).sort((left, right) => {
+    const compared = sorting === appSortings.heat
+      ? compareHeat(left.app.id, right.app.id, heat, direction)
+      : compareTime(timeOf(left.app, sorting), timeOf(right.app, sorting), direction)
+    return compared === 0 ? left.index - right.index : compared
+  }).map(row => row.app)
+}
+
+function timeOf(app: GalleryApp, sorting: AppSorting): string | undefined {
+  return sorting === appSortings.createdTime ? app.createdAt : app.updatedAt
+}
+
+function compareHeat(
+  leftId: string,
+  rightId: string,
+  heat: Readonly<Record<string, SortHeat>>,
+  direction: SortDirection,
+): number {
+  const left = heat[leftId]
+  const right = heat[rightId]
+  const byCount = compareNumber(left?.openCount ?? 0, right?.openCount ?? 0, direction)
+  if (byCount !== 0) return byCount
+  return compareTime(left?.lastOpenedAt, right?.lastOpenedAt, direction)
+}
+
+function compareNumber(left: number, right: number, direction: SortDirection): number {
+  if (left === right) return 0
+  const order = left < right ? -1 : 1
+  return direction === 'asc' ? order : -order
+}
+
+function compareTime(left: string | undefined, right: string | undefined, direction: SortDirection): number {
+  if (left === undefined && right === undefined) return 0
+  if (left === undefined) return 1
+  if (right === undefined) return -1
+  if (left === right) return 0
+  const order = left < right ? -1 : 1
+  return direction === 'asc' ? order : -order
+}

package/src/gallery/state.ts

@@ -0,0 +1,229 @@
+import type { PanelClient, PanelClientError } from './client.ts'
+import {
+  type GalleryApp,
+  type GalleryCardStyle,
+  galleryKind,
+  type GalleryKind,
+  filterGallery,
+} from './list.ts'
+import { appSortings, sortApps } from './sort.ts'
+import {
+  closeTab,
+  dropAppTab,
+  deletePrompt,
+  initialTabs,
+  openAppTab,
+  type PanelTabs,
+  switchTab,
+  type DeletePrompt,
+} from './tabs.ts'
+
+export type PanelShell = 'standalone' | 'overlay'
+
+export interface GalleryState {
+  readonly shell: PanelShell
+  readonly cardStyle: GalleryCardStyle
+  readonly query: string
+  readonly reachable: boolean
+  readonly failed?: string
+  readonly apps: readonly GalleryApp[]
+  readonly tabs: PanelTabs
+  readonly deletePrompt: DeletePrompt
+  readonly deleteError?: string
+  readonly openError?: string
+  readonly pendingDeleteId?: string
+  readonly trash: readonly GalleryApp[]
+  readonly trashFailed: boolean
+  readonly frameError?: string
+}
+
+export type GalleryAction =
+  | { readonly type: 'unreachable' }
+  | { readonly type: 'list-failed'; readonly message: string }
+  | { readonly type: 'listed'; readonly apps: readonly GalleryApp[] }
+  | { readonly type: 'search'; readonly query: string }
+  | { readonly type: 'open'; readonly appId: string; readonly title?: string }
+  | { readonly type: 'open-failed'; readonly message?: string }
+  | { readonly type: 'drop-app'; readonly appId: string }
+  | { readonly type: 'switch'; readonly index: number }
+  | { readonly type: 'close'; readonly index: number }
+  | { readonly type: 'ask-delete'; readonly appId: string }
+  | { readonly type: 'cancel-delete' }
+  | { readonly type: 'delete-failed'; readonly message?: string }
+  | { readonly type: 'deleted'; readonly appId: string }
+  | { readonly type: 'card'; readonly cardStyle: GalleryCardStyle }
+  | { readonly type: 'trash'; readonly apps: readonly GalleryApp[] }
+  | { readonly type: 'trash-failed' }
+  | { readonly type: 'undeleted'; readonly appId: string }
+  | { readonly type: 'frame-error'; readonly message: string }
+
+/** First view state. The gallery tab is open. */
+export function galleryState(shell: PanelShell): GalleryState {
+  return {
+    shell,
+    cardStyle: 'glass',
+    query: '',
+    reachable: true,
+    apps: [],
+    tabs: initialTabs(),
+    deletePrompt: 'idle',
+    trash: [],
+    trashFailed: false,
+  }
+}
+
+/**
+ * Panel view transition. Search, tabs, and delete confirmation stay in the existing functions.
+ * @param state - current view
+ * @param action - one user or client result
+ */
+export function reduceGallery(state: GalleryState, action: GalleryAction): GalleryState {
+  switch (action.type) {
+    case 'unreachable':
+      return { ...state, reachable: false, apps: [] }
+    case 'list-failed':
+      return { ...state, reachable: true, failed: action.message, apps: [] }
+    case 'listed':
+      return {
+        shell: state.shell,
+        cardStyle: state.cardStyle,
+        query: state.query,
+        reachable: true,
+        apps: action.apps,
+        tabs: state.tabs,
+        deletePrompt: state.deletePrompt,
+        trash: state.trash,
+        trashFailed: state.trashFailed,
+        ...state.pendingDeleteId === undefined ? {} : { pendingDeleteId: state.pendingDeleteId },
+      }
+    case 'search':
+      return { ...state, query: action.query }
+    case 'open':
+      return { ...omitOpenError(state), tabs: openAppTab(state.tabs, action.appId, action.title).tabs }
+    case 'open-failed':
+      return { ...omitOpenError(state), ...action.message ? { openError: action.message } : { openError: '' } }
+    case 'drop-app':
+      return { ...state, tabs: dropAppTab(state.tabs, action.appId) }
+    case 'switch':
+      return { ...state, tabs: switchTab(state.tabs, action.index).tabs }
+    case 'close':
+      return { ...state, tabs: closeTab(state.tabs, action.index) }
+    case 'ask-delete':
+      return { ...omitDeleteError(state), pendingDeleteId: action.appId, deletePrompt: deletePrompt(state.deletePrompt, 'ask') }
+    case 'cancel-delete':
+      return { ...omitDeleteError(omitPending(state)), deletePrompt: deletePrompt(state.deletePrompt, 'cancel') }
+    case 'delete-failed':
+      return {
+        ...omitDeleteError(state),
+        deletePrompt: deletePrompt(state.deletePrompt, 'fail'),
+        ...action.message ? { deleteError: action.message } : {},
+      }
+    case 'deleted':
+      return {
+        ...omitPending(state),
+        apps: state.apps.filter(app => app.id !== action.appId),
+        tabs: closeApp(state.tabs, action.appId),
+        deletePrompt: 'idle',
+      }
+    case 'card':
+      return { ...state, cardStyle: action.cardStyle }
+    case 'trash':
+      return { ...state, trash: action.apps, trashFailed: false }
+    case 'trash-failed':
+      return { ...state, trashFailed: true }
+    case 'undeleted': {
+      const restored = state.trash.find(app => app.id === action.appId)
+      return {
+        ...state,
+        trash: state.trash.filter(app => app.id !== action.appId),
+        apps: restored === undefined ? state.apps : [...state.apps, restored],
+      }
+    }
+    case 'frame-error':
+      return { ...state, frameError: action.message }
+    default:
+      return action satisfies never
+  }
+}
+
+/** Cards the gallery should show. Search does not change the host list. */
+export function visibleApps(state: GalleryState): GalleryApp[] {
+  return filterGallery(state.apps, state.query)
+}
+
+/** Gallery chrome state. Unreachable is not empty. */
+export function viewKind(state: GalleryState): GalleryKind {
+  return galleryKind({
+    reachable: state.reachable,
+    ...state.failed === undefined ? {} : { failed: state.failed },
+    apps: visibleApps(state),
+    ...state.query.trim().length === 0 ? {} : { query: state.query },
+  })
+}
+
+/** Load the gallery. A thrown unreachable error is not an empty list. */
+export async function loadGallery(
+  client: PanelClient,
+  dispatch: (action: GalleryAction) => void,
+): Promise<void> {
+  try {
+    const apps = await client.list()
+    dispatch({ type: 'listed', apps: await orderByHeat(client, apps) })
+  } catch (error) {
+    if (isUnreachable(error)) {
+      dispatch({ type: 'unreachable' })
+      return
+    }
+    dispatch({ type: 'list-failed', message: error instanceof Error ? error.message : '' })
+  }
+}
+
+/** Open count is on each app. An app with no activity counts as zero. */
+function orderByHeat(_client: PanelClient, apps: readonly GalleryApp[]): GalleryApp[] {
+  const heat: Record<string, { lastOpenedAt: string; openCount: number }> = {}
+  for (const app of apps) {
+    const row = app.activity
+    if (row !== undefined) heat[app.id] = row
+  }
+  return sortApps([...apps], appSortings.heat, 'desc', heat)
+}
+
+function omitOpenError(state: GalleryState): Omit<GalleryState, 'openError'> {
+  const { openError: gone, ...rest } = state
+  void gone
+  return rest
+}
+
+function omitDeleteError(state: GalleryState): Omit<GalleryState, 'deleteError'> {
+  const { deleteError: gone, ...rest } = state
+  void gone
+  return rest
+}
+
+function omitPending(state: GalleryState): Omit<GalleryState, 'pendingDeleteId'> {
+  const { pendingDeleteId: _pending, ...rest } = state
+  void _pending
+  return rest
+}
+
+/** Load trash when the client can list it. */
+export async function loadTrash(
+  client: PanelClient,
+  dispatch: (action: GalleryAction) => void,
+): Promise<void> {
+  if (client.listTrash === undefined) return
+  try {
+    dispatch({ type: 'trash', apps: await client.listTrash() })
+  } catch {
+    dispatch({ type: 'trash-failed' })
+  }
+}
+
+function closeApp(tabs: PanelTabs, appId: string): PanelTabs {
+  const index = tabs.tabs.findIndex(tab => tab.kind === 'app' && tab.appId === appId)
+  return index < 0 ? tabs : closeTab(tabs, index)
+}
+
+function isUnreachable(error: unknown): error is PanelClientError {
+  return typeof error === 'object' && error !== null && 'code' in error && error.code === 'unreachable'
+}

package/src/gallery/tabs.ts

@@ -0,0 +1,85 @@
+export interface AppTab {
+  readonly kind: 'app'
+  readonly appId: string
+  readonly title?: string
+}
+
+export interface GalleryTab {
+  readonly kind: 'gallery'
+}
+
+export type PanelTab = GalleryTab | AppTab
+
+export interface PanelTabs {
+  readonly tabs: readonly PanelTab[]
+  readonly active: number
+}
+
+export interface TabChange {
+  readonly tabs: PanelTabs
+  /** Tab switch never reloads the document. Opening an already open tab does not either. */
+  readonly reload: false
+}
+
+/** The gallery tab is always present and is not closable. */
+export function initialTabs(): PanelTabs {
+  return { tabs: [{ kind: 'gallery' }], active: 0 }
+}
+
+/**
+ * Open or focus an app tab. Does not reload a document that is already open.
+ * @param state - current tabs
+ * @param appId - app to show
+ * @param title - optional tab title
+ */
+export function openAppTab(state: PanelTabs, appId: string, title?: string): TabChange {
+  const existing = state.tabs.findIndex(tab => tab.kind === 'app' && tab.appId === appId)
+  if (existing >= 0) {
+    const next = title === undefined
+      ? state.tabs
+      : state.tabs.map((tab, index) => index === existing && tab.kind === 'app' ? { ...tab, title } : tab)
+    return { tabs: { tabs: next, active: existing }, reload: false }
+  }
+  const tab: AppTab = title === undefined ? { kind: 'app', appId } : { kind: 'app', appId, title }
+  return { tabs: { tabs: [...state.tabs, tab], active: state.tabs.length }, reload: false }
+}
+
+/**
+ * Switch tabs. This never reloads the document.
+ * @param state - current tabs
+ * @param index - tab index
+ */
+export function switchTab(state: PanelTabs, index: number): TabChange {
+  if (index < 0 || index >= state.tabs.length) return { tabs: state, reload: false }
+  return { tabs: { tabs: state.tabs, active: index }, reload: false }
+}
+
+/** Remove one app tab after a failed open. The gallery tab stays. */
+export function dropAppTab(state: PanelTabs, appId: string): PanelTabs {
+  const index = state.tabs.findIndex(tab => tab.kind === 'app' && tab.appId === appId)
+  if (index < 0) return state
+  return closeTab(state, index)
+}
+
+/**
+ * Close an app tab. The gallery tab stays.
+ * @param state - current tabs
+ * @param index - tab index
+ */
+export function closeTab(state: PanelTabs, index: number): PanelTabs {
+  const tab = state.tabs[index]
+  if (tab === undefined || tab.kind === 'gallery') return state
+  const tabs = state.tabs.filter((_, item) => item !== index)
+  const active = Math.min(state.active, tabs.length - 1)
+  return { tabs, active }
+}
+
+export type DeletePrompt = 'idle' | 'confirm' | 'failed'
+
+/** Delete asks before the operation. Cancel returns to idle. A failure stays visible. */
+export function deletePrompt(current: DeletePrompt, action: 'ask' | 'cancel' | 'fail'): DeletePrompt {
+  if (action === 'ask') return 'confirm'
+  if (action === 'cancel') return 'idle'
+  if (current === 'confirm') return 'failed'
+  return current
+}