+ getUiState maps
+ pending, error, and the statuses you actually have onto one
+ match chain.
+ exhaustive() is
+ a type error until every status has a branch. For React screens that
+ already know if a query is loading — not a new store.
+
+ MIT. exhaustive() fails the type check
+ if a status is unmatched.
+
+
+
+
+
+
+
+
+
+
Nested ternaries do not scale.
+
+ Loading, error, data. Then empty. Then not-found. Each new status
+ is another branch to paste into every screen. Miss one and the UI
+ still typechecks.
+
+
+
+
+
+
+
+
Declare the state once. Match it.
+
+ Same API as the README. match
+ + exhaustive() — not a runtime
+ type guard.
+
+
+
+
+
+
+
+
+
The package, running.
+
+ This island hydrates on view and calls
+ getUiState from
+ @bearstudio/ui-state. Flip
+ pending, error, and default. Each view is a
+ match branch; the chain ends
+ with exhaustive().
+
+
+
+
+
+
+
+
+
What you get
+
+
+
Exhaustive matching
+
+ exhaustive() does not type
+ check until every inferred status has a
+ match. A new status is a
+ compile error, not a blank screen.
+
+
+
+
Your statuses, not a fixed enum
+
+ pending, error, default, empty, not-found, or
+ show-input. The helper
+ infers the union from set().
+
+
+
+
Payload per status
+
+ set("default", { book })
+ carries data on that branch. pending does not need a fake book.
+
+
+
+
when() for a single branch
+
+ ui.when("pending", …)
+ renders that status and returns null otherwise. Use
+ match when you want the
+ full set.
+
+
+
+
Small, React as a peer
+
+ One function. No store, no context, no extra runtime. Wire it to
+ TanStack Query, fetch, or flags you already have.
+
diff --git a/apps/landing/src/components/NestedTernary.astro b/apps/landing/src/components/NestedTernary.astro
index a3dd866..aa90b29 100644
--- a/apps/landing/src/components/NestedTernary.astro
+++ b/apps/landing/src/components/NestedTernary.astro
@@ -1,9 +1,16 @@
---
-// Static before sample. Braces escaped so Astro does not evaluate them.
+// Editorial pair: nested ternaries vs match + exhaustive.
+// Braces escaped so Astro does not evaluate them.
---
-
- getUiState maps
- pending, error, and the statuses you actually have onto one
- match chain.
- exhaustive() is
- a type error until every status has a branch. For React screens that
- already know if a query is loading — not a new store.
-
- MIT. exhaustive() fails the type check
- if a status is unmatched.
-
-
-
-
-
-
-
-
-
-
Nested ternaries do not scale.
-
- Loading, error, data. Then empty. Then not-found. Each new status
- is another branch to paste into every screen. Miss one and the UI
- still typechecks.
+
+
+
+
+ UI states you can exhaust.
+
+
+ getUiState maps
+ pending, error, and the statuses you actually have onto one
+ match chain.
+ exhaustive() is
+ a type error until every status has a branch. For React screens that
+ already know if a query is loading — not a new store.
- Same API as the README. match
- + exhaustive() — not a runtime
- type guard.
-
-
-
+
+
+
+ Nested ternaries do not scale.
+
+
+ Loading, error, data. Then empty. Then not-found. Each new status is
+ another branch to paste into every screen. Miss one and the UI still
+ typechecks.
+
+
+
+
-
-
+
+
The package, running.
-
+
This island hydrates on view and calls
getUiState from
- @bearstudio/ui-state. Flip pending, error,
- and default. Each view is a
+ @bearstudio/ui-state. Flip
+ pending, error, and default. Each view is a
match branch; the chain ends
with exhaustive().
-
+
-
-
What you get
-
-
-
Exhaustive matching
-
- exhaustive() does not type
- check until every inferred status has a
- match. A new status is a
- compile error, not a blank screen.
-
-
-
-
Your statuses, not a fixed enum
-
- pending, error, default, empty, not-found, or
- show-input. The helper
- infers the union from set().
-
-
-
-
Payload per status
-
- set("default", {"{"} book {"}"})
- carries data on that branch. pending does not need a fake book.
-
-
-
-
when() for a single branch
-
- ui.when("pending", …)
- renders that status and returns null otherwise. Use
- match when you want the
- full set.
-
-
-
-
Small, React as a peer
-
- One function. No store, no context, no extra runtime. Wire it to
- TanStack Query, fetch, or flags you already have.
-
-
-
+
+
+
What you get
+
+
+
+ exhaustive()
+
+
+ Does not type-check until every inferred status has a
+ match. A new status is a
+ compile error, not a blank screen.
+
+
+
+
Your statuses, with a payload
+
+ pending, error, empty, not-found, or
+ show-input —
+ set() infers the union.
+ Data lives on the branch that needs it.
+
+
+
+
+ when() for one branch
+
+
+ ui.when("pending", …)
+ renders that status and returns null otherwise. Use
+ match when you want the
+ full set.
+
) : null}
From 17fc4e8e29755819e74604a59e440555b825684b Mon Sep 17 00:00:00 2001
From: prdHugo <48803115+HugoPerard@users.noreply.github.com>
Date: Wed, 26 Aug 2026 04:36:27 -0700
Subject: [PATCH 15/46] Polish landing: drop fake chrome, equal tiles, and dark
invert
---
apps/landing/PRODUCT.md | 46 ++++++++++++++++++++++++++++++
apps/landing/src/styles/global.css | 17 +++++++++++
2 files changed, 63 insertions(+)
create mode 100644 apps/landing/PRODUCT.md
diff --git a/apps/landing/PRODUCT.md b/apps/landing/PRODUCT.md
new file mode 100644
index 0000000..8f0f212
--- /dev/null
+++ b/apps/landing/PRODUCT.md
@@ -0,0 +1,46 @@
+# Product
+
+
+
+## Platform
+
+web
+
+## Users
+
+TypeScript and React engineers drowning in nested loading / error / empty UI.
+
+## Product Purpose
+
+`@bearstudio/ui-state` is an OSS TypeScript helper. `getUiState` plus `match` plus `exhaustive()` map pending, error, and the statuses a screen already has onto one typed chain. Success is a compile error when a status is unmatched — not a new store.
+
+## Positioning
+
+exhaustive() is a type error until every status is matched. Statuses are inferred from set(), not a fixed enum. React is a peer. There is no store.
+
+## Operating Context
+
+Library landing (Persuade).
+Engineers arrive from GitHub, read a short example, and wire getUiState to query flags they already have.
+
+## Capabilities and Constraints
+
+- Surface API: getUiState, set(), match, exhaustive(), when().
+- Do not demo is() as a type guard; it does not narrow on current main (PR #5).
+- MIT. React peer. No store, no context, no extra runtime.
+- Do not invent download counts or testimonials.
+
+## Brand Commitments
+
+Voice: specific, technical, no hype. Anti-references: Relume/v0 indigo bento, fake browser chrome, equal feature cards, Unleash. Identity: cream/ink tokens, IBM Plex Sans and Mono.
+
+## Evidence on Hand
+
+No download counts, testimonials, or case studies. Do not fabricate them. Facts: MIT, React peer, no store, exhaustive() fails the type check until every status is matched.
+
+## Product Principles
+
+1. A missed status is a type error, not a blank screen.
+2. Statuses come from the app, not a library enum.
+3. No new store; wire to flags the screen already has.
+4. Marketing copy stays factual; no hype words.
diff --git a/apps/landing/src/styles/global.css b/apps/landing/src/styles/global.css
index ee7788c..c9fb777 100644
--- a/apps/landing/src/styles/global.css
+++ b/apps/landing/src/styles/global.css
@@ -26,6 +26,8 @@
html {
scroll-behavior: smooth;
+ color-scheme: light;
+ accent-color: var(--color-accent);
}
@media (prefers-reduced-motion: reduce) {
@@ -44,6 +46,7 @@ code,
pre,
.font-mono {
font-family: var(--font-mono);
+ font-variant-numeric: tabular-nums;
}
a:focus-visible,
@@ -51,3 +54,17 @@ button:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
}
+
+::selection {
+ background: var(--color-ink);
+ color: var(--color-paper);
+}
+
+a {
+ text-underline-offset: 0.18em;
+}
+
+textarea,
+input {
+ caret-color: var(--color-accent);
+}
From 3ea1d594d4e71353bf07878c8752b7c13ac02f4a Mon Sep 17 00:00:00 2001
From: prdHugo <48803115+HugoPerard@users.noreply.github.com>
Date: Wed, 26 Aug 2026 04:36:30 -0700
Subject: [PATCH 16/46] style(landing): install command as primary CTA, POV
eyebrow, more section space
---
apps/landing/src/pages/index.astro | 117 ++++++++++++++++-------------
1 file changed, 63 insertions(+), 54 deletions(-)
diff --git a/apps/landing/src/pages/index.astro b/apps/landing/src/pages/index.astro
index 5496235..7a9ac5a 100644
--- a/apps/landing/src/pages/index.astro
+++ b/apps/landing/src/pages/index.astro
@@ -4,11 +4,11 @@ import HeroCode from "../components/HeroCode.astro";
import NestedTernary from "../components/NestedTernary.astro";
import { StateDemo } from "../components/StateDemo.tsx";
-const title = '@bearstudio/ui-state — exhaustive UI states for React';
+const title = "@bearstudio/ui-state — exhaustive UI states for React";
const description =
- 'A small TypeScript helper that maps pending, error, and custom statuses onto match + exhaustive(). Miss a status, tsc fails.';
-const github = 'https://github.com/BearStudio/ui-state';
-const install = 'pnpm add @bearstudio/ui-state';
+ "A small TypeScript helper that maps pending, error, and custom statuses onto match + exhaustive(). Miss a status, tsc fails.";
+const github = "https://github.com/BearStudio/ui-state";
+const install = "pnpm add @bearstudio/ui-state";
---
@@ -54,11 +54,14 @@ const install = 'pnpm add @bearstudio/ui-state';
-
-
+
+
+
+ Miss a status, tsc fails.
+
UI states you can exhaust.
@@ -70,15 +73,17 @@ const install = 'pnpm add @bearstudio/ui-state';
a type error until every status has a branch. For React screens that
already know if a query is loading — not a new store.
-
- Loading, error, data. Then empty. Then not-found. Each new status is
- another branch to paste into every screen. Miss one and the UI still
- typechecks.
-
-
+
+
+
Nested ternaries do not scale.
+
+ Loading, error, data. Then empty. Then not-found. Each new status
+ is another branch to paste into every screen. Miss one and the UI
+ still typechecks.
+
+
+
-
+
The package, running.
This island hydrates on view and calls
getUiState from
- @bearstudio/ui-state. Flip
- pending, error, and default. Each view is a
+ @bearstudio/ui-state. Flip pending, error,
+ and default. Each view is a
match branch; the chain ends
with exhaustive().
-
+
-
-
+
+
What you get
-
-
-
- exhaustive()
-
-
- Does not type-check until every inferred status has a
+
+
+
exhaustive()
+
+ A type error until every status from
+ set() has a
match. A new status is a
compile error, not a blank screen.
-
-
Your statuses, with a payload
-
- pending, error, empty, not-found, or
- show-input —
- set() infers the union.
- Data lives on the branch that needs it.
+
+
set()
+
+ Infers the union — pending, empty, not-found, or
+ show-input. Payload is
+ optional and typed on that branch.
-
-
- when() for one branch
-
-
+
+
when()
+
ui.when("pending", …)
renders that status and returns null otherwise. Use
match when you want the
@@ -159,16 +160,24 @@ const install = 'pnpm add @bearstudio/ui-state';
-
-
+
+
Install
+
+ Peer React. No store. Wire it to the query status you already have.
+
@@ -118,7 +115,7 @@ const install = "pnpm add @bearstudio/ui-state";
@bearstudio/ui-state. Flip pending, error,
and default. Each view is a
match branch; the chain ends
- with exhaustive().
+ with exhaustive() — a type check, not a runtime type guard.
- Loading, error, data. Then empty. Then not-found. Each new status
- is another branch to paste into every screen. Miss one and the UI
- still typechecks.
+ Loading, error, data. Then empty. Then not-found. Each new status is
+ another branch to paste into every screen. Miss one and the UI still
+ typechecks.
-
-
-
+
-
+
The package, running.
This island hydrates on view and calls
getUiState from
- @bearstudio/ui-state. Flip pending, error,
- and default. Each view is a
+ @bearstudio/ui-state. Flip
+ pending, error, and default. Each view is a
match branch; the chain ends
- with exhaustive() — a type check, not a runtime type guard.
+ with exhaustive().
-
+
-
-
+
+
What you get
-
-
-
exhaustive()
-
- A type error until every status from
- set() has a
+
+
+
+ exhaustive()
+
+
+ Does not type-check until every inferred status has a
match. A new status is a
compile error, not a blank screen.
-
-
set()
-
- Infers the union — pending, empty, not-found, or
- show-input. Payload is
- optional and typed on that branch.
+
+
Your statuses, not a fixed enum
+
+ pending, error, default, empty, not-found, or
+ show-input. The helper
+ infers the union from set().
-
-
when()
-
- ui.when("pending", …)
- renders that status and returns null otherwise. Use
- match when you want the
- full set.
-
-
-
-
React as a peer
-
- One function. No store, no context, no extra runtime. Wire it to
- TanStack Query, fetch, or flags you already have.
+
+
Payload per status
+
+ set("default", {"{"} book {"}"})
+ carries data on that branch. pending does not need a fake book.
-
-
+
+
Install
-
- Peer React. No store. Wire it to the query status you already have.
-
From 8b0ceaaf69d81a01dc2f8296f737f9b8ced60013 Mon Sep 17 00:00:00 2001
From: prdHugo <48803115+HugoPerard@users.noreply.github.com>
Date: Wed, 26 Aug 2026 04:54:56 -0700
Subject: [PATCH 23/46] fix(landing): sell exhaustive() with the tsc error, not
a second match sample
---
.../src/components/NestedTernary.astro | 50 ++++++-------------
1 file changed, 16 insertions(+), 34 deletions(-)
diff --git a/apps/landing/src/components/NestedTernary.astro b/apps/landing/src/components/NestedTernary.astro
index aa90b29..ba131cc 100644
--- a/apps/landing/src/components/NestedTernary.astro
+++ b/apps/landing/src/components/NestedTernary.astro
@@ -1,37 +1,19 @@
---
-// Editorial pair: nested ternaries vs match + exhaustive.
-// Braces escaped so Astro does not evaluate them.
+// The sell: exhaustive() is a type error until every status is matched.
---
-
- Nested ternaries do not scale.
+ Miss a status, tsc fails.
Loading, error, data. Then empty. Then not-found. Each new status is
- another branch to paste into every screen. Miss one and the UI still
- typechecks.
+ another branch to paste into every screen. Miss one and a ternary
+ still typechecks. exhaustive()
+ does not.
- getUiState maps
- pending, error, and the statuses you actually have onto one
- match chain.
- exhaustive() is
- a type error until every status has a branch. For React screens that
- already know if a query is loading — not a new store.
-
+ getUiState maps
+ pending, error, and the statuses you actually have onto one
+ match chain.
+ Miss a status,
+ exhaustive() is a
+ type error. For React screens that already know if a query is loading
+ — not a new store.
+
- Loading, error, data. Then empty. Then not-found. Each new status is
- another branch to paste into every screen. Miss one and a ternary
- still typechecks. exhaustive()
- does not.
-
+
+
+
Same screen, with and without.
+
+ Nested ternaries swallow empty and still typecheck.
+ exhaustive() does not.
+
+
+
+
-
From 78bf4945582c4b9d058873b33b6ecdc5e7a63a0c Mon Sep 17 00:00:00 2001
From: prdHugo <48803115+HugoPerard@users.noreply.github.com>
Date: Wed, 26 Aug 2026 05:06:57 -0700
Subject: [PATCH 30/46] fix(landing): restore getUiState braces in with sample
From ac167c0aedb256d2c6f5bfca071b52bd2fb7d763 Mon Sep 17 00:00:00 2001
From: prdHugo <48803115+HugoPerard@users.noreply.github.com>
Date: Wed, 26 Aug 2026 05:07:15 -0700
Subject: [PATCH 31/46] fix(landing): close getUiState sample without a stray
space
Co-authored-by: Cursor
---
apps/landing/src/components/HeroCode.astro | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/apps/landing/src/components/HeroCode.astro b/apps/landing/src/components/HeroCode.astro
index 059f5ff..204349b 100644
--- a/apps/landing/src/components/HeroCode.astro
+++ b/apps/landing/src/components/HeroCode.astro
@@ -17,7 +17,7 @@
if (bookQuery.status === "error") return set("error");
if (!bookQuery.data) return set("empty");
return set("default", {"{"} book: bookQuery.data {"}"});
-{"} "});
+{"} "}{");"}
ui.match("pending", () => <Loading />)
.match("error", () => <Error />)
From e28675b75eb9603183153787f5366b77ade70e8a Mon Sep 17 00:00:00 2001
From: prdHugo <48803115+HugoPerard@users.noreply.github.com>
Date: Wed, 26 Aug 2026 05:07:37 -0700
Subject: [PATCH 32/46] fix(landing): with sample closes as });
From 2eab1f143a94f0b35208e38758447202df586bb7 Mon Sep 17 00:00:00 2001
From: prdHugo <48803115+HugoPerard@users.noreply.github.com>
Date: Wed, 26 Aug 2026 05:11:19 -0700
Subject: [PATCH 33/46] fix(landing): without column on paper, no figcaption
---
apps/landing/src/components/NestedTernary.astro | 15 +++++----------
1 file changed, 5 insertions(+), 10 deletions(-)
diff --git a/apps/landing/src/components/NestedTernary.astro b/apps/landing/src/components/NestedTernary.astro
index eba3957..55dccbf 100644
--- a/apps/landing/src/components/NestedTernary.astro
+++ b/apps/landing/src/components/NestedTernary.astro
@@ -1,18 +1,13 @@
---
-// Painful alternative: nested ternaries still typecheck when empty is missing.
+// Nested ternaries still typecheck when empty is missing.
---
-
-
- Without
-
-
- getUiState maps
- pending, error, and the statuses you actually have onto one
- match chain.
- Miss a status,
- exhaustive() is a
- type error. For React screens that already know if a query is loading
- — not a new store.
-
Same screen, with and without.
- Nested ternaries swallow empty and still typecheck.
+ getUiState maps pending,
+ error, and the statuses you actually have onto one
+ match chain. Nested ternaries
+ swallow empty and still typecheck.
exhaustive() does not.
- This island hydrates on view and calls
- getUiState from
- @bearstudio/ui-state. Flip
- pending, error, and default. Each view is a
- match branch; the chain ends
- with exhaustive().
+ Spin a custom status. The view next to it is the matching
+ match branch; the chain still
+ ends with exhaustive().