@kestack/web-platform 0.0.0-stage → 0.0.1

package/dist/theme/store.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"store.js","names":[],"sources":["../../src/theme/store.ts"],"sourcesContent":["import { useSyncExternalStore } from 'react';\nimport { themeFromCookies, writeThemeCookie } from './cookie.ts';\nimport { applyThemeToDocument } from './document.ts';\nimport {\n  DEFAULT_THEME,\n  THEME_CHANGED,\n  THEME_COOKIE,\n  type Theme,\n} from './model.ts';\n\nlet current: Theme = DEFAULT_THEME;\nlet listening = false;\nconst listeners = new Set<() => void>();\n\nconst readBrowserTheme = (): Theme => themeFromCookies(document.cookie);\n\nconst publish = (theme: Theme, freeze = false): void => {\n  current = theme;\n  applyThemeToDocument(theme, freeze);\n  for (const listener of listeners) listener();\n};\n\nconst refresh = (): void => {\n  const theme = readBrowserTheme();\n  if (theme !== current) publish(theme);\n};\n\nconst beginListening = (): void => {\n  if (listening || typeof window === 'undefined') return;\n  listening = true;\n  current = readBrowserTheme();\n  applyThemeToDocument(current);\n  window.addEventListener(THEME_CHANGED, refresh);\n  window.addEventListener('focus', refresh);\n  document.addEventListener('visibilitychange', refresh);\n\n  const cookies = window.cookieStore;\n  cookies?.addEventListener('change', (event) => {\n    if (\n      [...event.changed, ...event.deleted].some(\n        (cookie) => cookie.name === THEME_COOKIE,\n      )\n    ) {\n      refresh();\n    }\n  });\n};\n\nconst subscribe = (listener: () => void): (() => void) => {\n  beginListening();\n  listeners.add(listener);\n  return () => listeners.delete(listener);\n};\n\nexport const useThemeValue = (): Theme =>\n  useSyncExternalStore(\n    subscribe,\n    () => current,\n    () => DEFAULT_THEME,\n  );\n\nexport const setThemeValue = (theme: Theme, cookieDomain?: string): void => {\n  writeThemeCookie(theme, cookieDomain);\n  publish(theme, true);\n  window.dispatchEvent(new Event(THEME_CHANGED));\n};\n"],"mappings":";;;;;AAUA,IAAI,UAAiB;AACrB,IAAI,YAAY;AAChB,MAAM,4BAAY,IAAI,IAAgB;AAEtC,MAAM,yBAAgC,iBAAiB,SAAS,MAAM;AAEtE,MAAM,WAAW,OAAc,SAAS,UAAgB;CACtD,UAAU;CACV,qBAAqB,OAAO,MAAM;CAClC,KAAK,MAAM,YAAY,WAAW,SAAS;AAC7C;AAEA,MAAM,gBAAsB;CAC1B,MAAM,QAAQ,iBAAiB;CAC/B,IAAI,UAAU,SAAS,QAAQ,KAAK;AACtC;AAEA,MAAM,uBAA6B;CACjC,IAAI,aAAa,OAAO,WAAW,aAAa;CAChD,YAAY;CACZ,UAAU,iBAAiB;CAC3B,qBAAqB,OAAO;CAC5B,OAAO,iBAAiB,eAAe,OAAO;CAC9C,OAAO,iBAAiB,SAAS,OAAO;CACxC,SAAS,iBAAiB,oBAAoB,OAAO;CAGrD,OADuB,aACd,iBAAiB,WAAW,UAAU;EAC7C,IACE,CAAC,GAAG,MAAM,SAAS,GAAG,MAAM,OAAO,CAAC,CAAC,MAClC,WAAW,OAAO,SAAA,WACrB,GAEA,QAAQ;CAEZ,CAAC;AACH;AAEA,MAAM,aAAa,aAAuC;CACxD,eAAe;CACf,UAAU,IAAI,QAAQ;CACtB,aAAa,UAAU,OAAO,QAAQ;AACxC;AAEA,MAAa,sBACX,qBACE,iBACM,eACA,aACR;AAEF,MAAa,iBAAiB,OAAc,iBAAgC;CAC1E,iBAAiB,OAAO,YAAY;CACpC,QAAQ,OAAO,IAAI;CACnB,OAAO,cAAc,IAAI,MAAM,aAAa,CAAC;AAC/C"}

