@wular/coder 0.4.3 → 0.4.4

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

@@ -1,336 +0,0 @@
-import './filter.css';
-import { Fragment, type ComponentChildren } from 'preact';
-import { useEffect, useRef, useState } from 'preact/hooks';
-
-import { FILTER_ROWS } from '@/utils/paged';
-import { iLeft, iRight, iSearch, iX } from './icons';
-import { Icon } from './icon';
-import { Menu, MenuRadio } from './menu';
-import type { Option } from './select';
-
-const RECENT = 'coder:filters';
-
-/** From this many options a facet's full list gets a find box. */
-const FIND = 5;
-
-/** One thing a list filters by; an empty value is its default and shows no chip. */
-export interface Facet<K extends string = string> {
-  key: K;
-  label: string;
-  /** The picks shown before typing. */
-  options: Option[];
-  /** A fixed list, always in the menu with its default as a row; its chip is its pick alone. */
-  inline?: boolean;
-  /** Each pick's icon: an icon path or a ready element. */
-  icon?: (value: string) => string | ComponentChildren;
-  /** Finds picks on the server once something is typed, at most `limit`. */
-  search?: (q: string, limit: number) => Promise<Option[]>;
-}
-
-/** How many of a facet's picks the menu lists before "More". */
-const SHOWN = 5;
-
-/** The picks the menu lists for a facet: the first few, keeping the current pick in view. */
-export function inlineRows(picks: Option[], value: string) {
-  if (picks.length <= SHOWN) return picks;
-  const shown = picks.slice(0, SHOWN);
-  const current = picks.find(([key]) => key === value);
-
-  return current && !shown.includes(current) ? [...shown.slice(0, SHOWN - 1), current] : shown;
-}
-
-/** Whether a facet's own list needs a find box. */
-const findable = (facet: Facet) => facet.options.filter(([value]) => value).length >= FIND;
-
-/** What a facet's value reads as; "Any" for its default. */
-export function valueLabel<K extends string>(
-  facet: Facet<K>,
-  value: string,
-  seen: Record<string, string> = {},
-) {
-  if (!value) return 'Any';
-
-  return (
-    facet.options.find(([key]) => key === value)?.[1] ?? seen[`${facet.key}:${value}`] ?? value
-  );
-}
-
-/** The filters that are on, one chip each in facet order. */
-export function filterChips<K extends string>(
-  facets: Facet<K>[],
-  values: Record<K, string>,
-  seen: Record<string, string> = {},
-) {
-  return facets
-    .filter(facet => values[facet.key])
-    .map(facet => {
-      const label = valueLabel(facet, values[facet.key], seen);
-
-      return { key: facet.key, text: facet.inline ? label : `${facet.label}: ${label}` };
-    });
-}
-
-/** A facet list's rows: recent picks that match first, then the rest, at most FILTER_ROWS. */
-export function listRows(rows: Option[], recent: Option[], q: string) {
-  const needle = q.trim().toLowerCase();
-  const first = recent.filter(([, label]) => label.toLowerCase().includes(needle));
-  const all = [...first, ...rows.filter(([value]) => !first.some(([kept]) => kept === value))];
-
-  return { shown: all.slice(0, FILTER_ROWS), more: all.length > FILTER_ROWS };
-}
-
-function readRecent(): Record<string, Option[]> {
-  try {
-    return JSON.parse(localStorage.getItem(RECENT) ?? '{}') ?? {};
-  } catch {
-    return {};
-  }
-}
-
-function keepRecent(list: string, pick: Option) {
-  const all = readRecent();
-  all[list] = [pick, ...(all[list] ?? []).filter(([value]) => value !== pick[0])].slice(0, 5);
-  localStorage.setItem(RECENT, JSON.stringify(all));
-}
-
-/** One Filter button over every facet, and a removable chip for each filter that is on; `name` keeps each list's recent picks apart. */
-export function Filter<K extends string>({
-  name,
-  facets,
-  values,
-  onChange,
-}: {
-  name: string;
-  facets: Facet<K>[];
-  values: Record<K, string>;
-  onChange: (key: K, value: string) => void;
-}) {
-  // Labels of picks the options lack, so a chip names an agent found by search.
-  const [seen, setSeen] = useState<Record<string, string>>({});
-  const remember = (key: K, rows: Option[]) =>
-    setSeen(current => ({
-      ...current,
-      ...Object.fromEntries(rows.map(([value, label]) => [`${key}:${value}`, label])),
-    }));
-  useEffect(() => {
-    const recent = readRecent();
-    for (const facet of facets) remember(facet.key, recent[`${name}:${facet.key}`] ?? []);
-  }, []);
-  const chips = filterChips(facets, values, seen);
-
-  return (
-    <>
-      <Menu
-        class="filter-more"
-        summaryClass={`field-btn${chips.length ? ' on' : ''}`}
-        summary={chips.length ? `Filter · ${chips.length}` : 'Filter'}
-      >
-        <FilterPanel
-          name={name}
-          facets={facets}
-          values={values}
-          seen={seen}
-          onFound={remember}
-          onPick={(facet, [value, label]) => {
-            if (!facet.inline && value !== values[facet.key]) {
-              keepRecent(`${name}:${facet.key}`, [value, label]);
-              remember(facet.key, [[value, label]]);
-            }
-            onChange(facet.key, facet.inline || value !== values[facet.key] ? value : '');
-          }}
-        />
-      </Menu>
-      <span class="filter-chips">
-        {chips.map(chip => (
-          <button
-            key={chip.key}
-            type="button"
-            class="chip"
-            title={chip.text}
-            aria-label={`Clear ${chip.text}`}
-            onClick={() => onChange(chip.key, '')}
-          >
-            <span class="grow">{chip.text}</span>
-            <Icon d={iX} />
-          </button>
-        ))}
-      </span>
-    </>
-  );
-}
-
-/** The menu's facets; a long facet opens its own list in place, and Escape steps back out of it. */
-function FilterPanel<K extends string>({
-  name,
-  facets,
-  values,
-  seen,
-  onFound,
-  onPick,
-}: {
-  name: string;
-  facets: Facet<K>[];
-  values: Record<K, string>;
-  seen: Record<string, string>;
-  onFound: (key: K, rows: Option[]) => void;
-  onPick: (facet: Facet<K>, pick: Option) => void;
-}) {
-  const root = useRef<HTMLDivElement>(null);
-  const [open, setOpen] = useState<Facet<K>>();
-  const [q, setQ] = useState('');
-  const [found, setFound] = useState<Option[]>();
-  const asked = useRef(0);
-  const from = useRef<K>();
-  const typed = q.trim();
-
-  const focus = (selector: string) => root.current?.querySelector<HTMLElement>(selector)?.focus();
-  const show = (facet?: Facet<K>) => {
-    if (facet) from.current = facet.key;
-    setOpen(facet);
-    setQ('');
-    setFound(undefined);
-  };
-
-  useEffect(() => {
-    const pop = root.current!.closest<HTMLElement>('[popover]')!;
-    const toggle = (event: Event) => {
-      if ((event as ToggleEvent).newState === 'open') focus('.pop-item');
-      else show();
-    };
-    pop.addEventListener('toggle', toggle);
-    return () => pop.removeEventListener('toggle', toggle);
-  }, []);
-
-  useEffect(() => {
-    if (!root.current?.closest(':popover-open')) return;
-    focus(open ? 'input' : `[data-facet="${from.current}"]`);
-  }, [open]);
-
-  useEffect(() => {
-    if (!open?.search || !typed) return;
-    const ask = ++asked.current;
-    const timer = setTimeout(
-      () =>
-        void open.search!(typed, FILTER_ROWS + 1).then(
-          rows => {
-            if (asked.current !== ask) return;
-            setFound(rows);
-            onFound(open.key, rows);
-          },
-          () => asked.current === ask && setFound([]),
-        ),
-      200,
-    );
-    return () => clearTimeout(timer);
-  }, [open, typed]);
-
-  const rows = open
-    ? open.search && typed
-      ? (found ?? [])
-      : open.options.filter(
-          ([value, label]) => value && label.toLowerCase().includes(typed.toLowerCase()),
-        )
-    : [];
-  const list = open
-    ? listRows(rows, readRecent()[`${name}:${open.key}`] ?? [], typed)
-    : { shown: [], more: false };
-  const searching = Boolean(open?.search && typed && !found);
-
-  const onKeyDown = (event: KeyboardEvent) => {
-    const items = [...root.current!.querySelectorAll<HTMLElement>('input, .pop-item')];
-    const at = items.indexOf(document.activeElement as HTMLElement);
-    const target = event.target as HTMLElement;
-    const key = event.key;
-    if (key === 'ArrowDown') items[(at + 1) % items.length]?.focus();
-    else if (key === 'ArrowUp') items[(at - 1 + items.length) % items.length]?.focus();
-    else if (key === 'ArrowRight' && target.dataset.facet) target.click();
-    else if (key === 'ArrowLeft' && open && target.tagName !== 'INPUT') show();
-    else if (key === 'Enter' && target.tagName === 'INPUT') focus('[role=menuitemradio]');
-    else if (key === 'Escape' && open) {
-      event.stopPropagation();
-      show();
-    } else return;
-    event.preventDefault();
-  };
-
-  return (
-    <div ref={root} class="filter-panel" onKeyDown={onKeyDown}>
-      {open ? (
-        <>
-          <button type="button" class="pop-item" data-keep onClick={() => show()}>
-            <Icon d={iLeft} />
-            <span class="grow">{open.label}</span>
-          </button>
-          {findable(open) ? (
-            <label class="search">
-              <Icon d={iSearch} />
-              <input
-                type="search"
-                value={q}
-                placeholder={`Find ${open.label.toLowerCase()}`}
-                aria-label={`Find ${open.label.toLowerCase()}`}
-                autocomplete="off"
-                onInput={event => setQ(event.currentTarget.value)}
-              />
-            </label>
-          ) : null}
-          <div role="group" aria-label={open.label} aria-busy={searching}>
-            {list.shown.map(([value, label]) => (
-              <MenuRadio
-                key={value}
-                icon={open.icon?.(value)}
-                on={values[open.key] === value}
-                onPick={() => onPick(open, [value, label])}
-              >
-                {label}
-              </MenuRadio>
-            ))}
-          </div>
-          {list.more ? (
-            <p class="pop-note">Type to find more.</p>
-          ) : !list.shown.length && !searching ? (
-            <p class="pop-note">Nothing matches.</p>
-          ) : null}
-        </>
-      ) : (
-        facets.map(facet => {
-          const picks = facet.options.filter(([value]) => facet.inline || value);
-          if (!picks.length) return null;
-          const shown = inlineRows(picks, values[facet.key]);
-
-          return (
-            <Fragment key={facet.key}>
-              <p class="pop-label">{facet.label}</p>
-              <div role="group" aria-label={facet.label}>
-                {shown.map(([value, label]) => (
-                  <MenuRadio
-                    key={value}
-                    icon={facet.icon?.(value)}
-                    on={values[facet.key] === value}
-                    onPick={() => onPick(facet, [value, label])}
-                  >
-                    {label}
-                  </MenuRadio>
-                ))}
-              </div>
-              {picks.length > shown.length ? (
-                <button
-                  type="button"
-                  class="pop-item"
-                  data-keep
-                  data-facet={facet.key}
-                  aria-haspopup="true"
-                  onClick={() => show(facet)}
-                >
-                  <span class="grow">More</span>
-                  <span class="muted">{picks.length - shown.length}</span>
-                  <Icon d={iRight} />
-                </button>
-              ) : null}
-            </Fragment>
-          );
-        })
-      )}
-    </div>
-  );
-}

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,46 +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 iFolder =
-  'M4 20h16a2 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 2Z';
-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;
-}