@kestack/web-platform 0.0.0-stage → 0.0.1

package/dist/app/session/open.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"open.js","names":["Client"],"sources":["../../../src/app/session/open.ts"],"sourcesContent":["import {\n  Cause,\n  Context,\n  Deferred,\n  Effect,\n  Exit,\n  Layer,\n  ManagedRuntime,\n  Option,\n  type Scope,\n  Stream,\n} from 'effect';\nimport { type RpcClient, RpcClient as Client } from 'effect/rpc';\nimport type { Account } from '@kestack/auth-toolkit/client';\nimport { Authz } from '@kestack/auth-toolkit/guard';\nimport { Rpc } from '@kestack/rpc-toolkit/rpc';\nimport {\n  createStdSync,\n  type EffectRuntime,\n  type SyncStore,\n} from '@kestack/std-toolkit/sync';\nimport type { ApiClients, Apis } from '../apis/index.ts';\nimport type { SessionContext } from './define.ts';\nimport { SessionClosed } from './define.ts';\nimport { syncName } from './keeper.ts';\nimport type { StatusCell } from './status.ts';\n\nconst makeSync = (\n  name: string,\n  runtime: EffectRuntime<never>,\n  store: SyncStore,\n) => createStdSync<never>({ name, runtime, store });\n\n/** One Account's Std Sync, named for its user. */\nexport type StdSync = ReturnType<typeof makeSync>;\n\n/** An open Session as the Web Platform holds it: the app's value, the APIs\n * signed as the Account, how to run an Effect in it, and its status. */\nexport interface Opened<S> {\n  readonly value: S;\n  readonly apis: Readonly<Record<string, unknown>>;\n  readonly run: (\n    effect: Effect.Effect<unknown, unknown, never>,\n  ) => Promise<unknown>;\n  readonly status: StatusCell;\n}\n\ninterface ClientOf {\n  readonly '@kestack/web-platform/ApiClient': unique symbol;\n}\n\ntype AnyCall = (...args: ReadonlyArray<unknown>) => unknown;\n\n// One API's client, and its WebSocket connection if it has one.\ninterface Made {\n  readonly client: object;\n  readonly connection: Option.Option<Rpc.websocket.connection['Service']>;\n}\n\n// Done once a connection that was up goes down: a stream on it is stranded\n// then, as nothing it was sent survives the server's side of the socket.\nconst droppedOn = (connection: Made['connection']) =>\n  Option.match(connection, {\n    onNone: () => Effect.never,\n    onSome: ({ connectionStatus }) =>\n      connectionStatus.pipe(\n        Stream.dropWhile((status) => status !== 'connected'),\n        Stream.filter((status) => status !== 'connected'),\n        Stream.runHead,\n        Effect.asVoid,\n      ),\n  });\n\n/**\n * Opens one Account's Session: a runtime holding every API's client, each\n * over its own protocol and signed with `token`, the user's Std Sync on\n * `store`, and then the app's own Session on them. Ends, in order: the\n * app's Session, the Std Sync once its writes on their way have landed,\n * every call still in flight (interrupted), the runtime.\n */\nexport const openSession = <A extends Apis, S>(options: {\n  readonly apis: A;\n  readonly protocols: {\n    readonly [K in keyof A]: Layer.Layer<RpcClient.Protocol>;\n  };\n  readonly store: SyncStore;\n  readonly account: Account;\n  readonly token: Effect.Effect<string>;\n  readonly status: StatusCell;\n  readonly open: (\n    context: SessionContext<A>,\n  ) => Effect.Effect<S, never, Scope.Scope>;\n  /** The Session's Service, provided to everything `run` runs. */\n  readonly service: Context.Key<unknown, S>;\n}): Effect.Effect<Opened<S>, never, Scope.Scope> =>\n  Effect.gen(function* () {\n    const { apis, account } = options;\n    const names = Object.keys(apis);\n    const keys = new Map(\n      names.map((name) => [\n        name,\n        Context.Service<ClientOf, Made>(\n          `@kestack/web-platform/ApiClient/${name}`,\n        ),\n      ]),\n    );\n    const bearer = Authz.bearer(options.token);\n    const layers = names.map((name) =>\n      Layer.effect(\n        keys.get(name)!,\n        Effect.all({\n          client: Client.make(apis[name]!.group),\n          connection: Effect.serviceOption(Rpc.websocket.connection),\n        }),\n      ).pipe(Layer.provide([options.protocols[name]!, bearer])),\n    );\n    const runtime = ManagedRuntime.make(\n      (layers.length === 0\n        ? Layer.empty\n        : Layer.mergeAll(\n            ...(layers as [Layer.Layer<ClientOf>]),\n          )) as Layer.Layer<ClientOf>,\n    );\n    yield* Effect.addFinalizer(() => Effect.promise(() => runtime.dispose()));\n    const raw = yield* Effect.promise(() =>\n      runtime.runPromise(\n        Effect.forEach(names, (name) =>\n          Effect.gen(function* () {\n            return yield* keys.get(name)!;\n          }),\n        ),\n      ),\n    );\n\n    // Added before the Std Sync's, so it runs after: the Std Sync's last\n    // writes still land, and only then is a call still in flight cut off.\n    const closed = yield* Deferred.make<void>();\n    yield* Effect.addFinalizer(() => Deferred.succeed(closed, undefined));\n    const cut = <X, E, R>(call: Effect.Effect<X, E, R>) =>\n      Effect.raceFirst(\n        call,\n        Effect.andThen(Deferred.await(closed), Effect.interrupt),\n      );\n    // A stream ends when the Session closes, and when its socket drops, so\n    // whoever reads it opens it again from where they have got to.\n    const signed = ({ client, connection }: Made) =>\n      Object.fromEntries(\n        Object.entries(client).map(([tag, call]) => [\n          tag,\n          typeof call !== 'function'\n            ? call\n            : (...args: ReadonlyArray<unknown>) => {\n                const made = (call as AnyCall)(...args);\n                return Effect.isEffect(made)\n                  ? cut(made)\n                  : Stream.isStream(made)\n                    ? Stream.interruptWhen(\n                        made,\n                        Effect.raceFirst(\n                          Deferred.await(closed),\n                          droppedOn(connection),\n                        ),\n                      )\n                    : made;\n              },\n        ]),\n      );\n    const clients = Object.fromEntries(\n      names.map((name, index) => [name, signed(raw[index] as Made)]),\n    ) as ApiClients<A>;\n\n    const sync = makeSync(syncName(account.user.id), runtime, options.store);\n    yield* Effect.addFinalizer(() =>\n      Effect.tryPromise(() => sync.dispose()).pipe(\n        Effect.catch((error) => Effect.logWarning('[sync]', error)),\n      ),\n    );\n\n    const value = yield* options.open({\n      account,\n      apis: clients,\n      sync,\n      status: options.status.ref,\n    });\n\n    const run = (effect: Effect.Effect<unknown, unknown, never>) =>\n      Deferred.isDoneUnsafe(closed)\n        ? Promise.reject(new SessionClosed())\n        : runtime\n            .runPromiseExit(\n              cut(\n                Effect.provideService(\n                  effect as Effect.Effect<unknown, unknown, unknown>,\n                  options.service,\n                  value,\n                ) as Effect.Effect<unknown, unknown, never>,\n              ),\n            )\n            .then((exit) => {\n              if (Exit.isSuccess(exit)) return exit.value;\n              if (Cause.hasInterruptsOnly(exit.cause))\n                throw new SessionClosed();\n              throw Cause.squash(exit.cause);\n            });\n\n    return { value, apis: clients, run, status: options.status };\n  });\n"],"mappings":"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"}