package/dist/theme/theme.d.ts

@@ -0,0 +1,22 @@
+import { Theme } from "./model.js";
+import { StatusBar } from "./status-bar.js";
+//#region src/theme/theme.d.ts
+export declare function createTheme(options?: {
+  readonly cookieDomain?: string | undefined;
+}): {
+  useTheme: () => {
+    theme: Theme;
+    setTheme: (theme: Theme) => void;
+    toggleTheme: () => void;
+  };
+  Script: (props: {
+    readonly initialTheme?: Theme;
+  }) => import("react").FunctionComponentElement<import("react").FragmentProps>;
+  StatusBar: typeof StatusBar;
+  manifest: (theme: Theme) => {
+    theme_color: string;
+    background_color: string;
+  };
+};
+//#endregion
+//# sourceMappingURL=theme.d.ts.map

package/dist/theme/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","names":[],"sources":["../../src/theme/theme.ts"],"mappings":";;;wBAMgB,YACd;WAAoB;;;;IAEK,WAAA,OAAA;;;EAWF,SAAA;aAAW,eAAe;wBAAO,yCAAA;;EAmBpC,WAAA,OAAA;IAChB;IACA"}

package/dist/theme/theme.js

@@ -0,0 +1,37 @@
+import { THEME_COLORS } from "./model.js";
+import { bootstrapSource } from "./document.js";
+import { StatusBar } from "./status-bar.js";
+import { setThemeValue, useThemeValue } from "./store.js";
+import { Fragment, createElement } from "react";
+//#region src/theme/theme.ts
+function createTheme(options = {}) {
+	const setTheme = (theme) => setThemeValue(theme, options.cookieDomain);
+	function useTheme() {
+		const theme = useThemeValue();
+		return {
+			theme,
+			setTheme,
+			toggleTheme: () => setTheme(theme === "dark" ? "light" : "dark")
+		};
+	}
+	function Script(props) {
+		const initialTheme = props.initialTheme ?? "dark";
+		return createElement(Fragment, null, createElement("meta", {
+			name: "theme-color",
+			content: THEME_COLORS[initialTheme]
+		}), createElement("script", { dangerouslySetInnerHTML: { __html: bootstrapSource(initialTheme) } }));
+	}
+	return {
+		useTheme,
+		Script,
+		StatusBar,
+		manifest: (theme) => ({
+			theme_color: THEME_COLORS[theme],
+			background_color: THEME_COLORS[theme]
+		})
+	};
+}
+//#endregion
+export { createTheme };
+
+//# sourceMappingURL=theme.js.map

