@hadoku/task-ui-components 0.0.0-stage → 4.20.4

package/src/lib/tooltipPlacement.ts

@@ -0,0 +1,59 @@
+/**
+ * Where a tooltip bubble goes, shared by <Tooltip> and installTitleTooltips so
+ * the React and framework-free bubbles sit, flip and clamp identically.
+ */
+
+export type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right'
+
+export interface Placed {
+  side: TooltipPlacement
+  left: number
+  top: number
+  /** Arrow offset along the bubble edge, so it still points at the anchor after clamping. */
+  arrow: number
+}
+
+const GAP = 8
+const EDGE = 8
+
+const OPPOSITE: Record<TooltipPlacement, TooltipPlacement> = {
+  top: 'bottom',
+  bottom: 'top',
+  left: 'right',
+  right: 'left'
+}
+
+function fits(side: TooltipPlacement, a: DOMRect, w: number, h: number) {
+  if (side === 'top') return a.top - GAP - h >= EDGE
+  if (side === 'bottom') return a.bottom + GAP + h <= window.innerHeight - EDGE
+  if (side === 'left') return a.left - GAP - w >= EDGE
+  return a.right + GAP + w <= window.innerWidth - EDGE
+}
+
+/** Onto the device-pixel grid. A bubble at a fractional offset draws its 1px
+ *  border antialiased across two rows of the screen — a blurred edge. */
+function snap(v: number) {
+  const dpr = window.devicePixelRatio || 1
+  return Math.round(v * dpr) / dpr
+}
+
+export function placeTooltip(
+  preferred: TooltipPlacement,
+  a: DOMRect,
+  w: number,
+  h: number
+): Placed {
+  const side =
+    fits(preferred, a, w, h) || !fits(OPPOSITE[preferred], a, w, h)
+      ? preferred
+      : OPPOSITE[preferred]
+  const clamp = (v: number, max: number) => Math.min(Math.max(v, EDGE), max - EDGE)
+  if (side === 'top' || side === 'bottom') {
+    const left = snap(clamp(a.left + a.width / 2 - w / 2, window.innerWidth - w))
+    const top = snap(side === 'top' ? a.top - GAP - h : a.bottom + GAP)
+    return { side, left, top, arrow: a.left + a.width / 2 - left }
+  }
+  const top = snap(clamp(a.top + a.height / 2 - h / 2, window.innerHeight - h))
+  const left = snap(side === 'left' ? a.left - GAP - w : a.right + GAP)
+  return { side, left, top, arrow: a.top + a.height / 2 - top }
+}

package/src/modal.css