package/dist/app/session/react.d.ts

@@ -0,0 +1,17 @@
+import { SessionStatus } from "./status.js";
+import { Opened } from "./open.js";
+import { ReactNode } from "react";
+//#region src/app/session/react.d.ts
+/** Gives the open Session to everything inside. `SignedIn` renders it. */
+export declare function OpenSessionProvider(props: {
+  readonly opened: Opened<unknown>;
+  readonly children: ReactNode;
+}): import("react").JSX.Element;
+/** The open Session; only inside `SignedIn`. */
+export declare const useOpened: () => Opened<unknown>;
+/** The open Session's status, live; only inside `SignedIn`. */
+export declare const useOpenedStatus: () => SessionStatus;
+/** The open Session, or undefined outside `SignedIn`. */
+export declare const useOpenedOrNone: () => Opened<unknown> | undefined;
+//#endregion
+//# sourceMappingURL=react.d.ts.map

package/dist/app/session/react.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"react.d.ts","names":[],"sources":["../../../src/app/session/react.tsx"],"mappings":";;;;;wBAcgB,oBAAoB;WACzB,QAAQ;WACR,UAAU;oBACpB,IAAA;;qBAKY,iBAAgB;;qBAQhB,uBAAsB;;qBAMtB,uBAAsB"}

package/dist/app/session/react.js

@@ -0,0 +1,28 @@
+import { createContext, useContext, useSyncExternalStore } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/app/session/react.tsx
+const OpenSession = createContext(void 0);
+/** Gives the open Session to everything inside. `SignedIn` renders it. */
+function OpenSessionProvider(props) {
+	return /* @__PURE__ */ jsx(OpenSession, {
+		value: props.opened,
+		children: props.children
+	});
+}
+/** The open Session; only inside `SignedIn`. */
+const useOpened = () => {
+	const opened = useContext(OpenSession);
+	if (opened === void 0) throw new Error("A Session is only open inside SignedIn");
+	return opened;
+};
+/** The open Session's status, live; only inside `SignedIn`. */
+const useOpenedStatus = () => {
+	const { status } = useOpened();
+	return useSyncExternalStore(status.subscribe, status.get, status.get);
+};
+/** The open Session, or undefined outside `SignedIn`. */
+const useOpenedOrNone = () => useContext(OpenSession);
+//#endregion
+export { OpenSessionProvider, useOpened, useOpenedOrNone, useOpenedStatus };
+
+//# sourceMappingURL=react.js.map

package/dist/app/session/react.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"react.js","names":[],"sources":["../../../src/app/session/react.tsx"],"sourcesContent":["import {\n  createContext,\n  type ReactNode,\n  useContext,\n  useSyncExternalStore,\n} from 'react';\nimport type { Opened } from './open.ts';\nimport type { SessionStatus } from './status.ts';\n\n// The open Session, for whatever reads it under `SignedIn`: one per page,\n// as one app runs per page.\nconst OpenSession = createContext<Opened<unknown> | undefined>(undefined);\n\n/** Gives the open Session to everything inside. `SignedIn` renders it. */\nexport function OpenSessionProvider(props: {\n  readonly opened: Opened<unknown>;\n  readonly children: ReactNode;\n}) {\n  return <OpenSession value={props.opened}>{props.children}</OpenSession>;\n}\n\n/** The open Session; only inside `SignedIn`. */\nexport const useOpened = (): Opened<unknown> => {\n  const opened = useContext(OpenSession);\n  if (opened === undefined)\n    throw new Error('A Session is only open inside SignedIn');\n  return opened;\n};\n\n/** The open Session's status, live; only inside `SignedIn`. */\nexport const useOpenedStatus = (): SessionStatus => {\n  const { status } = useOpened();\n  return useSyncExternalStore(status.subscribe, status.get, status.get);\n};\n\n/** The open Session, or undefined outside `SignedIn`. */\nexport const useOpenedOrNone = (): Opened<unknown> | undefined =>\n  useContext(OpenSession);\n"],"mappings":";;;AAWA,MAAM,cAAc,cAA2C,KAAA,CAAS;;AAGxE,SAAgB,oBAAoB,OAGjC;CACD,OAAO,oBAAC,aAAD;EAAa,OAAO,MAAM;EAAS,UAAA,MAAM;CAAsB,CAAA;AACxE;;AAGA,MAAa,kBAAmC;CAC9C,MAAM,SAAS,WAAW,WAAW;CACrC,IAAI,WAAW,KAAA,GACb,MAAM,IAAI,MAAM,wCAAwC;CAC1D,OAAO;AACT;;AAGA,MAAa,wBAAuC;CAClD,MAAM,EAAE,WAAW,UAAU;CAC7B,OAAO,qBAAqB,OAAO,WAAW,OAAO,KAAK,OAAO,GAAG;AACtE;;AAGA,MAAa,wBACX,WAAW,WAAW"}

package/dist/app/session/status.d.ts

@@ -0,0 +1,24 @@
+import { Effect, SubscriptionRef } from "effect";
+//#region src/app/session/status.d.ts
+/**
+ * Whether the open Account has been confirmed by its Sign-in since the
+ * Session opened, and when it last was. An Account opened from what the
+ * device remembers is `verifying` until the Sign-in answers; a call made
+ * meanwhile waits for the token, and nothing fails for being early.
+ */
+export interface SessionStatus {
+  readonly state: 'verifying' | 'verified';
+  readonly lastVerifiedAt: Date | null;
+}
+/** One Session's status: a SubscriptionRef for Effect code, and a plain
+ * read and subscription for React. The Gate sets it. */
+export interface StatusCell {
+  readonly ref: SubscriptionRef.SubscriptionRef<SessionStatus>;
+  readonly get: () => SessionStatus;
+  readonly subscribe: (changed: () => void) => () => void;
+  readonly set: (status: SessionStatus) => void;
+}
+/** A status cell starting at `initial`. */
+export declare const makeStatus: (initial: SessionStatus) => Effect.Effect<StatusCell>;
+//#endregion
+//# sourceMappingURL=status.d.ts.map

package/dist/app/session/status.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"status.d.ts","names":[],"sources":["../../../src/app/session/status.ts"],"mappings":";;;;;;;;iBAQiB;WACN;WACA,gBAAgB;;;;iBAKV;WACN,KAAK,gBAAgB,gBAAgB;WACrC,WAAW;WACX,YAAY;WACZ,MAAM,QAAQ;;;qBAIZ,aAAU,SAAa,kBAAgB,OAAO,OAAO"}