package/dist/theme/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.js","names":[],"sources":["../../src/theme/theme.ts"],"sourcesContent":["import { createElement, Fragment } from 'react';\nimport { bootstrapSource } from './document.ts';\nimport { THEME_COLORS, type Theme } from './model.ts';\nimport { StatusBar } from './status-bar.ts';\nimport { setThemeValue, useThemeValue } from './store.ts';\n\nexport function createTheme(\n  options: { readonly cookieDomain?: string | undefined } = {},\n) {\n  const setTheme = (theme: Theme) => setThemeValue(theme, options.cookieDomain);\n\n  function useTheme() {\n    const theme = useThemeValue();\n    return {\n      theme,\n      setTheme,\n      toggleTheme: () => setTheme(theme === 'dark' ? 'light' : 'dark'),\n    };\n  }\n\n  function Script(props: { readonly initialTheme?: Theme }) {\n    const initialTheme = props.initialTheme ?? 'dark';\n    return createElement(\n      Fragment,\n      null,\n      createElement('meta', {\n        name: 'theme-color',\n        content: THEME_COLORS[initialTheme],\n      }),\n      createElement('script', {\n        dangerouslySetInnerHTML: { __html: bootstrapSource(initialTheme) },\n      }),\n    );\n  }\n\n  return {\n    useTheme,\n    Script,\n    StatusBar,\n    manifest: (theme: Theme) => ({\n      theme_color: THEME_COLORS[theme],\n      background_color: THEME_COLORS[theme],\n    }),\n  };\n}\n"],"mappings":";;;;;;AAMA,SAAgB,YACd,UAA0D,CAAC,GAC3D;CACA,MAAM,YAAY,UAAiB,cAAc,OAAO,QAAQ,YAAY;CAE5E,SAAS,WAAW;EAClB,MAAM,QAAQ,cAAc;EAC5B,OAAO;GACL;GACA;GACA,mBAAmB,SAAS,UAAU,SAAS,UAAU,MAAM;EACjE;CACF;CAEA,SAAS,OAAO,OAA0C;EACxD,MAAM,eAAe,MAAM,gBAAgB;EAC3C,OAAO,cACL,UACA,MACA,cAAc,QAAQ;GACpB,MAAM;GACN,SAAS,aAAa;EACxB,CAAC,GACD,cAAc,UAAU,EACtB,yBAAyB,EAAE,QAAQ,gBAAgB,YAAY,EAAE,EACnE,CAAC,CACH;CACF;CAEA,OAAO;EACL;EACA;EACA;EACA,WAAW,WAAkB;GAC3B,aAAa,aAAa;GAC1B,kBAAkB,aAAa;EACjC;CACF;AACF"}

package/package.json