@@ -0,0 +1,129 @@
+/* Modal styles for @wolffm/task-ui-components.
+ *
+ * The component shipped without these, which is why it had one adopter: every
+ * other app hand-rolled a dialog rather than reproduce the stylesheet. Import
+ * alongside the other component CSS:
+ *   import '@wolffm/task-ui-components/modal.css'
+ *
+ * Tokens only, so it themes with everything else across all 18 themes.
+ */
+
+.modal-overlay {
+  position: fixed;
+  inset: 0;
+  background-color: var(--color-bg-overlay);
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding: 8vh 16px;
+  z-index: 50;
+}
+
+.modal-card {
+  background-color: var(--color-bg-card);
+  color: var(--color-text);
+  border: 1px solid var(--color-border);
+  border-radius: var(--hdk-radius-lg);
+  padding: 20px;
+  width: min(440px, 92vw);
+  max-height: 84vh;
+  overflow: auto;
+  box-shadow: var(--hdk-shadow-lg);
+}
+
+/* The card takes focus on open so Escape works before anything inside is
+ * focused; it must not draw a focus ring for that. Controls keep theirs. */
+.modal-card:focus {
+  outline: none;
+}
+
+/* A dialog that needs room — a review step, a side-by-side. */
+.modal-card--wide {
+  width: min(680px, 94vw);
+}
+
+.modal-head {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin: 0 0 14px;
+}
+
+.modal-card h3 {
+  margin: 0;
+  font-size: var(--hdk-text-lg);
+  font-weight: 600;
+}
+
+.modal-card label {
+  display: block;
+  color: var(--color-text-secondary);
+  font-size: var(--hdk-text-sm);
+  margin: 12px 0 5px;
+}
+
+.modal-input {
+  width: 100%;
+  font: inherit;
+  font-size: var(--hdk-text-sm);
+  color: var(--color-text);
+  background-color: var(--color-bg-alt);
+  border: 1px solid var(--color-border);
+  border-radius: var(--hdk-radius);
+  padding: 9px 11px;
+}
+
+.modal-input:focus {
+  outline: none;
+  border-color: var(--color-primary);
+}
+
+.modal-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--hdk-space-sm);
+  margin-top: 18px;
+}
+
+.modal-button {
+  font: inherit;
+  font-size: var(--hdk-text-sm);
+  padding: 8px 14px;
+  border-radius: var(--hdk-radius);
+  border: 1px solid var(--color-border);
+  background: none;
+  color: var(--color-text);
+  cursor: pointer;
+}
+
+.modal-button:hover:not(:disabled) {
+  border-color: var(--color-primary);
+}
+
+.modal-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.modal-button--primary {
+  background-color: var(--color-primary);
+  border-color: var(--color-primary);
+  color: var(--color-on-primary);
+}
+
+/* The destructive button carries its accent on the border, not the label.
+ * `--color-danger` as bare text on the card misses AA in 11 of 18 themes —
+ * the same unvalidated accent-over-surface pair that check-usage now gates. */
+.modal-button--danger {
+  border-color: var(--color-danger);
+  color: var(--color-text);
+}
+
+/* Filled on hover, so the label takes `on-danger` — NOT `on-primary`, which is
+ * derived from primary's luminance and misses AA on a danger fill in 9 of 18
+ * themes. `on-danger` over `danger` is the pair check-contrast guarantees. */
+.modal-button--danger:hover:not(:disabled) {
+  background-color: var(--color-danger);
+  border-color: var(--color-danger);
+  color: var(--color-on-danger);
+}

package/src/number-input.css

@@ -0,0 +1,131 @@
+/* NumberInput styles for @wolffm/task-ui-components.
+ *
+ *   import '@wolffm/task-ui-components/number-input.css'
+ *
+ * One bordered box holding the field and a stacked up/down stepper, so the
+ * focus ring and the border belong to the whole control, as on <Select>.
+ */
+
+.hdk-number {
+  display: inline-flex;
+  align-items: stretch;
+  min-width: 0;
+  vertical-align: middle;
+  color: var(--color-text);
+  background-color: var(--color-bg-card);
+  border: 1px solid var(--color-border);
+  border-radius: var(--hdk-radius);
+  overflow: hidden;
+  transition:
+    border-color var(--transition-fast),
+    box-shadow var(--transition-fast);
+}
+
+.hdk-number:hover:not(.hdk-number--disabled) {
+  border-color: var(--color-text-muted);
+}
+
+.hdk-number:focus-within {
+  border-color: var(--color-primary);
+  box-shadow: var(--hdk-shadow-focus-sm);
+}
+
+.hdk-number--disabled {
+  opacity: 0.5;
+}
+
+.hdk-number__input {
+  flex: 1;
+  width: 100%;
+  min-width: 0;
+  font: inherit;
+  color: inherit;
+  background: transparent;
+  border: 0;
+  appearance: textfield;
+}
+
+.hdk-number__input:focus {
+  outline: none;
+}
+
+.hdk-number__input::-webkit-inner-spin-button,
+.hdk-number__input::-webkit-outer-spin-button {
+  appearance: none;
+  margin: 0;
+}
+
+.hdk-number__steps {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  border-left: 1px solid var(--color-border);
+}
+
+.hdk-number__step {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  color: var(--color-text-secondary);
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+  transition:
+    background-color var(--transition-fast),
+    color var(--transition-fast);
+}
+
+.hdk-number__step + .hdk-number__step {
+  border-top: 1px solid var(--color-border);
+}
+
+.hdk-number__step:hover:not(:disabled) {
+  color: var(--color-on-primary-bg);
+  background-color: var(--color-primary-bg);
+}
+
+.hdk-number__step:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.hdk-number--sm {
+  font-size: var(--hdk-text-xs);
+  min-height: 28px;
+}
+
+.hdk-number--sm .hdk-number__input {
+  padding: 4px 8px;
+}
+
+.hdk-number--sm .hdk-number__step {
+  width: 18px;
+}
+
+.hdk-number--md {
+  font-size: var(--hdk-text-sm);
+  min-height: 34px;
+}
+
+.hdk-number--md .hdk-number__input {
+  padding: 7px 10px;
+}
+
+.hdk-number--md .hdk-number__step {
+  width: 22px;
+}
+
+.hdk-number--lg {
+  font-size: var(--hdk-text-base);
+  min-height: 42px;
+}
+
+.hdk-number--lg .hdk-number__input {
+  padding: 10px 12px;
+}
+
+.hdk-number--lg .hdk-number__step {
+  width: 26px;
+}

