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

package/dist/controls.css

@@ -0,0 +1,137 @@
+/* Themed fallbacks for the browser's own control styling, for
+ * @wolffm/task-ui-components.
+ *
+ *   import '@wolffm/task-ui-components/controls.css'
+ *   <html class="hdk-controls">
+ *
+ * hadoku_site puts `hdk-controls` on <html>, which covers every
+ * micro-frontend. Every selector is wrapped in `:where()`, so all of it has
+ * ZERO specificity: it only fills in where an app styled nothing. An app's
+ * own rule for the same property — any selector at all — wins, whatever order
+ * the sheets load in. An author rule of any specificity still beats the
+ * browser's stylesheet, which is all this needs to.
+ *
+ * What it covers, each the browser default it replaces:
+ *   - focus ring        Chrome's two-tone `outline: auto`  -> the accent
+ *   - links             -webkit-link blue / visited purple -> the text around it
+ *   - checkbox, radio, range, progress  system blue        -> accent-color
+ *   - text selection    system highlight                   -> the accent tint
+ *   - placeholder       darkgray                           -> tertiary text
+ *   - <summary> marker  text-colour triangle               -> secondary text
+ *   - file picker       OS "Choose file" button            -> a soft button
+ *   - number spinners   OS up/down arrows                  -> removed (arrow keys
+ *                       still step; <NumberInput> is the themed stepper)
+ *   - text fields and textarea, buttons, a select's closed box: the system
+ *     field/button chrome -> the theme's card surface and border
+ *
+ * The open list of a <select> is not CSS-reachable at all; installSelectMenus()
+ * replaces it. Date and time pickers stay OS-drawn: apps own those.
+ *
+ * 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 {
+  /* accent-color inherits, so it is declared once per theme scope rather than
+   * per element: an app's accent-color on a container still reaches its
+   * children, and a nested [data-theme] still resolves its own accent. */
+  :where(.hdk-controls),
+  :where(.hdk-controls [data-theme]) {
+    accent-color: var(--color-primary);
+  }
+
+  :where(.hdk-controls) :where(:focus-visible) {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+  }
+
+  /* The browser colours a link directly rather than letting it inherit, so a
+   * link nobody styled is blue on any surface. `inherit` is what an app means
+   * when it styles the surface and not the link (Tailwind's preflight does the
+   * same); the underline keeps it reading as a link. */
+  :where(.hdk-controls) :where(a:any-link) {
+    color: inherit;
+  }
+
+  :where(.hdk-controls) ::selection {
+    background-color: var(--color-primary-bg);
+    color: var(--color-on-primary-bg);
+  }
+
+  :where(.hdk-controls) ::placeholder {
+    color: var(--color-text-tertiary);
+    opacity: 1;
+  }
+
+  :where(.hdk-controls) :where(summary)::marker {
+    color: var(--color-text-secondary);
+  }
+
+  :where(.hdk-controls) :where(input[type='file'])::file-selector-button {
+    margin-inline-end: 8px;
+    padding: 4px 10px;
+    font: inherit;
+    font-weight: var(--font-weight-semibold);
+    color: var(--color-on-neutral-bg);
+    background-color: var(--color-neutral-bg);
+    border: 1px solid transparent;
+    border-radius: var(--hdk-radius);
+    cursor: pointer;
+  }
+
+  :where(.hdk-controls) :where(input[type='file'])::file-selector-button:hover {
+    border-color: var(--color-neutral);
+  }
+
+  :where(.hdk-controls) :where(input[type='number']) {
+    appearance: textfield;
+  }
+
+  :where(.hdk-controls) :where(input[type='number'])::-webkit-inner-spin-button,
+  :where(.hdk-controls) :where(input[type='number'])::-webkit-outer-spin-button {
+    appearance: none;
+    margin: 0;
+  }
+
+  /* Field chrome: only the properties that make up the system look. No padding,
+   * radius, font or size: those decide layout and shape, and an app that
+   * styled a field's background but not its padding must not see it move. */
+  :where(.hdk-controls)
+    :where(
+      input:not(
+        [type='checkbox'],
+        [type='radio'],
+        [type='range'],
+        [type='file'],
+        [type='color'],
+        [type='button'],
+        [type='submit'],
+        [type='reset'],
+        [type='image']
+      ),
+      textarea,
+      select
+    ) {
+    color: var(--color-text);
+    background-color: var(--color-bg-card);
+    border: 1px solid var(--color-border);
+  }
+
+  :where(.hdk-controls)
+    :where(button, input[type='button'], input[type='submit'], input[type='reset']) {
+    /* inherit, not a token: an app that coloured a button's surface and not
+     * its text, or draws with currentColor inside it, keeps the colour it
+     * had from the page instead of jumping to the neutral tint's ink. */
+    color: inherit;
+    background-color: var(--color-neutral-bg);
+    border: 1px solid transparent;
+  }
+}