@@ -1,6 +1,258 @@
 {
   "name": "@kestack/web-platform",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.0.1",
+  "private": false,
+  "description": "The way to build a kstack app: one config made into a PWA on TanStack Start with its Theme, its APIs on a cloud or a device Backend, several Accounts with one Session each, the screens before sign-in, and the server; plus the components, input, forms and Recipes to build screens with.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/pkishorez/monorepo",
+    "directory": "platforms/web-platform"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "files": [
+    "dist/",
+    "src/",
+    "README.md",
+    "LICENSE"
+  ],
+  "imports": {
+    "#components/*": "./src/components/*.tsx",
+    "#lib/shadow-dom": "./src/components/lib/shadow-dom.tsx",
+    "#lib/*": "./src/components/lib/*.ts",
+    "#hooks/*": "./src/components/hooks/*.ts"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/app/index.d.ts",
+      "default": "./dist/app/index.js"
+    },
+    "./define": {
+      "types": "./dist/define/index.d.ts",
+      "default": "./dist/define/index.js"
+    },
+    "./theme": {
+      "types": "./dist/theme/index.d.ts",
+      "default": "./dist/theme/index.js"
+    },
+    "./theme/*.css": "./dist/theme/css/*.css",
+    "./feedback": {
+      "types": "./dist/feedback/index.d.ts",
+      "default": "./dist/feedback/index.js"
+    },
+    "./input": {
+      "types": "./dist/input/index.d.ts",
+      "default": "./dist/input/index.js"
+    },
+    "./components/*": {
+      "types": "./dist/components/ui/*.d.ts",
+      "default": "./dist/components/ui/*.js"
+    },
+    "./components/viewers/*": {
+      "types": "./dist/components/viewers/*/index.d.ts",
+      "default": "./dist/components/viewers/*/index.js"
+    },
+    "./components/hooks/*": {
+      "types": "./dist/components/hooks/*.d.ts",
+      "default": "./dist/components/hooks/*.js"
+    },
+    "./components/utils": {
+      "types": "./dist/components/lib/utils.d.ts",
+      "default": "./dist/components/lib/utils.js"
+    },
+    "./components/lucide": {
+      "types": "./dist/components/lib/lucide.d.ts",
+      "default": "./dist/components/lib/lucide.js"
+    },
+    "./components/motion": {
+      "types": "./dist/components/lib/motion.d.ts",
+      "default": "./dist/components/lib/motion.js"
+    },
+    "./components/scroll-styles": {
+      "types": "./dist/components/lib/scrollStyles.d.ts",
+      "default": "./dist/components/lib/scrollStyles.js"
+    },
+    "./components/shadow-dom": {
+      "types": "./dist/components/lib/shadow-dom.d.ts",
+      "default": "./dist/components/lib/shadow-dom.js"
+    },
+    "./form": {
+      "types": "./dist/form/index.d.ts",
+      "default": "./dist/form/index.js"
+    },
+    "./recipes/*": {
+      "types": "./dist/recipes/*/index.d.ts",
+      "default": "./dist/recipes/*/index.js"
+    },
+    "./client": {
+      "types": "./dist/client/index.d.ts",
+      "default": "./dist/client/index.js"
+    },
+    "./client/server": {
+      "types": "./dist/client/server.d.ts",
+      "default": "./dist/client/server.js"
+    },
+    "./pwa": {
+      "types": "./dist/pwa/index.d.ts",
+      "default": "./dist/pwa/index.js"
+    },
+    "./pwa/vite": {
+      "types": "./dist/pwa/vite/index.d.ts",
+      "default": "./dist/pwa/vite/index.js"
+    },
+    "./pwa/splash": {
+      "types": "./dist/pwa/splash/index.d.ts",
+      "default": "./dist/pwa/splash/index.js"
+    },
+    "./pwa/worker": {
+      "types": "./dist/pwa/worker/index.d.ts",
+      "default": "./dist/pwa/worker/index.js"
+    },
+    "./pwa/client": {
+      "types": "./dist/pwa/client/index.d.ts",
+      "default": "./dist/pwa/client/index.js"
+    },
+    "./pwa/extras": {
+      "types": "./dist/pwa/extras/index.d.ts",
+      "default": "./dist/pwa/extras/index.js"
+    },
+    "./pwa/rpc/worker": {
+      "types": "./dist/pwa/rpc/worker/index.d.ts",
+      "default": "./dist/pwa/rpc/worker/index.js"
+    },
+    "./pwa/rpc/client": {
+      "types": "./dist/pwa/rpc/client/index.d.ts",
+      "default": "./dist/pwa/rpc/client/index.js"
+    },
+    "./server": {
+      "types": "./dist/server/index.d.ts",
+      "default": "./dist/server/index.js"
+    }
+  },
+  "dependencies": {
+    "@base-ui/react": "1.8.0",
+    "@codemirror/lang-json": "6.0.2",
+    "@fontsource-variable/inter": "5.3.0",
+    "@fontsource-variable/jetbrains-mono": "5.3.0",
+    "@shadcn/react": "0.3.1",
+    "@shikijs/langs": "4.4.3",
+    "@shikijs/themes": "4.4.3",
+    "@tailwindcss/typography": "0.5.20",
+    "@tanstack/react-form": "1.33.5",
+    "@uiw/codemirror-theme-xcode": "4.25.11",
+    "@uiw/react-codemirror": "4.25.11",
+    "@uiw/react-json-view": "2.0.0-alpha.43",
+    "@xstate/effect": "0.1.0-alpha.6",
+    "class-variance-authority": "0.7.1",
+    "clsx": "2.1.1",
+    "cmdk": "1.1.1",
+    "cn": "0.2.6",
+    "embla-carousel-react": "8.6.0",
+    "input-otp": "1.5.0",
+    "lucide-react": "1.41.0",
+    "motion": "13.2.0",
+    "react-day-picker": "10.0.1",
+    "react-markdown": "10.1.0",
+    "react-resizable-panels": "4.12.3",
+    "recharts": "3.10.1",
+    "remark-gfm": "4.0.1",
+    "shadcn": "4.21.0",
+    "shiki": "4.4.3",
+    "sonner": "2.0.8",
+    "tailwind-merge": "3.6.0",
+    "tailwindcss": "4.3.3",
+    "tw-animate-css": "1.4.0",
+    "xstate": "6.0.0-alpha.64",
+    "zustand": "5.0.15"
+  },
+  "devDependencies": {
+    "@cloudflare/workers-types": "5.20260904.1",
+    "@tailwindcss/vite": "4.3.3",
+    "@tanstack/react-router": "1.170.32",
+    "@tanstack/react-start": "1.168.49",
+    "@tsconfig/node22": "22.0.6",
+    "@types/node": "26.4.1",
+    "@types/react": "19.2.18",
+    "@types/react-dom": "19.2.7",
+    "@typescript/native": "npm:typescript@7.0.2",
+    "@vitejs/plugin-react": "6.1.1",
+    "effect": "4.0.0",
+    "react": "19.2.8",
+    "react-cosmos": "7.4.1",
+    "react-cosmos-plugin-vite": "7.4.0",
+    "react-dom": "19.2.8",
+    "typescript": "npm:@typescript/typescript6@6.0.2",
+    "vite": "npm:@voidzero-dev/vite-plus-core@1.0.0",
+    "vitest": "5.0.1",
+    "@kestack/rpc-toolkit": "0.0.1",
+    "@kestack/auth-toolkit": "0.0.1",
+    "@kestack/std-toolkit": "0.0.1",
+    "@kestack/use-keys": "0.0.1",
+    "@kestack/use-gesture": "0.0.1",
+    "@kestack/kabuki": "0.0.1",
+    "laymos": "0.0.12",
+    "use-effect-ts": "0.0.12"
+  },
+  "peerDependencies": {
+    "@cloudflare/workers-types": "5.20260904.1",
+    "@tanstack/react-router": "1.170.32",
+    "@tanstack/react-start": "1.168.49",
+    "effect": "^4.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "vite": "^8.0.0",
+    "@kestack/std-toolkit": "0.0.1",
+    "@kestack/rpc-toolkit": "0.0.1",
+    "@kestack/auth-toolkit": "0.0.1",
+    "@kestack/use-gesture": "0.0.1",
+    "@kestack/use-keys": "0.0.1",
+    "use-effect-ts": "0.0.12",
+    "laymos": "0.0.12",
+    "@kestack/kabuki": "0.0.1"
+  },
+  "peerDependenciesMeta": {
+    "@cloudflare/workers-types": {
+      "optional": true
+    },
+    "@kestack/use-keys": {
+      "optional": true
+    },
+    "@tanstack/react-router": {
+      "optional": true
+    },
+    "@tanstack/react-start": {
+      "optional": true
+    },
+    "effect": {
+      "optional": true
+    },
+    "@kestack/kabuki": {
+      "optional": true
+    },
+    "laymos": {
+      "optional": true
+    },
+    "use-effect-ts": {
+      "optional": true
+    },
+    "vite": {
+      "optional": true
+    }
+  },
+  "scripts": {
+    "addcomp": "./scripts/addcomp.sh",
+    "build": "vp pack && cp -R src/theme/css dist/theme/",
+    "dev": "cosmos",
+    "fmt": "vp fmt",
+    "lint": "vp check && tsc --noEmit && pnpm lint:laymos",
+    "lint:laymos": "laymos lint",
+    "test": "vitest run",
+    "stories": "laymos stories"
+  }
 }

