@wular/coder 0.3.18 → 0.4.1

package/src/server/dash/comps/ui/menu.tsx

@@ -0,0 +1,152 @@
+'use client';
+
+import './menu.css';
+
+import type { ComponentChildren } from 'preact';
+import { useId, useRef } from 'preact/hooks';
+
+import { iCheck } from './icons';
+import { Icon } from './icon';
+
+/** A button and its popover panel, placed at the button; picking an item, an outside click or Escape closes it. */
+export function Menu({
+  summary,
+  summaryClass,
+  label,
+  align = 'right',
+  wide,
+  class: cls,
+  children,
+}: {
+  summary: ComponentChildren;
+  summaryClass?: string;
+  label?: string;
+  align?: 'right' | 'up' | 'left';
+  wide?: boolean;
+  class?: string;
+  children: ComponentChildren;
+}) {
+  const id = useId();
+  return (
+    <span class={`menu ${align}${cls ? ` ${cls}` : ''}`}>
+      <button
+        popovertarget={id}
+        type="button"
+        class={summaryClass}
+        aria-label={label}
+        title={label}
+      >
+        {summary}
+      </button>
+      <div
+        id={id}
+        class={wide ? 'pop wide' : 'pop'}
+        popover="auto"
+        onBeforeToggle={event => {
+          // A tall menu scrolls within the room on its side of the button instead of leaving the viewport.
+          if ((event as ToggleEvent).newState !== 'open') return;
+          const pop = event.currentTarget as HTMLElement;
+          const box = pop.parentElement?.querySelector('button')?.getBoundingClientRect();
+          if (!box) return;
+          const room = align === 'up' ? box.top - 20 : window.innerHeight - box.bottom - 20;
+          pop.style.maxHeight = `${Math.max(120, Math.round(room))}px`;
+        }}
+        onClick={event => {
+          if ((event.target as Element).closest('a, button:not([data-keep])'))
+            event.currentTarget.hidePopover();
+        }}
+      >
+        {children}
+      </div>
+    </span>
+  );
+}
+
+export function MenuItem({
+  icon,
+  title,
+  sub,
+  href,
+  onClick,
+  danger,
+}: {
+  icon?: string;
+  title: ComponentChildren;
+  sub?: ComponentChildren;
+  /** An outside page; in-app links use Link. */
+  href?: string;
+  onClick?: () => void;
+  /** Destructive: red on hover. */
+  danger?: boolean;
+}) {
+  const inner = (
+    <>
+      {icon ? <Icon d={icon} /> : null}
+      <span class="grow">
+        {title}
+        {sub ? <small>{sub}</small> : null}
+      </span>
+    </>
+  );
+  const cls = `pop-item${sub ? ' rich' : ''}${danger ? ' danger' : ''}`;
+
+  if (href)
+    return (
+      <a
+        class={cls}
+        href={href}
+        {...(/^https?:\/\//.test(href) ? { target: '_blank', rel: 'noreferrer' } : {})}
+      >
+        {inner}
+      </a>
+    );
+  return (
+    <button type="button" class={cls} onClick={onClick}>
+      {inner}
+    </button>
+  );
+}
+
+/** A fixed "+n more" that opens the rest in a scrolling list, on hover or click. */
+export function MoreList({ label, children }: { label: string; children: ComponentChildren }) {
+  const id = useId();
+  const list = useRef<HTMLDivElement>(null);
+  const hover = (open: boolean) => (event: PointerEvent) => {
+    if (event.pointerType === 'mouse') list.current!.togglePopover(open);
+  };
+
+  return (
+    <span class="more" onPointerEnter={hover(true)} onPointerLeave={hover(false)}>
+      <button popovertarget={id} type="button">
+        {label}
+      </button>
+      <div id={id} ref={list} class="more-list scroll-box" popover="auto">
+        {children}
+      </div>
+    </span>
+  );
+}
+
+/** One choice in a menu section; the picked one shows a check. */
+export function MenuRadio({
+  on,
+  onPick,
+  children,
+}: {
+  on: boolean;
+  onPick: () => void;
+  children: ComponentChildren;
+}) {
+  return (
+    <button
+      type="button"
+      role="menuitemradio"
+      aria-checked={on}
+      class={on ? 'pop-item on' : 'pop-item'}
+      onClick={onPick}
+    >
+      <span class="grow">{children}</span>
+      {on ? <Icon d={iCheck} /> : null}
+    </button>
+  );
+}

package/src/server/dash/comps/ui/segmented.css

@@ -0,0 +1,44 @@
+.seg-btns {
+  display: flex;
+  border: 1px solid var(--line2);
+}
+.seg-btns > a,
+.seg-btns > button,
+.seg-btns .menu > button {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  height: 32px;
+  padding: 0 12px;
+  border-left: 1px solid var(--line2);
+  background: var(--panel);
+  font-size: 10.5px;
+  letter-spacing: 0.14em;
+  color: var(--muted);
+  cursor: pointer;
+}
+.seg-btns > button {
+  border-top: 0;
+  border-right: 0;
+  border-bottom: 0;
+  text-transform: uppercase;
+}
+.seg-btns > :first-child {
+  border-left: 0;
+}
+.seg-btns > a:hover,
+.seg-btns > button:hover,
+.seg-btns .menu > button:hover {
+  color: var(--fg);
+}
+.seg-btns [aria-current],
+.seg-btns [aria-checked='true'],
+.seg-btns .on > button {
+  background: var(--accbg);
+  color: var(--acc);
+}
+.seg-btns > button:disabled {
+  opacity: 0.45;
+  color: var(--muted);
+  cursor: not-allowed;
+}

package/src/server/dash/comps/ui/segmented.tsx

@@ -0,0 +1,58 @@
+import './segmented.css';
+import type { Option } from './select';
+
+/** One-click choices in a row, a radio group to the keyboard: arrows move and pick, Enter submits the form. */
+export function Segmented({
+  label,
+  options,
+  value,
+  onChange,
+  class: cls,
+  disabled,
+}: {
+  label: string;
+  options: Option[];
+  value: string;
+  onChange: (value: string) => void;
+  class?: string;
+  disabled?: boolean;
+}) {
+  const at = Math.max(
+    0,
+    options.findIndex(([key]) => key === value),
+  );
+  return (
+    <div
+      class={cls ? `seg-btns ${cls}` : 'seg-btns'}
+      role="radiogroup"
+      aria-label={label}
+      onKeyDown={event => {
+        const form = (event.currentTarget as HTMLElement).closest('form');
+        if (event.key === 'Enter' && form) {
+          event.preventDefault();
+          return form.requestSubmit();
+        }
+        const step = { ArrowRight: 1, ArrowDown: 1, ArrowLeft: -1, ArrowUp: -1 }[event.key];
+        if (!step) return;
+        event.preventDefault();
+        const next = (at + step + options.length) % options.length;
+        onChange(options[next]![0]);
+        ((event.currentTarget as HTMLElement).children[next] as HTMLElement | undefined)?.focus();
+      }}
+    >
+      {options.map(([key, text], index) => (
+        <button
+          key={key}
+          type="button"
+          role="radio"
+          aria-checked={key === value}
+          tabIndex={index === at ? 0 : -1}
+          disabled={disabled}
+          onClick={() => onChange(key)}
+        >
+          {text}
+        </button>
+      ))}
+    </div>
+  );
+}

package/src/server/dash/comps/ui/select.css

@@ -0,0 +1,103 @@
+/* select */
+.select {
+  position: relative;
+  display: inline-flex;
+  min-width: 0;
+}
+.field .select {
+  display: flex;
+}
+.select > button {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  min-height: 36px;
+  padding: 7px 10px 7px 12px;
+  border: 1px solid var(--line2);
+  background: var(--field);
+  text-align: left;
+  white-space: nowrap;
+  cursor: pointer;
+  touch-action: manipulation;
+}
+.select > button .grow {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.select > button .ic {
+  color: var(--dim);
+  transition: transform 0.15s;
+}
+.select > button[aria-expanded="true"] .ic {
+  transform: rotate(180deg);
+}
+.select > button:focus-visible,
+.select > button[aria-expanded="true"] {
+  outline: none;
+  border-color: var(--acc);
+  box-shadow: 0 0 0 3px var(--accbg);
+}
+.select > button:disabled {
+  color: var(--muted);
+  cursor: default;
+}
+.select-pop {
+  min-width: 0;
+  max-width: min(440px, calc(100vw - 16px));
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scrollbar-width: thin;
+  scrollbar-color: var(--line2) transparent;
+}
+.select-pop .pop-item {
+  white-space: nowrap;
+}
+.select-pop .pop-item:hover {
+  background: none;
+}
+.select-pop .pop-item.on {
+  background: var(--wash2);
+}
+.select-pop .pop-item > .ic {
+  visibility: hidden;
+}
+.select-pop .pop-item[aria-selected="true"] > .ic {
+  visibility: visible;
+  color: var(--acc);
+}
+.select > button:disabled {
+  opacity: 0.65;
+  cursor: default;
+}
+
+/* a path under an option: one line, clipped from the start so the folder name stays */
+.select-pop .pop-item .pop-path {
+  display: block;
+  overflow: hidden;
+  direction: rtl;
+  text-align: left;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  font-size: 11px;
+  color: var(--muted);
+}
+.select-pop .pop-item .grow {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* the action row leads with its icon and never shows a check */
+.select-pop .pop-item.action {
+  margin-top: 4px;
+  color: var(--muted);
+}
+.select-pop .pop-item.action > .ic {
+  visibility: visible;
+  width: 14px;
+  height: 14px;
+}
+.select-pop .pop-item.action.on {
+  color: var(--fg);
+}

package/src/server/dash/comps/ui/select.tsx

@@ -0,0 +1,250 @@
+import './select.css';
+import type { ComponentChildren } from 'preact';
+import { Fragment } from 'preact';
+import { useId, useLayoutEffect, useRef, useState } from 'preact/hooks';
+
+import { iCheck, iDown, iPlus } from './icons';
+import { Icon } from './icon';
+
+export type Option = [value: string, label: string];
+
+const PAGE = 10;
+
+/** A select in the menu style, with keyboard, type-ahead and touch; `name` posts its value. */
+export function Select({
+  label,
+  options,
+  value,
+  defaultValue,
+  onChange,
+  name,
+  disabled,
+  headings,
+  subs,
+  action,
+}: {
+  label: string;
+  options: Option[];
+  /** Section titles shown above the options with these values. */
+  headings?: Record<string, string>;
+  /** A second, muted line under an option, clipped from the start, for paths. */
+  subs?: Record<string, string>;
+  /** One last row that acts instead of selecting, like "Add models"; it joins hover and keyboard like an option. */
+  action?: { label: string; icon?: string; onPick: () => void };
+  value?: string;
+  defaultValue?: string;
+  onChange?: (value: string) => void;
+  name?: string;
+  disabled?: boolean;
+}) {
+  const [own, setOwn] = useState(defaultValue ?? options[0]?.[0] ?? '');
+  // A value the options no longer hold falls back to the first, as a native select does.
+  const selected = Math.max(
+    0,
+    options.findIndex(([key]) => key === (value ?? own)),
+  );
+  const current = options[selected]?.[0] ?? '';
+  const [open, setOpen] = useState(false);
+  const [active, setActive] = useState(selected);
+  const [place, setPlace] = useState('');
+  const button = useRef<HTMLButtonElement>(null);
+  const list = useRef<HTMLDivElement>(null);
+  const typed = useRef({ text: '', at: 0 });
+  const id = useId();
+
+  const show = (index = selected) => {
+    setActive(index);
+    setOpen(true);
+  };
+  const close = (focus = true) => {
+    setOpen(false);
+    if (focus) button.current?.focus();
+  };
+  const pick = (index: number) => {
+    if (action && index === options.length) {
+      close();
+      action.onPick();
+      return;
+    }
+    const next = options[index]?.[0];
+    close();
+    if (next === undefined || next === current) return;
+    if (value === undefined) setOwn(next);
+    onChange?.(next);
+  };
+  /** Type-ahead: the next label starting with what was typed; one key repeated cycles. */
+  const seek = (key: string, from: number) => {
+    const now = Date.now();
+    const text = now - typed.current.at > 600 ? key : typed.current.text + key;
+    typed.current = { text, at: now };
+    const needle = /^(.)\1*$/.test(text) ? text[0]! : text;
+    const start = needle.length === 1 ? from + 1 : from;
+    for (let step = 0; step < options.length; step++) {
+      const index = (start + step) % options.length;
+      if (options[index]![1].toLowerCase().startsWith(needle.toLowerCase())) return index;
+    }
+    return -1;
+  };
+
+  const onKeyDown = (event: KeyboardEvent) => {
+    const last = options.length - 1 + (action ? 1 : 0);
+    const key = event.key;
+    if (!open) {
+      if (['ArrowDown', 'ArrowUp', 'Enter', ' '].includes(key)) show();
+      else if (key === 'Home') show(0);
+      else if (key === 'End') show(last);
+      else if (key.length === 1 && !event.ctrlKey && !event.metaKey) {
+        const found = seek(key, selected);
+        if (found >= 0) show(found);
+        else return;
+      } else return;
+      event.preventDefault();
+      return;
+    }
+    if (key === 'ArrowDown') setActive(Math.min(last, active + 1));
+    else if (key === 'ArrowUp' && event.altKey) pick(active);
+    else if (key === 'ArrowUp') setActive(Math.max(0, active - 1));
+    else if (key === 'Home') setActive(0);
+    else if (key === 'End') setActive(last);
+    else if (key === 'PageDown') setActive(Math.min(last, active + PAGE));
+    else if (key === 'PageUp') setActive(Math.max(0, active - PAGE));
+    else if (key === 'Enter' || (key === ' ' && Date.now() - typed.current.at > 600)) pick(active);
+    else if (key === 'Escape') {
+      event.stopPropagation();
+      close();
+    } else if (key === 'Tab') {
+      pick(active);
+      return;
+    } else if (key.length === 1 && !event.ctrlKey && !event.metaKey) {
+      const found = seek(key, active);
+      if (found >= 0) setActive(found);
+    } else return;
+    event.preventDefault();
+  };
+
+  // In the top layer, so a dialog or scroll box never clips it; flips up near the bottom.
+  useLayoutEffect(() => {
+    if (!open) return;
+    list.current?.showPopover();
+    const position = () => {
+      const box = button.current?.getBoundingClientRect();
+      const menu = list.current;
+      if (!box || !menu) return;
+      const below = innerHeight - box.bottom - 12;
+      const up = below < Math.min(menu.scrollHeight, 240) && box.top > below;
+      setPlace(
+        `left:${Math.round(Math.min(box.left, innerWidth - menu.offsetWidth - 8))}px;min-width:${Math.round(box.width)}px;` +
+          (up
+            ? `bottom:${Math.round(innerHeight - box.top + 4)}px;max-height:${Math.round(Math.min(480, box.top - 12))}px`
+            : `top:${Math.round(box.bottom + 4)}px;max-height:${Math.round(Math.min(480, below))}px`),
+      );
+    };
+    position();
+    const outside = (event: PointerEvent) => {
+      const target = event.target as Node;
+      if (!button.current?.contains(target) && !list.current?.contains(target)) close(false);
+    };
+    addEventListener('resize', position);
+    addEventListener('scroll', position, true);
+    document.addEventListener('pointerdown', outside);
+    return () => {
+      removeEventListener('resize', position);
+      removeEventListener('scroll', position, true);
+      document.removeEventListener('pointerdown', outside);
+    };
+  }, [open]);
+
+  useLayoutEffect(() => {
+    if (open)
+      list.current?.querySelector(`[data-index="${active}"]`)?.scrollIntoView({ block: 'nearest' });
+  }, [open, active, place]);
+
+  return (
+    <span class="select">
+      <button
+        ref={button}
+        type="button"
+        role="combobox"
+        data-keep
+        aria-label={label}
+        aria-haspopup="listbox"
+        aria-expanded={open}
+        aria-controls={`${id}-list`}
+        aria-activedescendant={open ? `${id}-${active}` : undefined}
+        disabled={disabled}
+        onClick={event => {
+          event.preventDefault();
+          if (open) close();
+          else show();
+        }}
+        onKeyDown={onKeyDown}
+      >
+        <span class="grow">{options[selected]?.[1] ?? ''}</span>
+        <Icon d={iDown} />
+      </button>
+      {name ? <input type="hidden" name={name} value={current} /> : null}
+      {open ? (
+        <div
+          ref={list}
+          id={`${id}-list`}
+          class="pop select-pop"
+          popover="manual"
+          role="listbox"
+          aria-label={label}
+          style={place || 'visibility:hidden'}
+          onMouseDown={event => event.preventDefault()}
+        >
+          {options.map(([key, text], index) => (
+            <Fragment key={key}>
+              {headings?.[key] ? <p class="pop-label">{headings[key]}</p> : null}
+              <div
+                id={`${id}-${index}`}
+                data-index={index}
+                role="option"
+                aria-selected={index === selected}
+                class={index === active ? 'pop-item on' : 'pop-item'}
+                onPointerMove={() => index !== active && setActive(index)}
+                // Picks without letting a wrapping label re-open the list.
+                onClick={event => {
+                  event.preventDefault();
+                  pick(index);
+                }}
+              >
+                <span class="grow">
+                  {text}
+                  {subs?.[key] ? (
+                    <small class="pop-path">
+                      <bdi dir="ltr">{subs[key]}</bdi>
+                    </small>
+                  ) : null}
+                </span>
+                <Icon d={iCheck} />
+              </div>
+            </Fragment>
+          ))}
+          {action ? (
+            <div
+              id={`${id}-${options.length}`}
+              data-index={options.length}
+              role="option"
+              aria-selected={false}
+              class={active === options.length ? 'pop-item action on' : 'pop-item action'}
+              onPointerMove={() => active !== options.length && setActive(options.length)}
+              onClick={event => {
+                event.preventDefault();
+                pick(options.length);
+              }}
+            >
+              <Icon d={action.icon ?? iPlus} />
+              <span class="grow">{action.label}</span>
+            </div>
+          ) : null}
+        </div>
+      ) : null}
+    </span>
+  );
+}
+
+/** The label a filter's value shows. */
+export const labelOf = (options: Array<[string, string]>, value: string) =>
+  (options.find(([key]) => key === value) ?? options[0]!)[1];

package/src/server/dash/comps/ui/sentinel.css

@@ -0,0 +1,58 @@
+.sentinel {
+  display: block;
+  height: 0;
+  margin-bottom: -20px;
+}
+.page .head.stuck,
+.page .hero.stuck {
+  padding-top: 10px;
+}
+.stuck {
+  border-bottom: 1px solid var(--line2);
+  align-items: center;
+  flex-wrap: nowrap;
+}
+.stuck h1 {
+  font-size: 16px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.stuck .lead {
+  display: none;
+}
+.stuck .title-row {
+  flex-wrap: nowrap;
+}
+.stuck .meta {
+  flex-wrap: nowrap;
+  overflow: hidden;
+}
+.stuck > div:first-child,
+.stuck > .grow {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+.stuck .actions {
+  flex: none;
+  flex-wrap: nowrap;
+  width: auto;
+  justify-content: flex-end;
+}
+.stuck .hero-mark {
+  width: 28px;
+  height: 28px;
+  font-size: 13px;
+}
+.stuck.hero {
+  gap: 12px;
+}
+.hero.stuck .title-row .badge {
+  display: none;
+}
+
+@media (max-width: 760px) {
+  .stuck .actions > :not(.flash, dialog) ~ :not(.flash, dialog) {
+    display: none;
+  }
+}