@wular/coder 0.4.3 → 0.4.5

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

@@ -1,94 +0,0 @@
-.bar-r {
-  display: flex;
-  align-items: center;
-  margin-block: -2px;
-  gap: 8px;
-  flex-wrap: wrap;
-  justify-content: flex-end;
-}
-.card.accent {
-  border-color: var(--warn);
-  background: var(--warnbg);
-}
-.card.danger {
-  border-color: var(--bad);
-}
-
-/* empty states */
-.empty {
-  display: grid;
-  justify-items: center;
-  gap: 6px;
-  padding: 32px 16px;
-  border: 1px dashed var(--line2);
-  text-align: center;
-  color: var(--muted);
-}
-.empty b {
-  color: var(--fg);
-  font-weight: 500;
-}
-.card .empty {
-  border: 0;
-}
-.loading {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 10px;
-  flex: 1 0 auto;
-  min-height: var(--h, 240px);
-  color: var(--dim);
-  font-size: 12px;
-}
-.loading.inline {
-  display: inline-flex;
-  min-height: 0;
-}
-.card:has(> .loading:not([style])) {
-  flex: 1 0 auto;
-  display: flex;
-  flex-direction: column;
-}
-.loading > span {
-  display: inline-flex;
-  align-items: center;
-  gap: 10px;
-  animation: loader-in 0s 60ms both;
-}
-.loading .spin {
-  flex: none;
-  width: 12px;
-  height: 12px;
-  border: 1.5px solid currentColor;
-  border-top-color: transparent;
-  border-radius: 50%;
-  animation: spin 0.8s linear infinite;
-}
-.loading .dots {
-  display: inline-flex;
-  gap: 3px;
-}
-.loading .dots > b {
-  width: 4px;
-  height: 4px;
-  border-radius: 50%;
-  background: currentColor;
-  animation: dots 1.2s ease-in-out infinite;
-}
-.loading .dots > b:nth-child(2) {
-  animation-delay: 0.2s;
-}
-.loading .dots > b:nth-child(3) {
-  animation-delay: 0.4s;
-}
-@keyframes dots {
-  0%,
-  80%,
-  100% {
-    opacity: 0.25;
-  }
-  40% {
-    opacity: 1;
-  }
-}

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

@@ -1,77 +0,0 @@
-import './card.css';
-import type { ComponentChildren } from 'preact';
-
-export function Card({
-  title,
-  count,
-  actions,
-  tone,
-  children,
-}: {
-  title?: ComponentChildren;
-  count?: number | string;
-  actions?: ComponentChildren;
-  tone?: 'accent' | 'danger';
-  children: ComponentChildren;
-}) {
-  return (
-    <section class={tone ? `card frame ${tone}` : 'card frame'}>
-      {title ? (
-        <div class="bar">
-          <h2>
-            {title}
-            {count !== undefined ? <span class="n">{count}</span> : null}
-          </h2>
-          {actions ? <span class="bar-r">{actions}</span> : null}
-        </div>
-      ) : null}
-      {children}
-    </section>
-  );
-}
-
-export function Empty({ title, children }: { title: string; children?: ComponentChildren }) {
-  return (
-    <div class="empty">
-      <b>{title}</b>
-      {children ? <span>{children}</span> : null}
-    </div>
-  );
-}
-
-/** The one loading state: a spinner and a short line; `inline` keeps it to one line. */
-export function Loading({
-  label,
-  inline,
-  dots,
-  h,
-}: {
-  label: string;
-  inline?: boolean;
-  /** Three pulsing dots instead of the ring, for a quiet wait. */
-  dots?: boolean;
-  /** The height, in pixels, of what arrives in its place. */
-  h?: number;
-}) {
-  const Tag = inline ? 'span' : 'div';
-  return (
-    <Tag
-      class={inline ? 'loading inline' : 'loading'}
-      role="status"
-      style={h ? `--h:${h}px` : undefined}
-    >
-      <span>
-        {dots ? (
-          <i class="dots">
-            <b />
-            <b />
-            <b />
-          </i>
-        ) : (
-          <i class="spin" />
-        )}
-        {label}
-      </span>
-    </Tag>
-  );
-}

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

@@ -1,32 +0,0 @@
-.collapse {
-  position: relative;
-}
-/* room under the toggle so it never sits on the container edge */
-.collapse:not(.open) {
-  padding-bottom: 6px;
-}
-/* room under the last line for the toggle, so it never covers text */
-.collapse-box {
-  box-sizing: content-box;
-  max-height: calc(var(--lines) * 1lh + 44px);
-  overflow: hidden;
-}
-.collapse.open > .collapse-box {
-  max-height: none;
-}
-.collapse.long:not(.open) > .collapse-box {
-  mask-image: linear-gradient(#000 calc(100% - 52px), transparent calc(100% - 36px));
-}
-.collapse > .btn.more-toggle {
-  position: absolute;
-  z-index: 1;
-  left: 50%;
-  bottom: 6px;
-  translate: -50% 0;
-}
-.collapse.open > .btn.more-toggle {
-  position: static;
-  display: flex;
-  margin: 0 auto 12px;
-  translate: none;
-}

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/filter.css

@@ -1,64 +0,0 @@
-/* applied filters sit in the toolbar's row and scroll sideways instead of wrapping it */
-.filter-chips {
-  display: flex;
-  flex: 1 1 0;
-  gap: 4px;
-  min-width: 0;
-  overflow-x: auto;
-  scrollbar-width: none;
-}
-.filters:has(> .filter-chips) > .search {
-  flex-grow: 1000;
-}
-/* in a page head the filters keep to the right, so chips fill in from the search's left */
-.head.tools .filter-chips {
-  order: -1;
-}
-.head.tools .filter-chips > :first-child {
-  margin-left: auto;
-}
-.filter-chips .chip {
-  display: inline-flex;
-  flex: none;
-  align-items: center;
-  gap: 4px;
-  max-width: 200px;
-}
-.filter-chips .chip .grow {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.filter-chips .chip .ic {
-  width: 12px;
-  height: 12px;
-}
-/* brand art takes the same box as the other icons, so labels line up */
-.filter-panel .pop-item > .brand-icon {
-  width: 16px;
-  height: 16px;
-}
-.filter-panel [data-facet] {
-  color: var(--muted);
-}
-.filter-panel .search {
-  margin: 4px 0 6px;
-}
-.filter-panel .search input {
-  width: 100%;
-}
-
-@media (max-width: 760px) {
-  /* the button sits at the left edge here, so its menu opens rightward */
-  @supports (anchor-scope: --menu) {
-    .filters .menu.filter-more > .pop {
-      inset: anchor(bottom) auto auto anchor(left);
-    }
-  }
-  .head.tools .filter-chips {
-    order: 0;
-  }
-  .head.tools .filter-chips > :first-child {
-    margin-left: 0;
-  }
-}