@wular/coder 0.4.2 → 0.4.5

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

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

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

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

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

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

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

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

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

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

@@ -1,178 +0,0 @@
-/* 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;
-}