package/src/app/apis/apis.ts

@@ -0,0 +1,109 @@
+import { Effect, Layer } from 'effect';
+import type {
+  Rpc as EffectRpc,
+  RpcClient,
+  RpcClientError,
+  RpcGroup,
+} from 'effect/rpc';
+import { Rpc } from '@kestack/rpc-toolkit/rpc';
+
+/** How an API is reached on the cloud Backend. On the device Backend every
+ * API is called in this process, whatever its Transport. */
+export type Transport = 'http' | 'websocket';
+
+/** One of an app's APIs: a group and the Transport it is reached by. */
+export interface Api<Rpcs extends EffectRpc.Any = EffectRpc.Any> {
+  readonly group: RpcGroup.RpcGroup<Rpcs>;
+  readonly transport: Transport;
+  /** A path, resolved against the cloud address the Host knows, or a
+   * full URL, left alone. */
+  readonly path: string;
+}
+
+const api =
+  (transport: Transport) =>
+  <Rpcs extends EffectRpc.Any>(
+    group: RpcGroup.RpcGroup<Rpcs>,
+    options: { readonly path: string },
+  ): Api<Rpcs> => ({ group, transport, path: options.path });
+
+/**
+ * Declares an app's APIs, each by the Transport it is reached by:
+ * `Api.http(LedgerApi, { path: '/rpc' })` (POST, NDJSON, batched) or
+ * `Api.websocket(ChatApi, { path: '/rpc/chat' })`. Name them in one object;
+ * the names are how the Session and screens reach each one.
+ */
+export const Api = { http: api('http'), websocket: api('websocket') };
+
+/** An app's APIs, by the names it gives them. A group is invariant in its
+ * calls, so any group's Api fits only as `Api<any>`. */
+// oxlint-disable-next-line no-explicit-any
+export type Apis = Readonly<Record<string, Api<any>>>;
+
+/** The calls of one API. */
+export type RpcsOf<A> = A extends Api<infer Rpcs> ? Rpcs : never;
+
+/** An API's client: one Effect per call. */
+export type ApiClient<Rpcs extends EffectRpc.Any> = RpcClient.RpcClient<
+  Rpcs,
+  RpcClientError.RpcClientError
+>;
+
+/** Every API's client, by name. */
+export type ApiClients<A extends Apis> = {
+  readonly [K in keyof A]: ApiClient<RpcsOf<A[K]>>;
+};
+
+/** One API's handlers, with everything they stand on, run on the device. */
+export type DeviceBackend<Rpcs extends EffectRpc.Any> = Layer.Layer<
+  EffectRpc.ToHandler<Rpcs> | EffectRpc.Middleware<Rpcs>,
+  unknown
+>;
+
+/** The device Backend: every API's handlers, by the same names. An app
+ * with a device Backend has one for every API, or the device Backend would
+ * be half real. */
+export type DeviceBackends<A extends Apis> = {
+  readonly [K in keyof A]: DeviceBackend<RpcsOf<A[K]>>;
+};
+
+/** `path` against `base`; a full URL stays as it is. */
+export const resolve = (path: string, base: string) =>
+  /^[a-z][a-z0-9+.-]*:\/\//i.test(path)
+    ? path
+    : `${base.replace(/\/$/, '')}/${path.replace(/^\//, '')}`;
+
+// `url` with the token `token` gives as its `access_token`.
+const signedUrl = (url: string, token: Effect.Effect<string>) =>
+  Effect.map(token, (current) => {
+    const signed = new URL(url);
+    signed.searchParams.set('access_token', current);
+    return signed.href;
+  });
+
+/** How a call reaches one API on the cloud Backend. A call carries its
+ * Account's token and never a cookie, which names whoever is active in the
+ * browser. A WebSocket also opens with the token `token` gives at each
+ * connect, in its address, as a browser sets no headers on one: that is how
+ * the cloud knows whose it is before any call. */
+export const cloudProtocol = (
+  { group, transport, path }: Apis[string],
+  base: string,
+  token: Effect.Effect<string> | null = null,
+): Layer.Layer<RpcClient.Protocol> => {
+  const url = resolve(path, base);
+  return transport === 'http'
+    ? Rpc.http.client(group, { url, credentials: 'omit' })
+    : (Rpc.websocket.client(group, {
+        url: token === null ? url : signedUrl(url, token),
+      }) as Layer.Layer<RpcClient.Protocol, never, never>);
+};
+
+/** How a call reaches one API's handlers in this process. */
+export const deviceProtocol = (
+  { group }: Apis[string],
+  handlers: DeviceBackend<EffectRpc.Any>,
+): Layer.Layer<RpcClient.Protocol> =>
+  Rpc.inProcess
+    .client(group, handlers as never)
+    .pipe(Layer.orDie) as Layer.Layer<RpcClient.Protocol>;

package/src/app/apis/index.ts

@@ -0,0 +1,13 @@
+export {
+  Api,
+  type ApiClient,
+  type ApiClients,
+  type Apis,
+  cloudProtocol,
+  type DeviceBackend,
+  type DeviceBackends,
+  deviceProtocol,
+  resolve,
+  type RpcsOf,
+  type Transport,
+} from './apis.ts';