better-supabase 0.14.0 → 0.15.0

package/skills/better-supabase/references/ui-recipes.md

@@ -8,7 +8,7 @@ Build the UI this way: add the shadcn components the recipe lists, install the g
 
 ## Notification bell
 
-A header button with the unread count, which updates when a notification arrives or is read. Both sides call `useNotifications` from `better-supabase/blocks/notifications/react`; the [notifications block](https://bettersupabase.com/blocks/notifications) must be installed (`npx better-supabase add notifications`). Page: https://bettersupabase.com/recipes/notification-bell.
+A header button with the unread count, which updates when a notification arrives or is read. Both sides call `useNotifications` from `@/hooks/use-notifications`; the [notifications block](https://bettersupabase.com/blocks/notifications) must be installed (`npx better-supabase add notifications`). Page: https://bettersupabase.com/recipes/notification-bell.
 
 Web, with shadcn components:
 
@@ -17,7 +17,7 @@ npx shadcn add badge button
 ```
 
 ```bash
-npx shadcn add @better-supabase/notifications-actions-next
+npx shadcn add @better-supabase/use-notifications @better-supabase/notifications-actions-next
 ```
 
 ```tsx title="apps/examples/nextjs/src/features/notifications/components/unread-badge.tsx"
@@ -25,12 +25,12 @@ npx shadcn add @better-supabase/notifications-actions-next
 
 import type { NotificationCounts } from "better-supabase/blocks/notifications";
 
-import { useNotifications } from "better-supabase/blocks/notifications/react";
 import { BellIcon } from "lucide-react";
 import { useExtracted } from "next-intl";
 
 import { Badge } from "@/components/ui/badge";
 import { buttonVariants } from "@/components/ui/button";
+import { useNotifications } from "@/hooks/use-notifications";
 import { Link } from "@/i18n/navigation";
 import { useAuth } from "@/lib/hooks";
 
@@ -96,16 +96,16 @@ export function UnreadBadge() {
 React Native, with `Pressable`, `Text`, `View` from `react-native`:
 
 ```bash
-npx shadcn add @better-supabase/blocks
+npx shadcn add @better-supabase/use-notifications @better-supabase/blocks
 ```
 
 ```tsx title="apps/examples/expo-powersync/src/components/notification-bell.tsx"
 import type { NotificationCounts } from "better-supabase/blocks/notifications";
 
-import { useNotifications } from "better-supabase/blocks/notifications/react";
 import { tenantOf, useAuth, useSupabase } from "better-supabase/react";
 import { Pressable, Text, View } from "react-native";
 
+import { useNotifications } from "../hooks/use-notifications";
 import { blocks } from "../lib/blocks";
 
 const unreadOf = (counts: readonly NotificationCounts[]): number =>
@@ -166,7 +166,7 @@ export function NotificationBell({
 
 ## Notification list
 
-The caller's latest notifications with an unread marker, loaded again on every change. Both sides call `useNotifications` from `better-supabase/blocks/notifications/react`; the [notifications block](https://bettersupabase.com/blocks/notifications) must be installed (`npx better-supabase add notifications`). Page: https://bettersupabase.com/recipes/notification-list.
+The caller's latest notifications with an unread marker, loaded again on every change. Both sides call `useNotifications` from `@/hooks/use-notifications`; the [notifications block](https://bettersupabase.com/blocks/notifications) must be installed (`npx better-supabase add notifications`). Page: https://bettersupabase.com/recipes/notification-list.
 
 Web, with shadcn components:
 
@@ -175,13 +175,12 @@ npx shadcn add badge empty skeleton
 ```
 
 ```bash
-npx shadcn add @better-supabase/notifications-actions-next
+npx shadcn add @better-supabase/use-notifications @better-supabase/notifications-actions-next
 ```
 
 ```tsx title="apps/examples/nextjs/src/features/notifications/components/notification-list.tsx"
 "use client";
 
-import { useNotifications } from "better-supabase/blocks/notifications/react";
 import { BellIcon } from "lucide-react";
 import { useExtracted, useFormatter } from "next-intl";
 
@@ -194,6 +193,7 @@ import {
   EmptyTitle,
 } from "@/components/ui/empty";
 import { Skeleton } from "@/components/ui/skeleton";
+import { useNotifications } from "@/hooks/use-notifications";
 import { useAuth } from "@/lib/hooks";
 
 import type { NotificationRow } from "../notification-types";
@@ -276,14 +276,14 @@ function NotificationListSkeleton() {
 React Native, with `ActivityIndicator`, `FlatList`, `Text`, `View` from `react-native`:
 
 ```bash
-npx shadcn add @better-supabase/blocks
+npx shadcn add @better-supabase/use-notifications @better-supabase/blocks
 ```
 
 ```tsx title="apps/examples/expo-powersync/src/components/notification-list.tsx"
-import { useNotifications } from "better-supabase/blocks/notifications/react";
 import { tenantOf, useAuth, useSupabase } from "better-supabase/react";
 import { ActivityIndicator, FlatList, Text, View } from "react-native";
 
+import { useNotifications } from "../hooks/use-notifications";
 import { blocks } from "../lib/blocks";
 
 /**
@@ -340,7 +340,7 @@ export function NotificationList() {
 
 ## Command search
 
-A search dialog over the search index, with favorites and recents before the user types. Both sides call `useCommandSearch` from `better-supabase/blocks/search/react`; the [search block](https://bettersupabase.com/blocks/search) must be installed (`npx better-supabase add search`). Page: https://bettersupabase.com/recipes/command-search.
+A search dialog over the search index, with favorites and recents before the user types. Both sides call `useCommandSearch` from `@/hooks/use-search`; the [search block](https://bettersupabase.com/blocks/search) must be installed (`npx better-supabase add search`). Page: https://bettersupabase.com/recipes/command-search.
 
 Web, with shadcn components:
 
@@ -348,10 +348,13 @@ Web, with shadcn components:
 npx shadcn add button dialog input
 ```
 
+```bash
+npx shadcn add @better-supabase/use-search
+```
+
 ```tsx title="apps/examples/nextjs/src/features/search/components/command-search.tsx"
 "use client";
 
-import { useCommandSearch } from "better-supabase/blocks/search/react";
 import { SearchIcon } from "lucide-react";
 import { useExtracted } from "next-intl";
 
@@ -364,6 +367,7 @@ import {
   DialogTitle,
 } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
+import { useCommandSearch } from "@/hooks/use-search";
 import { Link } from "@/i18n/navigation";
 import { blockConfig } from "@/lib/supabase/blocks.generated";
 
@@ -466,8 +470,11 @@ export function CommandSearch() {
 
 React Native, with `Modal`, `Pressable`, `SectionList`, `Text`, `TextInput`, `View` from `react-native`:
 
+```bash
+npx shadcn add @better-supabase/use-search
+```
+
 ```tsx title="apps/examples/expo-powersync/src/components/command-search.tsx"
-import { useCommandSearch } from "better-supabase/blocks/search/react";
 import {
   Modal,
   Pressable,
@@ -477,6 +484,7 @@ import {
   View,
 } from "react-native";
 
+import { useCommandSearch } from "../hooks/use-search";
 import { API_SCHEMA } from "../lib/blocks";
 
 function heading(key: string): string {
@@ -577,7 +585,7 @@ export function CommandSearch() {
 
 ## Onboarding checklist
 
-The organization's getting-started steps with progress, hidden once every step is done. Both sides call `useOnboarding` from `better-supabase/blocks/onboarding/react`; the [onboarding block](https://bettersupabase.com/blocks/onboarding) must be installed (`npx better-supabase add onboarding`). Page: https://bettersupabase.com/recipes/onboarding-checklist.
+The organization's getting-started steps with progress, hidden once every step is done. Both sides call `useOnboarding` from `@/hooks/use-onboarding`; the [onboarding block](https://bettersupabase.com/blocks/onboarding) must be installed (`npx better-supabase add onboarding`). Page: https://bettersupabase.com/recipes/onboarding-checklist.
 
 Web, with shadcn components:
 
@@ -586,13 +594,12 @@ npx shadcn add button card progress skeleton
 ```
 
 ```bash
-npx shadcn add @better-supabase/onboarding-checklist
+npx shadcn add @better-supabase/use-onboarding @better-supabase/onboarding-checklist
 ```
 
 ```tsx title="apps/examples/nextjs/src/features/dashboard/components/onboarding-card.tsx"
 "use client";
 
-import { useOnboarding } from "better-supabase/blocks/onboarding/react";
 import { tenantOf } from "better-supabase/react";
 import { CheckCircle2Icon, CircleIcon } from "lucide-react";
 import { useExtracted } from "next-intl";
@@ -608,6 +615,7 @@ import {
 import { Progress } from "@/components/ui/progress";
 import { Skeleton } from "@/components/ui/skeleton";
 import { gettingStarted } from "@/features/onboarding/checklist";
+import { useOnboarding } from "@/hooks/use-onboarding";
 import { Link } from "@/i18n/navigation";
 import { useAuth } from "@/lib/hooks";
 import { blockConfig } from "@/lib/supabase/blocks.generated";
@@ -698,14 +706,14 @@ export function OnboardingCardSkeleton() {
 React Native, with `ActivityIndicator`, `Text`, `View` from `react-native`:
 
 ```bash
-npx shadcn add @better-supabase/onboarding-checklist
+npx shadcn add @better-supabase/use-onboarding @better-supabase/onboarding-checklist
 ```
 
 ```tsx title="apps/examples/expo-powersync/src/components/onboarding-checklist.tsx"
-import { useOnboarding } from "better-supabase/blocks/onboarding/react";
 import { tenantOf, useAuth } from "better-supabase/react";
 import { ActivityIndicator, Text, View } from "react-native";
 
+import { useOnboarding } from "../hooks/use-onboarding";
 import { API_SCHEMA } from "../lib/blocks";
 import { gettingStarted } from "../lib/onboarding";
 
@@ -765,7 +773,7 @@ export function OnboardingChecklist() {
 
 ## Comment thread
 
-A record's comments with their authors and a form to add one, kept current after each write. Both sides call `useComments` from `better-supabase/blocks/comments/react`; the [comments block](https://bettersupabase.com/blocks/comments) must be installed (`npx better-supabase add comments`). Page: https://bettersupabase.com/recipes/comment-thread.
+A record's comments with their authors and a form to add one, kept current after each write. Both sides call `useComments` from `@/hooks/use-comments`; the [comments block](https://bettersupabase.com/blocks/comments) must be installed (`npx better-supabase add comments`). Page: https://bettersupabase.com/recipes/comment-thread.
 
 Web, with shadcn components:
 
@@ -773,12 +781,15 @@ Web, with shadcn components:
 npx shadcn add button field skeleton textarea
 ```
 
+```bash
+npx shadcn add @better-supabase/use-comments
+```
+
 ```tsx title="apps/examples/nextjs/src/features/customers/components/comment-thread.tsx"
 "use client";
 
 import type { SubmitEvent } from "react";
 
-import { useComments } from "better-supabase/blocks/comments/react";
 import { useExtracted, useFormatter } from "next-intl";
 import { useId, useState } from "react";
 
@@ -786,11 +797,12 @@ import { Button } from "@/components/ui/button";
 import { Field, FieldError, FieldLabel } from "@/components/ui/field";
 import { Skeleton } from "@/components/ui/skeleton";
 import { Textarea } from "@/components/ui/textarea";
+import { useComments } from "@/hooks/use-comments";
 import { useErrorMessage } from "@/lib/use-error-message";
 
 /**
  * A record's comments, oldest first, through the browser client. `subject` is
- * any type in `config.subjects`, such as a customer or a project.
+ * any type in `config.records`, such as a customer or a project.
  */
 export function CommentThread({
   subject,
@@ -888,8 +900,11 @@ export function CommentThread({
 
 React Native, with `ActivityIndicator`, `Button`, `FlatList`, `Text`, `TextInput`, `View` from `react-native`:
 
+```bash
+npx shadcn add @better-supabase/use-comments
+```
+
 ```tsx title="apps/examples/expo-powersync/src/components/comment-thread.tsx"
-import { useComments } from "better-supabase/blocks/comments/react";
 import { useState } from "react";
 import {
   ActivityIndicator,
@@ -900,6 +915,8 @@ import {
   View,
 } from "react-native";
 
+import { useComments } from "../hooks/use-comments";
+
 /** A customer's comments, oldest first, with a box to add one. */
 export function CommentThread({ customerId }: { readonly customerId: string }) {
   const [body, setBody] = useState("");
@@ -965,7 +982,7 @@ export function CommentThread({ customerId }: { readonly customerId: string }) {
 
 ## Organization switcher
 
-A menu of the user's organizations that switches the active one and refreshes the session for its tenant claim. Both sides call `useOrganizations` from `better-supabase/blocks/organizations/react`; the [organizations block](https://bettersupabase.com/blocks/organizations) must be installed (`npx better-supabase add organizations`). Page: https://bettersupabase.com/recipes/org-switcher.
+A menu of the user's organizations that switches the active one and refreshes the session for its tenant claim. Both sides call `useOrganizations` from `@/hooks/use-organizations`; the [organizations block](https://bettersupabase.com/blocks/organizations) must be installed (`npx better-supabase add organizations`). Page: https://bettersupabase.com/recipes/org-switcher.
 
 Web, with shadcn components:
 
@@ -973,11 +990,14 @@ Web, with shadcn components:
 npx shadcn add dropdown-menu sidebar
 ```
 
+```bash
+npx shadcn add @better-supabase/use-organizations
+```
+
 ```tsx title="apps/examples/nextjs/src/features/organization/components/organization-switcher-menu.tsx"
 "use client";
 
 import { DbException } from "better-supabase";
-import { useOrganizations } from "better-supabase/blocks/organizations/react";
 import { CheckIcon, ChevronsUpDownIcon, PlusIcon } from "lucide-react";
 import { useExtracted } from "next-intl";
 import { useState, useTransition } from "react";
@@ -993,6 +1013,7 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { SidebarMenuButton } from "@/components/ui/sidebar";
+import { useOrganizations } from "@/hooks/use-organizations";
 import { blockConfig } from "@/lib/supabase/blocks.generated";
 import { useErrorMessage } from "@/lib/use-error-message";
 
@@ -1132,10 +1153,14 @@ export function OrganizationSwitcherMenu({
 
 React Native, with `ActivityIndicator`, `Pressable`, `Text`, `View` from `react-native`:
 
+```bash
+npx shadcn add @better-supabase/use-organizations
+```
+
 ```tsx title="apps/examples/expo-powersync/src/components/organization-switcher.tsx"
-import { useOrganizations } from "better-supabase/blocks/organizations/react";
 import { ActivityIndicator, Pressable, Text, View } from "react-native";
 
+import { useOrganizations } from "../hooks/use-organizations";
 import { API_SCHEMA } from "../lib/blocks";
 
 /**
@@ -1180,7 +1205,7 @@ export function OrganizationSwitcher() {
 
 ## Plan picker
 
-The plans with their prices and a checkout button each. Checkout starts in a server action or API route that holds the Stripe key, and the client opens the URL it returns. Both sides call `usePlanPicker` from `better-supabase/blocks/billing/react`; the [billing block](https://bettersupabase.com/blocks/billing) must be installed (`npx better-supabase add billing`). Page: https://bettersupabase.com/recipes/plan-picker.
+The plans with their prices and a checkout button each. Checkout starts in a server action or API route that holds the Stripe key, and the client opens the URL it returns. Both sides call `usePlanPicker` from `@/hooks/use-billing`; the [billing block](https://bettersupabase.com/blocks/billing) must be installed (`npx better-supabase add billing`). Page: https://bettersupabase.com/recipes/plan-picker.
 
 Web, with shadcn components:
 
@@ -1188,18 +1213,22 @@ Web, with shadcn components:
 npx shadcn add button card
 ```
 
+```bash
+npx shadcn add @better-supabase/use-billing
+```
+
 ```tsx title="apps/examples/nextjs/src/features/billing/components/plan-picker.tsx"
 "use client";
 
-import type { PlanCatalog } from "better-supabase/blocks/billing/react";
 import type { Money } from "better-supabase/commerce";
 
 import { DbException } from "better-supabase";
-import { usePlanPicker } from "better-supabase/blocks/billing/react";
 import { formatMoney } from "better-supabase/commerce";
 import { useExtracted, useLocale } from "next-intl";
 import { toast } from "sonner";
 
+import type { PlanCatalog } from "@/hooks/use-billing";
+
 import { Button } from "@/components/ui/button";
 import {
   Card,
@@ -1209,6 +1238,7 @@ import {
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
+import { usePlanPicker } from "@/hooks/use-billing";
 import { useErrorMessage } from "@/lib/use-error-message";
 
 import type { PlanOption } from "../billing-queries";
@@ -1328,12 +1358,16 @@ export function PlanPicker({
 
 React Native, with `ActivityIndicator`, `Pressable`, `Text`, `View` from `react-native`:
 
+```bash
+npx shadcn add @better-supabase/use-billing
+```
+
 ```tsx title="apps/examples/expo-powersync/src/components/plan-picker.tsx"
-import { usePlanPicker } from "better-supabase/blocks/billing/react";
 import { tenantOf, useAuth } from "better-supabase/react";
 import * as WebBrowser from "expo-web-browser";
 import { ActivityIndicator, Pressable, Text, View } from "react-native";
 
+import { usePlanPicker } from "../hooks/use-billing";
 import { loadPlanCatalog, startCheckout } from "../lib/billing";
 
 const price = (cents: number) =>
@@ -1403,7 +1437,7 @@ export function PlanPicker() {
 
 ## Usage meter
 
-This period's usage per meter against the plan's quota, with the reset date. Both sides call `useUsageMeter` from `better-supabase/blocks/usage/react`; the [usage block](https://bettersupabase.com/blocks/usage) must be installed (`npx better-supabase add usage`). Page: https://bettersupabase.com/recipes/usage-meter.
+This period's usage per meter against the plan's quota, with the reset date. Both sides call `useUsageMeter` from `@/hooks/use-usage`; the [usage block](https://bettersupabase.com/blocks/usage) must be installed (`npx better-supabase add usage`). Page: https://bettersupabase.com/recipes/usage-meter.
 
 Web, with shadcn components:
 
@@ -1411,10 +1445,13 @@ Web, with shadcn components:
 npx shadcn add card progress skeleton
 ```
 
+```bash
+npx shadcn add @better-supabase/use-usage
+```
+
 ```tsx title="apps/examples/nextjs/src/features/dashboard/components/usage-card.tsx"
 "use client";
 
-import { useUsageMeter } from "better-supabase/blocks/usage/react";
 import { tenantOf } from "better-supabase/react";
 import { useExtracted, useFormatter } from "next-intl";
 
@@ -1427,6 +1464,7 @@ import {
 } from "@/components/ui/card";
 import { Progress } from "@/components/ui/progress";
 import { Skeleton } from "@/components/ui/skeleton";
+import { useUsageMeter } from "@/hooks/use-usage";
 import { useAuth } from "@/lib/hooks";
 import { blockConfig } from "@/lib/supabase/blocks.generated";
 
@@ -1513,11 +1551,15 @@ export function UsageCardSkeleton() {
 
 React Native, with `ActivityIndicator`, `Text`, `View` from `react-native`:
 
+```bash
+npx shadcn add @better-supabase/use-usage
+```
+
 ```tsx title="apps/examples/expo-powersync/src/components/usage-meter.tsx"
-import { useUsageMeter } from "better-supabase/blocks/usage/react";
 import { tenantOf, useAuth } from "better-supabase/react";
 import { ActivityIndicator, Text, View } from "react-native";
 
+import { useUsageMeter } from "../hooks/use-usage";
 import { API_SCHEMA } from "../lib/blocks";
 
 const labels = new Map([
@@ -1583,7 +1625,7 @@ export function UsageMeter() {
 
 ## Feature gate
 
-Content shown only when the active organization's plan includes a feature, read from the session's features claim and updated when the session refreshes. Both sides call `useFeatureGate` from `better-supabase/blocks/entitlements/react`; the [entitlements block](https://bettersupabase.com/blocks/entitlements) must be installed (`npx better-supabase add entitlements`). Page: https://bettersupabase.com/recipes/feature-gate.
+Content shown only when the active organization's plan includes a feature, read from the session's features claim and updated when the session refreshes. Both sides call `useFeatureGate` from `@/hooks/use-entitlements`; the [entitlements block](https://bettersupabase.com/blocks/entitlements) must be installed (`npx better-supabase add entitlements`). Page: https://bettersupabase.com/recipes/feature-gate.
 
 Web, with shadcn components:
 
@@ -1591,12 +1633,15 @@ Web, with shadcn components:
 npx shadcn add button skeleton
 ```
 
+```bash
+npx shadcn add @better-supabase/use-entitlements
+```
+
 ```tsx title="apps/examples/nextjs/src/features/billing/components/feature-gate.tsx"
 "use client";
 
 import type { ReactNode } from "react";
 
-import { useFeatureGate } from "better-supabase/blocks/entitlements/react";
 import { LockIcon } from "lucide-react";
 import { useExtracted } from "next-intl";
 
@@ -1604,6 +1649,7 @@ import type { Entitlement } from "@/lib/claims";
 
 import { buttonVariants } from "@/components/ui/button";
 import { Skeleton } from "@/components/ui/skeleton";
+import { useFeatureGate } from "@/hooks/use-entitlements";
 import { Link } from "@/i18n/navigation";
 
 /**
@@ -1644,12 +1690,17 @@ export function FeatureGate({
 
 React Native, with `ActivityIndicator`, `Text`, `View` from `react-native`:
 
+```bash
+npx shadcn add @better-supabase/use-entitlements
+```
+
 ```tsx title="apps/examples/expo-powersync/src/components/feature-gate.tsx"
 import type { ReactNode } from "react";
 
-import { useFeatureGate } from "better-supabase/blocks/entitlements/react";
 import { ActivityIndicator, Text, View } from "react-native";
 
+import { useFeatureGate } from "../hooks/use-entitlements";
+
 /**
  * Renders `children` only when the active organization's plan includes
  * `feature`, read from the session's `features` claim. UX only: RLS checks the
@@ -1685,7 +1736,7 @@ export function FeatureGate({
 
 ## Settings layout
 
-Settings pages generated from the settings definition: a section per scope and a control per key, picked by the kind its schema declares. Both sides call `useSettings` from `better-supabase/blocks/settings/react`; the [settings block](https://bettersupabase.com/blocks/settings) must be installed (`npx better-supabase add settings`). Page: https://bettersupabase.com/recipes/settings-layout.
+Settings pages generated from the settings definition: a section per scope and a control per key, picked by the kind its schema declares. Both sides call `useSettings` from `@/hooks/use-settings`; the [settings block](https://bettersupabase.com/blocks/settings) must be installed (`npx better-supabase add settings`). Page: https://bettersupabase.com/recipes/settings-layout.
 
 Web, with shadcn components:
 
@@ -1693,21 +1744,22 @@ Web, with shadcn components:
 npx shadcn add card field input select skeleton switch
 ```
 
+```bash
+npx shadcn add @better-supabase/use-settings
+```
+
 ```tsx title="apps/examples/nextjs/src/features/settings/components/settings-layout.tsx"
 "use client";
 
 import type { SettingEntries } from "better-supabase/blocks/settings";
-import type {
-  SettingField,
-  SettingsState,
-} from "better-supabase/blocks/settings/react";
 
-import { useSettings } from "better-supabase/blocks/settings/react";
 import { tenantOf } from "better-supabase/react";
 import { useExtracted } from "next-intl";
 import { useId } from "react";
 import { toast } from "sonner";
 
+import type { SettingField, SettingsState } from "@/hooks/use-settings";
+
 import {
   Card,
   CardContent,
@@ -1732,6 +1784,7 @@ import {
 } from "@/components/ui/select";
 import { Skeleton } from "@/components/ui/skeleton";
 import { Switch } from "@/components/ui/switch";
+import { useSettings } from "@/hooks/use-settings";
 import { useAuth } from "@/lib/hooks";
 import { blockConfig } from "@/lib/supabase/blocks.generated";
 import { useErrorMessage } from "@/lib/use-error-message";
@@ -1941,14 +1994,13 @@ export function SettingsLayout({
 
 React Native, with `ActivityIndicator`, `Pressable`, `ScrollView`, `Switch`, `Text`, `TextInput`, `View` from `react-native`:
 
+```bash
+npx shadcn add @better-supabase/use-settings
+```
+
 ```tsx title="apps/examples/expo-powersync/src/components/settings-layout.tsx"
 import type { SettingEntries } from "better-supabase/blocks/settings";
-import type {
-  SettingField,
-  SettingsState,
-} from "better-supabase/blocks/settings/react";
 
-import { useSettings } from "better-supabase/blocks/settings/react";
 import { tenantOf, useAuth } from "better-supabase/react";
 import {
   ActivityIndicator,
@@ -1960,6 +2012,9 @@ import {
   View,
 } from "react-native";
 
+import type { SettingField, SettingsState } from "../hooks/use-settings";
+
+import { useSettings } from "../hooks/use-settings";
 import { API_SCHEMA } from "../lib/blocks";
 import { settings } from "../lib/settings";
 
@@ -2103,7 +2158,7 @@ export function SettingsLayout() {
 
 ## Members table
 
-An organization's members with their roles, where a role change shows at once and a member can be removed. Both sides call `useMembers` from `better-supabase/blocks/organizations/react`; the [organizations block](https://bettersupabase.com/blocks/organizations) must be installed (`npx better-supabase add organizations`). Page: https://bettersupabase.com/recipes/members-table.
+An organization's members with their roles, where a role change shows at once and a member can be removed. Both sides call `useMembers` from `@/hooks/use-organizations`; the [organizations block](https://bettersupabase.com/blocks/organizations) must be installed (`npx better-supabase add organizations`). Page: https://bettersupabase.com/recipes/members-table.
 
 Web, with shadcn components:
 
@@ -2111,11 +2166,14 @@ Web, with shadcn components:
 npx shadcn add avatar button select table
 ```
 
+```bash
+npx shadcn add @better-supabase/use-organizations
+```
+
 ```tsx title="apps/examples/nextjs/src/features/organization/components/member-table.tsx"
 "use client";
 
 import { DbException } from "better-supabase";
-import { useMembers } from "better-supabase/blocks/organizations/react";
 import { UserMinusIcon } from "lucide-react";
 import { useExtracted, useFormatter } from "next-intl";
 import { toast } from "sonner";
@@ -2140,6 +2198,7 @@ import {
 } from "@/components/ui/table";
 import { RoleBadge } from "@/features/user/components/role-badge";
 import { assignableRoles } from "@/features/user/user-permissions";
+import { useMembers } from "@/hooks/use-organizations";
 import { Role } from "@/lib/claims";
 import { initials } from "@/lib/initials";
 import { blockConfig } from "@/lib/supabase/blocks.generated";
@@ -2337,11 +2396,15 @@ export function MemberTable({
 
 React Native, with `ActivityIndicator`, `Pressable`, `Text`, `View` from `react-native`:
 
+```bash
+npx shadcn add @better-supabase/use-organizations
+```
+
 ```tsx title="apps/examples/expo-powersync/src/components/members-table.tsx"
-import { useMembers } from "better-supabase/blocks/organizations/react";
 import { tenantOf, useAuth } from "better-supabase/react";
 import { ActivityIndicator, Pressable, Text, View } from "react-native";
 
+import { useMembers } from "../hooks/use-organizations";
 import { API_SCHEMA } from "../lib/blocks";
 
 /**
@@ -2417,7 +2480,7 @@ export function MembersTable() {
 
 ## Invite dialog
 
-A form that invites a teammate by email with a role, then shows the token for the accept link. Both sides call `useInvitations` from `better-supabase/blocks/organizations/react`; the [invitations block](https://bettersupabase.com/blocks/invitations) must be installed (`npx better-supabase add invitations`). Page: https://bettersupabase.com/recipes/invite-dialog.
+A form that invites a teammate by email with a role, then shows the token for the accept link. Both sides call `useInvitations` from `@/hooks/use-organizations`; the [invitations block](https://bettersupabase.com/blocks/invitations) must be installed (`npx better-supabase add invitations`). Page: https://bettersupabase.com/recipes/invite-dialog.
 
 Web, with shadcn components:
 
@@ -2425,12 +2488,15 @@ Web, with shadcn components:
 npx shadcn add button dialog field input select
 ```
 
+```bash
+npx shadcn add @better-supabase/use-organizations
+```
+
 ```tsx title="apps/examples/nextjs/src/features/organization/components/invite-member-dialog.tsx"
 "use client";
 
 import type { SubmitEvent } from "react";
 
-import { useInvitations } from "better-supabase/blocks/organizations/react";
 import { CopyIcon, UserPlusIcon } from "lucide-react";
 import { useExtracted } from "next-intl";
 import { useId, useState } from "react";
@@ -2463,6 +2529,7 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { assignableRoles } from "@/features/user/user-permissions";
+import { useInvitations } from "@/hooks/use-organizations";
 import { Role } from "@/lib/claims";
 import { blockConfig } from "@/lib/supabase/blocks.generated";
 import { useErrorMessage } from "@/lib/use-error-message";
@@ -2642,12 +2709,16 @@ export function InviteMemberDialog({
 
 React Native, with `Button`, `Modal`, `Pressable`, `Text`, `TextInput`, `View` from `react-native`:
 
+```bash
+npx shadcn add @better-supabase/use-organizations
+```
+
 ```tsx title="apps/examples/expo-powersync/src/components/invite-dialog.tsx"
-import { useInvitations } from "better-supabase/blocks/organizations/react";
 import { tenantOf, useAuth } from "better-supabase/react";
 import { useState } from "react";
 import { Button, Modal, Pressable, Text, TextInput, View } from "react-native";
 
+import { useInvitations } from "../hooks/use-organizations";
 import { API_SCHEMA } from "../lib/blocks";
 
 const ROLES = ["member", "admin"] as const;
@@ -2757,7 +2828,7 @@ export function InviteDialog() {
 
 ## API keys table
 
-The organization's API keys, with a form that creates one and shows its token once, and a revoke button per key. Both sides call `useApiKeys` from `better-supabase/blocks/api-keys/react`; the [api-keys block](https://bettersupabase.com/blocks/api-keys) must be installed (`npx better-supabase add api-keys`). Page: https://bettersupabase.com/recipes/api-keys-table.
+The organization's API keys, with a form that creates one and shows its token once, and a revoke button per key. Both sides call `useApiKeys` from `@/hooks/use-api-keys`; the [api-keys block](https://bettersupabase.com/blocks/api-keys) must be installed (`npx better-supabase add api-keys`). Page: https://bettersupabase.com/recipes/api-keys-table.
 
 Web, with shadcn components:
 
@@ -2765,10 +2836,13 @@ Web, with shadcn components:
 npx shadcn add alert badge button dialog empty field input skeleton table
 ```
 
+```bash
+npx shadcn add @better-supabase/use-api-keys
+```
+
 ```tsx title="apps/examples/nextjs/src/features/api-keys/components/api-key-table.tsx"
 "use client";
 
-import { useApiKeys } from "better-supabase/blocks/api-keys/react";
 import { KeyRoundIcon } from "lucide-react";
 import { useExtracted, useFormatter } from "next-intl";
 import { toast } from "sonner";
@@ -2791,6 +2865,7 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
+import { useApiKeys } from "@/hooks/use-api-keys";
 import { blockConfig } from "@/lib/supabase/blocks.generated";
 import { useErrorMessage } from "@/lib/use-error-message";
 
@@ -2942,8 +3017,11 @@ export function ApiKeyTable({
 
 React Native, with `ActivityIndicator`, `Button`, `Pressable`, `Text`, `TextInput`, `View` from `react-native`:
 
+```bash
+npx shadcn add @better-supabase/use-api-keys
+```
+
 ```tsx title="apps/examples/expo-powersync/src/components/api-keys-table.tsx"
-import { useApiKeys } from "better-supabase/blocks/api-keys/react";
 import { tenantOf, useAuth } from "better-supabase/react";
 import { useState } from "react";
 import {
@@ -2955,6 +3033,7 @@ import {
   View,
 } from "react-native";
 
+import { useApiKeys } from "../hooks/use-api-keys";
 import { API_SCHEMA } from "../lib/blocks";
 
 /**
@@ -3038,7 +3117,7 @@ export function ApiKeysTable({ personal = false }: { personal?: boolean }) {
 
 ## Audit log table
 
-The audit trail, newest first, with filters by actor and action and older pages on demand. Both sides call `useAuditLog` from `better-supabase/blocks/audit/react`; the [audit block](https://bettersupabase.com/blocks/audit) must be installed (`npx better-supabase add audit`). Page: https://bettersupabase.com/recipes/audit-log-table.
+The audit trail, newest first, with filters by actor and action and older pages on demand. Both sides call `useAuditLog` from `@/hooks/use-audit`; the [audit block](https://bettersupabase.com/blocks/audit) must be installed (`npx better-supabase add audit`). Page: https://bettersupabase.com/recipes/audit-log-table.
 
 Web, with shadcn components:
 
@@ -3046,10 +3125,13 @@ Web, with shadcn components:
 npx shadcn add button select skeleton table
 ```
 
+```bash
+npx shadcn add @better-supabase/use-audit
+```
+
 ```tsx title="apps/examples/nextjs/src/features/audit/components/audit-log-table.tsx"
 "use client";
 
-import { useAuditLog } from "better-supabase/blocks/audit/react";
 import { useExtracted, useFormatter } from "next-intl";
 
 import { Button } from "@/components/ui/button";
@@ -3069,6 +3151,7 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
+import { useAuditLog } from "@/hooks/use-audit";
 import { blockConfig } from "@/lib/supabase/blocks.generated";
 import { useErrorMessage } from "@/lib/use-error-message";
 
@@ -3231,11 +3314,15 @@ export function AuditLogTable({ organizationId }: { organizationId: string }) {
 
 React Native, with `ActivityIndicator`, `Button`, `Pressable`, `Text`, `View` from `react-native`:
 
+```bash
+npx shadcn add @better-supabase/use-audit
+```
+
 ```tsx title="apps/examples/expo-powersync/src/components/audit-log-table.tsx"
-import { useAuditLog } from "better-supabase/blocks/audit/react";
 import { tenantOf, useAuth } from "better-supabase/react";
 import { ActivityIndicator, Button, Pressable, Text, View } from "react-native";
 
+import { useAuditLog } from "../hooks/use-audit";
 import { API_SCHEMA } from "../lib/blocks";
 
 /** A row of chips that filters by one value, or by none. */
@@ -3338,7 +3425,7 @@ export function AuditLogTable() {
 
 ## Tag input
 
-A record's tags with suggestions, where typing a name adds a tag or creates it. Both sides call `useTagInput` from `better-supabase/blocks/tags/react`; the [tags block](https://bettersupabase.com/blocks/tags) must be installed (`npx better-supabase add tags`). Page: https://bettersupabase.com/recipes/tag-input.
+A record's tags with suggestions, where typing a name adds a tag or creates it. Both sides call `useTagInput` from `@/hooks/use-tags`; the [tags block](https://bettersupabase.com/blocks/tags) must be installed (`npx better-supabase add tags`). Page: https://bettersupabase.com/recipes/tag-input.
 
 Web, with shadcn components:
 
@@ -3346,12 +3433,15 @@ Web, with shadcn components:
 npx shadcn add badge button input skeleton
 ```
 
+```bash
+npx shadcn add @better-supabase/use-tags
+```
+
 ```tsx title="apps/examples/nextjs/src/features/customers/components/tag-input.tsx"
 "use client";
 
 import type { SubmitEvent } from "react";
 
-import { useTagInput } from "better-supabase/blocks/tags/react";
 import { XIcon } from "lucide-react";
 import { useExtracted } from "next-intl";
 import { useId, useState } from "react";
@@ -3360,6 +3450,7 @@ import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Skeleton } from "@/components/ui/skeleton";
+import { useTagInput } from "@/hooks/use-tags";
 import { useErrorMessage } from "@/lib/use-error-message";
 
 /**
@@ -3459,8 +3550,11 @@ export function TagInput({
 
 React Native, with `ActivityIndicator`, `Button`, `Pressable`, `Text`, `TextInput`, `View` from `react-native`:
 
+```bash
+npx shadcn add @better-supabase/use-tags
+```
+
 ```tsx title="apps/examples/expo-powersync/src/components/tag-input.tsx"
-import { useTagInput } from "better-supabase/blocks/tags/react";
 import { useState } from "react";
 import {
   ActivityIndicator,
@@ -3471,6 +3565,8 @@ import {
   View,
 } from "react-native";
 
+import { useTagInput } from "../hooks/use-tags";
+
 /**
  * A customer's tags as chips that remove themselves when pressed, the
  * organization's other tags as suggestions, and a field that adds or creates
@@ -3552,7 +3648,7 @@ export function TagInput({ customerId }: { readonly customerId: string }) {
 
 ## Announcement banner
 
-The newest live announcement for the user and organization, with a dismiss button. It calls `useAnnouncements` from `better-supabase/blocks/announcements/react`; the [announcements block](https://bettersupabase.com/blocks/announcements) must be installed (`npx better-supabase add announcements`). Page: https://bettersupabase.com/recipes/announcement-banner.
+The newest live announcement for the user and organization, with a dismiss button. It calls `useAnnouncements` from `@/hooks/use-announcements`; the [announcements block](https://bettersupabase.com/blocks/announcements) must be installed (`npx better-supabase add announcements`). Page: https://bettersupabase.com/recipes/announcement-banner.
 
 Web, with shadcn components:
 
@@ -3560,10 +3656,13 @@ Web, with shadcn components:
 npx shadcn add alert button
 ```
 
+```bash
+npx shadcn add @better-supabase/use-announcements
+```
+
 ```tsx title="apps/examples/nextjs/src/features/announcements/components/announcement-banner.tsx"
 "use client";
 
-import { useAnnouncements } from "better-supabase/blocks/announcements/react";
 import { MegaphoneIcon, XIcon } from "lucide-react";
 import { useExtracted } from "next-intl";
 
@@ -3574,6 +3673,7 @@ import {
   AlertTitle,
 } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
+import { useAnnouncements } from "@/hooks/use-announcements";
 
 /**
  * The newest live announcement for this user and organization. Loads in the
@@ -3963,7 +4063,7 @@ export function TwoFactorCard({
 
 ## Inbox with threads
 
-A shared inbox of conversations with status tabs, an assignee filter and the open thread beside the list. It calls `useInbox` from `better-supabase/blocks/inbox/react`; the [inbox block](https://bettersupabase.com/blocks/inbox) must be installed (`npx better-supabase add inbox`). Page: https://bettersupabase.com/recipes/inbox-threads.
+A shared inbox of conversations with status tabs, an assignee filter and the open thread beside the list. It calls `useInbox` from `@/hooks/use-inbox`; the [inbox block](https://bettersupabase.com/blocks/inbox) must be installed (`npx better-supabase add inbox`). Page: https://bettersupabase.com/recipes/inbox-threads.
 
 Web, with shadcn components:
 
@@ -3971,10 +4071,13 @@ Web, with shadcn components:
 npx shadcn add badge empty select tabs
 ```
 
+```bash
+npx shadcn add @better-supabase/use-inbox
+```
+
 ```tsx title="apps/examples/nextjs/src/features/inbox/components/inbox-view.tsx"
 "use client";
 
-import { useInbox } from "better-supabase/blocks/inbox/react";
 import { InboxIcon } from "lucide-react";
 import { useExtracted, useFormatter } from "next-intl";
 import { useState } from "react";
@@ -3996,6 +4099,7 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { useInbox } from "@/hooks/use-inbox";
 import { cn } from "@/lib/utils";
 
 import type { ConversationRow } from "../inbox-types";
@@ -4200,7 +4304,7 @@ function ConversationList({
 
 ## Channel sidebar
 
-The caller's channels with unread and mention counts, kept live, with dialogs to browse, join and create channels. It calls `useConversations` from `better-supabase/blocks/messaging/react`; the [channels](https://bettersupabase.com/blocks/channels), [messaging](https://bettersupabase.com/blocks/messaging) blocks must be installed (`npx better-supabase add channels messaging`). Page: https://bettersupabase.com/recipes/channel-sidebar.
+The caller's channels with unread and mention counts, kept live, with dialogs to browse, join and create channels. It calls `useConversations` from `@/hooks/use-messaging`; the [channels](https://bettersupabase.com/blocks/channels), [messaging](https://bettersupabase.com/blocks/messaging) blocks must be installed (`npx better-supabase add channels messaging`). Page: https://bettersupabase.com/recipes/channel-sidebar.
 
 Web, with shadcn components:
 
@@ -4208,12 +4312,15 @@ Web, with shadcn components:
 npx shadcn add alert badge button card dialog empty field input label scroll-area skeleton switch
 ```
 
+```bash
+npx shadcn add @better-supabase/use-messaging
+```
+
 ```tsx title="apps/examples/nextjs/src/features/chat/components/channel-sidebar.tsx"
 "use client";
 
 import type { SubmitEvent } from "react";
 
-import { useConversations } from "better-supabase/blocks/messaging/react";
 import { useAction } from "better-supabase/react";
 import {
   HashIcon,
@@ -4265,6 +4372,7 @@ import { Label } from "@/components/ui/label";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { Skeleton } from "@/components/ui/skeleton";
 import { Switch } from "@/components/ui/switch";
+import { useConversations } from "@/hooks/use-messaging";
 import { useErrorMessage } from "@/lib/use-error-message";
 import { cn } from "@/lib/utils";
 
@@ -4647,7 +4755,7 @@ function CreateChannelDialog({
 
 ## Message list
 
-A conversation's messages over Realtime, with older pages on demand, who is typing, reply counts and the composer. It calls `useMessages` from `better-supabase/blocks/messaging/react`; the [messaging](https://bettersupabase.com/blocks/messaging), [channels](https://bettersupabase.com/blocks/channels) blocks must be installed (`npx better-supabase add messaging channels`). Page: https://bettersupabase.com/recipes/message-list.
+A conversation's messages over Realtime, with older pages on demand, who is typing, reply counts and the composer. It calls `useMessages` from `@/hooks/use-messaging`; the [messaging](https://bettersupabase.com/blocks/messaging), [channels](https://bettersupabase.com/blocks/channels) blocks must be installed (`npx better-supabase add messaging channels`). Page: https://bettersupabase.com/recipes/message-list.
 
 Web, with shadcn components:
 
@@ -4655,12 +4763,15 @@ Web, with shadcn components:
 npx shadcn add alert button card empty scroll-area skeleton
 ```
 
+```bash
+npx shadcn add @better-supabase/use-messaging
+```
+
 ```tsx title="apps/examples/nextjs/src/features/chat/components/message-list.tsx"
 "use client";
 
 import type { Message } from "better-supabase/blocks/messaging";
 
-import { useMessages } from "better-supabase/blocks/messaging/react";
 import { MessagesSquareIcon, RotateCwIcon } from "lucide-react";
 import { useExtracted } from "next-intl";
 import { useRef } from "react";
@@ -4686,6 +4797,7 @@ import {
 } from "@/components/ui/empty";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { Skeleton } from "@/components/ui/skeleton";
+import { useMessages } from "@/hooks/use-messaging";
 import { useErrorMessage } from "@/lib/use-error-message";
 
 import { MessageComposer } from "./message-composer";
@@ -4845,7 +4957,6 @@ npx shadcn add badge button label spinner textarea
 "use client";
 
 import type { Result } from "better-supabase";
-import type { MessageDraft } from "better-supabase/blocks/messaging/react";
 import type { DragEvent, Ref } from "react";
 
 import { useAction } from "better-supabase/react";
@@ -4854,6 +4965,8 @@ import { useExtracted } from "next-intl";
 import { useId, useRef, useState } from "react";
 import { toast } from "sonner";
 
+import type { MessageDraft } from "@/hooks/use-messaging";
+
 import { Badge } from "@/components/reui/badge";
 import { Button } from "@/components/ui/button";
 import { Label } from "@/components/ui/label";
@@ -5086,7 +5199,7 @@ export function MessageComposer({
 
 ## Thread panel
 
-A thread beside the channel: the root message, its replies live over Realtime, and a composer that replies into it. It calls `useMessages` from `better-supabase/blocks/messaging/react`; the [messaging](https://bettersupabase.com/blocks/messaging), [channels](https://bettersupabase.com/blocks/channels) blocks must be installed (`npx better-supabase add messaging channels`). Page: https://bettersupabase.com/recipes/thread-panel.
+A thread beside the channel: the root message, its replies live over Realtime, and a composer that replies into it. It calls `useMessages` from `@/hooks/use-messaging`; the [messaging](https://bettersupabase.com/blocks/messaging), [channels](https://bettersupabase.com/blocks/channels) blocks must be installed (`npx better-supabase add messaging channels`). Page: https://bettersupabase.com/recipes/thread-panel.
 
 Web, with shadcn components:
 
@@ -5094,12 +5207,15 @@ Web, with shadcn components:
 npx shadcn add alert button card empty scroll-area separator skeleton
 ```
 
+```bash
+npx shadcn add @better-supabase/use-messaging
+```
+
 ```tsx title="apps/examples/nextjs/src/features/chat/components/thread-panel.tsx"
 "use client";
 
 import type { Message } from "better-supabase/blocks/messaging";
 
-import { useMessages } from "better-supabase/blocks/messaging/react";
 import { MessageSquareIcon, RotateCwIcon, XIcon } from "lucide-react";
 import { useExtracted } from "next-intl";
 import { useRef } from "react";
@@ -5125,6 +5241,7 @@ import {
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { Separator } from "@/components/ui/separator";
 import { Skeleton } from "@/components/ui/skeleton";
+import { useMessages } from "@/hooks/use-messaging";
 import { useErrorMessage } from "@/lib/use-error-message";
 
 import { MessageComposer } from "./message-composer";
@@ -5804,7 +5921,7 @@ export function AgentActivitySkeleton() {
 
 ## Workflow canvas
 
-A node editor for a workflow definition that saves drafts, publishes versions and runs the workflow. It calls `useWorkflowCanvasRun` from `better-supabase/blocks/workflow-builder/react`; the [workflow-builder](https://bettersupabase.com/blocks/workflow-builder), [workflows](https://bettersupabase.com/blocks/workflows) blocks must be installed (`npx better-supabase add workflow-builder workflows`). Page: https://bettersupabase.com/recipes/workflow-canvas.
+A node editor for a workflow definition that saves drafts, publishes versions and runs the workflow. It calls `useWorkflowCanvasRun` from `@/hooks/use-workflow-editor`; the [workflow-editor](https://bettersupabase.com/blocks/workflow-editor), [workflows](https://bettersupabase.com/blocks/workflows) blocks must be installed (`npx better-supabase add workflow-editor workflows`). Page: https://bettersupabase.com/recipes/workflow-canvas.
 
 Web, with shadcn components:
 
@@ -5812,11 +5929,15 @@ Web, with shadcn components:
 npx shadcn add badge button input select
 ```
 
+```bash
+npx shadcn add @better-supabase/use-workflow-editor
+```
+
 ```tsx title="apps/examples/nextjs/src/features/workflows/builder/components/workflow-canvas.tsx"
 "use client";
 
 import type { Connection } from "@xyflow/react";
-import type { WorkflowNodeKind } from "better-supabase/blocks/workflow-builder";
+import type { WorkflowNodeKind } from "better-supabase/blocks/workflow-editor";
 
 import {
   addEdge,
@@ -5827,8 +5948,6 @@ import {
   useNodesState,
 } from "@xyflow/react";
 import "@xyflow/react/dist/style.css";
-import { useWorkflowCanvasRun } from "better-supabase/blocks/workflow-builder/react";
-import { useWorkflowRuns } from "better-supabase/blocks/workflows/react";
 import { useAction } from "better-supabase/react";
 import { PlayIcon, PlusIcon, SaveIcon } from "lucide-react";
 import { useExtracted, useFormatter } from "next-intl";
@@ -5845,6 +5964,8 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
+import { useWorkflowCanvasRun } from "@/hooks/use-workflow-editor";
+import { useWorkflowRuns } from "@/hooks/use-workflows";
 import { useErrorMessage } from "@/lib/use-error-message";
 
 import type { BuilderDetail } from "../builder-queries";
@@ -5894,7 +6015,7 @@ export function WorkflowCanvas({ detail }: { detail: BuilderDetail }) {
   const overlay = useWorkflowCanvasRun(runId, { schema: "api" });
 
   const definitionRuns = (runs ?? []).filter(
-    (run) => run.attributes["bs.definition"] === detail.definition.id,
+    (run) => run.attributes["bsb.definition"] === detail.definition.id,
   );
 
   const graph = fromFlow(nodes, edges);
@@ -6167,7 +6288,7 @@ export function WorkflowCanvas({ detail }: { detail: BuilderDetail }) {
 
 ## Workflow runs
 
-The latest workflow runs with their status, which update while a run is in progress. It calls `useWorkflowRuns` from `better-supabase/blocks/workflows/react`; the [workflows block](https://bettersupabase.com/blocks/workflows) must be installed (`npx better-supabase add workflows`). Page: https://bettersupabase.com/recipes/workflow-runs.
+The latest workflow runs with their status, which update while a run is in progress. It calls `useWorkflowRuns` from `@/hooks/use-workflows`; the [workflows block](https://bettersupabase.com/blocks/workflows) must be installed (`npx better-supabase add workflows`). Page: https://bettersupabase.com/recipes/workflow-runs.
 
 Web, with shadcn components:
 
@@ -6175,10 +6296,13 @@ Web, with shadcn components:
 npx shadcn add badge empty skeleton table
 ```
 
+```bash
+npx shadcn add @better-supabase/use-workflows
+```
+
 ```tsx title="apps/examples/nextjs/src/features/workflows/components/workflow-runs.tsx"
 "use client";
 
-import { useWorkflowRuns } from "better-supabase/blocks/workflows/react";
 import { WorkflowIcon } from "lucide-react";
 import { useExtracted, useFormatter } from "next-intl";
 
@@ -6199,6 +6323,7 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
+import { useWorkflowRuns } from "@/hooks/use-workflows";
 import { Link } from "@/i18n/navigation";
 
 import { statusVariant, workflowName } from "../workflow-labels";
@@ -6421,7 +6546,7 @@ export function CredentialSheet({
 
 ## Support session banner
 
-A banner that tells the user a support agent is viewing the app as them, rendered on the server. It loads its data on the server through the block's client; the [support-sessions block](https://bettersupabase.com/blocks/support-sessions) must be installed (`npx better-supabase add support-sessions`). Page: https://bettersupabase.com/recipes/support-session-banner.
+A banner that tells the user a support agent is viewing the app as them, rendered on the server. It loads its data on the server through the block's client; the [impersonation block](https://bettersupabase.com/blocks/impersonation) must be installed (`npx better-supabase add impersonation`). Page: https://bettersupabase.com/recipes/support-session-banner.
 
 Web, with shadcn components:
 
@@ -6438,7 +6563,7 @@ import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { getSession } from "../user-queries";
 
 /**
- * Shown during a support session (`bs.startSupport`): staff see the app as the
+ * Shown during a support session (`bsb.startSupport`): staff see the app as the
  * user, and the audit log records who acted. Render inside `<Suspense>`.
  */
 export async function ImpersonationBanner() {
@@ -6466,7 +6591,7 @@ export async function ImpersonationBanner() {
 
 ## AI task queue
 
-A table of scheduled AI prompts with each task's next run and latest run status, plus pause and resume. It loads its data on the server through the block's client; the [ai-tasks block](https://bettersupabase.com/blocks/ai-tasks) must be installed (`npx better-supabase add ai-tasks`). Page: https://bettersupabase.com/recipes/ai-task-queue.
+A table of scheduled AI prompts with each task's next run and latest run status, plus pause and resume. It loads its data on the server through the block's client; the [ai-schedules block](https://bettersupabase.com/blocks/ai-schedules) must be installed (`npx better-supabase add ai-schedules`). Page: https://bettersupabase.com/recipes/ai-task-queue.
 
 Web, with shadcn components:
 
@@ -6477,7 +6602,7 @@ npx shadcn add alert badge button card empty skeleton table
 ```tsx title="apps/examples/nextjs/src/features/ai-tasks/components/ai-task-queue.tsx"
 "use client";
 
-import type { AiTaskRunStatus } from "better-supabase/blocks/ai-tasks";
+import type { AiTaskRunStatus } from "better-supabase/blocks/ai-schedules";
 
 import { useAction } from "better-supabase/react";
 import { CalendarClockIcon, PauseIcon, PlayIcon } from "lucide-react";
@@ -6598,7 +6723,7 @@ function TaskRows({ tasks }: { tasks: readonly AiTaskRow[] }) {
     format.dateTime(new Date(iso), { dateStyle: "medium", timeStyle: "short" });
 
   return (
-    <Table data-testid="ai-tasks">
+    <Table data-testid="ai-schedules">
       <TableHeader>
         <TableRow>
           <TableHead>{t("Task")}</TableHead>
@@ -6777,7 +6902,7 @@ export function AiTaskQueueSkeleton() {
 
 ## AI provider settings
 
-A settings card that lists the organization's own AI provider keys and models, adds a key to Vault and removes one. It loads its data on the server through the block's client; the [ai-providers block](https://bettersupabase.com/blocks/ai-providers) must be installed (`npx better-supabase add ai-providers`). Page: https://bettersupabase.com/recipes/ai-provider-settings.
+A settings card that lists the organization's own AI provider keys and models, adds a key to Vault and removes one. It loads its data on the server through the block's client; the [ai-keys block](https://bettersupabase.com/blocks/ai-keys) must be installed (`npx better-supabase add ai-keys`). Page: https://bettersupabase.com/recipes/ai-provider-settings.
 
 Web, with shadcn components:
 
@@ -7635,8 +7760,7 @@ import {
 import { Skeleton } from "@/components/ui/skeleton";
 import { getSession } from "@/features/user/user-queries";
 import { Link } from "@/i18n/navigation";
-import { blocks } from "@/lib/blocks";
-import { bs } from "@/lib/supabase/server";
+import { bsb } from "@/lib/supabase/server";
 import { metrics } from "@/metrics";
 
 const DAYS = 30;
@@ -7664,7 +7788,7 @@ async function loadPanels(
   organizationId: string,
 ): Promise<readonly MetricPanel[]> {
   "use cache: private";
-  const { supabase } = await bs.cached();
+  const { db } = await bsb.cached();
   const until = Temporal.Now.instant();
 
   const range = {
@@ -7672,7 +7796,7 @@ async function loadPanels(
     until,
   };
 
-  const client = blocks(supabase).metrics;
+  const client = db.metrics;
 
   return Promise.all(
     metrics.map(async ({ key }) => {
@@ -7859,8 +7983,7 @@ import {
   CardTitle,
 } from "@/components/ui/card";
 import { Skeleton } from "@/components/ui/skeleton";
-import { blocks } from "@/lib/blocks";
-import { bs } from "@/lib/supabase/server";
+import { bsb } from "@/lib/supabase/server";
 
 /** The flags `src/flags.ts` defines. */
 const FLAG_KEYS = ["beta-page", "pricing-banner"] as const;
@@ -7885,19 +8008,17 @@ type FlagValues =
  */
 async function loadFlags(): Promise<readonly FlagValue[] | null> {
   "use cache: private";
-  const { session, supabase } = await bs.cached();
+  const { session, db } = await bsb.cached();
   const tenant = tenantOf(session);
 
   if (!tenant) {
     return null;
   }
 
-  const { call } = blocks(supabase);
-
   return Promise.all(
     FLAG_KEYS.map(async (key) => ({
       key,
-      on: (await call("flag_enabled", { key, tenant })) === true,
+      on: (await db.$api("flag_enabled", { key, tenant })) === true,
     })),
   );
 }
@@ -7937,7 +8058,7 @@ export async function FeatureFlagList() {
   };
 
   return (
-    <Card data-testid="feature-flags" data-recipe="feature-flag-toggles">
+    <Card data-testid="flags" data-recipe="feature-flag-toggles">
       <CardHeader>
         <CardTitle>{t("Feature flags")}</CardTitle>
         <CardDescription>
@@ -7995,7 +8116,7 @@ export function FeatureFlagListSkeleton() {
 
 ## Rule builder
 
-A condition tree with field, operator and value rows, nested And and Or groups, drag to reorder and a fixed first condition, saved as a versioned rule. It calls `useRuleBuilder` from `better-supabase/blocks/rules/react`; the [rules block](https://bettersupabase.com/blocks/rules) must be installed (`npx better-supabase add rules`). Page: https://bettersupabase.com/recipes/rule-builder.
+A condition tree with field, operator and value rows, nested And and Or groups, drag to reorder and a fixed first condition, saved as a versioned rule. It calls `useRuleBuilder` from `@/hooks/use-automations`; the [automations block](https://bettersupabase.com/blocks/automations) must be installed (`npx better-supabase add automations`). Page: https://bettersupabase.com/recipes/rule-builder.
 
 Web, with shadcn components:
 
@@ -8003,12 +8124,15 @@ Web, with shadcn components:
 npx shadcn add alert button card empty field input label select skeleton switch
 ```
 
+```bash
+npx shadcn add @better-supabase/use-automations
+```
+
 ```tsx title="apps/examples/nextjs/src/features/rules/components/rule-builder.tsx"
 "use client";
 
 import type { DragEndEvent } from "@dnd-kit/core";
-import type { RuleField } from "better-supabase/blocks/rules";
-import type { RuleBuilderState } from "better-supabase/blocks/rules/react";
+import type { RuleField } from "better-supabase/blocks/automations";
 import type {
   FilterCombinator,
   FilterGroupNode,
@@ -8033,8 +8157,7 @@ import {
   verticalListSortingStrategy,
 } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
-import { contains, ruleOperators } from "better-supabase/blocks/rules";
-import { useRuleBuilder } from "better-supabase/blocks/rules/react";
+import { contains, ruleOperators } from "better-supabase/blocks/automations";
 import { FILTER_OPERATOR_LABELS } from "better-supabase/list";
 import {
   GripVerticalIcon,
@@ -8048,6 +8171,8 @@ import { useExtracted } from "next-intl";
 import { createContext, use, useId, useMemo, useState } from "react";
 import * as v from "valibot";
 
+import type { RuleBuilderState } from "@/hooks/use-automations";
+
 import {
   Alert,
   AlertAction,
@@ -8084,6 +8209,7 @@ import {
 import { Skeleton } from "@/components/ui/skeleton";
 import { Switch } from "@/components/ui/switch";
 import { useStatusLabel } from "@/features/customers/use-status-label";
+import { useRuleBuilder } from "@/hooks/use-automations";
 import { useRouter } from "@/i18n/navigation";
 import { blockConfig } from "@/lib/supabase/blocks.generated";
 import { useErrorMessage } from "@/lib/use-error-message";
@@ -8183,7 +8309,7 @@ export function RuleBuilder({
     trigger: RULE_TRIGGER,
     initial: initialConditions,
     locked: LOCKED,
-    schema: blockConfig.rules.api,
+    schema: blockConfig.automations.api,
   });
 
   const enabled = enabledEdit ?? builder.rule?.enabled ?? false;
@@ -8983,15 +9109,14 @@ export function RuleBuilderSkeleton() {
 
 ## Can
 
-Shows an action only to members who hold a permission key; the checks of one render share one round trip. It loads its data on the server through the block's client; the [access block](https://bettersupabase.com/blocks/access) must be installed (`npx better-supabase add access`). Page: https://bettersupabase.com/recipes/can.
+Shows an action only to members who hold a permission key; the checks of one render share one round trip. It loads its data on the server through the block's client; the [permissions block](https://bettersupabase.com/blocks/permissions) must be installed (`npx better-supabase add permissions`). Page: https://bettersupabase.com/recipes/can.
 
 Web, with no shadcn components.
 
 ```tsx title="apps/examples/nextjs/src/features/projects/components/task-import-action.tsx"
 "use client";
 
-import { Can } from "better-supabase/blocks/access/react";
-
+import { Can } from "@/hooks/use-permissions";
 import { permissions } from "@/lib/supabase/blocks.generated";
 
 import { TaskImportDialog } from "./task-import-dialog";
@@ -9012,7 +9137,7 @@ export function TaskImportAction({ projectId }: { projectId: string }) {
 
 ## Subject link
 
-A link to any subject type, titled and routed by subject_titles, with plain text for a record the caller can't read. It calls `useSubject` from `better-supabase/blocks/subjects/react`; the [subjects block](https://bettersupabase.com/blocks/subjects) must be installed (`npx better-supabase add subjects`). Page: https://bettersupabase.com/recipes/subject-link.
+A link to any subject type, titled and routed by subject_titles, with plain text for a record the caller can't read. It calls `useSubject` from `@/hooks/use-subjects`; the [subjects block](https://bettersupabase.com/blocks/subjects) must be installed (`npx better-supabase add subjects`). Page: https://bettersupabase.com/recipes/subject-link.
 
 Web, with shadcn components:
 
@@ -9020,25 +9145,29 @@ Web, with shadcn components:
 npx shadcn add button skeleton
 ```
 
+```bash
+npx shadcn add @better-supabase/use-subjects
+```
+
 ```tsx title="apps/examples/nextjs/src/features/subjects/components/subject-link.tsx"
 "use client";
 
-import type { SubjectRef } from "better-supabase/blocks/subjects";
+import type { RecordRef } from "better-supabase/blocks/subjects";
 
-import { useSubject } from "better-supabase/blocks/subjects/react";
 import { RotateCwIcon } from "lucide-react";
 import { useExtracted } from "next-intl";
 
 import { Button } from "@/components/ui/button";
 import { Skeleton } from "@/components/ui/skeleton";
+import { useSubject } from "@/hooks/use-subjects";
 import { Link } from "@/i18n/navigation";
 
 /**
- * A link to any subject in `config.subjects`, titled and routed by
+ * A link to any subject in `config.records`, titled and routed by
  * `subject_titles`. The links rendered in one pass share one round trip, and a
  * subject the caller can't read shows as plain text.
  */
-export function SubjectLink({ subject }: { subject: SubjectRef }) {
+export function SubjectLink({ subject }: { subject: RecordRef }) {
   const t = useExtracted("subjects");
   const { subject: resolved, error, refresh } = useSubject(subject);
 
@@ -9089,7 +9218,7 @@ export function SubjectLink({ subject }: { subject: SubjectRef }) {
 
 ## Subject chip
 
-A compact badge with a subject's type and title that links to its page. It calls `useSubject` from `better-supabase/blocks/subjects/react`; the [subjects block](https://bettersupabase.com/blocks/subjects) must be installed (`npx better-supabase add subjects`). Page: https://bettersupabase.com/recipes/subject-chip.
+A compact badge with a subject's type and title that links to its page. It calls `useSubject` from `@/hooks/use-subjects`; the [subjects block](https://bettersupabase.com/blocks/subjects) must be installed (`npx better-supabase add subjects`). Page: https://bettersupabase.com/recipes/subject-chip.
 
 Web, with shadcn components:
 
@@ -9097,23 +9226,27 @@ Web, with shadcn components:
 npx shadcn add skeleton
 ```
 
+```bash
+npx shadcn add @better-supabase/use-subjects
+```
+
 ```tsx title="apps/examples/nextjs/src/features/subjects/components/subject-chip.tsx"
 "use client";
 
-import type { SubjectRef } from "better-supabase/blocks/subjects";
+import type { RecordRef } from "better-supabase/blocks/subjects";
 
-import { useSubject } from "better-supabase/blocks/subjects/react";
 import { useExtracted } from "next-intl";
 
 import { Badge } from "@/components/reui/badge";
 import { Skeleton } from "@/components/ui/skeleton";
+import { useSubject } from "@/hooks/use-subjects";
 import { Link } from "@/i18n/navigation";
 
 /**
  * A compact badge for a subject: its type and title, linking to its page. Rows
  * that each render a chip share one `subject_titles` call.
  */
-export function SubjectChip({ subject }: { subject: SubjectRef }) {
+export function SubjectChip({ subject }: { subject: RecordRef }) {
   const t = useExtracted("subjects");
   const { subject: resolved, error } = useSubject(subject);
 
@@ -11188,7 +11321,7 @@ export function WaitlistSignup() {
 
 ## Contact detail
 
-A person or company with its details, related contacts and the latest activity. It loads its data on the server through the block's client; the [parties block](https://bettersupabase.com/blocks/parties) must be installed (`npx better-supabase add parties`). Page: https://bettersupabase.com/recipes/contact-detail.
+A person or company with its details, related contacts and the latest activity. It loads its data on the server through the block's client; the [contacts block](https://bettersupabase.com/blocks/contacts) must be installed (`npx better-supabase add contacts`). Page: https://bettersupabase.com/recipes/contact-detail.
 
 Web, with shadcn components:
 
@@ -11651,7 +11784,7 @@ export async function SequenceBuilder() {
 
 ## Activity timeline
 
-Calls, emails and meetings with a contact, newest first. It loads its data on the server through the block's client; the [engagements block](https://bettersupabase.com/blocks/engagements) must be installed (`npx better-supabase add engagements`). Page: https://bettersupabase.com/recipes/activity-timeline.
+Calls, emails and meetings with a contact, newest first. It loads its data on the server through the block's client; the [activities block](https://bettersupabase.com/blocks/activities) must be installed (`npx better-supabase add activities`). Page: https://bettersupabase.com/recipes/activity-timeline.
 
 Web, with shadcn components:
 
@@ -11956,7 +12089,7 @@ export async function QuoteBuilder({
 
 ## Targets progress
 
-Sales targets for the period with the progress toward each one. It loads its data on the server through the block's client; the [targets block](https://bettersupabase.com/blocks/targets) must be installed (`npx better-supabase add targets`). Page: https://bettersupabase.com/recipes/targets-progress.
+Sales targets for the period with the progress toward each one. It loads its data on the server through the block's client; the [goals block](https://bettersupabase.com/blocks/goals) must be installed (`npx better-supabase add goals`). Page: https://bettersupabase.com/recipes/targets-progress.
 
 Web, with shadcn components:
 
@@ -12075,7 +12208,7 @@ export async function TargetsProgress() {
 
 ## Work item board
 
-Work items in state columns, ordered by rank and moved through allowed transitions. It loads its data on the server through the block's client; the [work-items](https://bettersupabase.com/blocks/work-items), [state-machine](https://bettersupabase.com/blocks/state-machine), [rank](https://bettersupabase.com/blocks/rank) blocks must be installed (`npx better-supabase add work-items state-machine rank`). Page: https://bettersupabase.com/recipes/work-item-board.
+Work items in state columns, ordered by rank and moved through allowed transitions. It loads its data on the server through the block's client; the [tasks](https://bettersupabase.com/blocks/tasks), [state-machine](https://bettersupabase.com/blocks/state-machine), [rank](https://bettersupabase.com/blocks/rank) blocks must be installed (`npx better-supabase add tasks state-machine rank`). Page: https://bettersupabase.com/recipes/work-item-board.
 
 Web, with shadcn components:
 
@@ -12226,7 +12359,7 @@ export function WorkItemBoard({
 
 ## Entity form
 
-A create dialog whose inputs come from `entityForm`: the entity's own fields and the organization's custom fields, validated together by `useEntityForm` before the Server Action runs. It calls `useEntityForm` from `better-supabase/react`; the [work-items](https://bettersupabase.com/blocks/work-items), [custom-fields](https://bettersupabase.com/blocks/custom-fields) blocks must be installed (`npx better-supabase add work-items custom-fields`). Page: https://bettersupabase.com/recipes/entity-form.
+A create dialog whose inputs come from `recordForm`: the entity's own fields and the organization's custom fields, validated together by `useRecordForm` before the Server Action runs. It calls `useRecordForm` from `better-supabase/react`; the [tasks](https://bettersupabase.com/blocks/tasks), [custom-fields](https://bettersupabase.com/blocks/custom-fields) blocks must be installed (`npx better-supabase add tasks custom-fields`). Page: https://bettersupabase.com/recipes/entity-form.
 
 Web, with shadcn components:
 
@@ -12236,11 +12369,11 @@ npx shadcn add button checkbox dialog field input select
 
 ```tsx title="apps/examples/nextjs/src/features/work/components/create-work-item-dialog.tsx"
 import type { DbError } from "better-supabase";
-import type { EntityFormInput } from "better-supabase/records";
+import type { RecordFormInput } from "better-supabase/records";
 
-import { workItemInputSchema } from "better-supabase/blocks/work-items";
-import { useEntityForm } from "better-supabase/react";
-import { entityForm } from "better-supabase/records";
+import { workItemInputSchema } from "better-supabase/blocks/tasks";
+import { useRecordForm } from "better-supabase/react";
+import { recordForm } from "better-supabase/records";
 import { PlusIcon } from "lucide-react";
 import { useExtracted } from "next-intl";
 import { useId, useMemo, useState } from "react";
@@ -12284,7 +12417,7 @@ import { createWorkItem } from "../work-actions";
 const NO_TEAM = "";
 
 /** The HTML input type for each form input; the rest are text inputs. */
-const INPUT_TYPES: Partial<Record<EntityFormInput, string>> = {
+const INPUT_TYPES: Partial<Record<RecordFormInput, string>> = {
   number: "number",
   integer: "number",
   date: "date",
@@ -12295,7 +12428,7 @@ const INPUT_TYPES: Partial<Record<EntityFormInput, string>> = {
 
 /**
  * A dialog that creates a work item with a title, a team, a priority and the
- * organization's custom fields for work items. `entityForm` turns the entity
+ * organization's custom fields for work items. `recordForm` turns the entity
  * schema and the field definitions into one list of inputs and validates them
  * together.
  */
@@ -12317,7 +12450,7 @@ export function CreateWorkItemDialog({
 
   const definition = useMemo(
     () =>
-      entityForm(workItemInputSchema, {
+      recordForm(workItemInputSchema, {
         fields: ["title", "priority"],
         customFields: customFields.map((field) => ({
           key: field.key,
@@ -12332,7 +12465,7 @@ export function CreateWorkItemDialog({
 
   const [failure, setFailure] = useState<DbError>();
 
-  const form = useEntityForm(definition, {
+  const form = useRecordForm(definition, {
     initial: { title: "", priority: "0" },
     onSubmit: async ({ input, custom }) => {
       const result = await createWorkItem({
@@ -12520,7 +12653,7 @@ export function CreateWorkItemDialog({
 
 ## Work item grid
 
-A data grid of work items with filters, sorting and saved views. It loads its data on the server through the block's client; the [work-items](https://bettersupabase.com/blocks/work-items), [saved-views](https://bettersupabase.com/blocks/saved-views) blocks must be installed (`npx better-supabase add work-items saved-views`). Page: https://bettersupabase.com/recipes/work-item-grid.
+A data grid of work items with filters, sorting and saved views. It loads its data on the server through the block's client; the [tasks](https://bettersupabase.com/blocks/tasks), [saved-views](https://bettersupabase.com/blocks/saved-views) blocks must be installed (`npx better-supabase add tasks saved-views`). Page: https://bettersupabase.com/recipes/work-item-grid.
 
 Web, with shadcn components:
 
@@ -13060,7 +13193,7 @@ export async function ApprovalsQueue() {
 
 ## My work
 
-What waits on the caller across the installed blocks, from `loadMyWork`: assigned work, approvals, due reminders, mentions and SLA warnings, each linked to its record. It loads its data on the server through the block's client; the [subjects](https://bettersupabase.com/blocks/subjects), [work-items](https://bettersupabase.com/blocks/work-items), [approvals](https://bettersupabase.com/blocks/approvals), [reminders](https://bettersupabase.com/blocks/reminders), [comments](https://bettersupabase.com/blocks/comments) blocks must be installed (`npx better-supabase add subjects work-items approvals reminders comments`). Page: https://bettersupabase.com/recipes/my-work.
+What waits on the caller across the installed blocks, from `loadMyWork`: assigned work, approvals, due reminders, mentions and SLA warnings, each linked to its record. It loads its data on the server through the block's client; the [subjects](https://bettersupabase.com/blocks/subjects), [tasks](https://bettersupabase.com/blocks/tasks), [approvals](https://bettersupabase.com/blocks/approvals), [reminders](https://bettersupabase.com/blocks/reminders), [comments](https://bettersupabase.com/blocks/comments) blocks must be installed (`npx better-supabase add subjects tasks approvals reminders comments`). Page: https://bettersupabase.com/recipes/my-work.
 
 Web, with shadcn components:
 
@@ -13193,7 +13326,7 @@ export async function MyWorkList() {
 
 ## Subject timeline
 
-One record's comments, files and versions merged newest first, from `recordServer(...).timeline`, skipping the sections the caller can't read. It loads its data on the server through the block's client; the [comments](https://bettersupabase.com/blocks/comments), [attachments](https://bettersupabase.com/blocks/attachments), [versions](https://bettersupabase.com/blocks/versions) blocks must be installed (`npx better-supabase add comments attachments versions`). Page: https://bettersupabase.com/recipes/subject-timeline.
+One record's comments, files and versions merged newest first, from `bsb.record(...).timeline`, skipping the bindings the caller can't read. It loads its data on the server through the block's client; the [comments](https://bettersupabase.com/blocks/comments), [attachments](https://bettersupabase.com/blocks/attachments), [versions](https://bettersupabase.com/blocks/versions) blocks must be installed (`npx better-supabase add comments attachments versions`). Page: https://bettersupabase.com/recipes/subject-timeline.
 
 Web, with shadcn components:
 
@@ -20405,7 +20538,7 @@ export function WebhookEndpointsSkeleton() {
 
 ## Service principals table
 
-Machine identities with their scopes, last use and a button to disable one. It loads its data on the server through the block's client; the [service-principals block](https://bettersupabase.com/blocks/service-principals) must be installed (`npx better-supabase add service-principals`). Page: https://bettersupabase.com/recipes/service-principals-table.
+Machine identities with their scopes, last use and a button to disable one. It loads its data on the server through the block's client; the [service-accounts block](https://bettersupabase.com/blocks/service-accounts) must be installed (`npx better-supabase add service-accounts`). Page: https://bettersupabase.com/recipes/service-principals-table.
 
 Web, with shadcn components:
 
@@ -20938,7 +21071,7 @@ export async function PrivacySettings() {
 
 ## Job runs table
 
-The latest background job runs with their status, attempts and error, and a button to retry a failed run. It loads its data on the server through the block's client; the [jobs block](https://bettersupabase.com/blocks/jobs) must be installed (`npx better-supabase add jobs`). Page: https://bettersupabase.com/recipes/job-runs-table.
+The latest background job runs with their status, attempts and error, and a button to retry a failed run. It loads its data on the server through the block's client; the [queue block](https://bettersupabase.com/blocks/queue) must be installed (`npx better-supabase add queue`). Page: https://bettersupabase.com/recipes/job-runs-table.
 
 Web, with shadcn components:
 
@@ -21410,7 +21543,7 @@ export function ContractRenewalsSkeleton() {
 
 ## Control posture
 
-One card per compliance framework with its passing, failing and not started controls, then the overdue evidence tasks. It loads its data on the server through the block's client; the [controls block](https://bettersupabase.com/blocks/controls) must be installed (`npx better-supabase add controls`). Page: https://bettersupabase.com/recipes/control-posture.
+One card per compliance framework with its passing, failing and not started controls, then the overdue evidence tasks. It loads its data on the server through the block's client; the [compliance block](https://bettersupabase.com/blocks/compliance) must be installed (`npx better-supabase add compliance`). Page: https://bettersupabase.com/recipes/control-posture.
 
 Web, with shadcn components:
 
@@ -21476,7 +21609,7 @@ export async function ControlPosture() {
         <EmptyContent>
           <a
             className="text-sm underline underline-offset-4"
-            href="https://bettersupabase.com/docs/blocks/controls"
+            href="https://bettersupabase.com/docs/blocks/compliance"
           >
             {t("Read the controls guide")}
           </a>