package/dist/app/session/status.js

@@ -0,0 +1,25 @@
+import { Effect, SubscriptionRef } from "effect";
+//#region src/app/session/status.ts
+/** A status cell starting at `initial`. */
+const makeStatus = (initial) => Effect.map(SubscriptionRef.make(initial), (ref) => {
+	let current = initial;
+	const listeners = /* @__PURE__ */ new Set();
+	return {
+		ref,
+		get: () => current,
+		subscribe: (changed) => {
+			listeners.add(changed);
+			return () => void listeners.delete(changed);
+		},
+		set: (status) => {
+			if (status.state === current.state && status.lastVerifiedAt?.getTime() === current.lastVerifiedAt?.getTime()) return;
+			current = status;
+			Effect.runSync(SubscriptionRef.set(ref, status));
+			listeners.forEach((changed) => changed());
+		}
+	};
+});
+//#endregion
+export { makeStatus };
+
+//# sourceMappingURL=status.js.map

package/dist/app/session/status.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"status.js","names":[],"sources":["../../../src/app/session/status.ts"],"sourcesContent":["import { Effect, SubscriptionRef } from 'effect';\n\n/**\n * Whether the open Account has been confirmed by its Sign-in since the\n * Session opened, and when it last was. An Account opened from what the\n * device remembers is `verifying` until the Sign-in answers; a call made\n * meanwhile waits for the token, and nothing fails for being early.\n */\nexport interface SessionStatus {\n  readonly state: 'verifying' | 'verified';\n  readonly lastVerifiedAt: Date | null;\n}\n\n/** One Session's status: a SubscriptionRef for Effect code, and a plain\n * read and subscription for React. The Gate sets it. */\nexport interface StatusCell {\n  readonly ref: SubscriptionRef.SubscriptionRef<SessionStatus>;\n  readonly get: () => SessionStatus;\n  readonly subscribe: (changed: () => void) => () => void;\n  readonly set: (status: SessionStatus) => void;\n}\n\n/** A status cell starting at `initial`. */\nexport const makeStatus = (initial: SessionStatus): Effect.Effect<StatusCell> =>\n  Effect.map(SubscriptionRef.make(initial), (ref) => {\n    let current = initial;\n    const listeners = new Set<() => void>();\n    return {\n      ref,\n      get: () => current,\n      subscribe: (changed) => {\n        listeners.add(changed);\n        return () => void listeners.delete(changed);\n      },\n      set: (status) => {\n        if (\n          status.state === current.state &&\n          status.lastVerifiedAt?.getTime() === current.lastVerifiedAt?.getTime()\n        )\n          return;\n        current = status;\n        Effect.runSync(SubscriptionRef.set(ref, status));\n        listeners.forEach((changed) => changed());\n      },\n    };\n  });\n"],"mappings":";;;AAuBA,MAAa,cAAc,YACzB,OAAO,IAAI,gBAAgB,KAAK,OAAO,IAAI,QAAQ;CACjD,IAAI,UAAU;CACd,MAAM,4BAAY,IAAI,IAAgB;CACtC,OAAO;EACL;EACA,WAAW;EACX,YAAY,YAAY;GACtB,UAAU,IAAI,OAAO;GACrB,aAAa,KAAK,UAAU,OAAO,OAAO;EAC5C;EACA,MAAM,WAAW;GACf,IACE,OAAO,UAAU,QAAQ,SACzB,OAAO,gBAAgB,QAAQ,MAAM,QAAQ,gBAAgB,QAAQ,GAErE;GACF,UAAU;GACV,OAAO,QAAQ,gBAAgB,IAAI,KAAK,MAAM,CAAC;GAC/C,UAAU,SAAS,YAAY,QAAQ,CAAC;EAC1C;CACF;AACF,CAAC"}

package/dist/app/web-host.d.ts

@@ -0,0 +1,16 @@
+import { Host } from "./host/host.js";
+import "./host/index.js";
+//#region src/app/web-host.d.ts
+/**
+ * The browser as an app's Host: each table in the IndexedDB database it
+ * names, heard by every tab, Std Sync in IndexedDB shared by every tab, the cloud APIs at this
+ * origin, sign-in through the sign-in service at `authUrl` and its cookies
+ * when the app has auth, and the window's network, visibility and other
+ * tabs under `name`. Made in the browser only.
+ */
+export declare const webHost: (options: {
+  readonly name: string;
+  readonly authUrl?: string | undefined;
+}) => Host;
+//#endregion
+//# sourceMappingURL=web-host.d.ts.map

package/dist/app/web-host.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"web-host.d.ts","names":[],"sources":["../../src/app/web-host.ts"],"mappings":";;;;;;;;;;qBAgDa,UAAO;WACT;WACA;MACP"}

package/dist/app/web-host.js

@@ -0,0 +1,85 @@
+import { backendNamed, keptBroadcasters } from "./host/host.js";
+import { sharedBroadcaster } from "@kestack/std-toolkit/core";
+import { cookie } from "@kestack/auth-toolkit/client/web";
+import { IDB } from "@kestack/std-toolkit/db/idb";
+import { Sync } from "@kestack/std-toolkit/sync/idb";
+//#region src/app/web-host.ts
+const launchBackend = () => {
+	const url = new URL(window.location.href);
+	const asked = backendNamed(url.searchParams.get("backend"));
+	if (asked === null) return null;
+	url.searchParams.delete("backend");
+	window.history.replaceState(window.history.state, "", url.href);
+	return asked;
+};
+const onOnlineChange = (changed) => {
+	window.addEventListener("online", changed);
+	window.addEventListener("offline", changed);
+	return () => {
+		window.removeEventListener("online", changed);
+		window.removeEventListener("offline", changed);
+	};
+};
+const onForeground = (shown) => {
+	const changed = () => {
+		if (document.visibilityState === "visible") shown();
+	};
+	document.addEventListener("visibilitychange", changed);
+	return () => document.removeEventListener("visibilitychange", changed);
+};
+/**
+* The browser as an app's Host: each table in the IndexedDB database it
+* names, heard by every tab, Std Sync in IndexedDB shared by every tab, the cloud APIs at this
+* origin, sign-in through the sign-in service at `authUrl` and its cookies
+* when the app has auth, and the window's network, visibility and other
+* tabs under `name`. Made in the browser only.
+*/
+const webHost = (options) => {
+	const tables = /* @__PURE__ */ new Map();
+	const table = (source, database) => {
+		const key = `${database}/${source.logicalName}`;
+		const opened = tables.get(key) ?? IDB.make(source, { database: IDB.database({ databaseName: database }) });
+		tables.set(key, opened);
+		return opened.layer;
+	};
+	const channel = new BroadcastChannel(`${options.name}:gate`);
+	const { authUrl } = options;
+	return {
+		storage: {
+			table,
+			broadcaster: keptBroadcasters(sharedBroadcaster),
+			sync: {
+				...Sync.idb(),
+				list: () => Sync.idb.list(),
+				remove: (name) => Sync.idb.remove(name)
+			}
+		},
+		cloud: {
+			url: window.location.origin,
+			...authUrl !== void 0 && {
+				signIn: cookie({ authWorkerUrl: authUrl }),
+				manageAccounts: async () => {
+					window.open(authUrl, "_blank", "noopener");
+				}
+			}
+		},
+		lifecycle: {
+			online: () => navigator.onLine,
+			onOnlineChange,
+			onForeground,
+			launchBackend
+		},
+		tabs: {
+			announce: (message) => channel.postMessage(message),
+			listen: (heard) => {
+				const listener = (event) => heard(event.data);
+				channel.addEventListener("message", listener);
+				return () => channel.removeEventListener("message", listener);
+			}
+		}
+	};
+};
+//#endregion
+export { webHost };
+
+//# sourceMappingURL=web-host.js.map

