@vobs/ui 0.3.0 → 1.1.0

package/src/utils.ts

@@ -0,0 +1,221 @@
+import { effect } from '@vobs/reactivity'
+import {
+  addEventListener,
+  createFragment,
+  createText,
+  insertBefore,
+  insertDynamic,
+  setAttribute,
+  setProperty,
+  setTextContent,
+  type VobsNode
+} from '@vobs/vobs'
+import type { VuiCommonProps } from './types'
+
+type VuiProps = VuiCommonProps | object
+
+export function classNames(...values: readonly (string | false | null | undefined)[]): string {
+  return values
+    .flatMap(value => typeof value === 'string' ? value.trim().split(/\s+/u) : [])
+    .filter(Boolean)
+    .join(' ')
+}
+
+export function readProp<T>(props: object, name: string, fallback: T): T {
+  const value = Reflect.get(props, name)
+  return (value === undefined ? fallback : value) as T
+}
+
+export function hasProp(props: object, name: string): boolean {
+  return name in props
+}
+
+export function bindClass(
+  root: Element,
+  props: VuiProps,
+  ...baseClasses: readonly (string | undefined)[]
+): void {
+  effect(() => {
+    setAttribute(root, 'class', classNames(
+      ...baseClasses,
+      readString(props, 'class'),
+      readString(props, 'className')
+    ))
+  })
+}
+
+export function bindClassList(
+  root: Element,
+  props: VuiProps,
+  readBaseClasses: () => readonly (string | undefined)[]
+): void {
+  effect(() => {
+    setAttribute(root, 'class', classNames(
+      ...readBaseClasses(),
+      readString(props, 'class'),
+      readString(props, 'className')
+    ))
+  })
+}
+
+export function bindCommonAttributes(
+  root: Element,
+  props: VuiProps,
+  skip: readonly string[] = [],
+  options: { readonly includeDataAria?: boolean } = {}
+): void {
+  const ignored = new Set(skip)
+  ignored.add('class')
+  ignored.add('className')
+  ignored.add('children')
+  ignored.add('style')
+
+  effect(() => {
+    const next = new Map<string, string>()
+    for (const name of Object.keys(props)) {
+      if (ignored.has(name) || name.startsWith('on')) continue
+      if (!isCommonAttribute(name)) continue
+      if (options.includeDataAria === false && (name.startsWith('aria-') || name.startsWith('data-'))) continue
+
+      const value = Reflect.get(props, name)
+      const normalized = normalizeAttribute(name, value)
+      if (normalized !== undefined) next.set(normalized.name, normalized.value)
+    }
+
+    const managed = getManagedAttributes(root)
+    for (const name of managed) {
+      if (!next.has(name)) removeAttribute(root, name)
+    }
+    for (const [name, value] of next) setAttribute(root, name, value)
+    setManagedAttributes(root, next.keys())
+  })
+}
+
+export function bindUserStyle(root: Element, props: VuiProps): void {
+  bindStyle(root, props, () => '')
+}
+
+export function bindStyle(root: Element, props: VuiProps, createStyle: () => string): void {
+  effect(() => {
+    const userStyle = readString(props, 'style')
+    const internalStyle = createStyle()
+    const style = [internalStyle, userStyle].filter(Boolean).join('; ')
+    if (style) setAttribute(root, 'style', style)
+    else removeAttribute(root, 'style')
+  })
+}
+
+export function bindTextContent(
+  node: Text,
+  read: () => unknown
+): void {
+  effect(() => {
+    setTextContent(node, String(read() ?? ''))
+  })
+}
+
+export function bindPropertyValue(
+  node: Element,
+  name: string,
+  read: () => unknown
+): void {
+  effect(() => setProperty(node, name, read()))
+}
+
+export function bindAttributeValue(
+  node: Element,
+  name: string,
+  read: () => unknown
+): void {
+  effect(() => {
+    const value = read()
+    if (value === undefined || value === null || value === false) removeAttribute(node, name)
+    else setAttribute(node, name, String(value))
+  })
+}
+
+export function listen(
+  root: Element,
+  event: string,
+  props: object,
+  propName: string,
+  disabled?: () => boolean
+): void {
+  addEventListener(root, event, (reason: Event) => {
+    if (disabled?.()) return
+    const handler = Reflect.get(props, propName)
+    if (typeof handler === 'function') handler(reason)
+  })
+}
+
+export function mountSlot(
+  parent: Node,
+  props: object,
+  propName: string
+): void {
+  insertDynamic(parent, null, () => resolveSlot(Reflect.get(props, propName)))
+}
+
+export function resolveSlot(value: unknown): VobsNode | null {
+  const resolved = typeof value === 'function' ? value() : value
+  if (resolved === undefined || resolved === null || resolved === false) return null
+  if (typeof resolved === 'string' || typeof resolved === 'number') return createText(String(resolved))
+  if (Array.isArray(resolved)) {
+    const children = resolved
+    return createFragment((parent, anchor) => {
+      for (const child of children) {
+        const node = resolveSlot(child)
+        if (node) insertBefore(parent, node, anchor)
+      }
+    })
+  }
+  return resolved as VobsNode
+}
+
+export function setOptionalAttribute(node: Element, name: string, value: unknown): void {
+  if (value === undefined || value === null || value === false || value === '') {
+    removeAttribute(node, name)
+    return
+  }
+  setAttribute(node, name, String(value))
+}
+
+export function setOptionalProperty(node: Element, name: string, value: unknown): void {
+  if (value === undefined || value === null) return
+  setProperty(node, name, value)
+}
+
+function readString(props: object, name: string): string | undefined {
+  const value = Reflect.get(props, name)
+  return typeof value === 'string' ? value : undefined
+}
+
+function isCommonAttribute(name: string): boolean {
+  return name === 'id'
+    || name === 'title'
+    || name === 'role'
+    || name === 'tabIndex'
+    || name.startsWith('aria-')
+    || name.startsWith('data-')
+}
+
+function normalizeAttribute(name: string, value: unknown): { name: string; value: string } | undefined {
+  if (value === undefined || value === null) return undefined
+  if (value === false && !name.startsWith('aria-') && !name.startsWith('data-')) return undefined
+  return { name: name === 'tabIndex' ? 'tabindex' : name, value: String(value) }
+}
+
+const managedAttributes = new WeakMap<object, Set<string>>()
+
+function getManagedAttributes(node: Element): Set<string> {
+  return managedAttributes.get(node) ?? new Set<string>()
+}
+
+function setManagedAttributes(node: Element, names: IterableIterator<string>): void {
+  managedAttributes.set(node, new Set(names))
+}
+
+function removeAttribute(node: Element, name: string): void {
+  const candidate = node as Element & { removeAttribute?: (attribute: string) => void }
+  candidate.removeAttribute?.(name)
+}

