@owlmeans/web-panel 0.1.18-rc.30 → 0.1.18-rc.32

package/README.md

@@ -15,7 +15,7 @@ instead of Material UI.
 ## Install
 
 ```sh
-bun add @owlmeans/web-panel
+bun add @owlmeans/web-panel@^0.1.18-rc.31
 ```
 
 Peer requirements (the consuming app provides these): `react`, `react-dom`,
@@ -213,7 +213,7 @@ This package ships embedded agent skills under `agent-meta/`. After installing y
 your project's skill store (`.agents/skills/`):
 
 ```sh
-npx @owlmeans/agent-skills
+npx @owlmeans/agent-skills@^0.1.18-rc.12
 ```
 
 The embedded files are version-matched to this package release. Do not edit them

package/agent-meta/manifest.json

@@ -1,8 +1,8 @@
 {
   "schemaVersion": 2,
   "package": "@owlmeans/web-panel",
-  "version": "0.1.18-rc.30",
-  "generatedAt": "2026-09-01T16:49:00.430Z",
+  "version": "0.1.18-rc.32",
+  "generatedAt": "2026-09-04T22:43:25.453Z",
   "canonicalRepo": "https://github.com/owlmeans/common",
   "entries": [
     {

package/agent-meta/skills/web-panel/SKILL.md

@@ -8,7 +8,7 @@ user-invocable: false
 # @owlmeans/web-panel
 
 **Layer:** Web (React)
-**Install:** `"@owlmeans/web-panel": "^0.1.18-rc.30"` in `dependencies`
+**Install:** `"@owlmeans/web-panel": "^0.1.18-rc.32"` in `dependencies`
 
 ## Key Exports
 
@@ -20,15 +20,28 @@ user-invocable: false
 | `Toaster` | The application's toast surface — mounted once, in the layout |
 | `Link` | An `<a>` addressing an entrypoint alias (or a literal `src`), with the label taken from i18n |
 | `LoginScreen` / `LocalizedLoginScreen` / `appendLoginScreen` | The identity-provider choice screen — see `login-methods` |
-| `components` submodule | shadcn/Radix panel/form components |
+| `render(context, opts?)` | Mounts the tree inside `PanelApp`, with the browser language detector installed on the i18n instance. `opts` is `RenderOptions` plus `rootClassName` |
+| `PanelApp` | That wrapper on its own — the themed root `div` plus the i18n provider — for a host that mounts the tree itself |
+| `useContext<C, T>()` | The current context, from React. `AppContext` adds `context.flow()` over `@owlmeans/web-client`'s |
+| `entrypoints` | The base declaration list — `@owlmeans/web-client`'s plus `@owlmeans/api-config-client`'s. Compose the app's own over it |
+| `Block` / `Text` / `Status` | The shadcn `Card` panel with an optional `Actions` footer, a heading/paragraph whose copy comes from the panel namespace, and the shadcn `Alert` resolving a `ResilientError` to a translated message |
+| `Form` / `TextInput` / `Button` / `SubmitButton` / `ButtonSelector` | The web form family. `Form` builds its own `useForm` + `ajvResolver` and borrows only `FormContext` and `schemaToFormDefault` from `@owlmeans/client-panel`; `TextInput` drives `react-hook-form`'s `Controller` directly, and the buttons call `handleSubmit` directly — none of them wraps `ClientForm`, `InputCtrl` or `ActionCtrl` |
+| `ImageUploader` / `Layout` | The uploader in a drop target with a preview, and a plain content wrapper (the shell is `NavLayout`) |
+| `scalingToStyles(h, v)` | `BlockScaling` → the width/height utility classes the panels share |
+| `cn(...inputs)` | The class-name merger the components are written against — an app never re-declares it |
+| `useIsMobile()` / `MOBILE_BREAKPOINT` | Viewport narrower than Tailwind's `md` (768), matched with `matchMedia` |
+| `useBreakPoint()` | The current Tailwind breakpoint name, tracked on `resize` (`lg` when there is no `window`) |
+| `useMapBreakpoint(map, def?, breakpoint?)` | The `map` entry for the current breakpoint (or for the `breakpoint` passed), falling back to `def`. It **throws a `SyntaxError`** when neither yields a value, so give it a `def` or cover every breakpoint |
 | Re-exports from `@owlmeans/client-panel` | Cross-platform panel primitives, incl. `usePanelNav` and the `PanelNav*` types |
-| Re-exports from `@owlmeans/client` / `@owlmeans/client-entrypoint` | `entrypoint`, `elevate`, `handler`, `route`, `frontend`, `guard`, `useNavigate`, `useEntrypoint`, `useValue` |
-| `main`, `exports`, `context`, `entrypoints`, `types` | Wiring helpers |
+| Re-exports from `@owlmeans/client` / `@owlmeans/client-entrypoint` / `@owlmeans/route` | `entrypoint`, `elevate`, `handler`, `provideRequest`, `stab`, `route`, `croute`, `frontend`, `guard`, `useNavigate`, `useEntrypoint`, `useValue` |
+| Re-exports from the surrounding layers | `config`, `service`, `addWebService`, `AppType` / `HOME` / `ROOT` / `BASE` / `GUEST`, `DISPATCHER`, `CAUTHEN_FLOW_ENTER`, `DAUTH_GUARD`, `setupExternalAuthentication`, `Dispatcher`, `appendWebAuthService`, `flow` / `configureFlows` / `useFlow` / `FLOW_PARAM` / `SERVICE_PARAM`, `useI18n*` / `useLanguage` / `composePrefix`, `addI18nApp` / `addI18nLib` / `SUPPORTED_LNGS` |
 
 ## Subpath Exports
 
 - `./auth` — auth panel components for web
 - `./auth/entrypoints` — auth panel entrypoint declarations
+- `./consent` — the cookie consent dialog and policy, bound to this app's i18n
+- `./jobs` — `JobProgress`, `JobStatus`, `useJobToasts` over `@owlmeans/queue` records
 
 ## Usage
 
@@ -94,7 +107,7 @@ header. Both render the same items; only one is visible at a time.
 | `NavLayout` | `nav: PanelNavConfig`, `translate?`, `title?: ReactNode`, `home?: string` (brand target — defaults to the first section's first item), `actions?: ReactNode`, `footer?: PanelNavLink[] \| ReactNode`, `headerClassName?`, `contentClassName?`, `containerClassName?`, `className?`, `style?` |
 | `TopNav` | `config: PanelNavConfig`, `translate?`, `ariaLabel?`, `className?`, `style?` |
 | `SideNav` | the same, plus `variant?: 'side' \| 'bar'` |
-| `Footer` | `links?: PanelNavLink[]`, `translate?`, `children?`, `className?`, `style?` |
+| `Footer` | `links?: PanelNavLink[]`, `translate?`, `containerClassName?` (the shell's rhythm, so the footer row lines up with the header and content), `children?`, `className?`, `style?` |
 
 **The style slots are REGIONS, and each region is its own SURFACE.** `className` is the root —
 the full-height page *behind* the header, side menu and footer. `headerClassName` is the sticky
@@ -126,12 +139,13 @@ width-only override permanently.
 (`bg-secondary text-secondary-foreground`) — never by colouring the root and expecting the bar
 to follow.
 
-**The shell reads exactly five theme variables**: `--background` (page and top bar),
-`--foreground` (active section link), `--muted-foreground` (resting section links) and
-`--accent`/`--accent-foreground` (active side-menu item). It reads **no `--sidebar*` variable at
-all**. So `--muted-foreground` is not merely the text colour of the `--muted` surface — it is
-secondary text sitting directly on `--background`, and a theme that lightens it to suit a dark
-muted panel loses its top menu.
+**The shell reads exactly these colour variables**: `--background` (page and top bar),
+`--foreground` (active section link), `--muted-foreground` (resting section links),
+`--accent`/`--accent-foreground` (active side-menu item), `--border` (the header, side-menu and
+footer rules) and `--primary` — the footer renders its entries through `Link`, which paints
+`text-primary`. It reads **no `--sidebar*` variable at all**. So `--muted-foreground` is not merely
+the text colour of the `--muted` surface — it is secondary text sitting directly on `--background`,
+and a theme that lightens it to suit a dark muted panel loses its top menu.
 
 Rules that make the shell behave:
 
@@ -201,14 +215,85 @@ known — so never key a test or a layout on the anchor having an `href` synchro
 falls back to `modules.<alias>` when neither `name` nor `children` is given, `open` adds
 `target="_blank"` with `rel="noopener noreferrer"`, and `center` centres the text.
 
+### Forms — `Form`, `TextInput`, the buttons
+
+`WebFormProps` is `@owlmeans/client-panel`'s `FormProps` plus `className` and `style`. `Form` holds
+the whole model itself — `useForm` with `mode: 'all'`, `delayError: 300`, an `ajvResolver` over
+`validation` with `coerceTypes` and the `ajv-formats` formats — and publishes it through
+`FormProvider` plus `FormContext`, so every control below reads one form.
+
+```tsx
+import { Form, TextInput, SubmitButton, Button } from '@owlmeans/web-panel'
+
+<Form decorate validation={schema} onSubmit={async (data, update) => { await save(data); update(data) }}>
+  <TextInput name="email" label placeholder hint />
+  <TextInput name="password" type="password" label="Password" />
+</Form>
+```
+
+- **`decorate` switches the whole rendering.** With `decorate={true}` the fields go inside a shadcn
+  `Card`, the root error surfaces through `Status`, and a `SubmitButton` is rendered in the
+  `CardFooter` **whenever `onSubmit` is given** — the caller writes no action. Without it (the
+  default) `Form` is a bare flex column: no card, no root-error surface, no submit button, so the
+  caller renders its own action. `horizontal`/`vertical` scaling, `className` and `style` land on
+  the `Card` when decorated and on that column otherwise.
+- **`formRef`** — a `useFormRef()` ref filled with `{ form, update, loader, error }`, which is how a
+  caller drives the form, flips the loader, or plants a field/root error from outside.
+- **`TextInput` takes `label`, `placeholder` and `hint` as `string | boolean`.** `true` resolves
+  `<name>.label` / `<name>.placeholder` / `<name>.hint` from the form namespace; a string is used
+  verbatim; anything else renders nothing. It also takes `name`, `def`, `type` (any HTML input type,
+  default `text`) and `disableAutocomplete`. A field error replaces the hint line.
+- **`Button`** takes a required `label`, `onClick`, `loader` (a `Toggleable` — open disables the
+  button and shows the spinner), `size` (`small`/`medium`/`large`), `fullWidth`, and `variant`,
+  which maps the MUI vocabulary onto shadcn (`contained` → `default`, `outlined` → `outline`,
+  `text` → `ghost`) and forwards a shadcn variant name unchanged.
+- **`SubmitButton`** is that button bound to `handleSubmit`, taking `onSubmit` (or `onClick`) and a
+  `label` defaulting to `submit`. It resolves the label with the form `t` itself and passes it down
+  with `i18n.suppress` set, so the label is translated once.
+- **`ButtonSelector`** renders one `Button` per entry of `options`, the one equal to `current`
+  `contained` and the rest `outlined`, calling `onSelect(option)`. `name` prefixes each option's
+  label key as `<name>.<option>`.
+
+## Subpath: `./jobs`
+
+Three presentational pieces for a queue job, over `JobRecord` from `@owlmeans/queue`. They take
+records — `@owlmeans/client-job`'s `useJobs()` maps straight onto them — and hold no store, no
+socket and no strings of their own.
+
+```tsx
+import { JobProgress, JobStatus, useJobToasts } from '@owlmeans/web-panel/jobs'
+
+const jobs = useJobs().map(model => model.record)
+useJobToasts(jobs)
+
+<JobStatus job={job} labels={{ [JobState.Active]: t('jobs.running') }} />
+<JobProgress job={job} />
+```
+
+| Export | Description |
+|---|---|
+| `JobProgress` | The shadcn `Progress` bar. `job.progress` is read as a number, `{ percent }` or `{ done, total }`; anything else animates INDETERMINATE, because zero and "the processor never called `progress()`" look identical otherwise |
+| `JobStatus` | The state pill. `data-state` carries the raw state, so a test never keys on the wording |
+| `jobProgressValue(job)` | The percentage the bar shows, or `undefined` |
+| `useJobToasts(jobs, opts?)` | One toast per job the first time it settles, on the `Toaster` the layout already mounts |
+
+- **No packaged wording.** The states are broker vocabulary; the sentence an app wants for them
+  ("Queued", "Rendering", "Ready") is its own copy in its own namespace, so `JobStatus` takes a
+  `labels` map and otherwise renders the raw state — data, not an untranslated string.
+- **`useJobToasts` never toasts on its first pass.** A screen opening onto a store seeded with
+  yesterday's finished jobs would fire a stack of them at once, so everything already settled at
+  mount is recorded as announced and only what settles afterwards is reported.
+- It needs the same single `Toaster` as everything else — see above.
+
 ## Subpath: `./consent`
 
 `PanelCookieConsent` and `PanelCookiePolicy` — `@owlmeans/web-consent`'s components bound to this
 app's language and translations, falling through to the package's own seven-language bundle for
 every key the app has not overridden. See the `consent` skill.
 
-A re-export does not move Tailwind class strings, so a consumer still adds an `@source` for
-`@owlmeans/web-consent/build` as well as for this package's.
+A re-export does not move Tailwind class strings, so a consumer adds a second `@source` for
+`@owlmeans/web-consent` alongside this package's — pointing at **`src`**, for the reason spelled out
+under *Consumer setup* below. Without it the dialog renders half-styled.
 
 ## Consumer setup — the `@` contract and Tailwind
 
@@ -217,22 +302,36 @@ its own shadcn copy. Vendor every primitive the package imports: `alert`, `butto
 `label`, `navigation-menu`, `progress` (plus `separator` if you use it), and add
 `@radix-ui/react-navigation-menu` alongside the other Radix peers.
 
-Then point Tailwind at the built package. Its oxide scanner reads the CSS root plus `@source`
-directives only, and excludes `node_modules` — so classes that exist **only** inside `web-panel`
-components (the whole navigation shell and footer) never reach the stylesheet, and the app renders
-an unstyled menu. In the app's Tailwind entry:
+The vendored `@/lib/utils` stays — the package's own components resolve `cn` through it — but the
+app's own components import `cn` from `@owlmeans/web-panel` instead of declaring a third copy. The
+public export is a package-owned function, deliberately not a re-export of `@/lib/utils`: that
+specifier is emitted verbatim and would resolve back to the consumer's file.
+
+Then point Tailwind at the installed package's **`src`**. Its oxide scanner reads the CSS root
+plus `@source` directives only, and excludes `node_modules` — so classes that exist **only** inside
+`web-panel` components (the whole navigation shell and footer) never reach the stylesheet, and the
+app renders an unstyled menu. In the app's Tailwind entry:
 
 ```css
 @import "tailwindcss";
 
-@source "../../../node_modules/@owlmeans/web-panel/build";
+@source "../../../node_modules/@owlmeans/web-panel/src";
 ```
 
-Adjust the relative depth to your own layout; the target is the installed package's `build`.
+Adjust the relative depth to your own layout. **Point at `src`, never at `build`:** the scanner
+applies the `.gitignore` of whatever repository a path resolves into, and a linked `node_modules`
+entry resolves into a monorepo whose `.gitignore` covers every package build directory — a `build`
+source there scans zero files and reports nothing, while the shell renders unstyled with nothing to
+blame. `src` is tracked in the repository and ships in the published tarball, so one path serves a
+linked checkout and an npm install alike.
 
 ## Depends On
 
 - `@owlmeans/web-client`, `@owlmeans/client-panel`, `@owlmeans/client-i18n`, `@owlmeans/web-router`
+- `@owlmeans/queue` — `JobRecord` / `JobState`, read by the `./jobs` subpath
 - Peers (app-provided): `react`, `react-dom`, `react-hook-form`, `tailwindcss`, `tailwind-merge`,
   `clsx`, `class-variance-authority`, `lucide-react`, `ajv`, and the `@radix-ui/react-*` primitives
   (`label`, `navigation-menu`, `progress`, `separator`, `slot`). No MUI, no react-router.
+- `ajv-formats` is imported at module scope by the form model but is declared in no dependency
+  section of the manifest, which lists `ajv` alone. An install that does not otherwise pull it in
+  fails at import time, so declare `ajv-formats` next to `ajv` in the consuming application.

package/build/@/components/ui/button.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { type VariantProps } from 'class-variance-authority';
 declare const buttonVariants: (props?: ({
-    variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | null | undefined;
-    size?: "default" | "sm" | "lg" | "icon" | null | undefined;
+    variant?: "default" | "destructive" | "ghost" | "link" | "outline" | "secondary" | null | undefined;
+    size?: "default" | "icon" | "lg" | "sm" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
     asChild?: boolean;

package/build/auth/context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../src/auth/context.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,IAAI,MAAM,EAAE,UAAU,IAAI,OAAO,EAAE,MAAM,sBAAsB,CAAA;AACtF,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA;AAIlD,eAAO,MAAM,WAAW,GAAI,CAAC,SAAS,MAAM,EAAE,CAAC,SAAS,OAAO,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,KAAG,CAY5E,CAAA;AAED,eAAO,MAAM,UAAU,GAAI,CAAC,SAAS,SAAS,GAAG,SAAS,EAAE,CAAC,SAAS,UAAU,CAAC,CAAC,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC,OAAK,CAC9E,CAAA"}
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../src/auth/context.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,IAAI,MAAM,EAAE,UAAU,IAAI,OAAO,EAAE,MAAM,sBAAsB,CAAA;AACtF,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA;AAIlD,eAAO,MAAM,WAAW,GAAI,CAAC,SAAS,MAAM,EAAE,CAAC,SAAS,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,KAAG,CAY5E,CAAA;AAED,eAAO,MAAM,UAAU,GAAI,CAAC,SAAS,SAAS,GAAG,SAAS,EAAE,CAAC,SAAS,UAAU,CAAC,CAAC,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC,OAAK,CAC9E,CAAA"}

package/build/auth/entrypoints.d.ts

@@ -1,2 +1,2 @@
-export declare const entrypoints: any[];
+export declare const entrypoints: import("@owlmeans/entrypoint").CommonEntrypoint[];
 //# sourceMappingURL=entrypoints.d.ts.map

package/build/auth/entrypoints.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"entrypoints.d.ts","sourceRoot":"","sources":["../../src/auth/entrypoints.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,WAAW,OAAuB,CAAA"}
+{"version":3,"file":"entrypoints.d.ts","sourceRoot":"","sources":["../../src/auth/entrypoints.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,WAAW,mDAAuB,CAAA"}

package/build/components/form/button/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","sourceRoot":"","sources":["../../../../src/components/form/button/component.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAE/B,OAAO,EAAE,IAAI,EAAE,MAAM,OAAO,CAAA;AAE5B,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AAChD,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAA;AACtC,OAAO,EAAa,UAAU,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAA;AACzE,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAC7C,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAA;AAClE,OAAO,EAAE,MAAM,IAAI,QAAQ,EAAE,MAAM,wBAAwB,CAAA;AAC3D,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAA;AAEhC;;;;;;;GAOG;AACH,MAAM,UAAU,GAAG,CAAC,CAAqB,EAA0E,EAAE;IACnH,QAAQ,CAAC,EAAE,CAAC;QACV,KAAK,SAAS,CAAC;QACf,KAAK,WAAW,CAAC,CAAC,OAAO,SAAS,CAAA;QAClC,KAAK,UAAU,CAAC,CAAE,OAAO,SAAS,CAAA;QAClC,KAAK,MAAM,CAAC,CAAM,OAAO,OAAO,CAAA;QAChC,KAAK,aAAa,CAAC;QACnB,KAAK,SAAS,CAAC;QACf,KAAK,WAAW,CAAC;QACjB,KAAK,OAAO,CAAC;QACb,KAAK,MAAM,CAAC;QACZ,KAAK,SAAS;YACZ,OAAO,CAAC,CAAA;QACV,OAAO,CAAC,CAAU,OAAO,SAAS,CAAA;IACpC,CAAC;AACH,CAAC,CAAA;AAED,MAAM,OAAO,GAAG,CAAC,CAAsB,EAA2B,EAAE;IAClE,QAAQ,CAAC,EAAE,CAAC;QACV,KAAK,OAAO,CAAC,CAAE,OAAO,IAAI,CAAA;QAC1B,KAAK,OAAO,CAAC,CAAE,OAAO,IAAI,CAAA;QAC1B,KAAK,QAAQ,CAAC;QACd,OAAO,CAAC,CAAO,OAAO,SAAS,CAAA;IACjC,CAAC;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,MAAM,GAAoB,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,OAAO,GAAG,WAAW,EAAE,EAAE,EAAE;IACvH,MAAM,OAAO,GAAG,UAAU,EAAE,CAAA;IAC5B,MAAM,CAAC,GAAG,YAAY,CAAC,SAAS,EAAE,IAAI,CAAC,CAAA;IACvC,MAAM,IAAI,GAAG,UAAU,CAAC,OAAO,CAAC,GAAG,CAAC,OAAO,EAAE,SAAS,CAAC,CAAA;IACvD,MAAM,IAAI,GAAG,UAAU,CAAC,cAAc,EAAE,SAAS,CAAC,CAAA;IAClD,KAAK,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE;QACtD,YAAY,EAAE,IAAI,CAAC,KAAK,EAAE,EAAE,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC;KACzD,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAC,CAAA;IAE5B,MAAM,QAAQ,GAAG,MAAM,IAAI,IAAI,IAAI,MAAM,CAAC,MAAM,KAAK,IAAI,CAAA;IACzD,MAAM,UAAU,GAAG,QAAQ,CAAA;IAE3B,OAAO,CACL,MAAC,QAAQ,IACP,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,UAAU,CAAC,OAAO,CAAC,EAC5B,IAAI,EAAE,OAAO,CAAC,IAAI,CAAC,EACnB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,EAAE,CAAC,SAAS,IAAI,QAAQ,CAAC,aAEnC,UAAU,IAAI,KAAC,OAAO,IAAC,SAAS,EAAC,cAAc,wBAAe,EAC9D,KAAK,IACG,CACZ,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,YAAY,GAAoB,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE;IAC1D,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,KAAK,CAAA;IAC3B,MAAM,EAAE,YAAY,EAAE,GAAG,cAAc,EAAE,CAAA;IACzC,MAAM,CAAC,GAAG,WAAW,EAAE,CAAA;IAEvB,KAAK,GAAG,KAAK,IAAI,QAAQ,CAAA;IACzB,MAAM,KAAK,GAAsB,EAAE,GAAG,IAAI,EAAE,CAAA;IAC5C,KAAK,CAAC,QAAQ,GAAG,IAAI,CAAA;IAErB,OAAO,KAAC,MAAM,OAAK,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC,KAAK,CAAC,EAAE,IAAI,EAAE,KAAK,EACpD,OAAO,EAAE,YAAY,CACnB,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,OAAO,IAAI,CAAC,GAAG,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,cAAc,CAAC,CAAA,CAAC,CAAC,CAAC,EAC3E,OAAO,CAAC,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,oCAAoC,EAAE,OAAO,CAAC,CACxE,GAAI,CAAA;AACT,CAAC,CAAC,CAAA"}
+{"version":3,"file":"component.js","sourceRoot":"","sources":["../../../../src/components/form/button/component.tsx"],"names":[],"mappings":"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"}

package/build/components/form/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","sourceRoot":"","sources":["../../../src/components/form/component.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"component.js","sourceRoot":"","sources":["../../../src/components/form/component.tsx"],"names":[],"mappings":"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"}

package/build/components/helper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"helper.d.ts","sourceRoot":"","sources":["../../src/components/helper.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAA;AAErD;;;;;;;;;GASG;AACH,eAAO,MAAM,eAAe,GAC1B,aAAa,YAAY,EACzB,WAAW,YAAY,KACtB,MA4BF,CAAA;AAwBD,eAAO,MAAM,aAAa,QAAO,MAchC,CAAA;AAED,eAAO,MAAM,gBAAgB,GAAI,CAAC,EAAE,KAAK,MAAM,CAAC,MAAM,EAAE,CAAC,CAAC,EAAE,MAAM,CAAC,EAAE,aAAa,MAAM,KAAG,CAQ1F,CAAA"}
+{"version":3,"file":"helper.d.ts","sourceRoot":"","sources":["../../src/components/helper.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAA;AAErD;;;;;;;;;GASG;AACH,eAAO,MAAM,eAAe,gBACb,YAAY,aACd,YAAY,KACtB,MA4BF,CAAA;AAwBD,eAAO,MAAM,aAAa,QAAO,MAchC,CAAA;AAED,eAAO,MAAM,gBAAgB,GAAI,CAAC,OAAO,MAAM,CAAC,MAAM,EAAE,CAAC,CAAC,QAAQ,CAAC,eAAe,MAAM,KAAG,CAQ1F,CAAA"}

package/build/components/login/append.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"append.d.ts","sourceRoot":"","sources":["../../../src/components/login/append.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAErD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAA;AACnE,OAAO,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAGlE,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,gBAAgB,EAAE,WAAW,CAAC;IAC3E,0DAA0D;IAC1D,IAAI,CAAC,EAAE,aAAa,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,GAAG,SAAS,CAAA;CACzD;AAED;;;;;;;;;;GAUG;AACH,eAAO,MAAM,iBAAiB,GAAI,CAAC,SAAS,WAAW,EAAE,CAAC,SAAS,YAAY,CAAC,CAAC,CAAC,EAChF,KAAK,CAAC,EAAE,QAAQ,gBAAgB,KAC/B,CASF,CAAA"}
+{"version":3,"file":"append.d.ts","sourceRoot":"","sources":["../../../src/components/login/append.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAErD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAA;AACnE,OAAO,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAGlE,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,gBAAgB,EAAE,WAAW,CAAC;IAC3E,0DAA0D;IAC1D,IAAI,CAAC,EAAE,aAAa,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,GAAG,SAAS,CAAA;CACzD;AAED;;;;;;;;;;GAUG;AACH,eAAO,MAAM,iBAAiB,GAAI,CAAC,SAAS,WAAW,EAAE,CAAC,SAAS,YAAY,CAAC,CAAC,CAAC,OAC3E,CAAC,UAAU,gBAAgB,KAC/B,CASF,CAAA"}

package/build/context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../src/context.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAG,UAAU,EAAE,MAAM,YAAY,CAAA;AAKxD,eAAO,MAAM,WAAW,GAAI,CAAC,SAAS,SAAS,EAAE,CAAC,SAAS,UAAU,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,KAAG,CAalF,CAAA;AAED,eAAO,MAAM,UAAU,GAAI,CAAC,SAAS,SAAS,GAAG,SAAS,EAAC,CAAC,SAAS,UAAU,CAAC,CAAC,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC,QACnF,CAAA"}
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../src/context.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAG,UAAU,EAAE,MAAM,YAAY,CAAA;AAKxD,eAAO,MAAM,WAAW,GAAI,CAAC,SAAS,SAAS,EAAE,CAAC,SAAS,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,KAAG,CAalF,CAAA;AAED,eAAO,MAAM,UAAU,GAAI,CAAC,SAAS,SAAS,GAAG,SAAS,EAAC,CAAC,SAAS,UAAU,CAAC,CAAC,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC,QACnF,CAAA"}

package/build/entrypoints.d.ts

@@ -1,2 +1,2 @@
-export declare const entrypoints: any[];
+export declare const entrypoints: import("@owlmeans/entrypoint").CommonEntrypoint[];
 //# sourceMappingURL=entrypoints.d.ts.map

package/build/entrypoints.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"entrypoints.d.ts","sourceRoot":"","sources":["../src/entrypoints.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,WAAW,OAAuB,CAAA"}
+{"version":3,"file":"entrypoints.d.ts","sourceRoot":"","sources":["../src/entrypoints.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,WAAW,mDAAuB,CAAA"}

package/build/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export * from './use-mobile.js';
+//# sourceMappingURL=index.d.ts.map

package/build/hooks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAA"}

package/build/hooks/index.js

@@ -0,0 +1,2 @@
+export * from './use-mobile.js';
+//# sourceMappingURL=index.js.map

package/build/hooks/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAA"}

package/build/hooks/use-mobile.d.ts

@@ -0,0 +1,16 @@
+/** Tailwind's `md` — the width at which the navigation shell swaps its side menu for the bar. */
+export declare const MOBILE_BREAKPOINT = 768;
+/**
+ * Whether the viewport is narrower than Tailwind's `md`, for a component that has to pick a tree
+ * rather than render both and hide one with `md:hidden`.
+ *
+ * It matches a media query instead of listening for `resize` the way `useBreakPoint` does: the
+ * browser evaluates the query itself and notifies only when the answer flips, so dragging a window
+ * across the whole width costs one render rather than one per frame.
+ *
+ * The answer is `false` before the first effect and on a server render, because `window` is the
+ * only thing that knows the width. That makes the desktop tree the one server-rendered HTML and
+ * the first client paint agree on, so hydration never mismatches.
+ */
+export declare const useIsMobile: () => boolean;
+//# sourceMappingURL=use-mobile.d.ts.map

package/build/hooks/use-mobile.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-mobile.d.ts","sourceRoot":"","sources":["../../src/hooks/use-mobile.ts"],"names":[],"mappings":"AAEA,iGAAiG;AACjG,eAAO,MAAM,iBAAiB,MAAM,CAAA;AAEpC;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,WAAW,QAAO,OAiB9B,CAAA"}

package/build/hooks/use-mobile.js

@@ -0,0 +1,30 @@
+import { useEffect, useState } from 'react';
+/** Tailwind's `md` — the width at which the navigation shell swaps its side menu for the bar. */
+export const MOBILE_BREAKPOINT = 768;
+/**
+ * Whether the viewport is narrower than Tailwind's `md`, for a component that has to pick a tree
+ * rather than render both and hide one with `md:hidden`.
+ *
+ * It matches a media query instead of listening for `resize` the way `useBreakPoint` does: the
+ * browser evaluates the query itself and notifies only when the answer flips, so dragging a window
+ * across the whole width costs one render rather than one per frame.
+ *
+ * The answer is `false` before the first effect and on a server render, because `window` is the
+ * only thing that knows the width. That makes the desktop tree the one server-rendered HTML and
+ * the first client paint agree on, so hydration never mismatches.
+ */
+export const useIsMobile = () => {
+    const [isMobile, setIsMobile] = useState(false);
+    useEffect(() => {
+        if (typeof window === 'undefined' || window.matchMedia == null) {
+            return;
+        }
+        const query = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+        const read = () => setIsMobile(query.matches);
+        read();
+        query.addEventListener('change', read);
+        return () => query.removeEventListener('change', read);
+    }, []);
+    return isMobile;
+};
+//# sourceMappingURL=use-mobile.js.map

package/build/hooks/use-mobile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-mobile.js","sourceRoot":"","sources":["../../src/hooks/use-mobile.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAE3C,iGAAiG;AACjG,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;AAEpC;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,GAAY,EAAE;IACvC,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAE/C,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,OAAO,MAAM,KAAK,WAAW,IAAI,MAAM,CAAC,UAAU,IAAI,IAAI,EAAE,CAAC;YAC/D,OAAM;QACR,CAAC;QAED,MAAM,KAAK,GAAG,MAAM,CAAC,UAAU,CAAC,eAAe,iBAAiB,GAAG,CAAC,KAAK,CAAC,CAAA;QAC1E,MAAM,IAAI,GAAG,GAAG,EAAE,CAAC,WAAW,CAAC,KAAK,CAAC,OAAO,CAAC,CAAA;QAC7C,IAAI,EAAE,CAAA;QACN,KAAK,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAA;QAEtC,OAAO,GAAG,EAAE,CAAC,KAAK,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAA;IACxD,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,OAAO,QAAQ,CAAA;AACjB,CAAC,CAAA"}

package/build/index.d.ts

@@ -4,5 +4,7 @@ export * from './exports.js';
 export * from './context.js';
 export * from './entrypoints.js';
 export * from './components/index.js';
+export * from './hooks/index.js';
+export * from './utils.js';
 export * from '@owlmeans/client-panel';
 //# sourceMappingURL=index.d.ts.map

package/build/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,mBAAmB,YAAY,CAAA;AAC/B,cAAc,WAAW,CAAA;AACzB,cAAc,cAAc,CAAA;AAC5B,cAAc,cAAc,CAAA;AAC5B,cAAc,kBAAkB,CAAA;AAChC,cAAc,uBAAuB,CAAA;AAErC,cAAc,wBAAwB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,mBAAmB,YAAY,CAAA;AAC/B,cAAc,WAAW,CAAA;AACzB,cAAc,cAAc,CAAA;AAC5B,cAAc,cAAc,CAAA;AAC5B,cAAc,kBAAkB,CAAA;AAChC,cAAc,uBAAuB,CAAA;AACrC,cAAc,kBAAkB,CAAA;AAChC,cAAc,YAAY,CAAA;AAE1B,cAAc,wBAAwB,CAAA"}

package/build/index.js

@@ -3,5 +3,7 @@ export * from './exports.js';
 export * from './context.js';
 export * from './entrypoints.js';
 export * from './components/index.js';
+export * from './hooks/index.js';
+export * from './utils.js';
 export * from '@owlmeans/client-panel';
 //# sourceMappingURL=index.js.map

package/build/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,cAAc,WAAW,CAAA;AACzB,cAAc,cAAc,CAAA;AAC5B,cAAc,cAAc,CAAA;AAC5B,cAAc,kBAAkB,CAAA;AAChC,cAAc,uBAAuB,CAAA;AAErC,cAAc,wBAAwB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,cAAc,WAAW,CAAA;AACzB,cAAc,cAAc,CAAA;AAC5B,cAAc,cAAc,CAAA;AAC5B,cAAc,kBAAkB,CAAA;AAChC,cAAc,uBAAuB,CAAA;AACrC,cAAc,kBAAkB,CAAA;AAChC,cAAc,YAAY,CAAA;AAE1B,cAAc,wBAAwB,CAAA"}

package/build/jobs/component.d.ts

@@ -0,0 +1,19 @@
+import type { FC } from 'react';
+import type { JobRecord } from '@owlmeans/queue';
+import type { JobProps, JobStatusProps } from './types.js';
+/**
+ * A job's progress as a percentage, or `undefined` when there is nothing to show yet.
+ *
+ * `JobRecord.progress` is deliberately `unknown` — a processor reports whatever it counts — so the
+ * three shapes worth understanding are read here and everything else falls through to the
+ * indeterminate bar, which is the honest answer for "running, no idea how far".
+ */
+export declare const jobProgressValue: (job: JobRecord) => number | undefined;
+/**
+ * The bar for one job. A job with nothing to report animates indeterminately rather than sitting
+ * at zero, because zero and "the processor never called `progress()`" look identical otherwise.
+ */
+export declare const JobProgress: FC<JobProps>;
+/** The state pill. `data-state` carries the raw state, so a test never keys on the wording. */
+export declare const JobStatus: FC<JobStatusProps>;
+//# sourceMappingURL=component.d.ts.map

package/build/jobs/component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../src/jobs/component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAG/B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAGhD,OAAO,KAAK,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,YAAY,CAAA;AAE1D;;;;;;GAMG;AACH,eAAO,MAAM,gBAAgB,QAAS,SAAS,KAAG,MAAM,GAAG,SAW1D,CAAA;AAcD;;;GAGG;AACH,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,QAAQ,CASpC,CAAA;AAWD,+FAA+F;AAC/F,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CAYxC,CAAA"}

package/build/jobs/component.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { JobState } from '@owlmeans/queue';
+import { Progress } from '@/components/ui/progress';
+import { cn } from '@/lib/utils';
+/**
+ * A job's progress as a percentage, or `undefined` when there is nothing to show yet.
+ *
+ * `JobRecord.progress` is deliberately `unknown` — a processor reports whatever it counts — so the
+ * three shapes worth understanding are read here and everything else falls through to the
+ * indeterminate bar, which is the honest answer for "running, no idea how far".
+ */
+export const jobProgressValue = (job) => {
+    if (job.state === JobState.Completed) {
+        return 100;
+    }
+    const progress = job.progress;
+    const value = typeof progress === 'number' ? progress
+        : typeof progress === 'object' && progress != null
+            ? percentOf(progress)
+            : undefined;
+    return value == null ? undefined : Math.max(0, Math.min(100, value));
+};
+const percentOf = (progress) => {
+    if (typeof progress.percent === 'number') {
+        return progress.percent;
+    }
+    const { done, total } = progress;
+    if (typeof done === 'number' && typeof total === 'number' && total > 0) {
+        return (done / total) * 100;
+    }
+    return undefined;
+};
+/**
+ * The bar for one job. A job with nothing to report animates indeterminately rather than sitting
+ * at zero, because zero and "the processor never called `progress()`" look identical otherwise.
+ */
+export const JobProgress = ({ job, className, style }) => {
+    const value = useMemo(() => jobProgressValue(job), [job.state, job.progress]);
+    return _jsx(Progress, { "data-slot": "job-progress", value: value, className: cn('w-full', className), style: style });
+};
+const STATE_STYLE = {
+    [JobState.Waiting]: 'border-border bg-muted text-muted-foreground',
+    [JobState.Delayed]: 'border-border bg-muted text-muted-foreground',
+    [JobState.Active]: 'border-border bg-accent text-accent-foreground',
+    [JobState.Completed]: 'border-primary/40 bg-primary/10 text-primary',
+    [JobState.Failed]: 'border-destructive/40 bg-destructive/10 text-destructive',
+    [JobState.Unknown]: 'border-border bg-muted text-muted-foreground',
+};
+/** The state pill. `data-state` carries the raw state, so a test never keys on the wording. */
+export const JobStatus = ({ job, labels, className, style }) => {
+    const state = job.state ?? JobState.Unknown;
+    return _jsx("span", { "data-slot": "job-status", "data-state": state, className: cn('inline-flex items-center rounded-full border px-2 py-0.5 text-xs font-medium', STATE_STYLE[state], className), style: style, children: labels?.[state] ?? state });
+};
+//# sourceMappingURL=component.js.map

package/build/jobs/component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.js","sourceRoot":"","sources":["../../src/jobs/component.tsx"],"names":[],"mappings":"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"}

package/build/jobs/index.d.ts

@@ -0,0 +1,4 @@
+export type * from './types.js';
+export * from './component.js';
+export * from './toasts.js';
+//# sourceMappingURL=index.d.ts.map

package/build/jobs/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/jobs/index.ts"],"names":[],"mappings":"AAAA,mBAAmB,YAAY,CAAA;AAE/B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,aAAa,CAAA"}

package/build/jobs/index.js

@@ -0,0 +1,3 @@
+export * from './component.js';
+export * from './toasts.js';
+//# sourceMappingURL=index.js.map

package/build/jobs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/jobs/index.ts"],"names":[],"mappings":"AAEA,cAAc,gBAAgB,CAAA;AAC9B,cAAc,aAAa,CAAA"}

package/build/jobs/toasts.d.ts

@@ -0,0 +1,14 @@
+import type { JobRecord } from '@owlmeans/queue';
+import type { JobToastOptions } from './types.js';
+/**
+ * Announce jobs as they finish, on the `Toaster` the layout already mounts.
+ *
+ * Hand it whatever the screen is already showing — `useJobs()` from `@owlmeans/client-job` maps
+ * straight onto it — and it raises one toast per job the first time that job settles.
+ *
+ * **The first pass never toasts.** A screen opening onto a store seeded with yesterday's finished
+ * jobs would otherwise fire a stack of them at once, so everything already settled when this
+ * mounts is recorded as announced and only what settles afterwards is reported.
+ */
+export declare const useJobToasts: (jobs: JobRecord[], opts?: JobToastOptions) => void;
+//# sourceMappingURL=toasts.d.ts.map

package/build/jobs/toasts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toasts.d.ts","sourceRoot":"","sources":["../../src/jobs/toasts.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAChD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AAEjD;;;;;;;;;GASG;AACH,eAAO,MAAM,YAAY,SAAU,SAAS,EAAE,SAAS,eAAe,KAAG,IAwBxE,CAAA"}

package/build/jobs/toasts.js

@@ -0,0 +1,39 @@
+import { useEffect, useRef } from 'react';
+import { toast } from 'sonner';
+import { isSettled, JobState } from '@owlmeans/queue';
+/**
+ * Announce jobs as they finish, on the `Toaster` the layout already mounts.
+ *
+ * Hand it whatever the screen is already showing — `useJobs()` from `@owlmeans/client-job` maps
+ * straight onto it — and it raises one toast per job the first time that job settles.
+ *
+ * **The first pass never toasts.** A screen opening onto a store seeded with yesterday's finished
+ * jobs would otherwise fire a stack of them at once, so everything already settled when this
+ * mounts is recorded as announced and only what settles afterwards is reported.
+ */
+export const useJobToasts = (jobs, opts) => {
+    const announced = useRef(new Set());
+    const primed = useRef(false);
+    // Re-run on what actually decides a toast, not on the array identity a caller rebuilds per render.
+    const settlement = jobs.map(job => `${job.id}:${job.state}`).join(',');
+    useEffect(() => {
+        jobs.forEach(job => {
+            if (job.id == null || !isSettled(job.state) || announced.current.has(job.id)) {
+                return;
+            }
+            announced.current.add(job.id);
+            if (!primed.current) {
+                return;
+            }
+            const message = opts?.message?.(job) ?? job.name;
+            if (job.state === JobState.Completed) {
+                toast.success(message);
+            }
+            else {
+                toast.error(job.error != null && job.error !== '' ? `${String(message)}: ${job.error}` : message);
+            }
+        });
+        primed.current = true;
+    }, [settlement]);
+};
+//# sourceMappingURL=toasts.js.map

package/build/jobs/toasts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toasts.js","sourceRoot":"","sources":["../../src/jobs/toasts.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAA;AAC9B,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AAIrD;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,IAAiB,EAAE,IAAsB,EAAQ,EAAE;IAC9E,MAAM,SAAS,GAAG,MAAM,CAAc,IAAI,GAAG,EAAE,CAAC,CAAA;IAChD,MAAM,MAAM,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;IAC5B,mGAAmG;IACnG,MAAM,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,GAAG,CAAC,EAAE,IAAI,GAAG,CAAC,KAAK,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;IAEtE,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;YACjB,IAAI,GAAG,CAAC,EAAE,IAAI,IAAI,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,SAAS,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC;gBAC7E,OAAM;YACR,CAAC;YACD,SAAS,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CAAA;YAC7B,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,CAAC;gBACpB,OAAM;YACR,CAAC;YACD,MAAM,OAAO,GAAG,IAAI,EAAE,OAAO,EAAE,CAAC,GAAG,CAAC,IAAI,GAAG,CAAC,IAAI,CAAA;YAChD,IAAI,GAAG,CAAC,KAAK,KAAK,QAAQ,CAAC,SAAS,EAAE,CAAC;gBACrC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAA;YACxB,CAAC;iBAAM,CAAC;gBACN,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,KAAK,IAAI,IAAI,IAAI,GAAG,CAAC,KAAK,KAAK,EAAE,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,GAAG,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,CAAA;YACnG,CAAC;QACH,CAAC,CAAC,CAAA;QACF,MAAM,CAAC,OAAO,GAAG,IAAI,CAAA;IACvB,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAA;AAClB,CAAC,CAAA"}

package/build/jobs/types.d.ts

@@ -0,0 +1,21 @@
+import type { ReactNode } from 'react';
+import type { JobRecord, JobState } from '@owlmeans/queue';
+import type { StyledProps } from '../components/types.js';
+export interface JobProps extends StyledProps {
+    job: JobRecord;
+}
+export interface JobStatusProps extends JobProps {
+    /**
+     * What each state is called on screen.
+     *
+     * There is no packaged wording: the states are broker vocabulary, and the sentence an app wants
+     * for them ("Queued", "Rendering", "Ready") is the app's own copy in the app's own namespace.
+     * Absent a label the raw state is rendered, which is data rather than an untranslated string.
+     */
+    labels?: Partial<Record<JobState, ReactNode>>;
+}
+export interface JobToastOptions {
+    /** What the toast says. The job's own name when omitted. */
+    message?: (job: JobRecord) => ReactNode;
+}
+//# sourceMappingURL=types.d.ts.map

package/build/jobs/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/jobs/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AAC1D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAA;AAEzD,MAAM,WAAW,QAAS,SAAQ,WAAW;IAC3C,GAAG,EAAE,SAAS,CAAA;CACf;AAED,MAAM,WAAW,cAAe,SAAQ,QAAQ;IAC9C;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC,CAAA;CAC9C;AAED,MAAM,WAAW,eAAe;IAC9B,4DAA4D;IAC5D,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,SAAS,KAAK,SAAS,CAAA;CACxC"}

package/build/jobs/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/build/jobs/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/jobs/types.ts"],"names":[],"mappings":""}

package/build/main.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../src/main.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAc,MAAM,sBAAsB,CAAA;AACrE,OAAO,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAA;AAO3E,MAAM,WAAW,gBAAiB,SAAQ,aAAa;IACrD,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB;AAED,eAAO,MAAM,MAAM,GAAI,CAAC,SAAS,YAAY,EAAE,CAAC,SAAS,aAAa,CAAC,CAAC,CAAC,EAAE,SAAS,CAAC,EAAE,OAAO,gBAAgB,SAE7G,CAAA"}
+{"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../src/main.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAc,MAAM,sBAAsB,CAAA;AACrE,OAAO,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAA;AAO3E,MAAM,WAAW,gBAAiB,SAAQ,aAAa;IACrD,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB;AAED,eAAO,MAAM,MAAM,GAAI,CAAC,SAAS,YAAY,EAAE,CAAC,SAAS,aAAa,CAAC,CAAC,CAAC,WAAW,CAAC,SAAS,gBAAgB,SAE7G,CAAA"}

package/build/utils.d.ts

@@ -0,0 +1,13 @@
+import { type ClassValue } from 'clsx';
+/**
+ * The class-name merger every component in this package is written against, exported so a
+ * consuming application doesn't declare its own copy.
+ *
+ * This is deliberately NOT a re-export of `@/lib/utils`. That specifier is left verbatim in the
+ * build and resolves to the CONSUMER's vendored file, so re-exporting it would hand an app back
+ * its own function and fail outright wherever the `@` alias isn't configured. The vendored copy
+ * under `src/@/lib/` stays exactly as shadcn emits it, because the package's own components must
+ * keep resolving through the `@` contract.
+ */
+export declare const cn: (...inputs: ClassValue[]) => string;
+//# sourceMappingURL=utils.d.ts.map

package/build/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,UAAU,EAAE,MAAM,MAAM,CAAA;AAG5C;;;;;;;;;GASG;AACH,eAAO,MAAM,EAAE,cAAe,UAAU,EAAE,KAAG,MAA+B,CAAA"}

package/build/utils.js

@@ -0,0 +1,14 @@
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+/**
+ * The class-name merger every component in this package is written against, exported so a
+ * consuming application doesn't declare its own copy.
+ *
+ * This is deliberately NOT a re-export of `@/lib/utils`. That specifier is left verbatim in the
+ * build and resolves to the CONSUMER's vendored file, so re-exporting it would hand an app back
+ * its own function and fail outright wherever the `@` alias isn't configured. The vendored copy
+ * under `src/@/lib/` stays exactly as shadcn emits it, because the package's own components must
+ * keep resolving through the `@` contract.
+ */
+export const cn = (...inputs) => twMerge(clsx(inputs));
+//# sourceMappingURL=utils.js.map

package/build/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAmB,MAAM,MAAM,CAAA;AAC5C,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AAExC;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,MAAoB,EAAU,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@owlmeans/web-panel",
-  "version": "0.1.18-rc.30",
+  "version": "0.1.18-rc.32",
   "license": "MIT",
   "type": "module",
   "scripts": {
@@ -40,35 +40,43 @@
       "default": "./build/consent/index.js",
       "module": "./build/consent/index.js",
       "types": "./build/consent/index.d.ts"
+    },
+    "./jobs": {
+      "import": "./build/jobs/index.js",
+      "require": "./build/jobs/index.js",
+      "default": "./build/jobs/index.js",
+      "module": "./build/jobs/index.js",
+      "types": "./build/jobs/index.d.ts"
     }
   },
   "dependencies": {
     "@hookform/resolvers": "^5.2.2",
-    "@owlmeans/api-config-client": "^0.1.18-rc.11",
-    "@owlmeans/auth": "^0.1.18-rc.8",
-    "@owlmeans/auth-common": "^0.1.18-rc.11",
-    "@owlmeans/basic-envelope": "^0.1.18-rc.10",
-    "@owlmeans/client": "^0.1.18-rc.14",
-    "@owlmeans/client-auth": "^0.1.18-rc.18",
-    "@owlmeans/client-config": "^0.1.18-rc.10",
-    "@owlmeans/client-context": "^0.1.18-rc.11",
-    "@owlmeans/client-entrypoint": "^0.1.18-rc.11",
-    "@owlmeans/client-flow": "^0.1.18-rc.15",
-    "@owlmeans/client-i18n": "^0.1.18-rc.13",
-    "@owlmeans/client-panel": "^0.1.18-rc.21",
-    "@owlmeans/client-route": "^0.1.18-rc.11",
-    "@owlmeans/config": "^0.1.18-rc.10",
-    "@owlmeans/context": "^0.1.18-rc.7",
-    "@owlmeans/entrypoint": "^0.1.18-rc.9",
-    "@owlmeans/error": "^0.1.18-rc.7",
-    "@owlmeans/flow": "^0.1.18-rc.12",
-    "@owlmeans/i18n": "^0.1.18-rc.7",
-    "@owlmeans/route": "^0.1.18-rc.7",
-    "@owlmeans/web-client": "^0.1.18-rc.22",
-    "@owlmeans/web-consent": "^0.1.18-rc.5",
-    "@owlmeans/web-db": "^0.1.18-rc.12",
-    "@owlmeans/web-flow": "^0.1.18-rc.15",
-    "@owlmeans/web-router": "^0.1.18-rc.12",
+    "@owlmeans/api-config-client": "^0.1.18-rc.13",
+    "@owlmeans/auth": "^0.1.18-rc.9",
+    "@owlmeans/auth-common": "^0.1.18-rc.13",
+    "@owlmeans/basic-envelope": "^0.1.18-rc.12",
+    "@owlmeans/client": "^0.1.18-rc.16",
+    "@owlmeans/client-auth": "^0.1.18-rc.20",
+    "@owlmeans/client-config": "^0.1.18-rc.12",
+    "@owlmeans/client-context": "^0.1.18-rc.13",
+    "@owlmeans/client-entrypoint": "^0.1.18-rc.13",
+    "@owlmeans/client-flow": "^0.1.18-rc.17",
+    "@owlmeans/client-i18n": "^0.1.18-rc.15",
+    "@owlmeans/client-panel": "^0.1.18-rc.23",
+    "@owlmeans/client-route": "^0.1.18-rc.13",
+    "@owlmeans/config": "^0.1.18-rc.12",
+    "@owlmeans/context": "^0.1.18-rc.8",
+    "@owlmeans/entrypoint": "^0.1.18-rc.11",
+    "@owlmeans/error": "^0.1.18-rc.8",
+    "@owlmeans/flow": "^0.1.18-rc.14",
+    "@owlmeans/i18n": "^0.1.18-rc.8",
+    "@owlmeans/queue": "^0.1.18-rc.9",
+    "@owlmeans/route": "^0.1.18-rc.9",
+    "@owlmeans/web-client": "^0.1.18-rc.24",
+    "@owlmeans/web-consent": "^0.1.18-rc.7",
+    "@owlmeans/web-db": "^0.1.18-rc.14",
+    "@owlmeans/web-flow": "^0.1.18-rc.17",
+    "@owlmeans/web-router": "^0.1.18-rc.14",
     "i18next-browser-languagedetector": "^8.0.0",
     "qrcode.react": "^4.2.0",
     "react-google-recaptcha": "^3.1.0",
@@ -92,7 +100,7 @@
   },
   "devDependencies": {
     "@owlmeans/dep-config": "workspace:*",
-    "@owlmeans/test-ui": "^0.1.18-rc.13",
+    "@owlmeans/test-ui": "^0.1.18-rc.15",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-navigation-menu": "^1.2.14",
     "@radix-ui/react-progress": "^1.1.0",

package/src/hooks/index.ts

@@ -0,0 +1 @@
+export * from './use-mobile.js'

package/src/hooks/use-mobile.ts

@@ -0,0 +1,35 @@
+import { useEffect, useState } from 'react'
+
+/** Tailwind's `md` — the width at which the navigation shell swaps its side menu for the bar. */
+export const MOBILE_BREAKPOINT = 768
+
+/**
+ * Whether the viewport is narrower than Tailwind's `md`, for a component that has to pick a tree
+ * rather than render both and hide one with `md:hidden`.
+ *
+ * It matches a media query instead of listening for `resize` the way `useBreakPoint` does: the
+ * browser evaluates the query itself and notifies only when the answer flips, so dragging a window
+ * across the whole width costs one render rather than one per frame.
+ *
+ * The answer is `false` before the first effect and on a server render, because `window` is the
+ * only thing that knows the width. That makes the desktop tree the one server-rendered HTML and
+ * the first client paint agree on, so hydration never mismatches.
+ */
+export const useIsMobile = (): boolean => {
+  const [isMobile, setIsMobile] = useState(false)
+
+  useEffect(() => {
+    if (typeof window === 'undefined' || window.matchMedia == null) {
+      return
+    }
+
+    const query = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const read = () => setIsMobile(query.matches)
+    read()
+    query.addEventListener('change', read)
+
+    return () => query.removeEventListener('change', read)
+  }, [])
+
+  return isMobile
+}

package/src/index.ts

@@ -5,5 +5,7 @@ export * from './exports.js'
 export * from './context.js'
 export * from './entrypoints.js'
 export * from './components/index.js'
+export * from './hooks/index.js'
+export * from './utils.js'
 
 export * from '@owlmeans/client-panel'

package/src/jobs/component.tsx

@@ -0,0 +1,78 @@
+import type { FC } from 'react'
+import { useMemo } from 'react'
+import { JobState } from '@owlmeans/queue'
+import type { JobRecord } from '@owlmeans/queue'
+import { Progress } from '@/components/ui/progress'
+import { cn } from '@/lib/utils'
+import type { JobProps, JobStatusProps } from './types.js'
+
+/**
+ * A job's progress as a percentage, or `undefined` when there is nothing to show yet.
+ *
+ * `JobRecord.progress` is deliberately `unknown` — a processor reports whatever it counts — so the
+ * three shapes worth understanding are read here and everything else falls through to the
+ * indeterminate bar, which is the honest answer for "running, no idea how far".
+ */
+export const jobProgressValue = (job: JobRecord): number | undefined => {
+  if (job.state === JobState.Completed) {
+    return 100
+  }
+  const progress = job.progress
+  const value = typeof progress === 'number' ? progress
+    : typeof progress === 'object' && progress != null
+      ? percentOf(progress as Record<string, unknown>)
+      : undefined
+
+  return value == null ? undefined : Math.max(0, Math.min(100, value))
+}
+
+const percentOf = (progress: Record<string, unknown>): number | undefined => {
+  if (typeof progress.percent === 'number') {
+    return progress.percent
+  }
+  const { done, total } = progress
+  if (typeof done === 'number' && typeof total === 'number' && total > 0) {
+    return (done / total) * 100
+  }
+
+  return undefined
+}
+
+/**
+ * The bar for one job. A job with nothing to report animates indeterminately rather than sitting
+ * at zero, because zero and "the processor never called `progress()`" look identical otherwise.
+ */
+export const JobProgress: FC<JobProps> = ({ job, className, style }) => {
+  const value = useMemo(() => jobProgressValue(job), [job.state, job.progress])
+
+  return <Progress
+    data-slot="job-progress"
+    value={value}
+    className={cn('w-full', className)}
+    style={style}
+  />
+}
+
+const STATE_STYLE: Record<JobState, string> = {
+  [JobState.Waiting]: 'border-border bg-muted text-muted-foreground',
+  [JobState.Delayed]: 'border-border bg-muted text-muted-foreground',
+  [JobState.Active]: 'border-border bg-accent text-accent-foreground',
+  [JobState.Completed]: 'border-primary/40 bg-primary/10 text-primary',
+  [JobState.Failed]: 'border-destructive/40 bg-destructive/10 text-destructive',
+  [JobState.Unknown]: 'border-border bg-muted text-muted-foreground',
+}
+
+/** The state pill. `data-state` carries the raw state, so a test never keys on the wording. */
+export const JobStatus: FC<JobStatusProps> = ({ job, labels, className, style }) => {
+  const state = job.state ?? JobState.Unknown
+
+  return <span
+    data-slot="job-status"
+    data-state={state}
+    className={cn(
+      'inline-flex items-center rounded-full border px-2 py-0.5 text-xs font-medium',
+      STATE_STYLE[state], className
+    )}
+    style={style}
+  >{labels?.[state] ?? state}</span>
+}

package/src/jobs/index.ts

@@ -0,0 +1,4 @@
+export type * from './types.js'
+
+export * from './component.js'
+export * from './toasts.js'

package/src/jobs/toasts.ts

@@ -0,0 +1,41 @@
+import { useEffect, useRef } from 'react'
+import { toast } from 'sonner'
+import { isSettled, JobState } from '@owlmeans/queue'
+import type { JobRecord } from '@owlmeans/queue'
+import type { JobToastOptions } from './types.js'
+
+/**
+ * Announce jobs as they finish, on the `Toaster` the layout already mounts.
+ *
+ * Hand it whatever the screen is already showing — `useJobs()` from `@owlmeans/client-job` maps
+ * straight onto it — and it raises one toast per job the first time that job settles.
+ *
+ * **The first pass never toasts.** A screen opening onto a store seeded with yesterday's finished
+ * jobs would otherwise fire a stack of them at once, so everything already settled when this
+ * mounts is recorded as announced and only what settles afterwards is reported.
+ */
+export const useJobToasts = (jobs: JobRecord[], opts?: JobToastOptions): void => {
+  const announced = useRef<Set<string>>(new Set())
+  const primed = useRef(false)
+  // Re-run on what actually decides a toast, not on the array identity a caller rebuilds per render.
+  const settlement = jobs.map(job => `${job.id}:${job.state}`).join(',')
+
+  useEffect(() => {
+    jobs.forEach(job => {
+      if (job.id == null || !isSettled(job.state) || announced.current.has(job.id)) {
+        return
+      }
+      announced.current.add(job.id)
+      if (!primed.current) {
+        return
+      }
+      const message = opts?.message?.(job) ?? job.name
+      if (job.state === JobState.Completed) {
+        toast.success(message)
+      } else {
+        toast.error(job.error != null && job.error !== '' ? `${String(message)}: ${job.error}` : message)
+      }
+    })
+    primed.current = true
+  }, [settlement])
+}

package/src/jobs/types.ts

@@ -0,0 +1,23 @@
+import type { ReactNode } from 'react'
+import type { JobRecord, JobState } from '@owlmeans/queue'
+import type { StyledProps } from '../components/types.js'
+
+export interface JobProps extends StyledProps {
+  job: JobRecord
+}
+
+export interface JobStatusProps extends JobProps {
+  /**
+   * What each state is called on screen.
+   *
+   * There is no packaged wording: the states are broker vocabulary, and the sentence an app wants
+   * for them ("Queued", "Rendering", "Ready") is the app's own copy in the app's own namespace.
+   * Absent a label the raw state is rendered, which is data rather than an untranslated string.
+   */
+  labels?: Partial<Record<JobState, ReactNode>>
+}
+
+export interface JobToastOptions {
+  /** What the toast says. The job's own name when omitted. */
+  message?: (job: JobRecord) => ReactNode
+}

package/src/utils.ts

@@ -0,0 +1,14 @@
+import { clsx, type ClassValue } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+/**
+ * The class-name merger every component in this package is written against, exported so a
+ * consuming application doesn't declare its own copy.
+ *
+ * This is deliberately NOT a re-export of `@/lib/utils`. That specifier is left verbatim in the
+ * build and resolves to the CONSUMER's vendored file, so re-exporting it would hand an app back
+ * its own function and fail outright wherever the `@` alias isn't configured. The vendored copy
+ * under `src/@/lib/` stays exactly as shadcn emits it, because the package's own components must
+ * keep resolving through the `@` contract.
+ */
+export const cn = (...inputs: ClassValue[]): string => twMerge(clsx(inputs))