package/dist/app/web-host.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"web-host.js","names":[],"sources":["../../src/app/web-host.ts"],"sourcesContent":["import {\n  type Backend,\n  backendNamed,\n  type Host,\n  keptBroadcasters,\n  type TableSource,\n  type TabMessage,\n} from './host/index.ts';\nimport { cookie } from '@kestack/auth-toolkit/client/web';\nimport { sharedBroadcaster } from '@kestack/std-toolkit/core';\nimport { IDB, type IDBTable } from '@kestack/std-toolkit/db/idb';\nimport { Sync } from '@kestack/std-toolkit/sync/idb';\n\n// `?backend=device` or `?backend=cloud` (or their former names, `local` and\n// `remote`) chooses the Backend, as Settings would, and leaves the address.\nconst launchBackend = (): Backend | null => {\n  const url = new URL(window.location.href);\n  const asked = backendNamed(url.searchParams.get('backend'));\n  if (asked === null) return null;\n  url.searchParams.delete('backend');\n  window.history.replaceState(window.history.state, '', url.href);\n  return asked;\n};\n\nconst onOnlineChange = (changed: () => void) => {\n  window.addEventListener('online', changed);\n  window.addEventListener('offline', changed);\n  return () => {\n    window.removeEventListener('online', changed);\n    window.removeEventListener('offline', changed);\n  };\n};\n\nconst onForeground = (shown: () => void) => {\n  const changed = () => {\n    if (document.visibilityState === 'visible') shown();\n  };\n  document.addEventListener('visibilitychange', changed);\n  return () => document.removeEventListener('visibilitychange', changed);\n};\n\n/**\n * The browser as an app's Host: each table in the IndexedDB database it\n * names, heard by every tab, Std Sync in IndexedDB shared by every tab, the cloud APIs at this\n * origin, sign-in through the sign-in service at `authUrl` and its cookies\n * when the app has auth, and the window's network, visibility and other\n * tabs under `name`. Made in the browser only.\n */\nexport const webHost = (options: {\n  readonly name: string;\n  readonly authUrl?: string | undefined;\n}): Host => {\n  // Each table opens once per tab, in the database it is kept in.\n  const tables = new Map<string, unknown>();\n  const table = <Name extends string>(\n    source: TableSource<Name>,\n    database: string,\n  ) => {\n    const key = `${database}/${source.logicalName}`;\n    const opened =\n      (tables.get(key) as IDBTable<Name> | undefined) ??\n      IDB.make(source, { database: IDB.database({ databaseName: database }) });\n    tables.set(key, opened);\n    return opened.layer;\n  };\n  const channel = new BroadcastChannel(`${options.name}:gate`);\n  const { authUrl } = options;\n  return {\n    storage: {\n      table,\n      // Every tab writes to the same IndexedDB database, so each hears the\n      // others' writes.\n      broadcaster: keptBroadcasters(sharedBroadcaster),\n      sync: {\n        ...Sync.idb(),\n        list: () => Sync.idb.list(),\n        remove: (name) => Sync.idb.remove(name),\n      },\n    },\n    cloud: {\n      url: window.location.origin,\n      ...(authUrl !== undefined && {\n        signIn: cookie({ authWorkerUrl: authUrl }),\n        manageAccounts: async () => {\n          window.open(authUrl, '_blank', 'noopener');\n        },\n      }),\n    },\n    lifecycle: {\n      online: () => navigator.onLine,\n      onOnlineChange,\n      onForeground,\n      launchBackend,\n    },\n    tabs: {\n      announce: (message) => channel.postMessage(message),\n      listen: (heard) => {\n        const listener = (event: MessageEvent<TabMessage>) => heard(event.data);\n        channel.addEventListener('message', listener);\n        return () => channel.removeEventListener('message', listener);\n      },\n    },\n  };\n};\n"],"mappings":";;;;;;AAeA,MAAM,sBAAsC;CAC1C,MAAM,MAAM,IAAI,IAAI,OAAO,SAAS,IAAI;CACxC,MAAM,QAAQ,aAAa,IAAI,aAAa,IAAI,SAAS,CAAC;CAC1D,IAAI,UAAU,MAAM,OAAO;CAC3B,IAAI,aAAa,OAAO,SAAS;CACjC,OAAO,QAAQ,aAAa,OAAO,QAAQ,OAAO,IAAI,IAAI,IAAI;CAC9D,OAAO;AACT;AAEA,MAAM,kBAAkB,YAAwB;CAC9C,OAAO,iBAAiB,UAAU,OAAO;CACzC,OAAO,iBAAiB,WAAW,OAAO;CAC1C,aAAa;EACX,OAAO,oBAAoB,UAAU,OAAO;EAC5C,OAAO,oBAAoB,WAAW,OAAO;CAC/C;AACF;AAEA,MAAM,gBAAgB,UAAsB;CAC1C,MAAM,gBAAgB;EACpB,IAAI,SAAS,oBAAoB,WAAW,MAAM;CACpD;CACA,SAAS,iBAAiB,oBAAoB,OAAO;CACrD,aAAa,SAAS,oBAAoB,oBAAoB,OAAO;AACvE;;;;;;;;AASA,MAAa,WAAW,YAGZ;CAEV,MAAM,yBAAS,IAAI,IAAqB;CACxC,MAAM,SACJ,QACA,aACG;EACH,MAAM,MAAM,GAAG,SAAS,GAAG,OAAO;EAClC,MAAM,SACH,OAAO,IAAI,GAAG,KACf,IAAI,KAAK,QAAQ,EAAE,UAAU,IAAI,SAAS,EAAE,cAAc,SAAS,CAAC,EAAE,CAAC;EACzE,OAAO,IAAI,KAAK,MAAM;EACtB,OAAO,OAAO;CAChB;CACA,MAAM,UAAU,IAAI,iBAAiB,GAAG,QAAQ,KAAK,MAAM;CAC3D,MAAM,EAAE,YAAY;CACpB,OAAO;EACL,SAAS;GACP;GAGA,aAAa,iBAAiB,iBAAiB;GAC/C,MAAM;IACJ,GAAG,KAAK,IAAI;IACZ,YAAY,KAAK,IAAI,KAAK;IAC1B,SAAS,SAAS,KAAK,IAAI,OAAO,IAAI;GACxC;EACF;EACA,OAAO;GACL,KAAK,OAAO,SAAS;GACrB,GAAI,YAAY,KAAA,KAAa;IAC3B,QAAQ,OAAO,EAAE,eAAe,QAAQ,CAAC;IACzC,gBAAgB,YAAY;KAC1B,OAAO,KAAK,SAAS,UAAU,UAAU;IAC3C;GACF;EACF;EACA,WAAW;GACT,cAAc,UAAU;GACxB;GACA;GACA;EACF;EACA,MAAM;GACJ,WAAW,YAAY,QAAQ,YAAY,OAAO;GAClD,SAAS,UAAU;IACjB,MAAM,YAAY,UAAoC,MAAM,MAAM,IAAI;IACtE,QAAQ,iBAAiB,WAAW,QAAQ;IAC5C,aAAa,QAAQ,oBAAoB,WAAW,QAAQ;GAC9D;EACF;CACF;AACF"}