package/dist/hooks/useReducedMotion.d.ts

@@ -0,0 +1,7 @@
+/**
+ * useReducedMotion Hook
+ * Detects if the user prefers reduced motion
+ * Returns true if animations should be disabled or simplified
+ */
+export declare function useReducedMotion(): boolean;
+//# sourceMappingURL=useReducedMotion.d.ts.map

package/dist/hooks/useReducedMotion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useReducedMotion.d.ts","sourceRoot":"","sources":["../../src/hooks/useReducedMotion.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH,wBAAgB,gBAAgB,IAAI,OAAO,CA2B1C"}

package/dist/hooks/useReducedMotion.js

@@ -0,0 +1,25 @@
+import { useState, useEffect } from "react";
+function useReducedMotion() {
+  const [prefersReducedMotion, setPrefersReducedMotion] = useState(() => {
+    if (typeof window === "undefined" || !window.matchMedia) return false;
+    return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  });
+  useEffect(() => {
+    if (typeof window === "undefined" || !window.matchMedia) return;
+    const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const handleChange = (event) => {
+      setPrefersReducedMotion(event.matches);
+    };
+    if (mediaQuery.addEventListener) {
+      mediaQuery.addEventListener("change", handleChange);
+      return () => mediaQuery.removeEventListener("change", handleChange);
+    }
+    mediaQuery.addListener(handleChange);
+    return () => mediaQuery.removeListener(handleChange);
+  }, []);
+  return prefersReducedMotion;
+}
+export {
+  useReducedMotion
+};
+//# sourceMappingURL=useReducedMotion.js.map

