@wular/coder 0.4.3 → 0.4.4

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

@@ -1,67 +0,0 @@
-'use client';
-
-import './sentinel.css';
-
-import { useEffect, useRef } from 'preact/hooks';
-
-/** Goes right before a page head: the head sticks under the top bar and turns compact there, its old height kept as margin so nothing under it moves. */
-export function Sentinel() {
-  const ref = useRef<HTMLElement>(null);
-
-  useEffect(() => {
-    const mark = ref.current!;
-    // Inside an island the head follows the island's host.
-    const head = (mark.nextElementSibling ?? mark.parentElement!.nextElementSibling) as HTMLElement;
-    const page = head.closest<HTMLElement>('.page');
-
-    // How much shorter the compact head is; it compacts only once that much has scrolled under it, so no gap opens above what follows.
-    const shrink = () => {
-      const stuck = head.classList.contains('stuck');
-      const before = head.offsetHeight;
-      head.classList.toggle('stuck', !stuck);
-      const after = head.offsetHeight;
-      head.classList.toggle('stuck', stuck);
-      return Math.max(0, stuck ? after - before : before - after);
-    };
-
-    let observer: IntersectionObserver | undefined;
-    const watch = () => {
-      observer?.disconnect();
-      // the head sticks at 56px; it compacts once its top is that much further up
-      const line = 56 - shrink();
-      observer = new IntersectionObserver(
-        ([entry]) => {
-          const stuck = !entry!.isIntersecting && entry!.boundingClientRect.top < line;
-          if (stuck === head.classList.contains('stuck')) return;
-
-          // The page keeps its height while the head changes, or a page just taller than the viewport clamps its scroll to 0.
-          const tall = head.offsetHeight;
-          if (page) page.style.paddingBottom = `${tall}px`;
-          head.classList.toggle('stuck', stuck);
-          head.style.marginBottom = stuck ? `${tall - head.offsetHeight}px` : '';
-          if (page) page.style.paddingBottom = '';
-        },
-        { rootMargin: `${-line}px 0px 0px 0px` },
-      );
-      observer.observe(mark);
-    };
-    watch();
-
-    // Tabs and filter rows stick under the head at its current height; a new width changes how much it compacts by.
-    let width = head.offsetWidth;
-    const sized = new ResizeObserver(() => {
-      page?.style.setProperty('--head', `${head.offsetHeight}px`);
-      if (head.offsetWidth === width) return;
-      width = head.offsetWidth;
-      watch();
-    });
-    sized.observe(head, { box: 'border-box' });
-    return () => {
-      observer?.disconnect();
-      sized.disconnect();
-      page?.style.removeProperty('--head');
-    };
-  }, []);
-
-  return <i class="sentinel" ref={ref} />;
-}

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