package/dist/client/index.d.ts

@@ -0,0 +1,3 @@
+import { HeadTag, RootHead, RootPlugin, WebRootOptions, webRoot } from "./root/root.js";
+import "./root/index.js";
+export { type HeadTag, type RootHead, type RootPlugin, type WebRootOptions, webRoot };

package/dist/client/index.js

@@ -0,0 +1,2 @@
+import { webRoot } from "./root/root.js";
+export { webRoot };

package/dist/client/root/index.d.ts

@@ -0,0 +1,2 @@
+import { HeadTag, RootHead, RootPlugin, WebRootOptions, webRoot } from "./root.js";
+export { type HeadTag, type RootHead, type RootPlugin, type WebRootOptions, webRoot };

package/dist/client/root/index.js

@@ -0,0 +1,2 @@
+import { webRoot } from "./root.js";
+export { webRoot };

package/dist/client/root/root.d.ts

@@ -0,0 +1,62 @@
+import { createTheme } from "../../theme/theme.js";
+import { ComponentType, ReactNode } from "react";
+//#region src/client/root/root.d.ts
+type Theme = 'light' | 'dark';
+/** A tag in the document's head, as TanStack Router takes it. */
+export type HeadTag = Readonly<Record<string, string>>;
+/** The head tags something adds to every page. */
+export interface RootHead {
+  readonly meta?: ReadonlyArray<HeadTag>;
+  readonly links?: ReadonlyArray<HeadTag>;
+}
+/**
+ * Something the root document takes in without knowing it: its head tags,
+ * and a provider around every page. The PWA plugs in this way, so an app
+ * that leaves it out ships none of it.
+ */
+export interface RootPlugin {
+  readonly head?: () => RootHead;
+  readonly Provider?: ComponentType<{
+    readonly children: ReactNode;
+  }>;
+}
+export interface WebRootOptions {
+  /** The title of every page. */
+  readonly title: string;
+  /** The app's stylesheet, as `import css from './styles.css?url'` gives it. */
+  readonly stylesheet: string;
+  /** The app's Theme, from `createTheme`. */
+  readonly theme: ReturnType<typeof createTheme>;
+  /** Default: `/favicon.svg`. */
+  readonly icon?: string;
+  readonly plugins?: ReadonlyArray<RootPlugin>;
+  /**
+   * The Theme the server renders the page in, as a server function of the
+   * app's reading the cookie (`getTheme`). Without it the page renders
+   * dark, and the Theme's script sets the right one before the first paint.
+   */
+  readonly loadTheme?: () => Promise<Theme>;
+  /** What a page that does not exist shows; a plain 404 unless given. */
+  readonly notFound?: () => ReactNode;
+}
+declare function NotFound(): import("react").JSX.Element;
+/**
+ * The root route of a web app on TanStack Start: the document, in the
+ * Theme its cookie names before the first paint, the device marked before
+ * it too, the head every page shares, and the plugins' providers around
+ * every page. Pass it to `createRootRoute`.
+ */
+export declare const webRoot: (options: WebRootOptions) => {
+  loader: () => Promise<Theme>;
+  head: () => {
+    meta: Readonly<Record<string, string>>[];
+    links: Readonly<Record<string, string>>[];
+  };
+  shellComponent: (props: {
+    readonly children: ReactNode;
+  }) => import("react").JSX.Element;
+  component: () => ReactNode;
+  notFoundComponent: (() => ReactNode) | typeof NotFound;
+};
+//#endregion
+//# sourceMappingURL=root.d.ts.map

package/dist/client/root/root.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"root.d.ts","names":[],"sources":["../../../src/client/root/root.tsx"],"mappings":";;;KAYK;;YAGO,UAAU,SAAS;;iBAGd;WACN,OAAO,cAAc;WACrB,QAAQ,cAAc;;;;;;;iBAQhB;WACN,aAAa;WACb,WAAW;aAAyB,UAAU;;;iBAGxC;;WAEN;;WAEA;;WAEA,OAAO,kBAAkB;;WAEzB;WACA,UAAU,cAAc;;;;;;WAMxB,kBAAkB,QAAQ;;WAE1B,iBAAiB;;iBAUnB,4BAAQ,IAAA;;;;;;;qBAoBJ,UAAO,SAAa;EAwC7B,cAAkB,QAAQ;EAI1B;IAGI,MAAI,SAAA;IAMJ,OAAK,SAAA;;EAWT,iBAAc;aA5DwB,UAAU;wBAAW,IAAA;EA6D3D,iBAAS;EACT,0BAhGwB,oBAAS"}

package/dist/client/root/root.js