package/dist/hooks/useReducedMotion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useReducedMotion.js","sources":["../../src/hooks/useReducedMotion.ts"],"sourcesContent":["/**\r\n * useReducedMotion Hook\r\n * Detects if the user prefers reduced motion\r\n * Returns true if animations should be disabled or simplified\r\n */\r\n\r\nimport { useState, useEffect } from 'react'\r\n\r\nexport function useReducedMotion(): boolean {\r\n  const [prefersReducedMotion, setPrefersReducedMotion] = useState(() => {\r\n    // SSR and jsdom have no matchMedia: default to false.\r\n    if (typeof window === 'undefined' || !window.matchMedia) return false\r\n    return window.matchMedia('(prefers-reduced-motion: reduce)').matches\r\n  })\r\n\r\n  useEffect(() => {\r\n    if (typeof window === 'undefined' || !window.matchMedia) return\r\n    const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)')\r\n\r\n    const handleChange = (event: MediaQueryListEvent) => {\r\n      setPrefersReducedMotion(event.matches)\r\n    }\r\n\r\n    // Modern browsers\r\n    if (mediaQuery.addEventListener) {\r\n      mediaQuery.addEventListener('change', handleChange)\r\n      return () => mediaQuery.removeEventListener('change', handleChange)\r\n    }\r\n\r\n    // Fallback for older browsers\r\n    mediaQuery.addListener(handleChange)\r\n    return () => mediaQuery.removeListener(handleChange)\r\n  }, [])\r\n\r\n  return prefersReducedMotion\r\n}\r\n"],"names":[],"mappings":";AAQO,SAAS,mBAA4B;AAC1C,QAAM,CAAC,sBAAsB,uBAAuB,IAAI,SAAS,MAAM;AAErE,QAAI,OAAO,WAAW,eAAe,CAAC,OAAO,WAAY,QAAO;AAChE,WAAO,OAAO,WAAW,kCAAkC,EAAE;AAAA,EAC/D,CAAC;AAED,YAAU,MAAM;AACd,QAAI,OAAO,WAAW,eAAe,CAAC,OAAO,WAAY;AACzD,UAAM,aAAa,OAAO,WAAW,kCAAkC;AAEvE,UAAM,eAAe,CAAC,UAA+B;AACnD,8BAAwB,MAAM,OAAO;AAAA,IACvC;AAGA,QAAI,WAAW,kBAAkB;AAC/B,iBAAW,iBAAiB,UAAU,YAAY;AAClD,aAAO,MAAM,WAAW,oBAAoB,UAAU,YAAY;AAAA,IACpE;AAGA,eAAW,YAAY,YAAY;AACnC,WAAO,MAAM,WAAW,eAAe,YAAY;AAAA,EACrD,GAAG,CAAA,CAAE;AAEL,SAAO;AACT;"}

package/dist/hooks/useToast.d.ts

@@ -0,0 +1,18 @@
+/**
+ * useToast hook
+ * Manages toast notification state and display
+ */
+export interface ToastState {
+    id: number;
+    message: string;
+    type: 'success' | 'error' | 'info' | 'warning';
+    duration?: number;
+}
+export interface UseToastReturn {
+    toasts: ToastState[];
+    showToast: (message: string, type?: 'success' | 'error' | 'info' | 'warning', duration?: number) => void;
+    dismissToast: (id: number) => void;
+    clearAll: () => void;
+}
+export declare function useToast(): UseToastReturn;
+//# sourceMappingURL=useToast.d.ts.map

package/dist/hooks/useToast.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useToast.d.ts","sourceRoot":"","sources":["../../src/hooks/useToast.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAIH,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,CAAA;IACV,OAAO,EAAE,MAAM,CAAA;IACf,IAAI,EAAE,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAA;IAC9C,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AAED,MAAM,WAAW,cAAc;IAC7B,MAAM,EAAE,UAAU,EAAE,CAAA;IACpB,SAAS,EAAE,CACT,OAAO,EAAE,MAAM,EACf,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,EAC/C,QAAQ,CAAC,EAAE,MAAM,KACd,IAAI,CAAA;IACT,YAAY,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,QAAQ,EAAE,MAAM,IAAI,CAAA;CACrB;AAID,wBAAgB,QAAQ,IAAI,cAAc,CA6BzC"}

package/dist/hooks/useToast.js

@@ -0,0 +1,28 @@
+import { useState, useCallback } from "react";
+let toastIdCounter = 0;
+function useToast() {
+  const [toasts, setToasts] = useState([]);
+  const showToast = useCallback(
+    (message, type = "info", duration = 3e3) => {
+      const id = ++toastIdCounter;
+      setToasts((prev) => [...prev, { id, message, type, duration }]);
+    },
+    []
+  );
+  const dismissToast = useCallback((id) => {
+    setToasts((prev) => prev.filter((toast) => toast.id !== id));
+  }, []);
+  const clearAll = useCallback(() => {
+    setToasts([]);
+  }, []);
+  return {
+    toasts,
+    showToast,
+    dismissToast,
+    clearAll
+  };
+}
+export {
+  useToast
+};
+//# sourceMappingURL=useToast.js.map

package/dist/hooks/useToast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useToast.js","sources":["../../src/hooks/useToast.ts"],"sourcesContent":["/**\r\n * useToast hook\r\n * Manages toast notification state and display\r\n */\r\n\r\nimport { useState, useCallback } from 'react'\r\n\r\nexport interface ToastState {\r\n  id: number\r\n  message: string\r\n  type: 'success' | 'error' | 'info' | 'warning'\r\n  duration?: number\r\n}\r\n\r\nexport interface UseToastReturn {\r\n  toasts: ToastState[]\r\n  showToast: (\r\n    message: string,\r\n    type?: 'success' | 'error' | 'info' | 'warning',\r\n    duration?: number\r\n  ) => void\r\n  dismissToast: (id: number) => void\r\n  clearAll: () => void\r\n}\r\n\r\nlet toastIdCounter = 0\r\n\r\nexport function useToast(): UseToastReturn {\r\n  const [toasts, setToasts] = useState<ToastState[]>([])\r\n\r\n  const showToast = useCallback(\r\n    (\r\n      message: string,\r\n      type: 'success' | 'error' | 'info' | 'warning' = 'info',\r\n      duration: number = 3000\r\n    ) => {\r\n      const id = ++toastIdCounter\r\n      setToasts(prev => [...prev, { id, message, type, duration }])\r\n    },\r\n    []\r\n  )\r\n\r\n  const dismissToast = useCallback((id: number) => {\r\n    setToasts(prev => prev.filter(toast => toast.id !== id))\r\n  }, [])\r\n\r\n  const clearAll = useCallback(() => {\r\n    setToasts([])\r\n  }, [])\r\n\r\n  return {\r\n    toasts,\r\n    showToast,\r\n    dismissToast,\r\n    clearAll\r\n  }\r\n}\r\n"],"names":[],"mappings":";AAyBA,IAAI,iBAAiB;AAEd,SAAS,WAA2B;AACzC,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAuB,CAAA,CAAE;AAErD,QAAM,YAAY;AAAA,IAChB,CACE,SACA,OAAiD,QACjD,WAAmB,QAChB;AACH,YAAM,KAAK,EAAE;AACb,gBAAU,CAAA,SAAQ,CAAC,GAAG,MAAM,EAAE,IAAI,SAAS,MAAM,SAAA,CAAU,CAAC;AAAA,IAC9D;AAAA,IACA,CAAA;AAAA,EAAC;AAGH,QAAM,eAAe,YAAY,CAAC,OAAe;AAC/C,cAAU,UAAQ,KAAK,OAAO,WAAS,MAAM,OAAO,EAAE,CAAC;AAAA,EACzD,GAAG,CAAA,CAAE;AAEL,QAAM,WAAW,YAAY,MAAM;AACjC,cAAU,CAAA,CAAE;AAAA,EACd,GAAG,CAAA,CAAE;AAEL,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAEJ;"}

package/dist/icon-btn.css

@@ -0,0 +1,64 @@
+/* The round 32px icon button on the AppHeader bar — the theme picker trigger,
+ * the settings gear, and any link an app puts in the actions row.
+ *
+ * Defined ONCE. The picker and the gear each used to carry their own copy and
+ * the two had already drifted (padding 8px vs --hdk-space-sm, a ring on every
+ * mouse click vs on :focus-visible, a min-size on one only). `.theme-toggle-btn`
+ * and `.settings-toggle-btn` survive as hooks with no values of their own.
+ *
+ * Lives in its own file because ThemePicker renders outside the header too
+ * (HadokuThemePicker on a video overlay), so its trigger cannot depend on
+ * app-header.css. The chain is app-header.css -> theme-picker.css -> this.
+ *
+ * Works on an <a>: child apps ship without a preflight, so a bare anchor would
+ * render UA blue, visited purple and underlined. */
+
+.app-header__icon-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  width: 32px;
+  height: 32px;
+  min-width: 32px;
+  min-height: 32px;
+  padding: 0;
+  margin: 0;
+  border: none;
+  border-radius: 50%;
+  background: none;
+  color: var(--color-text);
+  font: inherit;
+  font-size: var(--hdk-text-lg);
+  line-height: 1;
+  text-decoration: none;
+  cursor: pointer;
+  opacity: 0.7;
+  transition:
+    background-color var(--transition-fast),
+    opacity var(--transition-fast);
+}
+
+/* Same colour visited or not, and no hover recolour from a host stylesheet's
+ * `a:hover` — the hover signal is the background below. */
+.app-header__icon-btn:link,
+.app-header__icon-btn:visited,
+.app-header__icon-btn:hover,
+.app-header__icon-btn:active {
+  color: var(--color-text);
+  text-decoration: none;
+}
+
+.app-header__icon-btn:hover {
+  background-color: var(--color-primary-hover);
+  opacity: 1;
+}
+
+/* :focus-visible, not :focus — :focus rings on every mouse click. Full
+ * opacity too, so a keyboard user never lands on the dimmed resting state. */
+.app-header__icon-btn:focus-visible {
+  outline: none;
+  opacity: 1;
+  box-shadow: 0 0 0 2px var(--color-primary);
+}

package/dist/index.d.ts

@@ -0,0 +1,49 @@
+/**
+ * @wolffm/task-ui-components
+ * Reusable UI components for task management applications
+ * Production-ready and fully typed
+ *
+ * 2.2.0 — AppHeader + ConnectedSettings (with a `children` extension slot).
+ */
+export { HadokuThemePicker } from './components/HadokuThemePicker';
+export { AppHeader } from './components/AppHeader';
+export { ConnectedSettings } from './components/ConnectedSettings';
+export { HadokuThemeProvider, useHadokuTheme, useHadokuThemeOptional } from '@wolffm/themes';
+export type { HadokuThemeValue, HadokuThemeProviderProps } from '@wolffm/themes';
+export { Toast } from './components/Toast';
+export { Toaster } from './components/Toaster';
+export { Modal } from './components/Modal';
+export { ContextMenu } from './components/ContextMenu';
+export { LoadingSkeleton } from './components/LoadingSkeleton';
+export { SettingsModal } from './components/SettingsModal';
+export { Button } from './components/Button';
+export { Select, NativeSelect } from './components/Select';
+export { NumberInput } from './components/NumberInput';
+export { Tooltip } from './components/Tooltip';
+export { installTitleTooltips } from './lib/titleTooltips';
+export type { TitleTooltipOptions } from './lib/titleTooltips';
+export { installSelectMenus } from './lib/selectMenus';
+export { BentoGrid } from './components/BentoGrid';
+export { BentoCard } from './components/BentoCard';
+export { useToast } from './hooks/useToast';
+export { useReducedMotion } from './hooks/useReducedMotion';
+export { SettingsIcon, TagIcon, CircleIcon, SquareIcon, TriangleIcon, DiamondIcon, StarIcon, HexagonIcon, PentagonIcon, OctagonIcon, FALLBACK_ICONS, getFallbackIcon } from './components/ThemeIcons';
+export { SunIcon, MoonIcon, StrawberryIcon, WaveIcon, ZapIcon, CoffeeIcon, FlowerIcon, HeartIcon, LeafIcon, LanternIcon } from '@wolffm/themes';
+export type { ThemeName, ThemeFamily, DropdownPlacement, ThemeMode } from './types';
+export type { AppHeaderProps } from './components/AppHeader';
+export type { ConnectedSettingsProps } from './components/ConnectedSettings';
+export type { ContentLevelState, Identity, SignIn, SignInClient, SignInResult, Tier } from './lib/settingsClient';
+export { loadSignIn, loadSignInClient, passkeyHref, passkeysSupported, switchKeyHref } from './lib/settingsClient';
+export type { ToastProps } from './components/Toast';
+export type { ToasterProps, ToastState } from './components/Toaster';
+export type { UseToastReturn } from './hooks/useToast';
+export type { ModalProps } from './components/Modal';
+export type { ContextMenuProps, ContextMenuItem } from './components/ContextMenu';
+export type { LoadingSkeletonProps } from './components/LoadingSkeleton';
+export type { ButtonProps, ButtonVariant, ButtonFamily, ButtonSize, ButtonShape } from './components/Button';
+export type { SelectProps, SelectOption, SelectVariant, SelectSize, NativeSelectProps } from './components/Select';
+export type { TooltipProps, TooltipPlacement, TooltipVariant } from './components/Tooltip';
+export type { SettingsModalProps, SettingsSection, SettingsField, SettingsToggleField, SettingsTextInputField, SettingsPasswordField, SettingsSelectField, SettingsButtonField, SettingsCustomField } from './components/SettingsModal';
+export type { BentoGridProps, BentoColumns } from './components/BentoGrid';
+export type { BentoCardProps, CardSize } from './components/BentoCard';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAaH,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AAClE,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAClD,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AAOlE,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,sBAAsB,EAAE,MAAM,gBAAgB,CAAA;AAC5F,YAAY,EAAE,gBAAgB,EAAE,wBAAwB,EAAE,MAAM,gBAAgB,CAAA;AAChF,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAA;AAC1C,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAA;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAA;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAA;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AAI1D,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAA;AAC5C,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAA;AAC1D,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAA;AAG9C,OAAO,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAA;AAC1D,YAAY,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AAG9D,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAA;AAGtD,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAGlD,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAC3C,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAA;AAG3D,OAAO,EACL,YAAY,EACZ,OAAO,EAEP,UAAU,EACV,UAAU,EACV,YAAY,EACZ,WAAW,EACX,QAAQ,EACR,WAAW,EACX,YAAY,EACZ,WAAW,EACX,cAAc,EACd,eAAe,EAChB,MAAM,yBAAyB,CAAA;AAGhC,OAAO,EACL,OAAO,EACP,QAAQ,EACR,cAAc,EACd,QAAQ,EACR,OAAO,EACP,UAAU,EACV,UAAU,EACV,SAAS,EACT,QAAQ,EACR,WAAW,EACZ,MAAM,gBAAgB,CAAA;AAMvB,YAAY,EAAE,SAAS,EAAE,WAAW,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AACnF,YAAY,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAC5D,YAAY,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAA;AAC5E,YAAY,EACV,iBAAiB,EACjB,QAAQ,EACR,MAAM,EACN,YAAY,EACZ,YAAY,EACZ,IAAI,EACL,MAAM,sBAAsB,CAAA;AAC7B,OAAO,EACL,UAAU,EACV,gBAAgB,EAChB,WAAW,EACX,iBAAiB,EACjB,aAAa,EACd,MAAM,sBAAsB,CAAA;AAC7B,YAAY,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAA;AACpD,YAAY,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAA;AACpE,YAAY,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AACtD,YAAY,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAA;AACpD,YAAY,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAA;AACjF,YAAY,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAA;AACxE,YAAY,EACV,WAAW,EACX,aAAa,EACb,YAAY,EACZ,UAAU,EACV,WAAW,EACZ,MAAM,qBAAqB,CAAA;AAC5B,YAAY,EACV,WAAW,EACX,YAAY,EACZ,aAAa,EACb,UAAU,EACV,iBAAiB,EAClB,MAAM,qBAAqB,CAAA;AAC5B,YAAY,EAAE,YAAY,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAC1F,YAAY,EACV,kBAAkB,EAClB,eAAe,EACf,aAAa,EACb,mBAAmB,EACnB,sBAAsB,EACtB,qBAAqB,EACrB,mBAAmB,EACnB,mBAAmB,EACnB,mBAAmB,EACpB,MAAM,4BAA4B,CAAA;AACnC,YAAY,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAA;AAC1E,YAAY,EAAE,cAAc,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAA"}

package/dist/index.js

@@ -0,0 +1,75 @@
+import { HadokuThemePicker } from "./components/HadokuThemePicker.js";
+import { AppHeader } from "./components/AppHeader.js";
+import { ConnectedSettings } from "./components/ConnectedSettings.js";
+import { CoffeeIcon, FlowerIcon, HadokuThemeProvider, HeartIcon, LanternIcon, LeafIcon, MoonIcon, StrawberryIcon, SunIcon, WaveIcon, ZapIcon, useHadokuTheme, useHadokuThemeOptional } from "@wolffm/themes";
+import { Toast } from "./components/Toast.js";
+import { Toaster } from "./components/Toaster.js";
+import { Modal } from "./components/Modal.js";
+import { ContextMenu } from "./components/ContextMenu.js";
+import { LoadingSkeleton } from "./components/LoadingSkeleton.js";
+import { SettingsModal } from "./components/SettingsModal.js";
+import { Button } from "./components/Button.js";
+import { NativeSelect, Select } from "./components/Select.js";
+import { NumberInput } from "./components/NumberInput.js";
+import { Tooltip } from "./components/Tooltip.js";
+import { installTitleTooltips } from "./lib/titleTooltips.js";
+import { installSelectMenus } from "./lib/selectMenus.js";
+import { BentoGrid } from "./components/BentoGrid.js";
+import { BentoCard } from "./components/BentoCard.js";
+import { useToast } from "./hooks/useToast.js";
+import { useReducedMotion } from "./hooks/useReducedMotion.js";
+import { CircleIcon, DiamondIcon, FALLBACK_ICONS, HexagonIcon, OctagonIcon, PentagonIcon, SettingsIcon, SquareIcon, StarIcon, TagIcon, TriangleIcon, getFallbackIcon } from "./components/ThemeIcons.js";
+import { loadSignIn, loadSignInClient, passkeyHref, passkeysSupported, switchKeyHref } from "./lib/settingsClient.js";
+export {
+  AppHeader,
+  BentoCard,
+  BentoGrid,
+  Button,
+  CircleIcon,
+  CoffeeIcon,
+  ConnectedSettings,
+  ContextMenu,
+  DiamondIcon,
+  FALLBACK_ICONS,
+  FlowerIcon,
+  HadokuThemePicker,
+  HadokuThemeProvider,
+  HeartIcon,
+  HexagonIcon,
+  LanternIcon,
+  LeafIcon,
+  LoadingSkeleton,
+  Modal,
+  MoonIcon,
+  NativeSelect,
+  NumberInput,
+  OctagonIcon,
+  PentagonIcon,
+  Select,
+  SettingsIcon,
+  SettingsModal,
+  SquareIcon,
+  StarIcon,
+  StrawberryIcon,
+  SunIcon,
+  TagIcon,
+  Toast,
+  Toaster,
+  Tooltip,
+  TriangleIcon,
+  WaveIcon,
+  ZapIcon,
+  getFallbackIcon,
+  installSelectMenus,
+  installTitleTooltips,
+  loadSignIn,
+  loadSignInClient,
+  passkeyHref,
+  passkeysSupported,
+  switchKeyHref,
+  useHadokuTheme,
+  useHadokuThemeOptional,
+  useReducedMotion,
+  useToast
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;"}

package/dist/lib/menuPlacement.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Where a dropdown list goes under (or over) its trigger, shared by <Select>
+ * and installSelectMenus so both lists sit and flip identically.
+ */
+export declare const MENU_GAP = 4;
+export declare const MENU_MAX_HEIGHT = 280;
+export interface MenuPosition {
+    left: number;
+    width: number;
+    top?: number;
+    bottom?: number;
+    maxHeight: number;
+}
+/** `listHeight` is the list's full scrollHeight, so a short list never flips. */
+export declare function placeMenu(rect: DOMRect, listHeight: number): MenuPosition;
+//# sourceMappingURL=menuPlacement.d.ts.map

package/dist/lib/menuPlacement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menuPlacement.d.ts","sourceRoot":"","sources":["../../src/lib/menuPlacement.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,eAAO,MAAM,QAAQ,IAAI,CAAA;AACzB,eAAO,MAAM,eAAe,MAAM,CAAA;AAElC,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;IACb,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,SAAS,EAAE,MAAM,CAAA;CAClB;AAED,iFAAiF;AACjF,wBAAgB,SAAS,CAAC,IAAI,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,GAAG,YAAY,CAazE"}

package/dist/lib/menuPlacement.js

@@ -0,0 +1,19 @@
+const MENU_GAP = 4;
+const MENU_MAX_HEIGHT = 280;
+function placeMenu(rect, listHeight) {
+  const below = window.innerHeight - rect.bottom - MENU_GAP;
+  const above = rect.top - MENU_GAP;
+  const flip = below < Math.min(MENU_MAX_HEIGHT, listHeight) && above > below;
+  return {
+    left: rect.left,
+    width: rect.width,
+    ...flip ? { bottom: window.innerHeight - rect.top + MENU_GAP } : { top: rect.bottom + MENU_GAP },
+    maxHeight: Math.max(120, Math.min(MENU_MAX_HEIGHT, flip ? above : below) - 8)
+  };
+}
+export {
+  MENU_GAP,
+  MENU_MAX_HEIGHT,
+  placeMenu
+};
+//# sourceMappingURL=menuPlacement.js.map

package/dist/lib/menuPlacement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menuPlacement.js","sources":["../../src/lib/menuPlacement.ts"],"sourcesContent":["/**\n * Where a dropdown list goes under (or over) its trigger, shared by <Select>\n * and installSelectMenus so both lists sit and flip identically.\n */\n\nexport const MENU_GAP = 4\nexport const MENU_MAX_HEIGHT = 280\n\nexport interface MenuPosition {\n  left: number\n  width: number\n  top?: number\n  bottom?: number\n  maxHeight: number\n}\n\n/** `listHeight` is the list's full scrollHeight, so a short list never flips. */\nexport function placeMenu(rect: DOMRect, listHeight: number): MenuPosition {\n  const below = window.innerHeight - rect.bottom - MENU_GAP\n  const above = rect.top - MENU_GAP\n  // Flip up only when the list does not fit below AND there is more room above.\n  const flip = below < Math.min(MENU_MAX_HEIGHT, listHeight) && above > below\n  return {\n    left: rect.left,\n    width: rect.width,\n    ...(flip\n      ? { bottom: window.innerHeight - rect.top + MENU_GAP }\n      : { top: rect.bottom + MENU_GAP }),\n    maxHeight: Math.max(120, Math.min(MENU_MAX_HEIGHT, flip ? above : below) - 8)\n  }\n}\n"],"names":[],"mappings":"AAKO,MAAM,WAAW;AACjB,MAAM,kBAAkB;AAWxB,SAAS,UAAU,MAAe,YAAkC;AACzE,QAAM,QAAQ,OAAO,cAAc,KAAK,SAAS;AACjD,QAAM,QAAQ,KAAK,MAAM;AAEzB,QAAM,OAAO,QAAQ,KAAK,IAAI,iBAAiB,UAAU,KAAK,QAAQ;AACtE,SAAO;AAAA,IACL,MAAM,KAAK;AAAA,IACX,OAAO,KAAK;AAAA,IACZ,GAAI,OACA,EAAE,QAAQ,OAAO,cAAc,KAAK,MAAM,SAAA,IAC1C,EAAE,KAAK,KAAK,SAAS,SAAA;AAAA,IACzB,WAAW,KAAK,IAAI,KAAK,KAAK,IAAI,iBAAiB,OAAO,QAAQ,KAAK,IAAI,CAAC;AAAA,EAAA;AAEhF;"}

package/dist/lib/selectMenus.d.ts

@@ -0,0 +1,30 @@
+/**
+ * The themed list for every native <select> on a page, with no change to the
+ * markup.
+ *
+ *   import { installSelectMenus } from '@wolffm/task-ui-components/select-menus'
+ *   import '@wolffm/task-ui-components/select.css'
+ *   installSelectMenus()
+ *
+ * hadoku_site calls this once from its shell, which covers every
+ * micro-frontend; an app does not call it itself. Framework-free and
+ * React-free, like installTitleTooltips, for the same reason.
+ *
+ * A native select's closed box takes CSS, but its open list is drawn by the
+ * OS and takes almost none. So a mouse press or an opening key on the select
+ * is intercepted (preventDefault on mousedown is what stops the OS list) and
+ * the same list <Select> renders opens instead, built from the select's own
+ * <option>s and <optgroup>s at that moment.
+ *
+ * The <select> stays the source of truth. Choosing sets its selectedIndex and
+ * fires `input` and `change` exactly as the OS list would, so every framework
+ * (React's onChange included) and every plain listener sees an ordinary
+ * change, and a form still submits the select's value.
+ *
+ * Left native on purpose:
+ *   - touch: a phone's own picker is the better control there
+ *   - `multiple` or `size > 1`, which render as an inline list, not a popup
+ *   - anything under `data-native-select`
+ */
+export declare function installSelectMenus(): () => void;
+//# sourceMappingURL=selectMenus.d.ts.map

package/dist/lib/selectMenus.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"selectMenus.d.ts","sourceRoot":"","sources":["../../src/lib/selectMenus.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AA0BH,wBAAgB,kBAAkB,IAAI,MAAM,IAAI,CAyP/C"}