@@ -1,81 +0,0 @@
-/* tabs that do not fit scroll sideways; the line is a shadow so the scroll box never clips the current tab's underline */
-.tabs {
-  display: flex;
-  gap: 4px;
-  min-width: 0;
-  overflow-x: auto;
-  scrollbar-width: none;
-  box-shadow: inset 0 -1px var(--line2);
-}
-/* page tabs are one 40px row that sticks under the top bar and the page head */
-.page .tabs:not(.vertical) {
-  height: 40px;
-  margin-top: -8px;
-  position: sticky;
-  top: calc(56px + var(--head, 0px));
-  z-index: 9;
-  background: var(--bg);
-}
-.tabs a,
-.tabs > button {
-  display: flex;
-  flex: none;
-  align-items: center;
-  gap: 8px;
-  padding: 10px 12px;
-  border: 0;
-  border-bottom: 2px solid transparent;
-  background: none;
-  font-size: 10.5px;
-  color: var(--muted);
-  white-space: nowrap;
-  cursor: pointer;
-}
-.tabs a:hover,
-.tabs > button:hover {
-  color: var(--fg);
-}
-.tabs:focus {
-  outline: none;
-}
-.tabs a:focus-visible,
-.tabs > button:focus-visible {
-  outline-offset: -2px;
-}
-.tabs a[aria-current],
-.tabs a[data-pending],
-.tabs > button[aria-current] {
-  color: var(--fg);
-  border-bottom-color: var(--fg);
-}
-/* while another tab loads, only that one is underlined */
-.tabs:has(a[data-pending]) a[aria-current]:not([data-pending]) {
-  color: var(--muted);
-  border-bottom-color: transparent;
-}
-.tabs .count {
-  color: var(--dim);
-}
-/* tabs cut at the edge fade out there until scrolled to the end */
-@property --tabs-fade {
-  syntax: "<length>";
-  inherits: false;
-  initial-value: 0px;
-}
-@keyframes tabs-fade {
-  from {
-    --tabs-fade: 40px;
-  }
-  to {
-    --tabs-fade: 0px;
-  }
-}
-.tabs {
-  mask-image: linear-gradient(to left, transparent, #000 var(--tabs-fade));
-  animation: tabs-fade linear both;
-  animation-timeline: scroll(self inline);
-}
-/* Loading tabs keep their row until the page brings them with their counts. */
-.tabs[aria-hidden] > * {
-  visibility: hidden;
-}

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

@@ -1,32 +0,0 @@
-import './tabs.css';
-import { CurrentLink } from '@/comps/nav/current-link';
-import type { To } from '@/comps/nav/to';
-
-type TabItem = To & { label: string; count?: number };
-
-const compact = new Intl.NumberFormat('en', { notation: 'compact' });
-
-/** Tabs that are pages under one header; the current one follows the address. */
-export function Tabs({ label, items }: { label: string; items: TabItem[] }) {
-  return (
-    <nav class="tabs" aria-label={label}>
-      {items.map(({ label, count, ...to }) => (
-        <CurrentLink key={label} {...to} prefetch="intent">
-          {label}
-          {count !== undefined ? <span class="count">{compact.format(count)}</span> : null}
-        </CurrentLink>
-      ))}
-    </nav>
-  );
-}
-
-/** Tabs before their page arrives: the same row, kept blank until the labels come with their counts. */
-export function LoadingTabs({ labels }: { labels: string[] }) {
-  return (
-    <nav class="tabs" aria-hidden="true">
-      {labels.map(label => (
-        <a key={label}>{label}</a>
-      ))}
-    </nav>
-  );
-}

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

@@ -1,12 +0,0 @@
-.tail {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 48px;
-  padding: 0 14px;
-  color: var(--dim);
-  font-size: 11.5px;
-}
-.tail.err {
-  color: var(--bad);
-}

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

@@ -1,37 +0,0 @@
-import './tail.css';
-import type { RefObject } from 'preact';
-
-import { Loading } from './card';
-
-/** Below the rows: what is loading, what failed, and the mark that pulls in the next page. */
-export function Tail({
-  sentinel,
-  more,
-  busy,
-  error,
-  retry,
-  noun,
-}: {
-  sentinel: RefObject<HTMLElement>;
-  more: boolean;
-  busy: boolean;
-  error: string;
-  retry: () => void;
-  noun: string;
-}) {
-  if (!more && !error) return null;
-  return (
-    <div class={error ? 'tail err' : 'tail'} ref={sentinel as never} role="status">
-      {error ? (
-        <>
-          {error}{' '}
-          <button type="button" class="btn ghost sm" onClick={retry}>
-            Retry
-          </button>
-        </>
-      ) : busy ? (
-        <Loading label={`Loading more ${noun}`} inline />
-      ) : null}
-    </div>
-  );
-}

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

@@ -1,73 +0,0 @@
-/* task toasts: a fixed stack at the bottom right, newest on top */
-.toasts {
-  position: fixed;
-  top: 16px;
-  right: 16px;
-  bottom: 16px;
-  z-index: 50;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-end;
-  gap: 8px;
-  width: min(340px, calc(100vw - 32px));
-  pointer-events: none;
-}
-.toast {
-  position: relative;
-  display: grid;
-  grid-template-columns: minmax(0, 1fr);
-  gap: 6px;
-  padding: 14px 16px;
-  border: 1px solid var(--line2);
-  background: var(--tile);
-  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
-  pointer-events: auto;
-  cursor: pointer;
-  animation: toast-in 0.15s ease-out;
-}
-.toast:hover {
-  background: linear-gradient(var(--wash), var(--wash)), var(--tile);
-}
-.toast:has(.cover:focus-visible) {
-  outline: 2px solid var(--acc);
-  outline-offset: 2px;
-}
-.toast-head {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  margin: 0;
-}
-.toast-head .cover {
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: var(--fg);
-  text-decoration: none;
-  outline: none;
-}
-.toast-line {
-  margin: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: var(--muted);
-}
-.toast.err .toast-head .cover {
-  color: var(--bad);
-}
-.toast.err .toast-line {
-  white-space: normal;
-}
-@keyframes toast-in {
-  from {
-    opacity: 0;
-  }
-}
-@media (prefers-reduced-motion: reduce) {
-  .toast {
-    animation: none;
-  }
-}

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

@@ -1,157 +0,0 @@
-.head.tools {
-  display: grid;
-  grid-template-columns: auto minmax(0, 1fr) auto;
-  align-items: center;
-  gap: 10px 24px;
-  min-height: 36px;
-}
-.head.tools > div:first-child {
-  display: contents;
-}
-.head.tools .lead {
-  grid-row: 2;
-  grid-column: 1 / -1;
-}
-.head.tools > .filters {
-  grid-row: 1;
-  grid-column: 2;
-  justify-content: flex-end;
-}
-.head.tools > .filters:last-child {
-  grid-column: 2 / -1;
-}
-.head.tools > .actions {
-  grid-row: 1;
-  grid-column: 3;
-}
-.page {
-  container-type: inline-size;
-}
-/* with a primary action, the filters drop under the title before they would wrap */
-@container (max-width: 720px) {
-  .head.tools:has(> .actions) > .filters {
-    grid-row: auto;
-    grid-column: 1 / -1;
-    justify-content: flex-start;
-  }
-  .head.tools:has(> .actions) .search {
-    max-width: none;
-  }
-}
-
-/* lists: filters above, rows load on scroll */
-.filters {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  flex-wrap: wrap;
-}
-.search {
-  position: relative;
-  display: block;
-}
-/* a tab's filter row sticks together with the tabs */
-.tab-body .filters {
-  position: sticky;
-  top: calc(56px + var(--head, 0px) + var(--tabs, 0px));
-  z-index: 8;
-  margin-block: -8px;
-  padding-block: 8px;
-  background: var(--bg);
-}
-.filters .search {
-  flex: 1 1 240px;
-  max-width: 360px;
-}
-.search .ic {
-  position: absolute;
-  left: 10px;
-  top: 50%;
-  transform: translateY(-50%);
-  color: var(--dim);
-  pointer-events: none;
-}
-label.search input[type="search"] {
-  padding-left: 32px;
-}
-.filters .select {
-  flex: none;
-}
-.filters .end {
-  margin-left: auto;
-}
-.vsearch .search {
-  width: min(280px, 100%);
-}
-
-@media (max-width: 760px) {
-  .head.tools {
-    grid-template-columns: minmax(0, 1fr) auto;
-    row-gap: 12px;
-  }
-  .head.tools > .filters {
-    grid-row: 3;
-    grid-column: 1 / -1;
-  }
-  .head.tools > .actions {
-    grid-column: 2;
-    width: auto;
-  }
-  .filters .search {
-    max-width: none;
-    flex-basis: 100%;
-  }
-  /* the filters share one row under the search, and only the search stays once the head sticks */
-  .filters .select {
-    flex: 1 1 0;
-  }
-  .filters .select > button {
-    gap: 4px;
-    padding-inline: 8px;
-  }
-  .head.tools.stuck > .filters > .select {
-    display: none;
-  }
-}
-
-/* the rarer filters sit behind one button; it lights up while any of them is set */
-.filter-more > .pop:popover-open {
-  display: block;
-  width: min(260px, calc(100vw - 32px));
-  max-height: calc(100vh - 160px);
-  overflow-y: auto;
-  padding: 6px;
-}
-.filter-more .pop-label:not(:first-child) {
-  margin-top: 10px;
-}
-.filter-more .pop-item {
-  width: 100%;
-  min-height: 30px;
-  font-size: 12px;
-}
-/* the filter menu's button, dressed like the selects beside it */
-.field-btn {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  min-height: 36px;
-  padding: 7px 12px;
-  border: 1px solid var(--line2);
-  background: var(--field);
-  white-space: nowrap;
-  cursor: pointer;
-}
-.field-btn:focus-visible,
-.field-btn:has(+ .pop:popover-open) {
-  outline: none;
-  border-color: var(--acc);
-  box-shadow: 0 0 0 3px var(--accbg);
-}
-.field-btn:disabled {
-  color: var(--muted);
-  cursor: default;
-}
-.filter-more > .field-btn.on {
-  color: var(--acc);
-}

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

@@ -1,93 +0,0 @@
-import './toolbar.css';
-import type { ComponentChildren } from 'preact';
-import { useEffect, useRef, useState } from 'preact/hooks';
-
-import { iSearch } from './icons';
-import { readQuery, writeQuery } from '@/utils/paged';
-import { Icon } from './icon';
-import { Sentinel } from './sentinel';
-
-/** The query string for a set of filters, empty ones left out. */
-export const queryOf = (values: Record<string, string>) =>
-  new URLSearchParams(Object.entries(values).filter(([, value]) => value)).toString();
-
-/** Filter values that live in the address bar; typing settles for a moment before it applies. */
-export function useFilters<K extends string>(initial: Record<K, string>) {
-  const [values, setValues] = useState(initial);
-  const [applied, setApplied] = useState(initial);
-  const timer = useRef<ReturnType<typeof setTimeout>>();
-  useEffect(() => {
-    const fromUrl = readQuery(Object.keys(initial)) as Record<K, string>;
-    if (Object.keys(initial).some(key => fromUrl[key as K] !== initial[key as K])) {
-      setValues(fromUrl);
-      setApplied(fromUrl);
-    }
-  }, []);
-  useEffect(() => () => clearTimeout(timer.current), []);
-  const set = (key: K, value: string, settle = 0) => {
-    const next = { ...values, [key]: value };
-    setValues(next);
-    clearTimeout(timer.current);
-    const apply = () => {
-      setApplied(next);
-      writeQuery(next);
-    };
-    if (settle) timer.current = setTimeout(apply, settle);
-    else apply();
-  };
-
-  return { values, set, query: queryOf(applied) };
-}
-
-export function Search({
-  value,
-  label,
-  onInput,
-}: {
-  value: string;
-  label: string;
-  onInput: (value: string) => void;
-}) {
-  return (
-    <label class="search">
-      <Icon d={iSearch} />
-      <input
-        type="search"
-        value={value}
-        placeholder={label}
-        aria-label={label}
-        onInput={event => onInput((event.currentTarget as HTMLInputElement).value)}
-      />
-    </label>
-  );
-}
-
-/** A list's search and filters with its primary action: one row in the page head, or its own row inside a tab. */
-export function Toolbar({
-  head,
-  action,
-  children,
-}: {
-  head?: { title: string; lead?: string };
-  action?: ComponentChildren;
-  children: ComponentChildren;
-}) {
-  return head ? (
-    <>
-      <Sentinel />
-      <header class="head tools">
-        <div>
-          <h1>{head.title}</h1>
-          {head.lead ? <p class="lead">{head.lead}</p> : null}
-        </div>
-        <div class="filters">{children}</div>
-        {action ? <div class="actions">{action}</div> : null}
-      </header>
-    </>
-  ) : (
-    <div class="filters">
-      {children}
-      {action ? <span class="end">{action}</span> : null}
-    </div>
-  );
-}

package/src/server/dash/package.json

@@ -1,5 +0,0 @@
-{
-  "name": "@wular/coder-dash",
-  "private": true,
-  "type": "module"
-}

package/src/server/dash/pnext-env.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="@wular/pnext" />
-/// <reference path="../../../dist/dash/types/pnext.gen.d.ts" />
-
-// This file is generated by PNext. Do not edit.

package/src/server/dash/pnext.config.ts

@@ -1,5 +0,0 @@
-export default {
-  outDir: '../../../dist/dash',
-  workspaceRoot: '../../..',
-  prefetch: 'intent',
-};

package/src/server/dash/public/assets/favicon.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><style>path{fill:#0a63c4}@media (prefers-color-scheme:dark){path{fill:#8fbcff}}</style><path d="M5 0h3v3h-3zM9 0h3v3h-3zM13 0h3v3h-3zM0 4h3v3h-3zM0 9h3v3h-3zM5 13h3v3h-3zM9 13h3v3h-3zM13 13h3v3h-3z"/></svg>

package/src/server/dash/public/assets/fonts/LICENSE-fira-code

@@ -1,93 +0,0 @@
-Copyright 2014-2020 The Fira Code Project Authors (https://github.com/tonsky/FiraCode)
-
-This Font Software is licensed under the SIL Open Font License, Version 1.1.
-This license is copied below, and is also available with a FAQ at:
-http://scripts.sil.org/OFL
-
-
------------------------------------------------------------
-SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
------------------------------------------------------------
-
-PREAMBLE
-The goals of the Open Font License (OFL) are to stimulate worldwide
-development of collaborative font projects, to support the font creation
-efforts of academic and linguistic communities, and to provide a free and
-open framework in which fonts may be shared and improved in partnership
-with others.
-
-The OFL allows the licensed fonts to be used, studied, modified and
-redistributed freely as long as they are not sold by themselves. The
-fonts, including any derivative works, can be bundled, embedded,
-redistributed and/or sold with any software provided that any reserved
-names are not used by derivative works. The fonts and derivatives,
-however, cannot be released under any other type of license. The
-requirement for fonts to remain under this license does not apply
-to any document created using the fonts or their derivatives.
-
-DEFINITIONS
-"Font Software" refers to the set of files released by the Copyright
-Holder(s) under this license and clearly marked as such. This may
-include source files, build scripts and documentation.
-
-"Reserved Font Name" refers to any names specified as such after the
-copyright statement(s).
-
-"Original Version" refers to the collection of Font Software components as
-distributed by the Copyright Holder(s).
-
-"Modified Version" refers to any derivative made by adding to, deleting,
-or substituting -- in part or in whole -- any of the components of the
-Original Version, by changing formats or by porting the Font Software to a
-new environment.
-
-"Author" refers to any designer, engineer, programmer, technical
-writer or other person who contributed to the Font Software.
-
-PERMISSION & CONDITIONS
-Permission is hereby granted, free of charge, to any person obtaining
-a copy of the Font Software, to use, study, copy, merge, embed, modify,
-redistribute, and sell modified and unmodified copies of the Font
-Software, subject to the following conditions:
-
-1) Neither the Font Software nor any of its individual components,
-in Original or Modified Versions, may be sold by itself.
-
-2) Original or Modified Versions of the Font Software may be bundled,
-redistributed and/or sold with any software, provided that each copy
-contains the above copyright notice and this license. These can be
-included either as stand-alone text files, human-readable headers or
-in the appropriate machine-readable metadata fields within text or
-binary files as long as those fields can be easily viewed by the user.
-
-3) No Modified Version of the Font Software may use the Reserved Font
-Name(s) unless explicit written permission is granted by the corresponding
-Copyright Holder. This restriction only applies to the primary font name as
-presented to the users.
-
-4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
-Software shall not be used to promote, endorse or advertise any
-Modified Version, except to acknowledge the contribution(s) of the
-Copyright Holder(s) and the Author(s) or with their explicit written
-permission.
-
-5) The Font Software, modified or unmodified, in part or in whole,
-must be distributed entirely under this license, and must not be
-distributed under any other license. The requirement for fonts to
-remain under this license does not apply to any document created
-using the Font Software.
-
-TERMINATION
-This license becomes null and void if any of the above conditions are
-not met.
-
-DISCLAIMER
-THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
-EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
-MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
-OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
-COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
-INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
-DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
-FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
-OTHER DEALINGS IN THE FONT SOFTWARE.

package/src/server/dash/tsconfig.json

@@ -1,10 +0,0 @@
-{
-  "extends": "@wular/pnext/config/ts/react.json",
-  "compilerOptions": {
-    "paths": {
-      "@/*": ["./*"],
-      "@coder/*": ["../../*"]
-    }
-  },
-  "include": ["**/*.ts", "**/*.tsx", "pnext-env.d.ts", "../../../dist/dash/types/**/*.ts"]
-}