@wular/coder 0.3.18 → 0.4.0

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

@@ -0,0 +1,49 @@
+'use client';
+
+import './collapse.css';
+
+import type { ComponentChildren } from 'preact';
+import { useLayoutEffect, useRef, useState } from 'preact/hooks';
+
+/** Long content cut to its first `lines` lines under a fade, with a Show more toggle. */
+export function Collapse({
+  lines = 10,
+  class: cls,
+  children,
+}: {
+  lines?: number;
+  /** The content box's own class, as `body md`. */
+  class?: string;
+  children: ComponentChildren;
+}) {
+  const box = useRef<HTMLDivElement>(null);
+  const [long, setLong] = useState(false);
+  const [open, setOpen] = useState(false);
+
+  useLayoutEffect(() => {
+    const el = box.current!;
+    const measure = () => setLong(open || el.scrollHeight > el.clientHeight + 1);
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [children, open]);
+
+  return (
+    <div class={`collapse${long ? ' long' : ''}${open ? ' open' : ''}`} style={`--lines:${lines}`}>
+      <div class={cls ? `collapse-box ${cls}` : 'collapse-box'} ref={box}>
+        {children}
+      </div>
+      {long ? (
+        <button
+          type="button"
+          class="btn ghost sm more-toggle"
+          aria-expanded={open}
+          onClick={() => setOpen(!open)}
+        >
+          {open ? 'Show less' : 'Show more'}
+        </button>
+      ) : null}
+    </div>
+  );
+}

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

@@ -0,0 +1,154 @@
+import { useId, useLayoutEffect, useRef, useState } from 'preact/hooks';
+
+import { Icon } from './icon';
+import { iCheck } from './icons';
+
+const SHOWN = 50;
+
+/** A text input with suggestions under it, filtered as you type; any text is still a value. */
+export function Combo({
+  label,
+  name,
+  class: className,
+  options,
+  placeholder,
+  value,
+  onChange,
+  onOpen,
+}: {
+  label: string;
+  name: string;
+  class?: string;
+  /** Called when the field is focused or clicked, so a caller can fetch its options on demand. */
+  onOpen?: () => void;
+  options: string[];
+  placeholder?: string;
+  value: string;
+  onChange: (value: string) => void;
+}) {
+  const [open, setOpen] = useState(false);
+  // Only text typed since opening filters; opening on a picked value shows every option.
+  const [typed, setTyped] = useState(false);
+  const [active, setActive] = useState(0);
+  const [place, setPlace] = useState('');
+  const input = useRef<HTMLInputElement>(null);
+  const list = useRef<HTMLDivElement>(null);
+  const id = useId();
+  const query = typed ? value.trim().toLowerCase() : '';
+  const shown = (
+    query ? options.filter(option => option.toLowerCase().includes(query)) : options
+  ).slice(0, SHOWN);
+  const listed = open && shown.length > 0;
+
+  const pick = (index: number) => {
+    const picked = shown[index];
+    if (picked) onChange(picked);
+    setOpen(false);
+    setTyped(false);
+  };
+
+  useLayoutEffect(() => {
+    if (!listed) return;
+    list.current?.showPopover();
+    const position = () => {
+      const box = input.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(360, box.top - 12))}px`
+            : `top:${Math.round(box.bottom + 4)}px;max-height:${Math.round(Math.min(360, below))}px`),
+      );
+    };
+    position();
+    addEventListener('resize', position);
+    addEventListener('scroll', position, true);
+    return () => {
+      removeEventListener('resize', position);
+      removeEventListener('scroll', position, true);
+    };
+  }, [listed, shown.length]);
+
+  useLayoutEffect(() => {
+    if (listed)
+      list.current?.querySelector(`[data-index="${active}"]`)?.scrollIntoView({ block: 'nearest' });
+  }, [listed, active, place]);
+
+  return (
+    <>
+      <input
+        ref={input}
+        name={name}
+        class={className}
+        role="combobox"
+        aria-label={label}
+        aria-autocomplete="list"
+        aria-expanded={listed}
+        aria-controls={`${id}-list`}
+        aria-activedescendant={listed ? `${id}-${active}` : undefined}
+        autocomplete="off"
+        placeholder={placeholder}
+        value={value}
+        onInput={event => {
+          onChange(event.currentTarget.value);
+          setTyped(true);
+          setActive(0);
+          setOpen(true);
+        }}
+        onFocus={() => {
+          setTyped(false);
+          setOpen(true);
+          onOpen?.();
+        }}
+        onClick={() => {
+          setOpen(true);
+          onOpen?.();
+        }}
+        onBlur={() => {
+          setOpen(false);
+          setTyped(false);
+        }}
+        onKeyDown={event => {
+          if (!listed) return;
+          if (event.key === 'ArrowDown') setActive((active + 1) % shown.length);
+          else if (event.key === 'ArrowUp') setActive((active - 1 + shown.length) % shown.length);
+          else if (event.key === 'Enter') pick(active);
+          else if (event.key === 'Escape') setOpen(false);
+          else return;
+          event.preventDefault();
+        }}
+      />
+      {listed ? (
+        <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()}
+        >
+          {shown.map((option, index) => (
+            <div
+              key={option}
+              id={`${id}-${index}`}
+              data-index={index}
+              role="option"
+              aria-selected={option === value}
+              class={index === active ? 'pop-item on' : 'pop-item'}
+              onPointerMove={() => index !== active && setActive(index)}
+              onClick={() => pick(index)}
+            >
+              <span class="grow">{option}</span>
+              <Icon d={iCheck} />
+            </div>
+          ))}
+        </div>
+      ) : null}
+    </>
+  );
+}

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

@@ -0,0 +1,36 @@
+dialog.confirm {
+  width: min(420px, calc(100vw - 32px));
+  margin: auto;
+  padding: 0;
+  border: 1px solid var(--line2);
+  background: var(--tile);
+  color: inherit;
+  text-align: left;
+  white-space: normal;
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
+}
+dialog.confirm::backdrop {
+  background: rgba(0, 0, 0, 0.45);
+}
+dialog.confirm form {
+  display: grid;
+  gap: 8px;
+  padding: 20px;
+}
+dialog.confirm h2 {
+  font-size: 15px;
+  font-weight: 700;
+  overflow-wrap: anywhere;
+}
+dialog.confirm p {
+  color: var(--muted);
+}
+dialog.confirm .actions {
+  justify-content: flex-end;
+  margin-top: 12px;
+}
+.btn.destructive {
+  background: var(--bad);
+  border-color: var(--bad);
+  color: var(--bg);
+}

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

@@ -0,0 +1,67 @@
+'use client';
+
+import './confirm.css';
+
+import type { ComponentChildren } from 'preact';
+import { useEffect, useId, useRef } from 'preact/hooks';
+
+/** A modal question before a destructive step; Escape, Cancel or a backdrop click closes it. */
+export function ConfirmDialog({
+  open,
+  title,
+  body,
+  confirmLabel,
+  onConfirm,
+  onClose,
+  busy,
+}: {
+  open: boolean;
+  title: ComponentChildren;
+  body?: ComponentChildren;
+  confirmLabel: string;
+  onConfirm: () => void;
+  onClose: () => void;
+  busy?: boolean;
+}) {
+  const dialog = useRef<HTMLDialogElement>(null);
+  const id = useId();
+
+  useEffect(() => {
+    const el = dialog.current!;
+    if (open && !el.open) el.showModal();
+    else if (!open && el.open) el.close();
+  }, [open]);
+
+  const close = () => !busy && onClose();
+
+  return (
+    <dialog
+      ref={dialog}
+      class="confirm"
+      aria-labelledby={id}
+      onCancel={event => {
+        event.preventDefault();
+        close();
+      }}
+      onClick={event => event.target === event.currentTarget && close()}
+    >
+      <form
+        onSubmit={event => {
+          event.preventDefault();
+          onConfirm();
+        }}
+      >
+        <h2 id={id}>{title}</h2>
+        {body ? <p>{body}</p> : null}
+        <div class="actions">
+          <button type="button" class="btn ghost" disabled={busy} onClick={close} autofocus>
+            Cancel
+          </button>
+          <button class="btn destructive" aria-busy={busy}>
+            {confirmLabel}
+          </button>
+        </div>
+      </form>
+    </dialog>
+  );
+}

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

@@ -0,0 +1,25 @@
+/* forms */
+.field {
+  display: grid;
+  gap: 6px;
+}
+.field > span:first-child,
+.field > label {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  flex-wrap: wrap;
+  font-weight: 500;
+}
+.field small {
+  font-weight: 400;
+  color: var(--muted);
+  font-size: 11.5px;
+}
+.field .seg-btns {
+  width: max-content;
+  max-width: 100%;
+}
+.field .seg-btns > button {
+  height: 36px;
+}

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

@@ -0,0 +1,34 @@
+import './field.css';
+import type { ComponentChildren } from 'preact';
+
+export function Field({
+  label,
+  hint,
+  group,
+  children,
+}: {
+  label: ComponentChildren;
+  hint?: ComponentChildren;
+  /** Holds buttons, not one input, so a click on the label picks nothing. */
+  group?: boolean;
+  children: ComponentChildren;
+}) {
+  const Tag = group ? 'div' : 'label';
+  return (
+    <Tag class="field">
+      <span>
+        {label}
+        {hint ? <small>{hint}</small> : null}
+      </span>
+      {children}
+    </Tag>
+  );
+}
+
+export function ErrorText({ value }: { value?: string }) {
+  return value ? (
+    <p class="flash err" role="alert">
+      {value}
+    </p>
+  ) : null;
+}

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

@@ -0,0 +1,22 @@
+.ic {
+  width: 16px;
+  height: 16px;
+  flex: none;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.75;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+.brand .coder-mark {
+  flex: none;
+  position: relative;
+  top: -1px;
+  width: 16px;
+  height: 16px;
+  fill: currentColor;
+}
+th .ic {
+  width: 12px;
+  height: 12px;
+}

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

@@ -0,0 +1,17 @@
+import './icon.css';
+export function Icon({ d, class: cls }: { d: string; class?: string }) {
+  return (
+    <svg class={cls ? `ic ${cls}` : 'ic'} viewBox="0 0 24 24" aria-hidden="true">
+      <path d={d} />
+    </svg>
+  );
+}
+
+/** The Coder mark: eight dots on a 16px grid, drawn in currentColor. */
+export function Mark() {
+  return (
+    <svg class="coder-mark" viewBox="0 0 16 16" aria-hidden="true">
+      <path d="M5 0h3v3h-3zM9 0h3v3h-3zM13 0h3v3h-3zM0 4h3v3h-3zM0 9h3v3h-3zM5 13h3v3h-3zM9 13h3v3h-3zM13 13h3v3h-3z" />
+    </svg>
+  );
+}

package/src/server/dash/comps/ui/icons.ts

@@ -0,0 +1,44 @@
+/** Icon outlines, one path each, 24 by 24; import only the ones a component draws. */
+export const iAgent =
+  'M12 8V4H8M6 8h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2ZM2 14h2M20 14h2M15 13v2M9 13v2';
+export const iActivity = 'M22 12h-4l-3 9L9 3l-3 9H2';
+export const iChart = 'M3 3v18h18M18 17V9M13 17V5M8 17v-3';
+export const iLeft = 'm15 18-6-6 6-6';
+export const iDown = 'm6 9 6 6 6-6';
+export const iRight = 'm9 18 6-6-6-6';
+export const iUp = 'm18 15-6-6-6 6';
+export const iUpdown = 'm7 15 5 5 5-5M7 9l5-5 5 5';
+export const iSun =
+  'M8 12a4 4 0 1 0 8 0a4 4 0 1 0 -8 0M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M6.3 17.7l-1.4 1.4M19.1 4.9l-1.4 1.4';
+export const iMoon = 'M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z';
+export const iMonitor =
+  'M4 4h16a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1ZM8 20h8M12 16v4';
+export const iKey =
+  'M2 15.5a5.5 5.5 0 1 0 11 0a5.5 5.5 0 1 0 -11 0M21 2l-9.6 9.6M15.5 7.5l3 3L22 7l-3-3';
+export const iUsers =
+  'M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2M5 7a4 4 0 1 0 8 0a4 4 0 1 0 -8 0M22 21v-2a4 4 0 0 0-3-3.9M16 3.1a4 4 0 0 1 0 7.8';
+export const iUser = 'M8 8a4 4 0 1 0 8 0a4 4 0 1 0 -8 0M4 21a8 8 0 0 1 16 0';
+export const iOut = 'M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9';
+export const iSpark = 'm12 3 1.9 5.1L19 10l-5.1 1.9L12 17l-1.9-5.1L5 10l5.1-1.9ZM19 3v4M17 5h4';
+export const iGit =
+  'M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.7-.9l-.8-1.2A2 2 0 0 0 7.9 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2ZM10 13a2 2 0 1 0 4 0a2 2 0 1 0 -4 0M14 13h3M7 13h3';
+export const iMenu = 'M4 6h16M4 12h16M4 18h16';
+export const iX = 'M18 6 6 18M6 6l12 12';
+export const iCheck = 'M20 6 9 17l-5-5';
+export const iDots =
+  'M4 12a1 1 0 1 0 2 0a1 1 0 1 0 -2 0M11 12a1 1 0 1 0 2 0a1 1 0 1 0 -2 0M18 12a1 1 0 1 0 2 0a1 1 0 1 0 -2 0';
+export const iPlus = 'M12 5v14M5 12h14';
+export const iPencil = 'M4 20h4L19 9l-4-4L4 16v4ZM13 7l4 4';
+export const iMessage = 'M21 12a8 8 0 0 1-11.6 7.1L4 20l1-4.6A8 8 0 1 1 21 12Z';
+export const iSteer = 'M4 12h12M12 6l6 6-6 6';
+export const iAsk =
+  'M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0M9.5 9.5a2.5 2.5 0 1 1 3.5 2.3c-.6.3-1 .8-1 1.5M12 17h.01';
+export const iShuffle = 'M16 4h4v4M20 4l-7 7M4 20l6-6M16 20h4v-4M20 20l-5-5M4 4l5 5';
+export const iSearch = 'M4 11a7 7 0 1 0 14 0a7 7 0 1 0 -14 0M20 20l-3.5-3.5';
+export const iAlert =
+  'm21.7 18-8-14a2 2 0 0 0-3.4 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.7-3M12 9v4M12 17h.01';
+export const iTerminal = 'm4 17 6-6-6-6M12 19h8';
+export const iClock = 'M12 7v5l3 2M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0';
+export const iPlug = 'M9 2v6M15 2v6M6 8h12v4a6 6 0 0 1-12 0ZM12 18v4';
+export const iCopy = 'M9 9h11v11H9ZM5 15H4V4h11v1';
+export const iSliders = 'M4 21v-7M4 10V3M12 21v-9M12 8V3M20 21v-5M20 12V3M1 14h6M9 8h6M17 16h6';

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

@@ -0,0 +1,178 @@
+/* menus: a button and its popover in the top layer, at the button where anchors work and centred elsewhere */
+.pop,
+.more-list {
+  position: fixed;
+  inset: auto;
+  margin: 0;
+  padding: 6px;
+  white-space: normal;
+  max-height: calc(100vh - 24px);
+  overflow-y: auto;
+  border: 1px solid var(--line2);
+  background: var(--tile);
+  color: inherit;
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
+}
+:where(.menu, .more) > button {
+  padding: 0;
+  border: 0;
+  background: none;
+  color: inherit;
+  cursor: pointer;
+}
+.menu > .pop,
+.more > .more-list {
+  inset: 0;
+  margin: auto;
+}
+@supports (anchor-scope: --menu) {
+  .menu,
+  .more {
+    anchor-scope: --menu;
+  }
+  :where(.menu, .more) > button {
+    anchor-name: --menu;
+  }
+  .menu > .pop,
+  .more > .more-list {
+    position-anchor: --menu;
+    position-try-fallbacks: flip-block;
+    inset: anchor(bottom) auto auto anchor(left);
+    margin: 8px 0 0;
+  }
+  .menu.right > .pop,
+  .more > .more-list {
+    inset: anchor(bottom) anchor(right) auto auto;
+  }
+  .menu.up > .pop {
+    inset: auto anchor(right) anchor(top) anchor(left);
+    margin: 0 0 8px;
+  }
+}
+.pop {
+  z-index: 40;
+  min-width: 180px;
+}
+/* lists with sections or descriptions need the room */
+.pop:has(.pop-label, .pop-item.rich, .pop-row) {
+  min-width: 260px;
+}
+.menu.up > .pop {
+  min-width: 0;
+}
+.pop.wide {
+  width: min(320px, calc(100vw - 32px));
+}
+.pop hr {
+  border: 0;
+  border-top: 1px solid var(--line);
+  margin: 6px 0;
+}
+.pop-label {
+  padding: 8px 10px 4px;
+  font-size: 10px;
+  color: var(--dim);
+  border-top: 1px solid var(--line);
+}
+.pop-head + .pop-label,
+.pop .pop-label:first-child {
+  border-top: 0;
+}
+.pop-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  padding: 8px 10px;
+  border: 0;
+  background: none;
+  text-align: left;
+  cursor: pointer;
+}
+.pop-item:hover {
+  background: var(--wash);
+}
+.pop-item.danger:hover {
+  background: var(--badbg);
+  color: var(--bad);
+}
+.pop-item:disabled {
+  cursor: default;
+}
+.pop-item:disabled:hover {
+  background: none;
+}
+.pop-item small {
+  display: block;
+}
+.pop-item.rich {
+  align-items: flex-start;
+}
+.pop-item.rich .ic {
+  margin-top: 2px;
+}
+.pop-item[role="menuitemradio"] > .ic:last-child {
+  visibility: hidden;
+}
+.pop-item[role="menuitemradio"][aria-checked="true"] > .ic:last-child {
+  visibility: visible;
+  color: var(--acc);
+}
+.pop form {
+  margin: 0;
+}
+.pop-note {
+  padding: 0 10px 8px;
+  font-size: 11.5px;
+  color: var(--muted);
+}
+
+/* "+n more" lists */
+.more {
+  flex: none;
+}
+.more > button {
+  padding: 0 7px;
+  border: 1px solid var(--line2);
+  color: var(--fg);
+  font-size: 11.5px;
+  white-space: nowrap;
+}
+.more:hover > button,
+.more:has(:popover-open) > button {
+  border-color: var(--acc);
+  color: var(--acc);
+}
+.more-list {
+  --max: 220px;
+  z-index: 45;
+  min-width: 220px;
+}
+.more-list::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: -8px;
+  height: 8px;
+}
+.more-list:popover-open {
+  display: grid;
+  gap: 4px;
+}
+
+@media (max-width: 760px) {
+  .pop.wide {
+    min-width: min(320px, calc(100vw - 32px));
+  }
+}
+
+/* a trailing link in any menu or select, like "Add models" */
+.pop .add-models {
+  margin-top: 4px;
+  color: var(--muted);
+}
+.pop .add-models .ic {
+  width: 14px;
+  height: 14px;
+}