@@ -0,0 +1,92 @@
+import { buttonVariants } from "../../components/ui/button.js";
+import { DEVICE_SCRIPT } from "../../input/device/device.js";
+import { Fragment } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { HeadContent, Link, Outlet, Scripts, useLoaderData } from "@tanstack/react-router";
+//#region src/client/root/root.tsx
+const VIEWPORT = "width=device-width, initial-scale=1, viewport-fit=cover, interactive-widget=resizes-content";
+const shownTheme = () => document.documentElement.dataset["theme"] === "light" ? "light" : "dark";
+function NotFound() {
+	return /* @__PURE__ */ jsxs("main", {
+		className: "mx-auto flex min-h-dvh max-w-md flex-col items-start justify-center gap-4 px-6",
+		children: [
+			/* @__PURE__ */ jsx("p", {
+				className: "text-sm text-muted-foreground",
+				children: "404"
+			}),
+			/* @__PURE__ */ jsx("h1", {
+				className: "text-2xl font-semibold tracking-tight",
+				children: "Nothing lives here"
+			}),
+			/* @__PURE__ */ jsx(Link, {
+				to: "/",
+				className: buttonVariants({ className: "min-h-11" }),
+				children: "Home"
+			})
+		]
+	});
+}
+/**
+* The root route of a web app on TanStack Start: the document, in the
+* Theme its cookie names before the first paint, the device marked before
+* it too, the head every page shares, and the plugins' providers around
+* every page. Pass it to `createRootRoute`.
+*/
+const webRoot = (options) => {
+	const plugins = options.plugins ?? [];
+	const { theme } = options;
+	function RootDocument(props) {
+		const initial = useLoaderData({ strict: false }) ?? "dark";
+		return /* @__PURE__ */ jsxs("html", {
+			lang: "en",
+			className: initial === "dark" ? "dark" : void 0,
+			"data-theme": initial,
+			style: { colorScheme: initial },
+			suppressHydrationWarning: true,
+			children: [/* @__PURE__ */ jsxs("head", { children: [
+				/* @__PURE__ */ jsx(HeadContent, {}),
+				/* @__PURE__ */ jsx(theme.Script, { initialTheme: initial }),
+				/* @__PURE__ */ jsx("script", { dangerouslySetInnerHTML: { __html: DEVICE_SCRIPT } })
+			] }), /* @__PURE__ */ jsxs("body", { children: [props.children, /* @__PURE__ */ jsx(Scripts, {})] })]
+		});
+	}
+	function Root() {
+		return plugins.reduceRight((children, { Provider }) => Provider === void 0 ? children : /* @__PURE__ */ jsx(Provider, { children }), /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(Outlet, {}) }));
+	}
+	return {
+		loader: async () => typeof document !== "undefined" ? shownTheme() : await options.loadTheme?.() ?? "dark",
+		head: () => {
+			const added = plugins.map((plugin) => plugin.head?.() ?? {});
+			return {
+				meta: [
+					{ charSet: "utf-8" },
+					{
+						name: "viewport",
+						content: VIEWPORT
+					},
+					{ title: options.title },
+					...added.flatMap((head) => head.meta ?? [])
+				],
+				links: [
+					{
+						rel: "stylesheet",
+						href: options.stylesheet
+					},
+					{
+						rel: "icon",
+						type: "image/svg+xml",
+						href: options.icon ?? "/favicon.svg"
+					},
+					...added.flatMap((head) => head.links ?? [])
+				]
+			};
+		},
+		shellComponent: RootDocument,
+		component: Root,
+		notFoundComponent: options.notFound ?? NotFound
+	};
+};
+//#endregion
+export { webRoot };
+
+//# sourceMappingURL=root.js.map

package/dist/client/root/root.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"root.js","names":[],"sources":["../../../src/client/root/root.tsx"],"sourcesContent":["import {\n  HeadContent,\n  Link,\n  Outlet,\n  Scripts,\n  useLoaderData,\n} from '@tanstack/react-router';\nimport { Fragment, type ComponentType, type ReactNode } from 'react';\nimport { buttonVariants } from '#components/ui/button';\nimport { DEVICE_SCRIPT } from '../../input/index.ts';\nimport type { createTheme } from '../../theme/index.ts';\n\ntype Theme = 'light' | 'dark';\n\n/** A tag in the document's head, as TanStack Router takes it. */\nexport type HeadTag = Readonly<Record<string, string>>;\n\n/** The head tags something adds to every page. */\nexport interface RootHead {\n  readonly meta?: ReadonlyArray<HeadTag>;\n  readonly links?: ReadonlyArray<HeadTag>;\n}\n\n/**\n * Something the root document takes in without knowing it: its head tags,\n * and a provider around every page. The PWA plugs in this way, so an app\n * that leaves it out ships none of it.\n */\nexport interface RootPlugin {\n  readonly head?: () => RootHead;\n  readonly Provider?: ComponentType<{ readonly children: ReactNode }>;\n}\n\nexport interface WebRootOptions {\n  /** The title of every page. */\n  readonly title: string;\n  /** The app's stylesheet, as `import css from './styles.css?url'` gives it. */\n  readonly stylesheet: string;\n  /** The app's Theme, from `createTheme`. */\n  readonly theme: ReturnType<typeof createTheme>;\n  /** Default: `/favicon.svg`. */\n  readonly icon?: string;\n  readonly plugins?: ReadonlyArray<RootPlugin>;\n  /**\n   * The Theme the server renders the page in, as a server function of the\n   * app's reading the cookie (`getTheme`). Without it the page renders\n   * dark, and the Theme's script sets the right one before the first paint.\n   */\n  readonly loadTheme?: () => Promise<Theme>;\n  /** What a page that does not exist shows; a plain 404 unless given. */\n  readonly notFound?: () => ReactNode;\n}\n\nconst VIEWPORT =\n  'width=device-width, initial-scale=1, viewport-fit=cover, interactive-widget=resizes-content';\n\n// The browser already shows the Theme its script set.\nconst shownTheme = (): Theme =>\n  document.documentElement.dataset['theme'] === 'light' ? 'light' : 'dark';\n\nfunction NotFound() {\n  return (\n    <main className=\"mx-auto flex min-h-dvh max-w-md flex-col items-start justify-center gap-4 px-6\">\n      <p className=\"text-sm text-muted-foreground\">404</p>\n      <h1 className=\"text-2xl font-semibold tracking-tight\">\n        Nothing lives here\n      </h1>\n      <Link to=\"/\" className={buttonVariants({ className: 'min-h-11' })}>\n        Home\n      </Link>\n    </main>\n  );\n}\n\n/**\n * The root route of a web app on TanStack Start: the document, in the\n * Theme its cookie names before the first paint, the device marked before\n * it too, the head every page shares, and the plugins' providers around\n * every page. Pass it to `createRootRoute`.\n */\nexport const webRoot = (options: WebRootOptions) => {\n  const plugins = options.plugins ?? [];\n  const { theme } = options;\n\n  function RootDocument(props: { readonly children: ReactNode }) {\n    const initial =\n      (useLoaderData({ strict: false }) as Theme | undefined) ?? 'dark';\n    return (\n      <html\n        lang=\"en\"\n        className={initial === 'dark' ? 'dark' : undefined}\n        data-theme={initial}\n        style={{ colorScheme: initial }}\n        suppressHydrationWarning\n      >\n        <head>\n          <HeadContent />\n          <theme.Script initialTheme={initial} />\n          {/* Before the first paint: what this device is driven by. */}\n          <script dangerouslySetInnerHTML={{ __html: DEVICE_SCRIPT }} />\n        </head>\n        <body>\n          {props.children}\n          <Scripts />\n        </body>\n      </html>\n    );\n  }\n\n  function Root() {\n    return plugins.reduceRight<ReactNode>(\n      (children, { Provider }) =>\n        Provider === undefined ? children : <Provider>{children}</Provider>,\n      <Fragment>\n        <Outlet />\n      </Fragment>,\n    );\n  }\n\n  return {\n    loader: async (): Promise<Theme> =>\n      typeof document !== 'undefined'\n        ? shownTheme()\n        : ((await options.loadTheme?.()) ?? 'dark'),\n    head: () => {\n      const added = plugins.map((plugin) => plugin.head?.() ?? {});\n      return {\n        meta: [\n          { charSet: 'utf-8' },\n          { name: 'viewport', content: VIEWPORT },\n          { title: options.title },\n          ...added.flatMap((head) => head.meta ?? []),\n        ],\n        links: [\n          { rel: 'stylesheet', href: options.stylesheet },\n          {\n            rel: 'icon',\n            type: 'image/svg+xml',\n            href: options.icon ?? '/favicon.svg',\n          },\n          ...added.flatMap((head) => head.links ?? []),\n        ],\n      };\n    },\n    shellComponent: RootDocument,\n    component: Root,\n    notFoundComponent: options.notFound ?? NotFound,\n  };\n};\n"],"mappings":";;;;;;AAqDA,MAAM,WACJ;AAGF,MAAM,mBACJ,SAAS,gBAAgB,QAAQ,aAAa,UAAU,UAAU;AAEpE,SAAS,WAAW;CAClB,OACE,qBAAC,QAAD;EAAM,WAAU;EAAhB,UAAA;GACE,oBAAC,KAAD;IAAG,WAAU;IAAgC,UAAA;GAAM,CAAA;GACnD,oBAAC,MAAD;IAAI,WAAU;IAAwC,UAAA;GAElD,CAAA;GACJ,oBAAC,MAAD;IAAM,IAAG;IAAI,WAAW,eAAe,EAAE,WAAW,WAAW,CAAC;IAAG,UAAA;GAE7D,CAAA;EACF;;AAEV;;;;;;;AAQA,MAAa,WAAW,YAA4B;CAClD,MAAM,UAAU,QAAQ,WAAW,CAAC;CACpC,MAAM,EAAE,UAAU;CAElB,SAAS,aAAa,OAAyC;EAC7D,MAAM,UACH,cAAc,EAAE,QAAQ,MAAM,CAAC,KAA2B;EAC7D,OACE,qBAAC,QAAD;GACE,MAAK;GACL,WAAW,YAAY,SAAS,SAAS,KAAA;GACzC,cAAY;GACZ,OAAO,EAAE,aAAa,QAAQ;GAC9B,0BAAA;GALF,UAAA,CAOE,qBAAC,QAAD,EAAA,UAAA;IACE,oBAAC,aAAD,CAAc,CAAA;IACd,oBAAC,MAAM,QAAP,EAAc,cAAc,QAAU,CAAA;IAEtC,oBAAC,UAAD,EAAQ,yBAAyB,EAAE,QAAQ,cAAc,EAAI,CAAA;GACzD,EAAA,CAAA,GACN,qBAAC,QAAD,EAAA,UAAA,CACG,MAAM,UACP,oBAAC,SAAD,CAAU,CAAA,CACN,EAAA,CAAA,CACF;;CAEV;CAEA,SAAS,OAAO;EACd,OAAO,QAAQ,aACZ,UAAU,EAAE,eACX,aAAa,KAAA,IAAY,WAAW,oBAAC,UAAD,EAAW,SAAmB,CAAA,GACpE,oBAAC,UAAD,EAAA,UACE,oBAAC,QAAD,CAAS,CAAA,EACD,CAAA,CACZ;CACF;CAEA,OAAO;EACL,QAAQ,YACN,OAAO,aAAa,cAChB,WAAW,IACT,MAAM,QAAQ,YAAY,KAAM;EACxC,YAAY;GACV,MAAM,QAAQ,QAAQ,KAAK,WAAW,OAAO,OAAO,KAAK,CAAC,CAAC;GAC3D,OAAO;IACL,MAAM;KACJ,EAAE,SAAS,QAAQ;KACnB;MAAE,MAAM;MAAY,SAAS;KAAS;KACtC,EAAE,OAAO,QAAQ,MAAM;KACvB,GAAG,MAAM,SAAS,SAAS,KAAK,QAAQ,CAAC,CAAC;IAC5C;IACA,OAAO;KACL;MAAE,KAAK;MAAc,MAAM,QAAQ;KAAW;KAC9C;MACE,KAAK;MACL,MAAM;MACN,MAAM,QAAQ,QAAQ;KACxB;KACA,GAAG,MAAM,SAAS,SAAS,KAAK,SAAS,CAAC,CAAC;IAC7C;GACF;EACF;EACA,gBAAgB;EAChB,WAAW;EACX,mBAAmB,QAAQ,YAAY;CACzC;AACF"}