package/src/workbench-titlebar.ts

@@ -0,0 +1,137 @@
+import {
+  addEventListener,
+  createElement,
+  createFragment,
+  createText,
+  insertBefore,
+  insertDynamic,
+  setAttribute,
+  type VobsNode
+} from '@vobs/vobs'
+import {
+  bindClassList,
+  bindCommonAttributes,
+  bindTextContent,
+  bindUserStyle,
+  hasProp,
+  mountSlot,
+  readProp,
+  setOptionalAttribute
+} from './utils'
+import type { VuiChildren, VuiCommonProps } from './types'
+
+export interface WorkbenchTitlebarProps extends VuiCommonProps {
+  readonly mode?: string
+  readonly modeIcon?: VuiChildren
+  readonly project?: string
+  readonly projectIcon?: VuiChildren
+  readonly projectChevron?: VuiChildren
+  readonly actions?: VuiChildren
+  readonly windowControls?: boolean
+  readonly onWindowClose?: (event: MouseEvent) => void
+  readonly onWindowMinimize?: (event: MouseEvent) => void
+  readonly onWindowMaximize?: (event: MouseEvent) => void
+  readonly onProjectClick?: (event: MouseEvent) => void
+}
+
+export function WorkbenchTitlebar(props: WorkbenchTitlebarProps = {}): VobsNode {
+  const root = createElement('header')
+  const left = createElement('div')
+  const right = createElement('div')
+  bindClassList(root, props, () => ['vui-wbtitlebar'])
+  bindCommonAttributes(root, props, [
+    'mode',
+    'modeIcon',
+    'project',
+    'projectIcon',
+    'projectChevron',
+    'actions',
+    'windowControls',
+    'onWindowClose',
+    'onWindowMinimize',
+    'onWindowMaximize',
+    'onProjectClick'
+  ])
+  bindUserStyle(root, props)
+  setAttribute(left, 'class', 'vui-wbtitlebar__left')
+  setAttribute(right, 'class', 'vui-wbtitlebar__right')
+  insertDynamic(left, null, () => createTitlebarLeft(props))
+  if (hasProp(props, 'actions')) mountSlot(right, props, 'actions')
+  if (hasProp(props, 'children')) mountSlot(right, props, 'children')
+  insertBefore(root, left, null)
+  insertBefore(root, right, null)
+  return root
+}
+
+function createTitlebarLeft(props: WorkbenchTitlebarProps): VobsNode {
+  return createFragment((parent, anchor) => {
+    if (readProp(props, 'windowControls', true)) {
+      const lights = createElement('div')
+      setAttribute(lights, 'class', 'vui-wbtitlebar__lights')
+      insertBefore(lights, createWindowLight('close', props, 'onWindowClose'), null)
+      insertBefore(lights, createWindowLight('min', props, 'onWindowMinimize'), null)
+      insertBefore(lights, createWindowLight('max', props, 'onWindowMaximize'), null)
+      insertBefore(parent, lights, anchor)
+    }
+
+    if (hasProp(props, 'mode')) {
+      const mode = createElement('span')
+      setAttribute(mode, 'class', 'vui-wbtitlebar__mode-chip')
+      if (hasProp(props, 'modeIcon')) {
+        const icon = createElement('span')
+        setAttribute(icon, 'class', 'vui-wbtitlebar__mode-icon')
+        mountSlot(icon, props, 'modeIcon')
+        insertBefore(mode, icon, null)
+      }
+      const text = createText('')
+      bindTextContent(text, () => readProp(props, 'mode', ''))
+      insertBefore(mode, text, null)
+      insertBefore(parent, mode, anchor)
+    }
+
+    if (hasProp(props, 'project')) insertBefore(parent, createProjectSelector(props), anchor)
+  })
+}
+
+function createWindowLight(
+  kind: 'close' | 'min' | 'max',
+  props: WorkbenchTitlebarProps,
+  handlerName: 'onWindowClose' | 'onWindowMinimize' | 'onWindowMaximize'
+): VobsNode {
+  const light = createElement('button')
+  setAttribute(light, 'class', `vui-wbtitlebar__light vui-wbtitlebar__light--${kind}`)
+  setAttribute(light, 'type', 'button')
+  setAttribute(light, 'aria-label', kind === 'close' ? 'Close window' : kind === 'min' ? 'Minimize window' : 'Maximize window')
+  addEventListener(light, 'click', event => {
+    const handler = readProp<unknown>(props, handlerName, undefined)
+    if (typeof handler === 'function') (handler as WorkbenchTitlebarProps[typeof handlerName])!(event as MouseEvent)
+  })
+  return light
+}
+
+function createProjectSelector(props: WorkbenchTitlebarProps): VobsNode {
+  const button = createElement('button')
+  setAttribute(button, 'class', 'vui-wbtitlebar__project-selector')
+  setAttribute(button, 'type', 'button')
+  setOptionalAttribute(button, 'aria-label', readProp(props, 'project', 'Project'))
+  if (hasProp(props, 'projectIcon')) {
+    const icon = createElement('span')
+    setAttribute(icon, 'class', 'vui-wbtitlebar__project-icon')
+    mountSlot(icon, props, 'projectIcon')
+    insertBefore(button, icon, null)
+  }
+  const project = createText('')
+  bindTextContent(project, () => readProp(props, 'project', ''))
+  insertBefore(button, project, null)
+  if (hasProp(props, 'projectChevron')) {
+    const chevron = createElement('span')
+    setAttribute(chevron, 'class', 'vui-wbtitlebar__project-chevron')
+    mountSlot(chevron, props, 'projectChevron')
+    insertBefore(button, chevron, null)
+  }
+  addEventListener(button, 'click', event => {
+    const handler = readProp<unknown>(props, 'onProjectClick', undefined)
+    if (typeof handler === 'function') (handler as WorkbenchTitlebarProps['onProjectClick'])!(event as MouseEvent)
+  })
+  return button
+}

