@validation-os/dashboard 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Benji Fisher
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.d.ts

@@ -0,0 +1,37 @@
+import * as react from 'react';
+import { Collection } from '@validation-os/core';
+
+type Counts = Partial<Record<Collection, number>>;
+interface UseCountsResult {
+    counts: Counts | null;
+    loading: boolean;
+    error: string | null;
+    refresh: () => void;
+}
+/**
+ * Client hook: fetch per-register counts from the API (`GET {basePath}/counts`).
+ * The API reads Firestore server-side through the adapter; this only speaks
+ * HTTP, so no backend credentials ever reach the browser.
+ */
+declare function useCounts(basePath?: string): UseCountsResult;
+
+interface RegisterCountsProps {
+    counts: Counts;
+    /** Optional caption under the tiles (e.g. the backend the numbers came from). */
+    caption?: string;
+}
+/**
+ * A glanceable grid of stat tiles — one per register, the register's row count
+ * as the hero number. Presentational: the caller reads the counts (server-side,
+ * through the adapter) and hands them in. Styled with Tailwind utility classes;
+ * the host app provides Tailwind.
+ */
+declare function RegisterCounts({ counts, caption }: RegisterCountsProps): react.JSX.Element;
+
+/** Plain-language labels — the register is a surface a non-technical
+ * teammate meets, so no jargon and no code-y plurals. */
+declare const REGISTER_LABEL: Record<Collection, string>;
+/** The order tiles read left-to-right, top-to-bottom. */
+declare const REGISTER_ORDER: Collection[];
+
+export { type Counts, REGISTER_LABEL, REGISTER_ORDER, RegisterCounts, type RegisterCountsProps, type UseCountsResult, useCounts };

package/dist/index.js