package/dist/client/server.d.ts

@@ -0,0 +1,2 @@
+import { getTheme } from "./theme/tanstack-start.js";
+export { getTheme };

package/dist/client/server.js

@@ -0,0 +1,2 @@
+import { getTheme } from "./theme/tanstack-start.js";
+export { getTheme };

package/dist/client/theme/index.d.ts

@@ -0,0 +1,2 @@
+import { getTheme } from "./tanstack-start.js";
+export { getTheme };

package/dist/client/theme/index.js

@@ -0,0 +1,2 @@
+import { getTheme } from "./tanstack-start.js";
+export { getTheme };

package/dist/client/theme/tanstack-start.d.ts

@@ -0,0 +1,5 @@
+import { Theme } from "../../theme/model.js";
+//#region src/client/theme/tanstack-start.d.ts
+export declare const getTheme: () => Theme;
+//#endregion
+//# sourceMappingURL=tanstack-start.d.ts.map

package/dist/client/theme/tanstack-start.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tanstack-start.d.ts","names":["_$______theme_model_ts0.Theme"],"sources":["../../../src/client/theme/tanstack-start.ts"],"mappings":";;qBAGa,gBAAAA"}

package/dist/client/theme/tanstack-start.js

@@ -0,0 +1,9 @@
+import { THEME_COOKIE } from "../../theme/model.js";
+import { themeFromCookies } from "../../theme/cookie.js";
+import { getCookie } from "@tanstack/react-start/server";
+//#region src/client/theme/tanstack-start.ts
+const getTheme = () => themeFromCookies(`${THEME_COOKIE}=${getCookie("kui-theme") ?? ""}`);
+//#endregion
+export { getTheme };
+
+//# sourceMappingURL=tanstack-start.js.map

package/dist/client/theme/tanstack-start.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tanstack-start.js","names":[],"sources":["../../../src/client/theme/tanstack-start.ts"],"sourcesContent":["import { getCookie } from '@tanstack/react-start/server';\nimport { THEME_COOKIE, themeFromCookies } from '../../theme/index.ts';\n\nexport const getTheme = () =>\n  themeFromCookies(`${THEME_COOKIE}=${getCookie(THEME_COOKIE) ?? ''}`);\n"],"mappings":";;;;AAGA,MAAa,iBACX,iBAAiB,GAAG,aAAa,GAAG,UAAA,WAAsB,KAAK,IAAI"}

package/dist/components/hooks/use-element-width.d.ts

@@ -0,0 +1,9 @@
+//#region src/components/hooks/use-element-width.d.ts
+/**
+ * Track an element's content width via {@link ResizeObserver}. Used to learn
+ * the pixel width of the bar column so a span bar that has been clamped to its
+ * pixel minimum can be visually distinguished (dimmed) from a true-width bar.
+ */
+export declare function useElementWidth<T extends HTMLElement>(): readonly [import("react").RefObject<T | null>, number];
+//#endregion
+//# sourceMappingURL=use-element-width.d.ts.map

