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

package/dist/app-header.css

@@ -0,0 +1,288 @@
+/* AppHeader + ConnectedSettings styles for @wolffm/task-ui-components.
+ *
+ * All colors come from @wolffm/themes semantic tokens so the header themes with
+ * everything else. One import is all an app needs:
+ *   import '@wolffm/task-ui-components/app-header.css'
+ *
+ * This used to say "import alongside theme-picker.css", and that convention
+ * failed exactly the way conventions do. AppHeader renders the theme picker
+ * unconditionally now — it is not a prop — so an app that loads this file
+ * without the picker's gets the right component with none of its styling. The
+ * command station shipped like that after its old wrapper (the only importer of
+ * theme-picker.css on that site) was deleted: correct markup, no CSS.
+ *
+ * Pulling it in here makes the pair inseparable, which is the same reason the
+ * component itself stopped being a prop. */
+@import './theme-picker.css';
+
+/* ── Header layout ─────────────────────────────────────────────────────────
+ * Title left, action bar right, vertically centered. Full width of whatever
+ * column the app places it in. */
+.app-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding-bottom: 1rem;
+  margin-bottom: 1.5rem;
+  border-bottom: 1px solid var(--color-border);
+}
+
+/* Body text, NOT --color-primary. `primary` is a fill colour: sanctioned only
+ * under --color-on-primary. As bare text on --color-bg it clears the 3:1
+ * large-text floor in just 12 of 18 themes (izakaya-light 1.92, nature-light
+ * 2.15, ocean-light 2.28, lavender-light 2.53, pink-light 2.56,
+ * strawberry-light 2.61). --color-text clears it everywhere at 8.87–17.58.
+ * The brand accent lives in the border-bottom instead. */
+.app-header__title {
+  margin: 0;
+  color: var(--color-text);
+  font-size: var(--hdk-text-lg);
+  font-weight: 700;
+  line-height: 1.2;
+  /* A flex item floors at its min-content width, so without `min-width: 0` a
+   * long title pushed the actions off a 320px screen instead of giving way. */
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Never shrinks: the controls keep their 32px hit areas and the title is what
+ * gives way. 0.5rem is enough between icons — the round hit areas already
+ * space them visually. */
+.app-header__actions {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  gap: 0.5rem;
+}
+
+/* In the header the theme picker sits directly left of the settings gear, and
+ * the base ThemePicker opens its dropdown SIDEWAYS (which suits a vertical /
+ * sidebar placement). Here that would cover the gear — so scope it to drop
+ * straight DOWN, right-aligned, opening into the header away from the gear. */
+.app-header .theme-picker__dropdown,
+.app-header .theme-picker--open-left .theme-picker__dropdown {
+  top: calc(100% + 8px);
+  left: auto;
+  right: 0;
+}
+
+/* ── ConnectedSettings: gear toggle ────────────────────────────────────────
+ * The gear itself is a .app-header__icon-btn (icon-btn.css, via
+ * theme-picker.css), the same rules as the picker trigger beside it. */
+.settings-popout {
+  position: relative;
+  display: inline-flex;
+}
+
+/* Full-viewport click-catcher, same trick ThemePicker uses. */
+.settings-popout__overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 99;
+  background: transparent;
+}
+
+.settings-popout__panel {
+  position: absolute;
+  top: calc(100% + 8px);
+  right: 0;
+  z-index: 100;
+  /* These apps ship without a Tailwind preflight, so box-sizing is content-box
+   * unless a rule says otherwise: without this, `width: 300px` renders 334px
+   * (+32 padding +2 border) and `max-width` clamps the CONTENT box, leaving the
+   * popout 2px wider than a 320px viewport. */
+  box-sizing: border-box;
+  width: 300px;
+  max-width: calc(100vw - 32px);
+  /* Cap height so an app that adds its own preferences section stays on screen;
+   * the popout scrolls rather than overflowing the viewport. */
+  max-height: calc(100vh - 80px);
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  padding: 16px;
+  border-radius: 12px;
+  background: var(--color-bg-card);
+  border: 1px solid var(--color-border);
+  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
+  color: var(--color-text);
+}
+
+/* Divider above the optional app-specific settings section. */
+.settings-popout__app {
+  border-top: 1px solid var(--color-border);
+  padding-top: 12px;
+}
+
+.settings-popout__header {
+  font-weight: 600;
+  font-size: 0.95rem;
+  color: var(--color-text);
+}
+
+.settings-popout__row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
+.settings-popout__row--stack {
+  flex-direction: column;
+  align-items: stretch;
+  gap: 8px;
+}
+
+.settings-popout__label {
+  font-size: 0.8rem;
+  color: var(--color-text-secondary);
+}
+
+.settings-popout__value {
+  font-size: 0.85rem;
+  font-weight: 500;
+  color: var(--color-text);
+}
+
+/* Label + control pair on the right of a row. `min-width: 0` is load-bearing:
+ * as a flex item of __row it otherwise floors at its own min-content width, and
+ * that includes the input's default `size=20` intrinsic width (195px in Chrome).
+ * Pair + gap + Save came to 251.4px against a 300px row that also has to hold
+ * the label — so the name row overflowed the panel the moment Edit was clicked,
+ * and __panel's `overflow-y: auto` computes overflow-x to `auto`, turning that
+ * into a horizontal scrollbar rather than a clip. */
+.settings-popout__inline {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 6px;
+  /* Claim the row's free space rather than shrink-wrapping, so the input below
+   * has something to grow into now that its basis is 0. */
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.settings-popout__tier {
+  font-size: 0.78rem;
+  font-weight: 600;
+  padding: 2px 10px;
+  border-radius: 999px;
+  background: var(--color-bg-alt);
+  color: var(--color-text);
+  border: 1px solid var(--color-border);
+}
+.settings-popout__tier--admin {
+  background: var(--color-primary-bg);
+  color: var(--color-on-primary-bg);
+  border-color: var(--color-primary);
+}
+
+.settings-popout__input {
+  /* `1 1 0` + `width: 0`, not `1 1 auto`: the basis must not come from the
+   * input's `size`-derived intrinsic width, or the row cannot shrink below it. */
+  flex: 1 1 0;
+  width: 0;
+  min-width: 0;
+  box-sizing: border-box;
+  font-size: 0.85rem;
+  padding: 5px 8px;
+  border-radius: 7px;
+  border: 1px solid var(--color-border);
+  background: var(--color-bg);
+  color: var(--color-text);
+}
+.settings-popout__input:focus-visible {
+  outline: none;
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 2px var(--color-primary-bg);
+}
+
+.settings-popout__btn {
+  font-size: 0.78rem;
+  padding: 4px 10px;
+  border-radius: 7px;
+  border: 1px solid var(--color-border);
+  background: var(--color-bg);
+  color: var(--color-text);
+  cursor: pointer;
+  white-space: nowrap;
+  text-decoration: none;
+  transition:
+    background-color 0.15s ease,
+    border-color 0.15s ease;
+}
+.settings-popout__btn:hover:not(:disabled) {
+  background: var(--color-bg-alt);
+}
+.settings-popout__btn--primary {
+  background: var(--color-primary);
+  border-color: var(--color-primary);
+  color: var(--color-on-primary);
+}
+.settings-popout__btn--primary:hover:not(:disabled) {
+  background: var(--color-primary-dark);
+}
+.settings-popout__btn:disabled {
+  opacity: 0.6;
+  cursor: default;
+}
+
+/* Content pill — a chunked "volume slider": segments 1..maxLevel, everything
+ * up to and including the selected level reads as filled. */
+.settings-popout__pill {
+  display: flex;
+  gap: 3px;
+  width: 100%;
+}
+.settings-popout__seg {
+  flex: 1 1 0;
+  padding: 7px 0;
+  font-size: 0.8rem;
+  font-weight: 600;
+  border: 1px solid var(--color-border);
+  background: var(--color-bg-alt);
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  transition:
+    background-color 0.12s ease,
+    color 0.12s ease;
+}
+.settings-popout__seg:first-child {
+  border-radius: 8px 0 0 8px;
+}
+.settings-popout__seg:last-child {
+  border-radius: 0 8px 8px 0;
+}
+.settings-popout__seg--filled {
+  background: var(--color-primary);
+  border-color: var(--color-primary);
+  color: var(--color-on-primary);
+}
+.settings-popout__seg:disabled {
+  cursor: default;
+}
+
+/* Inline sign-in: label above, input + submit on one line, error below. */
+.settings-popout__key-form {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  width: 100%;
+}
+.settings-popout__error {
+  font-size: 0.75rem;
+  line-height: 1.35;
+  padding: 4px 8px;
+  border-radius: 6px;
+  background: var(--color-danger-bg);
+  color: var(--color-on-danger-bg);
+}
+
+.settings-popout__hint {
+  font-size: 0.72rem;
+  line-height: 1.35;
+  color: var(--color-text-tertiary);
+}

package/dist/bento.css

@@ -0,0 +1,143 @@
+/**
+ * Bento Component Styles
+ * Styles for BentoGrid and BentoCard
+ */
+
+/* ===== BENTO GRID ===== */
+.bento-grid {
+  display: grid;
+  gap: var(--bento-gap, 1rem);
+  padding: 1rem;
+  width: 100%;
+  max-width: var(--bento-max-width, 1400px);
+  margin: 0 auto;
+
+  /* Mobile first: single column */
+  grid-template-columns: 1fr;
+  grid-auto-rows: minmax(120px, auto);
+}
+
+/* Small tablets: 2 columns */
+@media (min-width: 640px) {
+  .bento-grid {
+    grid-template-columns: repeat(var(--bento-cols-sm, 2), 1fr);
+    gap: calc(var(--bento-gap, 1rem) * 1.25);
+    padding: 1.5rem;
+  }
+}
+
+/* Tablets: 3 columns */
+@media (min-width: 768px) {
+  .bento-grid {
+    grid-template-columns: repeat(var(--bento-cols-md, 3), 1fr);
+  }
+}
+
+/* Desktop: 4 columns */
+@media (min-width: 1024px) {
+  .bento-grid {
+    grid-template-columns: repeat(var(--bento-cols-lg, 4), 1fr);
+    gap: calc(var(--bento-gap, 1rem) * 1.5);
+    padding: 2rem;
+  }
+}
+
+/* Large desktop: 6 columns */
+@media (min-width: 1400px) {
+  .bento-grid {
+    grid-template-columns: repeat(var(--bento-cols-xl, 6), 1fr);
+  }
+}
+
+/* ===== BENTO CARD ===== */
+.bento-card {
+  position: relative;
+  overflow: hidden;
+  border-radius: var(--hdk-radius-lg);
+  background: var(--color-bg-card);
+  border: 1px solid var(--color-border-light);
+  box-shadow: var(--hdk-shadow-md);
+  transition:
+    transform var(--transition-fast, 0.15s) ease,
+    box-shadow var(--transition-fast, 0.15s) ease;
+
+  /* GPU acceleration for smooth animations */
+  transform: translateZ(0);
+  backface-visibility: hidden;
+}
+
+.bento-card[role='button'] {
+  cursor: pointer;
+}
+
+.bento-card[role='button']:hover:not(.bento-card--disabled) {
+  transform: scale(1.02) translateZ(0);
+  box-shadow: var(--hdk-shadow-lg);
+}
+
+.bento-card[role='button']:active:not(.bento-card--disabled) {
+  transform: scale(0.98) translateZ(0);
+}
+
+.bento-card:focus-visible {
+  outline: none;
+  box-shadow: var(--hdk-shadow-focus), var(--hdk-shadow-md);
+}
+
+/* Card Sizes */
+.bento-card--default {
+  grid-column: span 1;
+  grid-row: span 1;
+}
+
+.bento-card--wide {
+  grid-column: span 1;
+}
+
+@media (min-width: 640px) {
+  .bento-card--wide {
+    grid-column: span 2;
+  }
+}
+
+.bento-card--tall {
+  grid-row: span 2;
+}
+
+.bento-card--large {
+  grid-column: span 1;
+  grid-row: span 1;
+}
+
+@media (min-width: 640px) {
+  .bento-card--large {
+    grid-column: span 2;
+    grid-row: span 2;
+  }
+}
+
+.bento-card--hero {
+  grid-column: 1 / -1;
+}
+
+@media (min-width: 768px) {
+  .bento-card--hero {
+    grid-column: span 3;
+  }
+}
+
+/* Disabled State (preloading) */
+.bento-card--disabled {
+  pointer-events: none;
+  opacity: 0.85;
+}
+
+/* Respect reduced motion preference */
+@media (prefers-reduced-motion: reduce) {
+  .bento-card,
+  .bento-card[role='button']:hover:not(.bento-card--disabled),
+  .bento-card[role='button']:active:not(.bento-card--disabled) {
+    transform: none;
+    transition: none;
+  }
+}

package/dist/button.css

@@ -0,0 +1,227 @@
+/* Button styles for @wolffm/task-ui-components.
+ *
+ *   import '@wolffm/task-ui-components/button.css'
+ *
+ * Each family modifier maps its six theme tokens onto private `--_btn-*`
+ * properties, and each variant paints from those. That keeps the matrix at
+ * 5 + 5 rules instead of 25, and every pairing below is a sanctioned one:
+ * `on-<f>` over `<f>`, `on-<f>-bg` over `<f>-bg` (THEME_USAGE_GUIDE.md).
+ */
+
+.hdk-btn {
+  --_btn-c: var(--color-primary);
+  --_btn-c-dark: var(--color-primary-dark);
+  --_btn-on: var(--color-on-primary);
+  --_btn-tint: var(--color-primary-bg);
+  --_btn-on-tint: var(--color-on-primary-bg);
+  --_btn-hover: var(--color-primary-hover);
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  font: inherit;
+  font-weight: var(--font-weight-semibold);
+  line-height: 1.2;
+  white-space: nowrap;
+  border: 1px solid transparent;
+  border-radius: var(--hdk-radius);
+  cursor: pointer;
+  user-select: none;
+  transition:
+    background-color var(--transition-fast),
+    border-color var(--transition-fast),
+    color var(--transition-fast),
+    box-shadow var(--transition-fast),
+    transform var(--transition-fast);
+}
+
+.hdk-btn:focus-visible {
+  outline: none;
+  box-shadow: var(--hdk-shadow-focus);
+}
+
+.hdk-btn:active:not(:disabled) {
+  transform: translateY(1px);
+}
+
+.hdk-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* A loading button is disabled for clicks but is not "unavailable", so it
+ * keeps full opacity — the spinner is the signal. */
+.hdk-btn--loading:disabled {
+  opacity: 1;
+  cursor: progress;
+}
+
+/* ── families ─────────────────────────────────────────────────────────── */
+
+.hdk-btn--success {
+  --_btn-c: var(--color-success);
+  --_btn-c-dark: var(--color-success-dark);
+  --_btn-on: var(--color-on-success);
+  --_btn-tint: var(--color-success-bg);
+  --_btn-on-tint: var(--color-on-success-bg);
+  --_btn-hover: var(--color-success-hover);
+}
+
+.hdk-btn--warning {
+  --_btn-c: var(--color-warning);
+  --_btn-c-dark: var(--color-warning-dark);
+  --_btn-on: var(--color-on-warning);
+  --_btn-tint: var(--color-warning-bg);
+  --_btn-on-tint: var(--color-on-warning-bg);
+  --_btn-hover: var(--color-warning-hover);
+}
+
+.hdk-btn--danger {
+  --_btn-c: var(--color-danger);
+  --_btn-c-dark: var(--color-danger-dark);
+  --_btn-on: var(--color-on-danger);
+  --_btn-tint: var(--color-danger-bg);
+  --_btn-on-tint: var(--color-on-danger-bg);
+  --_btn-hover: var(--color-danger-hover);
+}
+
+.hdk-btn--neutral {
+  --_btn-c: var(--color-neutral);
+  --_btn-c-dark: var(--color-neutral-dark);
+  --_btn-on: var(--color-on-neutral);
+  --_btn-tint: var(--color-neutral-bg);
+  --_btn-on-tint: var(--color-on-neutral-bg);
+  --_btn-hover: var(--color-neutral-hover);
+}
+
+/* ── variants ─────────────────────────────────────────────────────────── */
+
+.hdk-btn--solid {
+  background-color: var(--_btn-c);
+  color: var(--_btn-on);
+}
+
+.hdk-btn--solid:hover:not(:disabled) {
+  background-color: var(--_btn-c-dark);
+}
+
+/* The task app's own `.pill-btn--active` look, as a reusable treatment. */
+.hdk-btn--gradient {
+  background: linear-gradient(180deg, var(--_btn-c) 0%, var(--_btn-c-dark) 100%);
+  color: var(--_btn-on);
+  box-shadow: var(--hdk-shadow-sm);
+}
+
+.hdk-btn--gradient:hover:not(:disabled) {
+  box-shadow: var(--hdk-shadow-md);
+}
+
+.hdk-btn--soft {
+  background-color: var(--_btn-tint);
+  color: var(--_btn-on-tint);
+}
+
+.hdk-btn--soft:hover:not(:disabled) {
+  border-color: var(--_btn-c);
+}
+
+.hdk-btn--outline {
+  background-color: transparent;
+  border-color: var(--_btn-c);
+  color: var(--color-text);
+}
+
+.hdk-btn--outline:hover:not(:disabled) {
+  background-color: var(--_btn-tint);
+  color: var(--_btn-on-tint);
+}
+
+.hdk-btn--ghost {
+  background-color: transparent;
+  color: var(--color-text-secondary);
+}
+
+.hdk-btn--ghost:hover:not(:disabled) {
+  background-color: var(--_btn-tint);
+  color: var(--_btn-on-tint);
+}
+
+/* ── sizes ────────────────────────────────────────────────────────────── */
+
+.hdk-btn--sm {
+  font-size: var(--hdk-text-xs);
+  padding: 4px 10px;
+  min-height: 28px;
+}
+
+.hdk-btn--md {
+  font-size: var(--hdk-text-sm);
+  padding: 7px 14px;
+  min-height: 34px;
+}
+
+.hdk-btn--lg {
+  font-size: var(--hdk-text-base);
+  padding: 10px 18px;
+  min-height: 42px;
+}
+
+.hdk-btn--icon-only {
+  padding: 0;
+  aspect-ratio: 1;
+}
+
+.hdk-btn--icon-only.hdk-btn--sm {
+  width: 28px;
+}
+
+.hdk-btn--icon-only.hdk-btn--md {
+  width: 34px;
+}
+
+.hdk-btn--icon-only.hdk-btn--lg {
+  width: 42px;
+}
+
+/* ── shapes ───────────────────────────────────────────────────────────── */
+
+.hdk-btn--pill {
+  border-radius: 999px;
+}
+
+.hdk-btn--square {
+  border-radius: var(--hdk-radius-sm);
+}
+
+.hdk-btn--block {
+  display: flex;
+  width: 100%;
+}
+
+/* ── loading ──────────────────────────────────────────────────────────── */
+
+.hdk-btn__spinner {
+  width: 1em;
+  height: 1em;
+  border: 2px solid currentColor;
+  border-right-color: transparent;
+  border-radius: 50%;
+  animation: hdk-btn-spin 0.7s linear infinite;
+}
+
+@keyframes hdk-btn-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .hdk-btn__spinner {
+    animation-duration: 2s;
+  }
+
+  .hdk-btn:active:not(:disabled) {
+    transform: none;
+  }
+}

