@wular/coder 0.4.3 → 0.4.4

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

@@ -1,160 +0,0 @@
-'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,
-  tip,
-  align = 'right',
-  wide,
-  class: cls,
-  children,
-}: {
-  summary: ComponentChildren;
-  summaryClass?: string;
-  label?: string;
-  /** A styled tooltip in place of the native title, where the layout shows one. */
-  tip?: 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={tip ? undefined : label}
-        data-tip={tip}
-      >
-        {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,
-  icon,
-  children,
-}: {
-  on: boolean;
-  onPick: () => void;
-  /** An icon path or a ready element. */
-  icon?: string | ComponentChildren;
-  children: ComponentChildren;
-}) {
-  return (
-    <button
-      type="button"
-      role="menuitemradio"
-      aria-checked={on}
-      class={on ? 'pop-item on' : 'pop-item'}
-      onClick={onPick}
-    >
-      {typeof icon === 'string' ? <Icon d={icon} /> : icon}
-      <span class="grow">{children}</span>
-      {on ? <Icon d={iCheck} /> : null}
-    </button>
-  );
-}

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

@@ -1,44 +0,0 @@
-.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

@@ -1,58 +0,0 @@
-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

@@ -1,103 +0,0 @@
-/* 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

@@ -1,250 +0,0 @@
-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(560, box.top - 12))}px`
-            : `top:${Math.round(box.bottom + 4)}px;max-height:${Math.round(Math.min(560, 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

@@ -1,58 +0,0 @@
-.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;
-  }
-}