package/dist/components/hooks/use-element-width.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-element-width.d.ts","names":[],"sources":["../../../src/components/hooks/use-element-width.ts"],"mappings":";;;;;;wBAOgB,gBAAgB,UAAU,0CAAW,UAAA"}

package/dist/components/hooks/use-element-width.js

@@ -0,0 +1,26 @@
+import { useEffect, useRef, useState } from "react";
+//#region src/components/hooks/use-element-width.ts
+/**
+* Track an element's content width via {@link ResizeObserver}. Used to learn
+* the pixel width of the bar column so a span bar that has been clamped to its
+* pixel minimum can be visually distinguished (dimmed) from a true-width bar.
+*/
+function useElementWidth() {
+	const ref = useRef(null);
+	const [width, setWidth] = useState(0);
+	useEffect(() => {
+		const el = ref.current;
+		if (!el) return;
+		setWidth(el.getBoundingClientRect().width);
+		const observer = new ResizeObserver((entries) => {
+			setWidth(entries[0]?.contentRect.width ?? 0);
+		});
+		observer.observe(el);
+		return () => observer.disconnect();
+	}, []);
+	return [ref, width];
+}
+//#endregion
+export { useElementWidth };
+
+//# sourceMappingURL=use-element-width.js.map

package/dist/components/hooks/use-element-width.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-element-width.js","names":[],"sources":["../../../src/components/hooks/use-element-width.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\n/**\n * Track an element's content width via {@link ResizeObserver}. Used to learn\n * the pixel width of the bar column so a span bar that has been clamped to its\n * pixel minimum can be visually distinguished (dimmed) from a true-width bar.\n */\nexport function useElementWidth<T extends HTMLElement>() {\n  const ref = useRef<T | null>(null);\n  const [width, setWidth] = useState(0);\n\n  useEffect(() => {\n    const el = ref.current;\n    if (!el) return;\n    setWidth(el.getBoundingClientRect().width);\n    const observer = new ResizeObserver((entries) => {\n      setWidth(entries[0]?.contentRect.width ?? 0);\n    });\n    observer.observe(el);\n    return () => observer.disconnect();\n  }, []);\n\n  return [ref, width] as const;\n}\n"],"mappings":";;;;;;;AAOA,SAAgB,kBAAyC;CACvD,MAAM,MAAM,OAAiB,IAAI;CACjC,MAAM,CAAC,OAAO,YAAY,SAAS,CAAC;CAEpC,gBAAgB;EACd,MAAM,KAAK,IAAI;EACf,IAAI,CAAC,IAAI;EACT,SAAS,GAAG,sBAAsB,CAAC,CAAC,KAAK;EACzC,MAAM,WAAW,IAAI,gBAAgB,YAAY;GAC/C,SAAS,QAAQ,EAAE,EAAE,YAAY,SAAS,CAAC;EAC7C,CAAC;EACD,SAAS,QAAQ,EAAE;EACnB,aAAa,SAAS,WAAW;CACnC,GAAG,CAAC,CAAC;CAEL,OAAO,CAAC,KAAK,KAAK;AACpB"}

package/dist/components/hooks/use-mobile.d.ts

@@ -0,0 +1,6 @@
+//#region src/components/hooks/use-mobile.d.ts
+/** The screens `useIsMobile` calls a phone's. */
+export declare const MOBILE_QUERY = "(max-width: 767px)";
+export declare function useIsMobile(): boolean;
+//#endregion
+//# sourceMappingURL=use-mobile.d.ts.map

package/dist/components/hooks/use-mobile.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-mobile.d.ts","names":[],"sources":["../../../src/components/hooks/use-mobile.ts"],"mappings":";;qBAIa;wBAUG"}

package/dist/components/hooks/use-mobile.js

@@ -0,0 +1,16 @@
+import * as React$1 from "react";
+//#region src/components/hooks/use-mobile.ts
+/** The screens `useIsMobile` calls a phone's. */
+const MOBILE_QUERY = `(max-width: 767px)`;
+const subscribe = (onChange) => {
+	const mql = window.matchMedia(MOBILE_QUERY);
+	mql.addEventListener("change", onChange);
+	return () => mql.removeEventListener("change", onChange);
+};
+function useIsMobile() {
+	return React$1.useSyncExternalStore(subscribe, () => window.matchMedia(MOBILE_QUERY).matches, () => false);
+}
+//#endregion
+export { MOBILE_QUERY, useIsMobile };
+
+//# sourceMappingURL=use-mobile.js.map

package/dist/components/hooks/use-mobile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-mobile.js","names":["React"],"sources":["../../../src/components/hooks/use-mobile.ts"],"sourcesContent":["import * as React from 'react';\n\nconst MOBILE_BREAKPOINT = 768;\n/** The screens `useIsMobile` calls a phone's. */\nexport const MOBILE_QUERY = `(max-width: ${MOBILE_BREAKPOINT - 1}px)`;\n\nconst subscribe = (onChange: () => void) => {\n  const mql = window.matchMedia(MOBILE_QUERY);\n  mql.addEventListener('change', onChange);\n  return () => mql.removeEventListener('change', onChange);\n};\n\n// The server renders wide; hydration uses that too, then React re-renders\n// with the real width, so server and client markup always match.\nexport function useIsMobile() {\n  return React.useSyncExternalStore(\n    subscribe,\n    () => window.matchMedia(MOBILE_QUERY).matches,\n    () => false,\n  );\n}\n"],"mappings":";;;AAIA,MAAa,eAAe;AAE5B,MAAM,aAAa,aAAyB;CAC1C,MAAM,MAAM,OAAO,WAAW,YAAY;CAC1C,IAAI,iBAAiB,UAAU,QAAQ;CACvC,aAAa,IAAI,oBAAoB,UAAU,QAAQ;AACzD;AAIA,SAAgB,cAAc;CAC5B,OAAOA,QAAM,qBACX,iBACM,OAAO,WAAW,YAAY,CAAC,CAAC,eAChC,KACR;AACF"}

package/dist/components/hooks/use-scroll.d.ts

@@ -0,0 +1,12 @@
+//#region src/components/hooks/use-scroll.d.ts
+export declare function useScroll(element?: HTMLElement | null): {
+  scrollDownBy: (px: number) => void;
+  scrollUpBy: (px: number) => void;
+  scrollToTop: () => void;
+  scrollToEnd: () => void;
+  alwaysScrollToBottom: () => void;
+  stopAlwaysScrollToBottom: () => void;
+  isAutoScrolling: boolean;
+};
+//#endregion
+//# sourceMappingURL=use-scroll.d.ts.map

package/dist/components/hooks/use-scroll.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-scroll.d.ts","names":[],"sources":["../../../src/components/hooks/use-scroll.ts"],"mappings":";wBAyEgB,UAAU,UAAU;EAuK3B,eAAA;EAQA,aAAA"}