package/dist/components/AppHeader.d.ts

@@ -0,0 +1,61 @@
+/**
+ * AppHeader — the ecosystem-standard top bar for every hadoku.me app.
+ *
+ * Enforces the shared contract so child apps stop drifting:
+ *   [ title (left) ] ————— <space> ————— [ status? · ThemePicker · Settings gear ] (right)
+ *
+ * Everything BELOW the header is the app's own concern. The header owns the
+ * title, and it OWNS both right-hand controls outright — it renders the theme
+ * picker and the settings gear itself. Neither is a prop.
+ *
+ * WHY THEY ARE NOT PROPS ANY MORE
+ * -------------------------------
+ * `themePicker?: React.ReactNode` was an open hole: a slot that accepts a node
+ * accepts ANY node, so "every app uses the same picker" was a convention, and
+ * conventions drift. They did — one app passed a raw `<ThemePicker>` with its
+ * own `isOpen` state and a debug logger wired into `getThemeIcon`, and eight
+ * apps each kept a hand-copied `useTheme` hook to feed it. Those copies had
+ * already diverged on real behaviour (only one wrote `localStorage`, so the
+ * rest lost the theme on browser restart and flashed a default on next paint).
+ *
+ * The control is now rendered here, from `useHadokuTheme()`. An app cannot
+ * substitute, restyle or omit it. What an app CAN do is inject its own
+ * preferences — see `children`.
+ *
+ * @example
+ * ```tsx
+ * import { AppHeader } from '@wolffm/task-ui-components'
+ * import { HadokuThemeRoot } from '@wolffm/themes'
+ *
+ * // once, at the app root:
+ * <HadokuThemeRoot>
+ *   <AppHeader title="Print Tool" status={<ApiStatus status={apiStatus} />}>
+ *     <MyAppPreferences />   // optional: appended AFTER the canonical rows
+ *   </AppHeader>
+ * </HadokuThemeRoot>
+ * ```
+ */
+import React from 'react';
+import { type ConnectedSettingsProps } from './ConnectedSettings';
+export interface AppHeaderProps {
+    /** Left-aligned header title. A string is wrapped in an <h1>; pass a node for
+     *  custom markup (e.g. a clickable title button). */
+    title: React.ReactNode;
+    /** Optional status/extra node shown left of the theme + settings controls
+     *  (e.g. an "API Online" indicator). Acceptable per the header contract. */
+    status?: React.ReactNode;
+    /** Identity hints for the settings popout. Narrow on purpose: `userType` and
+     *  `name` exist because an app behind a path-prefixed shim may not be able to
+     *  reach `/session/whoami` (conjure), NOT as a styling or layout hook. */
+    settingsProps?: ConnectedSettingsProps;
+    /** THE app-specific extension point. Rendered inside the settings popout as a
+     *  final section, under the four canonical rows. Put your app's own
+     *  preferences here — checkboxes, selects, whatever it needs; this slot is
+     *  deliberately unconstrained. What it cannot do is alter the rows above it. */
+    children?: React.ReactNode;
+    /** Extra class on the <header> root. Layout only — it cannot reach the
+     *  controls, which own their own markup. */
+    className?: string;
+}
+export declare function AppHeader({ title, status, settingsProps, children, className }: AppHeaderProps): React.JSX.Element;
+//# sourceMappingURL=AppHeader.d.ts.map