@@ -0,0 +1,84 @@
+"use client";
+
+// src/labels.ts
+var REGISTER_LABEL = {
+  assumptions: "Assumptions",
+  experiments: "Experiments",
+  readings: "Readings",
+  goals: "Goals",
+  decisions: "Decisions",
+  glossary: "Glossary",
+  people: "People"
+};
+var REGISTER_ORDER = [
+  "assumptions",
+  "experiments",
+  "readings",
+  "goals",
+  "decisions",
+  "glossary",
+  "people"
+];
+
+// src/register-counts.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function RegisterCounts({ counts, caption }) {
+  const registers = REGISTER_ORDER.filter(
+    (r) => counts[r] !== void 0
+  );
+  return /* @__PURE__ */ jsxs("section", { "aria-label": "Register counts", children: [
+    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4", children: registers.map((register) => /* @__PURE__ */ jsx(
+      StatTile,
+      {
+        label: REGISTER_LABEL[register],
+        value: counts[register] ?? 0
+      },
+      register
+    )) }),
+    caption ? /* @__PURE__ */ jsx("p", { className: "mt-4 text-sm text-neutral-500 dark:text-neutral-400", children: caption }) : null
+  ] });
+}
+function StatTile({ label, value }) {
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-xl border border-neutral-200 bg-white p-5 dark:border-neutral-800 dark:bg-neutral-900", children: [
+    /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-neutral-500 dark:text-neutral-400", children: label }),
+    /* @__PURE__ */ jsx("div", { className: "mt-1 text-3xl font-semibold tabular-nums text-neutral-900 dark:text-neutral-50", children: value.toLocaleString() })
+  ] });
+}
+
+// src/use-counts.ts
+import { useCallback, useEffect, useState } from "react";
+function useCounts(basePath = "/api") {
+  const [counts, setCounts] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [tick, setTick] = useState(0);
+  useEffect(() => {
+    let live = true;
+    setLoading(true);
+    fetch(`${basePath}/counts`).then(async (res) => {
+      if (!res.ok) throw new Error(`Counts request failed (${res.status})`);
+      return await res.json();
+    }).then((body) => {
+      if (!live) return;
+      setCounts(body.counts);
+      setError(null);
+    }).catch((e) => {
+      if (!live) return;
+      setError(e instanceof Error ? e.message : "Failed to load counts");
+    }).finally(() => {
+      if (live) setLoading(false);
+    });
+    return () => {
+      live = false;
+    };
+  }, [basePath, tick]);
+  const refresh = useCallback(() => setTick((t) => t + 1), []);
+  return { counts, loading, error, refresh };
+}
+export {
+  REGISTER_LABEL,
+  REGISTER_ORDER,
+  RegisterCounts,
+  useCounts
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/labels.ts","../src/register-counts.tsx","../src/use-counts.ts"],"sourcesContent":["import type { Collection } from \"@validation-os/core\";\n\n/** Plain-language labels — the register is a surface a non-technical\n * teammate meets, so no jargon and no code-y plurals. */\nexport const REGISTER_LABEL: Record<Collection, string> = {\n  assumptions: \"Assumptions\",\n  experiments: \"Experiments\",\n  readings: \"Readings\",\n  goals: \"Goals\",\n  decisions: \"Decisions\",\n  glossary: \"Glossary\",\n  people: \"People\",\n};\n\n/** The order tiles read left-to-right, top-to-bottom. */\nexport const REGISTER_ORDER: Collection[] = [\n  \"assumptions\",\n  \"experiments\",\n  \"readings\",\n  \"goals\",\n  \"decisions\",\n  \"glossary\",\n  \"people\",\n];\n","import type { Collection } from \"@validation-os/core\";\nimport { REGISTER_LABEL, REGISTER_ORDER } from \"./labels.js\";\nimport type { Counts } from \"./use-counts.js\";\n\nexport interface RegisterCountsProps {\n  counts: Counts;\n  /** Optional caption under the tiles (e.g. the backend the numbers came from). */\n  caption?: string;\n}\n\n/**\n * A glanceable grid of stat tiles — one per register, the register's row count\n * as the hero number. Presentational: the caller reads the counts (server-side,\n * through the adapter) and hands them in. Styled with Tailwind utility classes;\n * the host app provides Tailwind.\n */\nexport function RegisterCounts({ counts, caption }: RegisterCountsProps) {\n  const registers = REGISTER_ORDER.filter(\n    (r): r is Collection => counts[r] !== undefined,\n  );\n  return (\n    <section aria-label=\"Register counts\">\n      <div className=\"grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4\">\n        {registers.map((register) => (\n          <StatTile\n            key={register}\n            label={REGISTER_LABEL[register]}\n            value={counts[register] ?? 0}\n          />\n        ))}\n      </div>\n      {caption ? (\n        <p className=\"mt-4 text-sm text-neutral-500 dark:text-neutral-400\">\n          {caption}\n        </p>\n      ) : null}\n    </section>\n  );\n}\n\nfunction StatTile({ label, value }: { label: string; value: number }) {\n  return (\n    <div className=\"rounded-xl border border-neutral-200 bg-white p-5 dark:border-neutral-800 dark:bg-neutral-900\">\n      <div className=\"text-sm font-medium text-neutral-500 dark:text-neutral-400\">\n        {label}\n      </div>\n      <div className=\"mt-1 text-3xl font-semibold tabular-nums text-neutral-900 dark:text-neutral-50\">\n        {value.toLocaleString()}\n      </div>\n    </div>\n  );\n}\n","import { useCallback, useEffect, useState } from \"react\";\nimport type { Collection } from \"@validation-os/core\";\n\nexport type Counts = Partial<Record<Collection, number>>;\n\nexport interface UseCountsResult {\n  counts: Counts | null;\n  loading: boolean;\n  error: string | null;\n  refresh: () => void;\n}\n\n/**\n * Client hook: fetch per-register counts from the API (`GET {basePath}/counts`).\n * The API reads Firestore server-side through the adapter; this only speaks\n * HTTP, so no backend credentials ever reach the browser.\n */\nexport function useCounts(basePath = \"/api\"): UseCountsResult {\n  const [counts, setCounts] = useState<Counts | null>(null);\n  const [loading, setLoading] = useState(true);\n  const [error, setError] = useState<string | null>(null);\n  const [tick, setTick] = useState(0);\n\n  useEffect(() => {\n    let live = true;\n    setLoading(true);\n    fetch(`${basePath}/counts`)\n      .then(async (res) => {\n        if (!res.ok) throw new Error(`Counts request failed (${res.status})`);\n        return (await res.json()) as { counts: Counts };\n      })\n      .then((body) => {\n        if (!live) return;\n        setCounts(body.counts);\n        setError(null);\n      })\n      .catch((e: unknown) => {\n        if (!live) return;\n        setError(e instanceof Error ? e.message : \"Failed to load counts\");\n      })\n      .finally(() => {\n        if (live) setLoading(false);\n      });\n    return () => {\n      live = false;\n    };\n  }, [basePath, tick]);\n\n  const refresh = useCallback(() => setTick((t) => t + 1), []);\n  return { counts, loading, error, refresh };\n}\n"],"mappings":";;;AAIO,IAAM,iBAA6C;AAAA,EACxD,aAAa;AAAA,EACb,aAAa;AAAA,EACb,UAAU;AAAA,EACV,OAAO;AAAA,EACP,WAAW;AAAA,EACX,UAAU;AAAA,EACV,QAAQ;AACV;AAGO,IAAM,iBAA+B;AAAA,EAC1C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;;;ACFI,SAGM,KAHN;AALG,SAAS,eAAe,EAAE,QAAQ,QAAQ,GAAwB;AACvE,QAAM,YAAY,eAAe;AAAA,IAC/B,CAAC,MAAuB,OAAO,CAAC,MAAM;AAAA,EACxC;AACA,SACE,qBAAC,aAAQ,cAAW,mBAClB;AAAA,wBAAC,SAAI,WAAU,wDACZ,oBAAU,IAAI,CAAC,aACd;AAAA,MAAC;AAAA;AAAA,QAEC,OAAO,eAAe,QAAQ;AAAA,QAC9B,OAAO,OAAO,QAAQ,KAAK;AAAA;AAAA,MAFtB;AAAA,IAGP,CACD,GACH;AAAA,IACC,UACC,oBAAC,OAAE,WAAU,uDACV,mBACH,IACE;AAAA,KACN;AAEJ;AAEA,SAAS,SAAS,EAAE,OAAO,MAAM,GAAqC;AACpE,SACE,qBAAC,SAAI,WAAU,iGACb;AAAA,wBAAC,SAAI,WAAU,8DACZ,iBACH;AAAA,IACA,oBAAC,SAAI,WAAU,kFACZ,gBAAM,eAAe,GACxB;AAAA,KACF;AAEJ;;;ACnDA,SAAS,aAAa,WAAW,gBAAgB;AAiB1C,SAAS,UAAU,WAAW,QAAyB;AAC5D,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAwB,IAAI;AACxD,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,IAAI;AAC3C,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAwB,IAAI;AACtD,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,CAAC;AAElC,YAAU,MAAM;AACd,QAAI,OAAO;AACX,eAAW,IAAI;AACf,UAAM,GAAG,QAAQ,SAAS,EACvB,KAAK,OAAO,QAAQ;AACnB,UAAI,CAAC,IAAI,GAAI,OAAM,IAAI,MAAM,0BAA0B,IAAI,MAAM,GAAG;AACpE,aAAQ,MAAM,IAAI,KAAK;AAAA,IACzB,CAAC,EACA,KAAK,CAAC,SAAS;AACd,UAAI,CAAC,KAAM;AACX,gBAAU,KAAK,MAAM;AACrB,eAAS,IAAI;AAAA,IACf,CAAC,EACA,MAAM,CAAC,MAAe;AACrB,UAAI,CAAC,KAAM;AACX,eAAS,aAAa,QAAQ,EAAE,UAAU,uBAAuB;AAAA,IACnE,CAAC,EACA,QAAQ,MAAM;AACb,UAAI,KAAM,YAAW,KAAK;AAAA,IAC5B,CAAC;AACH,WAAO,MAAM;AACX,aAAO;AAAA,IACT;AAAA,EACF,GAAG,CAAC,UAAU,IAAI,CAAC;AAEnB,QAAM,UAAU,YAAY,MAAM,QAAQ,CAAC,MAAM,IAAI,CAAC,GAAG,CAAC,CAAC;AAC3D,SAAO,EAAE,QAAQ,SAAS,OAAO,QAAQ;AAC3C;","names":[]}

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@validation-os/dashboard",
+  "version": "0.1.0",
+  "description": "React dashboard components + hooks for validation-os, consuming the DataProvider seam.",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@validation-os/core": "0.1.0"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.12",
+    "react": "^18.3.1",
+    "tsup": "^8.3.0",
+    "typescript": "^5.6.3"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/bfish1996/validation-os.git",
+    "directory": "packages/dashboard"
+  },
+  "scripts": {
+    "build": "tsup",
+    "typecheck": "tsc --noEmit"
+  }
+}