package/dist/app-shell-dom.d.ts

@@ -1,30 +0,0 @@
-/** @license MIT
- * Copyright (c) 2026 vobsjs
- * @vobs/ui
- */
-import { type Owner, type TemplateEnvironment } from '@vobs/runtime-dom';
-import type { AppShellDefinition, AppShellComponentScope, ResolvedAppShellState, ResolvedAppShellStatus } from './app-shell.js';
-export interface AppShellFrame {
-    readonly root: HTMLDivElement;
-    readonly brand: HTMLAnchorElement;
-    readonly sidebar: HTMLElement;
-    readonly main: HTMLElement;
-    readonly primaryNav: HTMLElement;
-    readonly utilityNav: HTMLElement;
-    readonly pageFrame: HTMLElement;
-    readonly pageHeader: HTMLElement;
-    readonly pageToolbar: HTMLElement;
-    readonly statusbar: HTMLElement;
-    readonly statusIcon: HTMLElement;
-    readonly statusText: HTMLSpanElement;
-    readonly pageKicker: HTMLParagraphElement;
-    readonly pageTitle: HTMLHeadingElement;
-    readonly pageDescription: HTMLParagraphElement;
-    readonly version: HTMLSpanElement;
-}
-export declare function createAppShellFrame(shell: AppShellDefinition, scope: AppShellComponentScope, environment: TemplateEnvironment): AppShellFrame;
-export declare function bindAppShellThemeControls(owner: Owner, frame: AppShellFrame, shell: AppShellDefinition, scope: AppShellComponentScope, environment: TemplateEnvironment): void;
-export declare function bindAppShellAccountMenu(owner: Owner, frame: AppShellFrame, shell: AppShellDefinition): void;
-export declare function bindAppShellActions(owner: Owner, frame: AppShellFrame, shell: AppShellDefinition): void;
-export declare function syncAppShellFrame(frame: AppShellFrame, shell: AppShellDefinition, state: ResolvedAppShellState, status: ResolvedAppShellStatus, scope: AppShellComponentScope, environment: TemplateEnvironment): void;
-export declare function bindAppShellLanguageMenu(owner: Owner, frame: AppShellFrame, shell: AppShellDefinition, scope: AppShellComponentScope, environment: TemplateEnvironment): void;