package/src/scrollbar.css

@@ -0,0 +1,165 @@
+/* Themed scrollbars for @wolffm/task-ui-components.
+ *
+ * Without this, every scroller renders the platform's bar: a grey Windows
+ * gutter on a coffee or cyberpunk surface. `color-scheme` (set per theme in
+ * @wolffm/themes) only gets the bar to the right light/dark mode, not the
+ * theme's colours.
+ *
+ *   import '@wolffm/task-ui-components/scrollbar.css'
+ *   <div className="task-app-container hdk-scroll">…</div>
+ *
+ * `.hdk-scroll` styles the element it is on AND every scroller inside it, so
+ * one class on an app's root covers the whole app — hadoku_site puts it on
+ * <html>, which covers every micro-frontend at once. The thumb is the theme's
+ * primary colour.
+ *
+ * Every selector is wrapped in `:where()`, so all of this has ZERO
+ * specificity: it is a fallback for scrollers nobody styled. Any rule an app
+ * writes for a scroller — `scrollbar-width: none` on a carousel, its own
+ * `::-webkit-scrollbar` thumb — wins, whatever order the sheets load in.
+ * Modifiers sit on the same element:
+ *
+ *   --subtle    neutral thumb instead of the accent
+ *   --thin      narrower bar (WebKit/Chromium only; see Firefox below)
+ *   --rail      visible track, so the scroll extent reads at a glance
+ *   --autohide  thumb appears only while that scroller is hovered or focused
+ *
+ * The colours are declared on EVERY element under the root (`.hdk-scroll *`),
+ * not once on it. A custom property inherits its RESOLVED value, so a thumb
+ * colour set only on the root would carry the root's theme down into a nested
+ * `[data-theme]` scope: a cyberpunk preview inside a coffee app would scroll
+ * with coffee's accent. Declared per element, each scroller resolves the
+ * tokens of the theme it actually sits in. Sizes are theme-independent and
+ * simply inherit.
+ *
+ * Two engines, two mechanisms. Firefox only knows the standard
+ * `scrollbar-color`/`scrollbar-width`, and only ever gets `auto` width —
+ * `--thin` included. Under overlay scrollbars (GTK's default on Linux)
+ * `thin` draws the idle thumb as a ~1px hairline that antialiases
+ * unevenly along its length and only widens on hover; `auto` idles at a solid
+ * 2px and hovers at 6px, and with classic scrollbars it is a 6px thumb, the
+ * same as the WebKit default below. Chromium and Safari support the
+ * `::-webkit-scrollbar` pseudo-elements, which are the only way to get a
+ * rounded, inset thumb — but Chromium 121+ IGNORES them whenever
+ * `scrollbar-color` or `scrollbar-width` is non-auto, and `scrollbar-color`
+ * inherits. So the WebKit branch resets both to `auto`, or a host page that
+ * sets `scrollbar-color` on <html> would silently switch all of this off.
+ *
+ * Everything sits in `@layer hdk-fallbacks`. A rule in a cascade layer loses
+ * to every unlayered rule and to every layer declared after it — whatever
+ * either's specificity — and Tailwind ships its utilities in layers. Unlayered,
+ * even a zero-specificity rule here would beat `bg-primary`. The page must
+ * declare the layer FIRST, before any other, so it ranks lowest:
+ *
+ *   @layer hdk-fallbacks, base, theme, utilities;
+ *
+ * hadoku_site's global.css does that. A sheet that never names it just gets
+ * these rules below its own unlayered ones, which is also correct.
+ */
+
+@layer hdk-fallbacks {
+  :where(.hdk-scroll) {
+    --hdk-scrollbar-size: 10px;
+    --hdk-scrollbar-pad: 2px;
+  }
+
+  :where(.hdk-scroll),
+  :where(.hdk-scroll *) {
+    --hdk-scrollbar-thumb: var(--color-primary);
+    --hdk-scrollbar-thumb-hover: var(--color-primary-dark);
+    --hdk-scrollbar-track: transparent;
+  }
+
+  :where(.hdk-scroll--thin) {
+    --hdk-scrollbar-size: 6px;
+    --hdk-scrollbar-pad: 1px;
+  }
+
+  :where(.hdk-scroll--subtle),
+  :where(.hdk-scroll--subtle *) {
+    --hdk-scrollbar-thumb: var(--color-border);
+    --hdk-scrollbar-thumb-hover: var(--color-text-muted);
+  }
+
+  :where(.hdk-scroll--rail) {
+    --hdk-scrollbar-size: 12px;
+    --hdk-scrollbar-pad: 3px;
+  }
+
+  :where(.hdk-scroll--rail),
+  :where(.hdk-scroll--rail *) {
+    --hdk-scrollbar-track: var(--color-bg-hover);
+  }
+
+  :where(.hdk-scroll--autohide),
+  :where(.hdk-scroll--autohide *) {
+    --hdk-scrollbar-thumb: transparent;
+  }
+
+  /* On the hovered/focused element itself, so only that scroller's thumb shows —
+   * not every scroller inside an autohide root at once. */
+  :where(.hdk-scroll--autohide:hover),
+  :where(.hdk-scroll--autohide:focus-within),
+  :where(.hdk-scroll--autohide :hover),
+  :where(.hdk-scroll--autohide :focus-within) {
+    --hdk-scrollbar-thumb: var(--color-primary);
+  }
+
+  @supports not selector(::-webkit-scrollbar) {
+    :where(.hdk-scroll),
+    :where(.hdk-scroll *) {
+      scrollbar-width: auto;
+      scrollbar-color: var(--hdk-scrollbar-thumb) var(--hdk-scrollbar-track);
+    }
+  }
+
+  @supports selector(::-webkit-scrollbar) {
+    :where(.hdk-scroll),
+    :where(.hdk-scroll *) {
+      scrollbar-width: auto;
+      scrollbar-color: auto;
+    }
+
+    :where(.hdk-scroll)::-webkit-scrollbar,
+    :where(.hdk-scroll *)::-webkit-scrollbar {
+      width: var(--hdk-scrollbar-size);
+      height: var(--hdk-scrollbar-size);
+      background-color: var(--hdk-scrollbar-track);
+    }
+
+    :where(.hdk-scroll)::-webkit-scrollbar-track,
+    :where(.hdk-scroll *)::-webkit-scrollbar-track {
+      background-color: var(--hdk-scrollbar-track);
+      border-radius: 999px;
+    }
+
+    /* The transparent border plus padding-box clip is what insets the thumb
+     * from the track edge — a margin does nothing on a scrollbar part. */
+    :where(.hdk-scroll)::-webkit-scrollbar-thumb,
+    :where(.hdk-scroll *)::-webkit-scrollbar-thumb {
+      background-color: var(--hdk-scrollbar-thumb);
+      background-clip: padding-box;
+      border: var(--hdk-scrollbar-pad) solid transparent;
+      border-radius: 999px;
+      min-height: 32px;
+      min-width: 32px;
+    }
+
+    :where(.hdk-scroll)::-webkit-scrollbar-thumb:hover,
+    :where(.hdk-scroll *)::-webkit-scrollbar-thumb:hover,
+    :where(.hdk-scroll)::-webkit-scrollbar-thumb:active,
+    :where(.hdk-scroll *)::-webkit-scrollbar-thumb:active {
+      background-color: var(--hdk-scrollbar-thumb-hover);
+    }
+
+    :where(.hdk-scroll)::-webkit-scrollbar-corner,
+    :where(.hdk-scroll *)::-webkit-scrollbar-corner {
+      background-color: transparent;
+    }
+
+    :where(.hdk-scroll)::-webkit-scrollbar-button,
+    :where(.hdk-scroll *)::-webkit-scrollbar-button {
+      display: none;
+    }
+  }
+}