feat: visual redesign, theme playground, and Constructive brand blue

AGENTS.md

@@ -26,3 +26,14 @@ public registry and binds to each host through an explicit adapter.
 
 Use Node 24 LTS and pnpm 10.28.0, then run `pnpm check`, `pnpm build:pages`, and
 `pnpm pack:local` before release-related changes.
+
+## Local development
+
+- Docs app: `pnpm --filter blocks dev` serves `http://localhost:3005` (the
+  `predev` hook builds packages and checks generated demo source first).
+- Open the dev server directly. Reverse proxies that do not forward Next's dev
+  WebSocket/streaming requests (e.g. agent browser-preview proxies) return
+  `502` on `/_next/webpack-hmr`, the client never hydrates, and client-only
+  pages such as `/blocks/create` stay on their server-rendered skeleton.
+- Storybook for `@constructive-io/ui`: `pnpm --filter @constructive-io/ui sb`
+  (`http://localhost:6007`; the Kitchen Sink story carries the DialKit tuning panel).

apps/blocks/package.json

@@ -40,12 +40,14 @@
     "@constructive-io/schema-builder": "workspace:*",
     "@constructive-io/sheets": "workspace:*",
     "@constructive-io/ui": "workspace:*",
+    "@internationalized/date": "^3.10.1",
     "@tanstack/react-form": "^1.27.7",
     "@tanstack/react-query": "^5.90.16",
     "ai": "^7.0.26",
     "blocks-renderer": "workspace:*",
     "blocks-schema": "workspace:*",
     "clsx": "^2.1.1",
+    "dialkit": "2.0.2",
     "dompurify": "^3.3.1",
     "gql-ast": "^3.3.3",
     "graphql": "16.13.0",

apps/blocks/src/app/blocks/ai/page.tsx

@@ -115,7 +115,7 @@ export default function AiPage() {
         <div className="grid gap-3 md:grid-cols-3">
           {doc.composition.boundaries.map((item) => (
             <article
-              className="rounded-xl border border-border/60 bg-card p-4 shadow-card"
+              className="rounded-xl bg-card p-4 shadow-card"
               key={item.title}
             >
               <h3 className="text-balance text-sm font-semibold">{item.title}</h3>
@@ -160,7 +160,7 @@ export default function AiPage() {
             <li key={component.name} className="min-w-0">
               <Link
                 href={`/blocks/ai/${component.name}`}
-                className="flex min-h-16 flex-col rounded-xl border border-border/60 bg-card p-3 shadow-card outline-none transition-colors duration-150 hover:bg-accent/40 focus-visible:ring-2 focus-visible:ring-ring"
+                className="flex min-h-16 flex-col rounded-xl bg-card p-3 shadow-card outline-none transition-[color,background-color,text-decoration-color,fill,stroke,box-shadow] duration-(--duration-moderate) hover:bg-accent/40 focus-visible:ring-[3px] focus-visible:ring-ring/50"
               >
                 <span className="text-sm font-semibold text-foreground">{component.title}</span>
                 <span className="mt-1 line-clamp-2 text-pretty text-xs leading-5 text-muted-foreground">

apps/blocks/src/app/blocks/billing/page.tsx

@@ -38,10 +38,10 @@ export default function BillingBlocksPage() {
               <Link
                 href={`/blocks/billing/${block.name}`}
                 className={cn(
-                  'group flex h-full min-h-20 flex-col rounded-xl border border-border/60 bg-card px-4 py-3.5',
-                  'outline-none transition-[background-color,border-color,box-shadow] duration-150 ease-out',
-                  'hover:border-border hover:bg-accent/40 hover:shadow-card',
-                  'focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background'
+                  'group flex h-full min-h-20 flex-col rounded-xl bg-card px-4 py-3.5 shadow-card',
+                  'outline-none transition-[background-color,box-shadow] duration-(--duration-moderate) ease-out',
+                  'hover:bg-accent/40 hover:shadow-card-lg',
+                  'focus-visible:ring-[3px] focus-visible:ring-ring/50'
                 )}
               >
                 <span className="flex items-start justify-between gap-3">
@@ -50,7 +50,7 @@ export default function BillingBlocksPage() {
                   </span>
                   <ArrowUpRightIcon
                     aria-hidden="true"
-                    className="mt-0.5 size-3.5 shrink-0 text-muted-foreground opacity-0 transition-opacity duration-150 group-hover:opacity-100 group-focus-visible:opacity-100"
+                    className="mt-0.5 size-3.5 shrink-0 text-muted-foreground opacity-0 transition-opacity duration-(--duration-moderate) group-hover:opacity-100 group-focus-visible:opacity-100"
                   />
                 </span>
                 <span className="mt-1 line-clamp-2 text-pretty text-xs leading-5 text-muted-foreground">

apps/blocks/src/app/blocks/command-palette/page.tsx

@@ -135,7 +135,7 @@ export default function CommandPalettePage() {
           <div className="grid gap-3 md:grid-cols-3">
             {doc.composition.boundaries.map((item) => (
               <article
-                className="rounded-xl border border-border/60 bg-card p-4 shadow-card"
+                className="rounded-xl bg-card p-4 shadow-card"
                 key={item.title}
               >
                 <h3 className="text-balance text-sm font-semibold">