From 55320038fd1f968c53748be49064318a76be0dfe Mon Sep 17 00:00:00 2001 From: Claude Date: Sat, 25 Jul 2026 21:08:56 +0000 Subject: [PATCH] fix(reativa): render special characters as real JS strings MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Text carrying non-ASCII characters — em dashes, ellipses, the ✓/– markers in the pricing table, the ⌃/⌄ carets, ⌘, ×, ©, ·, −, • — was written as UTF-8 byte escapes in plain OCaml string literals ("\xe2\x80\x94"). An OCaml string is a byte sequence and Melange emits it one byte per JS code unit, so the browser received "â\x80\x94" and rendered mojibake instead of the intended glyph. Every affected literal now uses Melange's js-quoted string ({js|—|js}), which is rewritten into a real JavaScript string. The rewrite only applies in expression position, so the pricing table's yes/no markers — previously matched as string patterns — are bound once and compared instead; a js-quoted pattern would still be the raw bytes and never match. Also regenerates website/src/ReativaSource.res so the site's Reativa source view shows the real characters rather than the escapes (the generated file was stale, so this also picks up the 32 snippets added since it was last regenerated). Co-Authored-By: Claude Opus 5 Claude-Session: https://claude.ai/code/session_01RYRAfogJSSU6pcex3rEr2x --- .changeset/reativa-unicode-literals.md | 10 +++ packages/reativa/README.md | 22 ++++++ packages/reativa/src/Accordion.mlx | 2 +- packages/reativa/src/Collapsible.mlx | 2 +- packages/reativa/src/ContactSection.mlx | 2 +- packages/reativa/src/Newsletter.mlx | 2 +- packages/reativa/src/Registry.mlx | 100 +++++++++++------------- packages/reativa/src/Select.mlx | 4 +- website/src/ReativaSource.res | 68 +++++++++++----- 9 files changed, 133 insertions(+), 79 deletions(-) create mode 100644 .changeset/reativa-unicode-literals.md diff --git a/.changeset/reativa-unicode-literals.md b/.changeset/reativa-unicode-literals.md new file mode 100644 index 0000000..3143102 --- /dev/null +++ b/.changeset/reativa-unicode-literals.md @@ -0,0 +1,10 @@ +--- +"@prescriptive/reativa": patch +--- + +Fix special characters rendering as mojibake in the reativa components. Text +like em dashes, ellipses, checkmarks and the collapsible/select carets was +written as UTF-8 byte escapes in plain OCaml string literals (`"\xe2\x80\x94"`), +which Melange emits one byte per JS code unit — so the browser showed `â€"` +instead of `—`. Every affected literal now uses Melange's js-quoted string +(`{js|—|js}`), which compiles to a real JavaScript string. diff --git a/packages/reativa/README.md b/packages/reativa/README.md index 8a58a41..6a49103 100644 --- a/packages/reativa/README.md +++ b/packages/reativa/README.md @@ -38,6 +38,28 @@ one. It exports the JS surface the website consumes: `mount_example(specId, containerId)`, `example_ids`, `mount_playground(specId, containerId, props)`, `playground_ids`, and `built`. +## Non-ASCII text + +An OCaml `string` is a byte sequence, and Melange emits it one byte per JS code +unit — so a plain literal holding a non-ASCII character (whether typed directly +or escaped as `"\xe2\x80\x94"`) reaches the browser as mojibake (`â€"` instead +of `—`). Write any user-visible text carrying an em dash, ellipsis, checkmark, +caret, bullet, or similar with Melange's js-quoted string, which compiles to a +real JavaScript string: + +```ocaml +txt {js|Saving…|js} +``` + +The rewrite applies to *expression* position only. A js-quoted literal used as a +**pattern** is still the raw UTF-8 bytes and will never match, so compare +against a binding instead of matching on it: + +```ocaml +let yes = {js|✓|js} in +if v = yes then (* … *) +``` + ## Building reativa's core library has **no `public_name`**, so it is a *private* dune diff --git a/packages/reativa/src/Accordion.mlx b/packages/reativa/src/Accordion.mlx index 0e284d8..4b1bbf5 100644 --- a/packages/reativa/src/Accordion.mlx +++ b/packages/reativa/src/Accordion.mlx @@ -19,7 +19,7 @@ let make ?(type_ : Contracts.Accordion.type_ = `single) ?(collapsible = true) ~v in let render (id, header, panel) = let is_open () = List.mem id (Signal.get value) in - let mark () = if List.mem id (Signal.get value) then "\xe2\x88\x92" else "+" in + let mark () = if List.mem id (Signal.get value) then {js|−|js} else "+" in
@@ -86,7 +86,7 @@ let textarea_example () = let value = Signal.make "" in
(Field.make ~label:"Message" ~for_:"ex-ta" - ~children:[ Textarea.make ~id:"ex-ta" ~rows:4 ~value ~placeholder:"Write something\xe2\x80\xa6" () ] + ~children:[ Textarea.make ~id:"ex-ta" ~rows:4 ~value ~placeholder:{js|Write something…|js} () ] ())

(View.dyn_text (fun () -> string_of_int (String.length (Signal.get value)))) @@ -148,7 +148,7 @@ let progress_example () =

(Button.make ~variant:`secondary ~on_click:(fun _ -> Signal.update value (fun v -> if v > 10 then v - 10 else 0)) - ~children:[ txt "\xe2\x88\x9210" ] ()) + ~children:[ txt {js|−10|js} ] ()) (Button.make ~variant:`secondary ~on_click:(fun _ -> Signal.update value (fun v -> if v < 90 then v + 10 else 100)) ~children:[ txt "+10" ] ()) @@ -160,7 +160,7 @@ let spinner_example () = (Spinner.make ~size:"size-4" ()) (Spinner.make ~size:"size-6" ()) (Spinner.make ~size:"size-8" ()) - ("Loading\xe2\x80\xa6") + ({js|Loading…|js})
let skeleton_example () = @@ -192,7 +192,7 @@ let separator_example () = let kbd_example () =
("Open search") - (Kbd.make ~children:[ txt "\xe2\x8c\x98" ] ()) + (Kbd.make ~children:[ txt {js|⌘|js} ] ()) (Kbd.make ~children:[ txt "K" ] ())
@@ -238,8 +238,8 @@ let radio_group_example () = let value = Signal.make "express" in let opts = [ - ("standard", "Standard", "3\xe2\x80\x935 business days"); - ("express", "Express", "1\xe2\x80\x932 business days"); + ("standard", "Standard", {js|3–5 business days|js}); + ("express", "Express", {js|1–2 business days|js}); ("overnight", "Overnight", "Next business day"); ] in @@ -321,7 +321,7 @@ let accordion_example () = [ ("what", "What is a spec?", "A technology-agnostic definition of a UI pattern, described in words."); ("framework", "Is it tied to a framework?", - "No. Each spec maps onto any stack \xe2\x80\x94 this site happens to use Xote."); + {js|No. Each spec maps onto any stack — this site happens to use Xote.|js}); ("contribute", "Can I contribute?", "Yes. Copy the template, fill every section, and open a pull request."); ] @@ -419,7 +419,7 @@ let stat_grid_example () = [ ("Revenue", "$48.2k", "+12% vs. last month", `up); ("Active users", "1,203", "+3% vs. last month", `up); - ("Signups", "312", "\xe2\x88\x925% vs. last month", `down); + ("Signups", "312", {js|−5% vs. last month|js}, `down); ("Uptime", "99.98%", "flat vs. last month", `flat); ] in @@ -472,12 +472,12 @@ let newsletter_example () = let announcement_bar_example () =
- (AnnouncementBar.make ~variant:`accent ~message:"v2 ships May 4 \xe2\x80\x94 everything gets faster." + (AnnouncementBar.make ~variant:`accent ~message:{js|v2 ships May 4 — everything gets faster.|js} ~action_label:"See what's new" ()) (AnnouncementBar.make ~variant:`neutral ~message:"We've updated our terms of service." ~action_label:"Read the changes" ()) (AnnouncementBar.make ~variant:`warning - ~message:"Scheduled maintenance Sunday 02:00\xe2\x80\x9304:00 UTC." ()) + ~message:{js|Scheduled maintenance Sunday 02:00–04:00 UTC.|js} ())
(* ------------------------------------------------------------------ *) @@ -737,7 +737,7 @@ let footer_example () = Separator.make ~extra_class:"my-5" (); el ~cls:"flex items-center justify-between text-xs text-neutral-500" "div" [ - txt "\xc2\xa9 2026 Acme, Inc."; + txt {js|© 2026 Acme, Inc.|js}; el ~cls:"flex gap-3" "div" [ Link_.make ~href:"#" ~variant:`muted ~children:[ txt "Twitter" ] (); @@ -754,18 +754,18 @@ let hero_example () = el ~cls:"w-full max-w-2xl rounded-lg border border-neutral-200 bg-surface px-8 py-12 text-center" "div" [ - Badge.make ~variant:`outline ~children:[ txt "New \xc2\xb7 v2 is here" ] (); + Badge.make ~variant:`outline ~children:[ txt {js|New · v2 is here|js} ] (); el ~cls:"mx-auto mt-4 max-w-lg text-4xl font-bold tracking-tight text-neutral-900" "h2" [ txt "Ship your product faster" ]; el ~cls:"mx-auto mt-3 max-w-md text-neutral-600" "p" - [ txt "The all-in-one toolkit to design, build, and launch \xe2\x80\x94 without the busywork." ]; + [ txt {js|The all-in-one toolkit to design, build, and launch — without the busywork.|js} ]; el ~cls:"mt-6 flex justify-center gap-3" "div" [ Button.make ~variant:`primary ~children:[ txt "Get started" ] (); Button.make ~variant:`secondary ~children:[ txt "Book a demo" ] (); ]; el ~cls:"mt-4 text-xs text-neutral-400" "p" - [ txt "Trusted by 4,000+ teams \xc2\xb7 No credit card required" ]; + [ txt {js|Trusted by 4,000+ teams · No credit card required|js} ]; ] let feature_grid_example () = @@ -794,8 +794,7 @@ let testimonial_example () = el ~cls:"text-lg leading-relaxed text-neutral-800" "p" [ txt - "\xe2\x80\x9cThe first tool our whole team actually enjoys using. It paid for itself in a \ - week.\xe2\x80\x9d"; + {js|“The first tool our whole team actually enjoys using. It paid for itself in a week.”|js}; ]; el ~cls:"mt-4 flex items-center gap-3" "div" [ @@ -809,22 +808,26 @@ let testimonial_example () = ] let pricing_table_example () = + (* Melange rewrites js-quoted literals only in expression position, so bind the + yes/no markers once and compare against them — the same literal used as a + *pattern* would still be raw UTF-8 bytes and never match the JS string. *) + let yes = {js|✓|js} in + let no = {js|–|js} in let rows = [ ("Projects", "1", "Unlimited", "Unlimited"); ("Support", "Community", "Priority", "Dedicated"); - ("SSO", "\xe2\x80\x93", "\xe2\x80\x93", "\xe2\x9c\x93"); - ("Audit log", "\xe2\x80\x93", "\xe2\x9c\x93", "\xe2\x9c\x93"); + ("SSO", no, no, yes); + ("Audit log", no, yes, yes); ] in (* Cells carry either plain text or a yes/no marker; render markers as icons. *) let cell_node v = - match v with - | "\xe2\x9c\x93" -> + if v = yes then Icon.make ~name:"check" ~size:`sm ~label:"Included" ~extra_class:"mx-auto text-status-success" () - | "\xe2\x80\x93" -> + else if v = no then Icon.make ~name:"minus" ~size:`sm ~label:"Not included" ~extra_class:"mx-auto text-neutral-300" () - | _ -> txt v + else txt v in let th cls label = el ~cls "th" label in el ~cls:"w-full max-w-2xl overflow-hidden rounded-lg border border-neutral-200" "div" @@ -876,7 +879,7 @@ let faq_example () = let open_id = Signal.make 0 in let items = [ - (0, "Can I cancel anytime?", "Yes \xe2\x80\x94 cancel in one click, no questions asked."); + (0, "Can I cancel anytime?", {js|Yes — cancel in one click, no questions asked.|js}); (1, "Do you offer refunds?", "We offer a 30-day money-back guarantee."); (2, "Is there a free plan?", "Yes, the Starter plan is free forever."); ] @@ -1091,8 +1094,8 @@ let playground_for spec_id (get : string -> string) = RadioGroup.make ~value:(Signal.make "express") ~options: [ - ("standard", "Standard", "3\xe2\x80\x935 business days"); - ("express", "Express", "1\xe2\x80\x932 business days"); + ("standard", "Standard", {js|3–5 business days|js}); + ("express", "Express", {js|1–2 business days|js}); ("overnight", "Overnight", "Next business day"); ] ~legend:(get "legend") ~orientation ~disabled:(is_true "disabled") @@ -1116,7 +1119,7 @@ let playground_for spec_id (get : string -> string) = let rows = List.init 24 (fun i -> "Row " ^ string_of_int (i + 1) - ^ " \xe2\x80\x94 the quick brown fox jumps over the lazy dog") + ^ {js| — the quick brown fox jumps over the lazy dog|js}) in ScrollArea.make ~orientation ~extra_class:"h-44 w-64 rounded-md border border-neutral-200" ~children: @@ -1167,7 +1170,7 @@ let playground_for spec_id (get : string -> string) = ("what", "What is a spec?", "A technology-agnostic definition of a UI pattern."); ("framework", "Is it tied to a framework?", "No. Each spec maps onto any stack."); ( "contribute", "Can I contribute?", - "Yes \xe2\x80\x94 copy the template and open a pull request." ); + {js|Yes — copy the template and open a pull request.|js} ); ] (); ] @@ -1538,7 +1541,7 @@ let data_table_example () = [ el ~cls:"flex items-center justify-between" "div" [ - Input.make ~type_:"search" ~extra_class:"max-w-48" ~placeholder:"Filter people\xe2\x80\xa6" + Input.make ~type_:"search" ~extra_class:"max-w-48" ~placeholder:{js|Filter people…|js} ~on_input:(fun e -> Signal.set query (Ui.input_value e)) (); Button.make ~variant:`secondary @@ -1652,7 +1655,7 @@ let combobox_example () = let open_ = Signal.make false in let value = Signal.make "" in let filtered () = List.filter (fun o -> contains_ci o (Signal.get query)) all in - let display () = if Signal.get value = "" then "Select framework\xe2\x80\xa6" else Signal.get value in + let display () = if Signal.get value = "" then {js|Select framework…|js} else Signal.get value in el ~cls:"relative w-64" "div" [ View.element @@ -1678,7 +1681,7 @@ let combobox_example () = shadow-lg" "div" [ - Input.make ~extra_class:"mb-1" ~placeholder:"Search\xe2\x80\xa6" + Input.make ~extra_class:"mb-1" ~placeholder:{js|Search…|js} ~on_input:(fun e -> Signal.set query (Ui.input_value e)) (); el ~cls:"max-h-40 overflow-y-auto" "ul" @@ -1719,7 +1722,7 @@ let command_example () = [ View.Attr.className (View.static "w-full border-b border-neutral-200 px-4 py-3 text-sm focus:outline-none"); - View.Attr.placeholder (View.static "Type a command\xe2\x80\xa6"); + View.Attr.placeholder (View.static {js|Type a command…|js}); ] ~events:[ View.On.input (fun e -> Signal.set query (Ui.input_value e)) ] "input" []; @@ -1985,7 +1988,7 @@ let search_example () = [ View.Attr.className (View.static "flex-1 bg-transparent py-2 text-sm focus:outline-none"); - View.Attr.placeholder (View.static "Search\xe2\x80\xa6"); + View.Attr.placeholder (View.static {js|Search…|js}); ] ~events: [ @@ -1999,7 +2002,7 @@ let search_example () = (fun () -> Signal.get query <> "") (IconButton.make ~label:"Clear search" ~on_click:(fun _ -> Signal.set query "") - ~children:[ txt "\xc3\x97" ] ()); + ~children:[ txt {js|×|js} ] ()); ]; View.show (fun () -> Signal.get open_) @@ -2058,8 +2061,7 @@ let comment_example () = el ~cls:"mt-1 text-sm text-neutral-700" "p" [ txt - "Great write-up \xe2\x80\x94 the section on reuse really clicked for me. Shipping \ - this to my team."; + {js|Great write-up — the section on reuse really clicked for me. Shipping this to my team.|js}; ]; el ~cls:"mt-2 flex gap-3 text-xs text-neutral-500" "div" [ @@ -2095,7 +2097,7 @@ let form_example () = View.Attr.id (View.static "frm-msg"); View.Attr.make "rows" (View.static "3"); View.Attr.className (View.static (Ui.input_base ^ " resize-none")); - View.Attr.placeholder (View.static "Say hello\xe2\x80\xa6"); + View.Attr.placeholder (View.static {js|Say hello…|js}); ] "textarea" []; ] @@ -2105,7 +2107,7 @@ let form_example () = View.show (fun () -> Signal.get sent) (el ~cls:"rounded-md bg-neutral-100 px-3 py-2 text-center text-sm text-neutral-700" "p" - [ txt "Thanks \xe2\x80\x94 we'll be in touch." ]); + [ txt {js|Thanks — we'll be in touch.|js} ]); ] let landing_page_example () = @@ -2118,14 +2120,13 @@ let landing_page_example () = ]; el ~cls:"px-8 py-12 text-center" "div" [ - Badge.make ~variant:`outline ~children:[ txt "New \xc2\xb7 v2 is here" ] (); + Badge.make ~variant:`outline ~children:[ txt {js|New · v2 is here|js} ] (); el ~cls:"mx-auto mt-4 max-w-md text-3xl font-bold tracking-tight text-neutral-900" "h2" [ txt "Ship your product faster" ]; el ~cls:"mx-auto mt-3 max-w-sm text-sm text-neutral-500" "p" [ txt - "One primary action, front and center \xe2\x80\x94 everything on the page builds \ - toward it."; + {js|One primary action, front and center — everything on the page builds toward it.|js}; ]; el ~cls:"mt-6 flex justify-center gap-3" "div" [ @@ -2151,7 +2152,7 @@ let dashboard_example () = [ stat "Revenue" "$48.2k" "+12% MoM"; stat "Active users" "3,190" "+4% MoM"; - stat "Churn" "1.8%" "\xe2\x88\x920.3% MoM"; + stat "Churn" "1.8%" {js|−0.3% MoM|js}; ]; el ~cls:(Ui.card ^ " p-4") "div" [ @@ -2215,13 +2216,7 @@ let sign_in_example () = ~children:[ Input.make ~id:"si-email" ~type_:"email" ~placeholder:"you@example.com" () ] (); Field.make ~label:"Password" ~for_:"si-pass" - ~children: - [ - Input.make ~id:"si-pass" ~type_:"password" - ~placeholder: - "\xe2\x80\xa2\xe2\x80\xa2\xe2\x80\xa2\xe2\x80\xa2\xe2\x80\xa2\xe2\x80\xa2\xe2\x80\xa2\xe2\x80\xa2" - (); - ] + ~children:[ Input.make ~id:"si-pass" ~type_:"password" ~placeholder:{js|••••••••|js} () ] (); el ~cls:"flex items-center justify-between text-sm" "div" [ @@ -2316,12 +2311,7 @@ let authentication_example () = (); Field.make ~label:"Password" ~for_:"auth-pass" ~children: - [ - Input.make ~id:"auth-pass" ~type_:"password" - ~placeholder: - "\xe2\x80\xa2\xe2\x80\xa2\xe2\x80\xa2\xe2\x80\xa2\xe2\x80\xa2\xe2\x80\xa2\xe2\x80\xa2\xe2\x80\xa2" - (); - ] + [ Input.make ~id:"auth-pass" ~type_:"password" ~placeholder:{js|••••••••|js} () ] (); Button.make ~variant:`primary ~extra_class:"w-full" ~on_click:(fun _ -> Signal.set step 2) ~children:[ txt "Continue" ] (); diff --git a/packages/reativa/src/Select.mlx b/packages/reativa/src/Select.mlx index bc2d99c..3263c89 100644 --- a/packages/reativa/src/Select.mlx +++ b/packages/reativa/src/Select.mlx @@ -11,7 +11,7 @@ let make ?(disabled = false) ~value ~options () = let open_ = Signal.make false in let label () = Signal.get value in let option_row o = - let mark () = if Signal.get value = o then "\xe2\x9c\x93" else "" in + let mark () = if Signal.get value = o then {js|✓|js} else "" in View.element ~attrs:[] "li" [ View.element @@ -43,7 +43,7 @@ let make ?(disabled = false) ~value ~options () = ] ~events:[ View.On.click (fun _ -> Signal.update open_ (fun v -> not v)) ] "button" - [ View.dyn_text label; ("\xe2\x8c\x84") ]) + [ View.dyn_text label; ({js|⌄|js}) ]) (View.show (fun () -> Signal.get open_) (View.fragment diff --git a/website/src/ReativaSource.res b/website/src/ReativaSource.res index e2fdb20..6646b74 100644 --- a/website/src/ReativaSource.res +++ b/website/src/ReativaSource.res @@ -8,31 +8,31 @@ let get = (id: string): option => | "aspect-ratio" => Some("module AspectRatio = struct\n let make ?(ratio = \"16/9\") ?(extra_class = \"\") ~children () =\n
\n (View.fragment children)\n
\nend\n\nlet aspect_ratio_example () =\n let box = \"flex h-full items-center justify-center text-sm font-medium text-neutral-500\" in\n
\n
\n (AspectRatio.make ~ratio:\"16/9\" ~extra_class:\"rounded-lg bg-neutral-200\"\n ~children:[
(\"16 : 9\")
] ())\n
\n
\n (AspectRatio.make ~ratio:\"1/1\" ~extra_class:\"rounded-lg bg-neutral-200\"\n ~children:[
(\"1 : 1\")
] ())\n
\n
") | "avatar" => Some("module Avatar = struct\n let make ?(size = \"size-10 text-sm\") ~initials () =\n \n (initials)\n \nend\n\nlet avatar_example () =\n
\n (Avatar.make ~initials:\"BG\" ~size:\"size-10 text-sm\" ())\n (Avatar.make ~initials:\"AK\" ~size:\"size-12\" ())\n
\n (Avatar.make ~initials:\"JD\" ~size:\"size-9 text-xs\" ())\n (Avatar.make ~initials:\"MP\" ~size:\"size-9 text-xs\" ())\n (Avatar.make ~initials:\"RM\" ~size:\"size-9 text-xs\" ())\n \n (\"+3\")\n \n
\n
") | "badge" => Some("module Badge = struct\n let make ?(variant : Contracts.Badge.variant = `solid) ~children () =\n let tone =\n match variant with\n | `solid -> \"bg-neutral-900 text-neutral-0\"\n | `soft -> \"bg-neutral-200 text-neutral-800\"\n | `outline -> \"border border-neutral-300 text-neutral-700\"\n in\n \n (View.fragment children)\n \nend\n\nlet txt s = View.text (View.static s)\n\nlet badge_example () =\n
\n (Badge.make ~variant:`solid ~children:[ txt \"Default\" ] ())\n (Badge.make ~variant:`soft ~children:[ txt \"Secondary\" ] ())\n (Badge.make ~variant:`outline ~children:[ txt \"Outline\" ] ())\n (Badge.make ~variant:`soft\n ~children:\n [ ; txt \"Idle\" ]\n ())\n (Badge.make ~variant:`solid ~children:[ txt \"99+\" ] ())\n
") - | "button" => Some("module Spinner = struct\n let make ?(size = \"size-4\") ?(tone = `ink) () =\n let colors =\n match tone with\n | `ink -> \"border-neutral-300 border-t-neutral-900\"\n | `on_accent -> \"border-white/40 border-t-white\"\n in\n \nend\n\nmodule Button = struct\n let make ?(variant : Contracts.Button.variant = `primary) ?(size : Contracts.Button.size = `md)\n ?(type_ : Contracts.Button.type_ = `button) ?(disabled = false) ?(loading = false) ?on_click\n ?(extra_class = \"\") ~children () =\n let type_str = match type_ with `button -> \"button\" | `submit -> \"submit\" | `reset -> \"reset\" in\n let size_cls = match size with `sm -> Ui.btn_sm | `md -> Ui.btn_md | `lg -> Ui.btn_lg in\n let colors =\n match variant with\n | `primary -> Ui.btn_primary_colors\n | `secondary -> Ui.btn_secondary_colors\n | `ghost -> Ui.btn_ghost_colors\n | `destructive -> Ui.btn_destructive_colors\n in\n (* Dark-surface variants need an on-accent spinner; light ones use ink. *)\n let spinner_tone =\n match variant with `primary | `destructive -> `on_accent | `secondary | `ghost -> `ink\n in\n let cls = Ui.cx (Ui.btn_core ^ \" \" ^ size_cls ^ \" \" ^ colors) extra_class in\n let attrs =\n [\n View.Attr.type_ (View.static type_str);\n View.Attr.className (View.static cls);\n View.Attr.disabled (fun () -> disabled || loading);\n ]\n in\n let events = match on_click with Some f -> [ View.On.click f ] | None -> [] in\n let spinner = if loading then Spinner.make ~tone:spinner_tone () else View.empty in\n View.element ~attrs ~events \"button\" [ spinner; View.fragment children ]\nend\n\nlet txt s = View.text (View.static s)\n\nlet button_example () =\n let loading = Signal.make false in\n
\n (Button.make ~variant:`primary ~children:[ txt \"Primary\" ] ())\n (Button.make ~variant:`secondary ~children:[ txt \"Secondary\" ] ())\n (Button.make ~variant:`ghost ~children:[ txt \"Ghost\" ] ())\n (Button.make ~variant:`destructive ~children:[ txt \"Delete\" ] ())\n (Button.make ~variant:`secondary ~disabled:true ~children:[ txt \"Disabled\" ] ())\n (Button.make ~variant:`primary\n ~on_click:(fun _ ->\n Signal.set loading true;\n Ui.set_timeout (fun () -> Signal.set loading false) 1200)\n ~children:\n [\n View.show ~fallback:(txt \"Save\")\n (fun () -> Signal.get loading)\n (View.fragment [ Spinner.make ~tone:`on_accent (); txt \"Saving\\xe2\\x80\\xa6\" ]);\n ]\n ())\n
") + | "button" => Some("module Spinner = struct\n let make ?(size = \"size-4\") ?(tone = `ink) () =\n let colors =\n match tone with\n | `ink -> \"border-neutral-300 border-t-neutral-900\"\n | `on_accent -> \"border-white/40 border-t-white\"\n in\n \nend\n\nmodule Button = struct\n let make ?(variant : Contracts.Button.variant = `primary) ?(size : Contracts.Button.size = `md)\n ?(type_ : Contracts.Button.type_ = `button) ?(disabled = false) ?(loading = false) ?on_click\n ?(extra_class = \"\") ~children () =\n let type_str = match type_ with `button -> \"button\" | `submit -> \"submit\" | `reset -> \"reset\" in\n let size_cls = match size with `sm -> Ui.btn_sm | `md -> Ui.btn_md | `lg -> Ui.btn_lg in\n let colors =\n match variant with\n | `primary -> Ui.btn_primary_colors\n | `secondary -> Ui.btn_secondary_colors\n | `ghost -> Ui.btn_ghost_colors\n | `destructive -> Ui.btn_destructive_colors\n in\n (* Dark-surface variants need an on-accent spinner; light ones use ink. *)\n let spinner_tone =\n match variant with `primary | `destructive -> `on_accent | `secondary | `ghost -> `ink\n in\n let cls = Ui.cx (Ui.btn_core ^ \" \" ^ size_cls ^ \" \" ^ colors) extra_class in\n let attrs =\n [\n View.Attr.type_ (View.static type_str);\n View.Attr.className (View.static cls);\n View.Attr.disabled (fun () -> disabled || loading);\n ]\n in\n let events = match on_click with Some f -> [ View.On.click f ] | None -> [] in\n let spinner = if loading then Spinner.make ~tone:spinner_tone () else View.empty in\n View.element ~attrs ~events \"button\" [ spinner; View.fragment children ]\nend\n\nlet txt s = View.text (View.static s)\n\nlet button_example () =\n let loading = Signal.make false in\n
\n (Button.make ~variant:`primary ~children:[ txt \"Primary\" ] ())\n (Button.make ~variant:`secondary ~children:[ txt \"Secondary\" ] ())\n (Button.make ~variant:`ghost ~children:[ txt \"Ghost\" ] ())\n (Button.make ~variant:`destructive ~children:[ txt \"Delete\" ] ())\n (Button.make ~variant:`secondary ~disabled:true ~children:[ txt \"Disabled\" ] ())\n (Button.make ~variant:`primary\n ~on_click:(fun _ ->\n Signal.set loading true;\n Ui.set_timeout (fun () -> Signal.set loading false) 1200)\n ~children:\n [\n View.show ~fallback:(txt \"Save\")\n (fun () -> Signal.get loading)\n (View.fragment [ Spinner.make ~tone:`on_accent (); txt {js|Saving…|js} ]);\n ]\n ())\n
") | "checkbox" => Some("module Checkbox = struct\n (* Unique ids for indeterminate boxes — the DOM property is set post-render. *)\n let seq = ref 0\n\n let make ?(indeterminate = false) ?(disabled = false) ?(required = false) ?(label = \"\")\n ?(description = \"\") ?on_change ~checked () =\n let handle ev =\n Signal.set checked (Ui.checked ev);\n match on_change with Some f -> f ev | None -> ()\n in\n let id =\n if indeterminate then begin\n incr seq;\n let id = \"prescriptive-reativa-checkbox-\" ^ string_of_int !seq in\n Ui.set_indeterminate_by_id id true;\n Some id\n end\n else None\n in\n let input_attrs =\n [\n View.Attr.type_ (View.static \"checkbox\");\n View.Attr.checked (View.dynamic (fun () -> Signal.get checked));\n View.Attr.className (View.static \"mt-0.5 size-4 accent-neutral-900 disabled:opacity-40\");\n View.Attr.disabled (fun () -> disabled);\n View.Attr.toggle \"required\" (fun () -> required);\n ]\n in\n let input_attrs =\n match id with Some i -> View.Attr.id (View.static i) :: input_attrs | None -> input_attrs\n in\n let input_node = View.element ~attrs:input_attrs ~events:[ View.On.change handle ] \"input\" [] in\n let text_node =\n if label = \"\" && description = \"\" then View.empty\n else\n \n (if label = \"\" then View.empty\n else (label))\n (if description = \"\" then View.empty\n else (description))\n \n in\n View.element\n ~attrs:[ View.Attr.className (View.static \"flex items-start gap-3\") ]\n \"label\"\n [ input_node; text_node ]\nend\n\nlet checkbox_example () =\n let on = Signal.make true in\n Checkbox.make ~checked:on ~label:\"Subscribe\" ~description:\"Get product updates by email.\" ()") | "icon" => Some("module Icon = struct\n (* Fresh host ids so multiple icons of the same name never collide. *)\n let counter = ref 0\n\n let make ?(size : Contracts.Icon.size = `md) ?(label = \"\") ?(extra_class = \"\") ~name () =\n let dims =\n match size with\n | `xs -> \"size-3\"\n | `sm -> \"size-4\"\n | `md -> \"size-5\"\n | `lg -> \"size-6\"\n | `xl -> \"size-8\"\n in\n let body = match Icons.get name with Some b -> b | None -> [] in\n let meaningful = label <> \"\" in\n (* Meaningful icons expose an img role + accessible name; decorative ones are\n hidden so assistive tech doesn't announce them beside their label. *)\n let role_attrs =\n if meaningful then \"role=\\\"img\\\" aria-label=\\\"\" ^ label ^ \"\\\"\" else \"aria-hidden=\\\"true\\\"\"\n in\n let extra = if extra_class = \"\" then \"\" else \" \" ^ extra_class in\n let markup = Icons.svg ~dims ~extra ~role_attrs body in\n View.dyn (fun () ->\n incr counter;\n let id = \"prescriptive-reativa-icon-\" ^ string_of_int !counter in\n Ui.set_inner_html_by_id id markup;\n View.element ~attrs:[ View.Attr.id (View.static id) ] \"span\" [])\nend\n\nlet icon_example () =\n
\n (Icon.make ~name:\"search\" ~size:`lg ())\n (Icon.make ~name:\"bell\" ~size:`lg ())\n (Icon.make ~name:\"settings\" ~size:`lg ())\n (Icon.make ~name:\"heart\" ~size:`lg ())\n (Icon.make ~name:\"star\" ~size:`lg ())\n (Icon.make ~name:\"github\" ~size:`lg ())\n
") | "icon-button" => Some("module IconButton = struct\n let make ?(variant : Contracts.IconButton.variant = `ghost) ?on_click ~label ~children () =\n let tone =\n match variant with\n | `solid -> \"bg-action text-on-action hover:bg-action-hover\"\n | `ghost -> \"text-ink hover:bg-action-subtle\"\n in\n let attrs =\n [\n View.Attr.type_ (View.static \"button\");\n View.Attr.make \"aria-label\" (View.static label);\n View.Attr.className\n (View.static\n (\"inline-flex size-9 items-center justify-center rounded-md text-sm transition-colors \\\n focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-action \\\n focus-visible:ring-offset-2 \" ^ tone));\n ]\n in\n let events = match on_click with Some f -> [ View.On.click f ] | None -> [] in\n View.element ~attrs ~events \"button\" [ View.fragment children ]\nend\n\nmodule Icon = struct\n (* Fresh host ids so multiple icons of the same name never collide. *)\n let counter = ref 0\n\n let make ?(size : Contracts.Icon.size = `md) ?(label = \"\") ?(extra_class = \"\") ~name () =\n let dims =\n match size with\n | `xs -> \"size-3\"\n | `sm -> \"size-4\"\n | `md -> \"size-5\"\n | `lg -> \"size-6\"\n | `xl -> \"size-8\"\n in\n let body = match Icons.get name with Some b -> b | None -> [] in\n let meaningful = label <> \"\" in\n (* Meaningful icons expose an img role + accessible name; decorative ones are\n hidden so assistive tech doesn't announce them beside their label. *)\n let role_attrs =\n if meaningful then \"role=\\\"img\\\" aria-label=\\\"\" ^ label ^ \"\\\"\" else \"aria-hidden=\\\"true\\\"\"\n in\n let extra = if extra_class = \"\" then \"\" else \" \" ^ extra_class in\n let markup = Icons.svg ~dims ~extra ~role_attrs body in\n View.dyn (fun () ->\n incr counter;\n let id = \"prescriptive-reativa-icon-\" ^ string_of_int !counter in\n Ui.set_inner_html_by_id id markup;\n View.element ~attrs:[ View.Attr.id (View.static id) ] \"span\" [])\nend\n\nlet icon_button_example () =\n
\n (IconButton.make ~label:\"Edit\" ~children:[ Icon.make ~name:\"edit\" () ] ())\n (IconButton.make ~label:\"Copy\" ~children:[ Icon.make ~name:\"copy\" () ] ())\n (IconButton.make ~label:\"Delete\" ~children:[ Icon.make ~name:\"trash\" () ] ())\n (IconButton.make ~label:\"More options\" ~variant:`solid\n ~children:[ Icon.make ~name:\"more-horizontal\" () ] ())\n
") | "input" => Some("module Field = struct\n let make ?(hint = \"\") ~label ~for_ ~children () =\n let label_node =\n View.element\n ~attrs:[ View.Attr.className (View.static Ui.label); View.Attr.make \"for\" (View.static for_) ]\n \"label\"\n [ View.text (View.static label) ]\n in\n let hint_node =\n if hint = \"\" then View.empty\n else

(hint)

\n in\n
\n (label_node)\n (View.fragment children)\n (hint_node)\n
\nend\n\nmodule Input = struct\n let make ?(type_ = \"text\") ?id ?(placeholder = \"\") ?value ?(required = false) ?on_input\n ?(extra_class = \"\") () =\n let attrs =\n [\n View.Attr.type_ (View.static type_);\n View.Attr.placeholder (View.static placeholder);\n View.Attr.className (View.static (Ui.cx Ui.input_base extra_class));\n View.Attr.toggle \"required\" (fun () -> required);\n ]\n in\n let attrs = match id with Some i -> View.Attr.id (View.static i) :: attrs | None -> attrs in\n let attrs = match value with Some v -> View.Attr.value (View.static v) :: attrs | None -> attrs in\n let events = match on_input with Some f -> [ View.On.input f ] | None -> [] in\n View.element ~attrs ~events \"input\" []\nend\n\nlet input_example () =\n let value = Signal.make \"\" in\n
\n (Field.make ~label:\"Email\" ~for_:\"ex-email\"\n ~children:\n [\n Input.make ~id:\"ex-email\" ~type_:\"email\" ~placeholder:\"you@example.com\"\n ~on_input:(fun e -> Signal.set value (Ui.input_value e))\n ();\n ]\n ())\n

\n (\"You typed: \")\n (View.dyn_text (fun () -> Signal.get value))\n

\n
") | "input-otp" => Some("module InputOtp = struct\n let digits_only s =\n let r = ref \"\" in\n String.iter (fun c -> if c >= '0' && c <= '9' then r := !r ^ String.make 1 c) s;\n !r\n\n let make ?(length = 6) ?(disabled = false) ~value () =\n let input_node =\n View.element\n ~attrs:\n [\n View.Attr.className\n (View.static \"absolute inset-0 z-10 cursor-pointer opacity-0 disabled:cursor-not-allowed\");\n View.Attr.type_ (View.static \"text\");\n View.Attr.make \"maxlength\" (View.static (string_of_int length));\n View.Attr.disabled (fun () -> disabled);\n ]\n ~events:\n [\n View.On.input (fun ev ->\n let d = digits_only (Ui.input_value ev) in\n let d = if String.length d > length then String.sub d 0 length else d in\n Signal.set value d);\n ]\n \"input\" []\n in\n let cell i =\n let cls () =\n let len = String.length (Signal.get value) in\n \"flex size-11 items-center justify-center rounded-md border text-lg font-semibold text-neutral-900 \"\n ^ if len = i then \"border-neutral-900 ring-1 ring-neutral-900\" else \"border-neutral-300\"\n in\n let ch () =\n let v = Signal.get value in\n if i < String.length v then String.make 1 v.[i] else \"\"\n in\n View.element ~attrs:[ View.Attr.class_reactive cls ] \"span\" [ View.text (View.dynamic ch) ]\n in\n let cells = List.init length cell in\n View.element\n ~attrs:[ View.Attr.className (View.static \"relative inline-flex gap-2\") ]\n \"label\" (input_node :: cells)\nend\n\nlet input_otp_example () =\n let code = Signal.make \"\" in\n InputOtp.make ~value:code ()") - | "kbd" => Some("module Kbd = struct\n let make ~children () =\n \n (View.fragment children)\n \nend\n\nlet txt s = View.text (View.static s)\n\nlet kbd_example () =\n
\n (\"Open search\")\n (Kbd.make ~children:[ txt \"\\xe2\\x8c\\x98\" ] ())\n (Kbd.make ~children:[ txt \"K\" ] ())\n
") + | "kbd" => Some("module Kbd = struct\n let make ~children () =\n \n (View.fragment children)\n \nend\n\nlet txt s = View.text (View.static s)\n\nlet kbd_example () =\n
\n (\"Open search\")\n (Kbd.make ~children:[ txt {js|⌘|js} ] ())\n (Kbd.make ~children:[ txt \"K\" ] ())\n
") | "link" => Some("module Link = struct\n let make ?(href = \"#\") ?(variant : Contracts.Link.variant = `default) ?(new_tab = false)\n ?(extra_class = \"\") ~children () =\n let base =\n match variant with\n | `default ->\n \"text-neutral-900 underline decoration-neutral-300 underline-offset-4 hover:decoration-neutral-900\"\n | `muted -> \"text-neutral-500 transition-colors hover:text-neutral-900\"\n in\n let attrs =\n [\n View.Attr.href (View.static href);\n View.Attr.className (View.static (Ui.cx base extra_class));\n ]\n in\n let attrs =\n if new_tab then View.Attr.make \"target\" (View.static \"_blank\") :: attrs else attrs\n in\n View.element ~attrs \"a\" [ View.fragment children ]\nend\n\nmodule Icon = struct\n (* Fresh host ids so multiple icons of the same name never collide. *)\n let counter = ref 0\n\n let make ?(size : Contracts.Icon.size = `md) ?(label = \"\") ?(extra_class = \"\") ~name () =\n let dims =\n match size with\n | `xs -> \"size-3\"\n | `sm -> \"size-4\"\n | `md -> \"size-5\"\n | `lg -> \"size-6\"\n | `xl -> \"size-8\"\n in\n let body = match Icons.get name with Some b -> b | None -> [] in\n let meaningful = label <> \"\" in\n (* Meaningful icons expose an img role + accessible name; decorative ones are\n hidden so assistive tech doesn't announce them beside their label. *)\n let role_attrs =\n if meaningful then \"role=\\\"img\\\" aria-label=\\\"\" ^ label ^ \"\\\"\" else \"aria-hidden=\\\"true\\\"\"\n in\n let extra = if extra_class = \"\" then \"\" else \" \" ^ extra_class in\n let markup = Icons.svg ~dims ~extra ~role_attrs body in\n View.dyn (fun () ->\n incr counter;\n let id = \"prescriptive-reativa-icon-\" ^ string_of_int !counter in\n Ui.set_inner_html_by_id id markup;\n View.element ~attrs:[ View.Attr.id (View.static id) ] \"span\" [])\nend\n\nmodule Link_ = Link\n\nlet txt s = View.text (View.static s)\n\nlet link_example () =\n
\n

\n (\"Read our \")\n (Link_.make ~href:\"#\" ~children:[ txt \"getting-started guide\" ] ())\n (\" to begin.\")\n

\n
\n (Link_.make ~href:\"#\" ~variant:`muted ~children:[ txt \"Docs\" ] ())\n (Link_.make ~href:\"#\" ~variant:`muted ~children:[ txt \"Pricing\" ] ())\n (Link_.make ~href:\"#\" ~new_tab:true ~extra_class:\"inline-flex items-center gap-1\"\n ~children:[ txt \"Changelog\"; Icon.make ~name:\"external-link\" ~size:`xs () ] ())\n
\n
") - | "progress" => Some("module Progress = struct\n let make ?(max = 100) ?(indeterminate = false) ?(extra_class = \"\") ~value () =\n let bar () =\n let pct = if max <= 0 then 0 else Signal.get value * 100 / max in\n let clamped = if pct < 0 then 0 else if pct > 100 then 100 else pct in\n \"height:100%;width:\" ^ string_of_int clamped ^ \"%\"\n in\n let inner =\n if indeterminate then
\n else\n View.element\n ~attrs:\n [\n View.Attr.className (View.static \"rounded-full bg-neutral-900 transition-all\");\n View.Attr.make \"style\" (View.dynamic bar);\n ]\n \"div\" []\n in\n View.element\n ~attrs:\n [\n View.Attr.className\n (View.static (Ui.cx \"h-2 w-full overflow-hidden rounded-full bg-neutral-200\" extra_class));\n View.Attr.make \"role\" (View.static \"progressbar\");\n ]\n \"div\" [ inner ]\nend\n\nmodule Spinner = struct\n let make ?(size = \"size-4\") ?(tone = `ink) () =\n let colors =\n match tone with\n | `ink -> \"border-neutral-300 border-t-neutral-900\"\n | `on_accent -> \"border-white/40 border-t-white\"\n in\n \nend\n\nmodule Button = struct\n let make ?(variant : Contracts.Button.variant = `primary) ?(size : Contracts.Button.size = `md)\n ?(type_ : Contracts.Button.type_ = `button) ?(disabled = false) ?(loading = false) ?on_click\n ?(extra_class = \"\") ~children () =\n let type_str = match type_ with `button -> \"button\" | `submit -> \"submit\" | `reset -> \"reset\" in\n let size_cls = match size with `sm -> Ui.btn_sm | `md -> Ui.btn_md | `lg -> Ui.btn_lg in\n let colors =\n match variant with\n | `primary -> Ui.btn_primary_colors\n | `secondary -> Ui.btn_secondary_colors\n | `ghost -> Ui.btn_ghost_colors\n | `destructive -> Ui.btn_destructive_colors\n in\n (* Dark-surface variants need an on-accent spinner; light ones use ink. *)\n let spinner_tone =\n match variant with `primary | `destructive -> `on_accent | `secondary | `ghost -> `ink\n in\n let cls = Ui.cx (Ui.btn_core ^ \" \" ^ size_cls ^ \" \" ^ colors) extra_class in\n let attrs =\n [\n View.Attr.type_ (View.static type_str);\n View.Attr.className (View.static cls);\n View.Attr.disabled (fun () -> disabled || loading);\n ]\n in\n let events = match on_click with Some f -> [ View.On.click f ] | None -> [] in\n let spinner = if loading then Spinner.make ~tone:spinner_tone () else View.empty in\n View.element ~attrs ~events \"button\" [ spinner; View.fragment children ]\nend\n\nlet txt s = View.text (View.static s)\n\nlet progress_example () =\n let value = Signal.make 30 in\n
\n (Progress.make ~value ())\n
\n (Button.make ~variant:`secondary\n ~on_click:(fun _ -> Signal.update value (fun v -> if v > 10 then v - 10 else 0))\n ~children:[ txt \"\\xe2\\x88\\x9210\" ] ())\n (Button.make ~variant:`secondary\n ~on_click:(fun _ -> Signal.update value (fun v -> if v < 90 then v + 10 else 100))\n ~children:[ txt \"+10\" ] ())\n
\n
") - | "radio-group" => Some("module RadioGroup = struct\n (* Fallback names so ungrouped instances never collide with each other. *)\n let seq = ref 0\n\n let make ?(legend = \"\") ?(name = \"\") ?(orientation : Contracts.RadioGroup.orientation = `vertical)\n ?(disabled = false) ?(extra_class = \"\") ~value ~options () =\n let group_name =\n if name = \"\" then begin\n incr seq;\n \"prescriptive-reativa-radio-group-\" ^ string_of_int !seq\n end\n else name\n in\n let list_cls =\n match orientation with `vertical -> \"space-y-2\" | `horizontal -> \"flex flex-wrap gap-2\"\n in\n let render (id, title, desc) =\n let is_checked () = Signal.get value = id in\n let row_cls () =\n \"flex cursor-pointer items-start gap-3 rounded-md border p-3 transition-colors \"\n ^\n if Signal.get value = id then \"border-neutral-900 bg-neutral-50\"\n else \"border-neutral-200 hover:border-neutral-300\"\n in\n let ring () =\n \"mt-0.5 flex size-4 items-center justify-center rounded-full border peer-focus-visible:ring-2 \\\n peer-focus-visible:ring-action peer-focus-visible:ring-offset-2 \"\n ^ if Signal.get value = id then \"border-neutral-900\" else \"border-neutral-300\"\n in\n let dot () =\n \"size-2 rounded-full \" ^ if Signal.get value = id then \"bg-neutral-900\" else \"bg-transparent\"\n in\n let input_node =\n View.element\n ~attrs:\n [\n View.Attr.type_ (View.static \"radio\");\n View.Attr.make \"name\" (View.static group_name);\n View.Attr.value (View.static id);\n View.Attr.className (View.static \"peer sr-only\");\n View.Attr.checked (View.dynamic is_checked);\n View.Attr.disabled (fun () -> disabled);\n ]\n ~events:[ View.On.change (fun _ -> Signal.set value id) ]\n \"input\" []\n in\n let text_node =\n View.element ~attrs:[] \"span\"\n [\n View.element\n ~attrs:[ View.Attr.className (View.static \"block text-sm font-medium text-neutral-800\") ]\n \"span\"\n [ View.text (View.static title) ];\n (if desc = \"\" then View.empty\n else\n View.element\n ~attrs:[ View.Attr.className (View.static \"block text-xs text-neutral-500\") ]\n \"span\"\n [ View.text (View.static desc) ]);\n ]\n in\n View.element ~attrs:[ View.Attr.class_reactive row_cls ] \"label\"\n [\n input_node;\n View.element ~attrs:[ View.Attr.class_reactive ring ] \"span\"\n [ View.element ~attrs:[ View.Attr.class_reactive dot ] \"span\" [] ];\n text_node;\n ]\n in\n let fieldset_cls = extra_class ^ if disabled then \" pointer-events-none opacity-50\" else \"\" in\n let legend_node =\n if legend = \"\" then View.empty\n else\n View.element\n ~attrs:[ View.Attr.className (View.static \"mb-1 text-sm font-medium text-neutral-800\") ]\n \"legend\"\n [ View.text (View.static legend) ]\n in\n let list_node =\n View.element ~attrs:[ View.Attr.className (View.static list_cls) ] \"div\" (List.map render options)\n in\n View.element\n ~attrs:\n [\n View.Attr.className (View.static fieldset_cls);\n View.Attr.make \"role\" (View.static \"radiogroup\");\n ]\n \"fieldset\"\n [ legend_node; list_node ]\nend\n\nlet radio_group_example () =\n let value = Signal.make \"express\" in\n let opts =\n [\n (\"standard\", \"Standard\", \"3\\xe2\\x80\\x935 business days\");\n (\"express\", \"Express\", \"1\\xe2\\x80\\x932 business days\");\n (\"overnight\", \"Overnight\", \"Next business day\");\n ]\n in\n RadioGroup.make ~value ~options:opts ~legend:\"Shipping speed\" ~extra_class:\"max-w-sm\" ()") + | "progress" => Some("module Progress = struct\n let make ?(max = 100) ?(indeterminate = false) ?(extra_class = \"\") ~value () =\n let bar () =\n let pct = if max <= 0 then 0 else Signal.get value * 100 / max in\n let clamped = if pct < 0 then 0 else if pct > 100 then 100 else pct in\n \"height:100%;width:\" ^ string_of_int clamped ^ \"%\"\n in\n let inner =\n if indeterminate then
\n else\n View.element\n ~attrs:\n [\n View.Attr.className (View.static \"rounded-full bg-neutral-900 transition-all\");\n View.Attr.make \"style\" (View.dynamic bar);\n ]\n \"div\" []\n in\n View.element\n ~attrs:\n [\n View.Attr.className\n (View.static (Ui.cx \"h-2 w-full overflow-hidden rounded-full bg-neutral-200\" extra_class));\n View.Attr.make \"role\" (View.static \"progressbar\");\n ]\n \"div\" [ inner ]\nend\n\nmodule Spinner = struct\n let make ?(size = \"size-4\") ?(tone = `ink) () =\n let colors =\n match tone with\n | `ink -> \"border-neutral-300 border-t-neutral-900\"\n | `on_accent -> \"border-white/40 border-t-white\"\n in\n \nend\n\nmodule Button = struct\n let make ?(variant : Contracts.Button.variant = `primary) ?(size : Contracts.Button.size = `md)\n ?(type_ : Contracts.Button.type_ = `button) ?(disabled = false) ?(loading = false) ?on_click\n ?(extra_class = \"\") ~children () =\n let type_str = match type_ with `button -> \"button\" | `submit -> \"submit\" | `reset -> \"reset\" in\n let size_cls = match size with `sm -> Ui.btn_sm | `md -> Ui.btn_md | `lg -> Ui.btn_lg in\n let colors =\n match variant with\n | `primary -> Ui.btn_primary_colors\n | `secondary -> Ui.btn_secondary_colors\n | `ghost -> Ui.btn_ghost_colors\n | `destructive -> Ui.btn_destructive_colors\n in\n (* Dark-surface variants need an on-accent spinner; light ones use ink. *)\n let spinner_tone =\n match variant with `primary | `destructive -> `on_accent | `secondary | `ghost -> `ink\n in\n let cls = Ui.cx (Ui.btn_core ^ \" \" ^ size_cls ^ \" \" ^ colors) extra_class in\n let attrs =\n [\n View.Attr.type_ (View.static type_str);\n View.Attr.className (View.static cls);\n View.Attr.disabled (fun () -> disabled || loading);\n ]\n in\n let events = match on_click with Some f -> [ View.On.click f ] | None -> [] in\n let spinner = if loading then Spinner.make ~tone:spinner_tone () else View.empty in\n View.element ~attrs ~events \"button\" [ spinner; View.fragment children ]\nend\n\nlet txt s = View.text (View.static s)\n\nlet progress_example () =\n let value = Signal.make 30 in\n
\n (Progress.make ~value ())\n
\n (Button.make ~variant:`secondary\n ~on_click:(fun _ -> Signal.update value (fun v -> if v > 10 then v - 10 else 0))\n ~children:[ txt {js|−10|js} ] ())\n (Button.make ~variant:`secondary\n ~on_click:(fun _ -> Signal.update value (fun v -> if v < 90 then v + 10 else 100))\n ~children:[ txt \"+10\" ] ())\n
\n
") + | "radio-group" => Some("module RadioGroup = struct\n (* Fallback names so ungrouped instances never collide with each other. *)\n let seq = ref 0\n\n let make ?(legend = \"\") ?(name = \"\") ?(orientation : Contracts.RadioGroup.orientation = `vertical)\n ?(disabled = false) ?(extra_class = \"\") ~value ~options () =\n let group_name =\n if name = \"\" then begin\n incr seq;\n \"prescriptive-reativa-radio-group-\" ^ string_of_int !seq\n end\n else name\n in\n let list_cls =\n match orientation with `vertical -> \"space-y-2\" | `horizontal -> \"flex flex-wrap gap-2\"\n in\n let render (id, title, desc) =\n let is_checked () = Signal.get value = id in\n let row_cls () =\n \"flex cursor-pointer items-start gap-3 rounded-md border p-3 transition-colors \"\n ^\n if Signal.get value = id then \"border-neutral-900 bg-neutral-50\"\n else \"border-neutral-200 hover:border-neutral-300\"\n in\n let ring () =\n \"mt-0.5 flex size-4 items-center justify-center rounded-full border peer-focus-visible:ring-2 \\\n peer-focus-visible:ring-action peer-focus-visible:ring-offset-2 \"\n ^ if Signal.get value = id then \"border-neutral-900\" else \"border-neutral-300\"\n in\n let dot () =\n \"size-2 rounded-full \" ^ if Signal.get value = id then \"bg-neutral-900\" else \"bg-transparent\"\n in\n let input_node =\n View.element\n ~attrs:\n [\n View.Attr.type_ (View.static \"radio\");\n View.Attr.make \"name\" (View.static group_name);\n View.Attr.value (View.static id);\n View.Attr.className (View.static \"peer sr-only\");\n View.Attr.checked (View.dynamic is_checked);\n View.Attr.disabled (fun () -> disabled);\n ]\n ~events:[ View.On.change (fun _ -> Signal.set value id) ]\n \"input\" []\n in\n let text_node =\n View.element ~attrs:[] \"span\"\n [\n View.element\n ~attrs:[ View.Attr.className (View.static \"block text-sm font-medium text-neutral-800\") ]\n \"span\"\n [ View.text (View.static title) ];\n (if desc = \"\" then View.empty\n else\n View.element\n ~attrs:[ View.Attr.className (View.static \"block text-xs text-neutral-500\") ]\n \"span\"\n [ View.text (View.static desc) ]);\n ]\n in\n View.element ~attrs:[ View.Attr.class_reactive row_cls ] \"label\"\n [\n input_node;\n View.element ~attrs:[ View.Attr.class_reactive ring ] \"span\"\n [ View.element ~attrs:[ View.Attr.class_reactive dot ] \"span\" [] ];\n text_node;\n ]\n in\n let fieldset_cls = extra_class ^ if disabled then \" pointer-events-none opacity-50\" else \"\" in\n let legend_node =\n if legend = \"\" then View.empty\n else\n View.element\n ~attrs:[ View.Attr.className (View.static \"mb-1 text-sm font-medium text-neutral-800\") ]\n \"legend\"\n [ View.text (View.static legend) ]\n in\n let list_node =\n View.element ~attrs:[ View.Attr.className (View.static list_cls) ] \"div\" (List.map render options)\n in\n View.element\n ~attrs:\n [\n View.Attr.className (View.static fieldset_cls);\n View.Attr.make \"role\" (View.static \"radiogroup\");\n ]\n \"fieldset\"\n [ legend_node; list_node ]\nend\n\nlet radio_group_example () =\n let value = Signal.make \"express\" in\n let opts =\n [\n (\"standard\", \"Standard\", {js|3–5 business days|js});\n (\"express\", \"Express\", {js|1–2 business days|js});\n (\"overnight\", \"Overnight\", \"Next business day\");\n ]\n in\n RadioGroup.make ~value ~options:opts ~legend:\"Shipping speed\" ~extra_class:\"max-w-sm\" ()") | "scroll-area" => Some("module ScrollArea = struct\n let make ?(orientation : Contracts.ScrollArea.orientation = `vertical) ?(extra_class = \"\") ~children () =\n let overflow =\n match orientation with\n | `vertical -> \"overflow-y-auto\"\n | `horizontal -> \"overflow-x-auto\"\n | `both -> \"overflow-auto\"\n in\n
(View.fragment children)
\nend\n\nlet txt s = View.text (View.static s)\n\nlet scroll_area_example () =\n let rows = List.init 24 (fun i -> \"Row \" ^ string_of_int (i + 1)) in\n ScrollArea.make ~extra_class:\"h-44 w-64 rounded-md border border-neutral-200\"\n ~children:\n [\n View.element\n ~attrs:[ View.Attr.className (View.static \"divide-y divide-neutral-100 text-sm\") ]\n \"ul\"\n (List.map\n (fun r ->\n View.element\n ~attrs:[ View.Attr.className (View.static \"px-3 py-2 text-neutral-700\") ]\n \"li\" [ txt r ])\n rows);\n ]\n ()") | "separator" => Some("module Separator = struct\n let make ?(orientation : Contracts.Separator.orientation = `horizontal) ?(extra_class = \"\") () =\n let base =\n match orientation with\n | `horizontal -> \"h-px w-full bg-neutral-200\"\n | `vertical -> \"h-4 w-px bg-neutral-200\"\n in\n View.element\n ~attrs:\n [\n View.Attr.className (View.static (Ui.cx base extra_class));\n View.Attr.make \"role\" (View.static \"separator\");\n ]\n \"div\" []\nend\n\nlet separator_example () =\n
\n

(\"Above the line\")

\n (Separator.make ~extra_class:\"my-3\" ())\n
\n (\"Home\")\n (Separator.make ~orientation:`vertical ())\n (\"Docs\")\n (Separator.make ~orientation:`vertical ())\n (\"About\")\n
\n
") | "skeleton" => Some("module Skeleton = struct\n let make ?(shape : Contracts.Skeleton.shape = `text) ?(extra_class = \"\") () =\n let shape_cls =\n match shape with\n | `text -> \"h-3 rounded\"\n | `circle -> \"rounded-full\"\n | `rect -> \"rounded-lg\"\n in\n
\nend\n\nlet skeleton_example () =\n
\n
\n (Skeleton.make ~shape:`circle ~extra_class:\"size-10\" ())\n
\n (Skeleton.make ~extra_class:\"w-1/2\" ())\n (Skeleton.make ~extra_class:\"w-1/3\" ())\n
\n
\n (Skeleton.make ~extra_class:\"w-full\" ())\n (Skeleton.make ~extra_class:\"w-5/6\" ())\n
") | "slider" => Some("module Slider = struct\n let make ?(min = 0) ?(max = 100) ?(step = 1) ?(disabled = false) ?on_change ~value () =\n let handle ev =\n let n = match int_of_string_opt (Ui.input_value ev) with Some n -> n | None -> 0 in\n Signal.set value n;\n match on_change with Some f -> f ev | None -> ()\n in\n View.element\n ~attrs:\n [\n View.Attr.type_ (View.static \"range\");\n View.Attr.make \"min\" (View.static (string_of_int min));\n View.Attr.make \"max\" (View.static (string_of_int max));\n View.Attr.make \"step\" (View.static (string_of_int step));\n View.Attr.value (View.dynamic (fun () -> string_of_int (Signal.get value)));\n View.Attr.disabled (fun () -> disabled);\n View.Attr.className (View.static \"w-full accent-neutral-900 disabled:opacity-40\");\n ]\n ~events:[ View.On.input handle ]\n \"input\" []\nend\n\nlet slider_example () =\n let value = Signal.make 40 in\n
\n
\n (\"Volume\")\n \n (View.dyn_text (fun () -> string_of_int (Signal.get value)))\n (\"%\")\n \n
\n (Slider.make ~value ())\n
") - | "spinner" => Some("module Spinner = struct\n let make ?(size = \"size-4\") ?(tone = `ink) () =\n let colors =\n match tone with\n | `ink -> \"border-neutral-300 border-t-neutral-900\"\n | `on_accent -> \"border-white/40 border-t-white\"\n in\n \nend\n\nlet spinner_example () =\n
\n (Spinner.make ~size:\"size-4\" ())\n (Spinner.make ~size:\"size-6\" ())\n (Spinner.make ~size:\"size-8\" ())\n (\"Loading\\xe2\\x80\\xa6\")\n
") + | "spinner" => Some("module Spinner = struct\n let make ?(size = \"size-4\") ?(tone = `ink) () =\n let colors =\n match tone with\n | `ink -> \"border-neutral-300 border-t-neutral-900\"\n | `on_accent -> \"border-white/40 border-t-white\"\n in\n \nend\n\nlet spinner_example () =\n
\n (Spinner.make ~size:\"size-4\" ())\n (Spinner.make ~size:\"size-6\" ())\n (Spinner.make ~size:\"size-8\" ())\n ({js|Loading…|js})\n
") | "switch" => Some("module Switch = struct\n let make ?(label = \"\") ?(disabled = false) ~checked () =\n let track () =\n \"relative inline-flex h-6 w-11 items-center rounded-full transition-colors \"\n ^ (if Signal.get checked then \"bg-action\" else \"bg-neutral-300\")\n ^ if disabled then \" opacity-40\" else \"\"\n in\n let knob () =\n \"inline-block size-5 transform rounded-full bg-surface shadow transition-transform \"\n ^ if Signal.get checked then \"translate-x-5\" else \"translate-x-0.5\"\n in\n let aria_checked () = if Signal.get checked then \"true\" else \"false\" in\n let knob_node = View.element ~attrs:[ View.Attr.class_reactive knob ] \"span\" [] in\n let control =\n View.element\n ~attrs:\n [\n View.Attr.type_ (View.static \"button\");\n View.Attr.make \"role\" (View.static \"switch\");\n View.Attr.make \"aria-checked\" (View.dynamic aria_checked);\n View.Attr.disabled (fun () -> disabled);\n View.Attr.class_reactive track;\n ]\n ~events:\n [ View.On.click (fun _ -> if disabled then () else Signal.update checked (fun v -> not v)) ]\n \"button\" [ knob_node ]\n in\n let label_cls = if disabled then \"flex items-center gap-3 cursor-not-allowed\" else \"flex items-center gap-3\" in\n View.element\n ~attrs:[ View.Attr.className (View.static label_cls) ]\n \"label\"\n [\n control;\n (if label = \"\" then View.empty\n else (label));\n ]\nend\n\nlet switch_example () =\n let checked = Signal.make false in\n Switch.make ~checked ~label:\"Airplane mode\" ()") - | "textarea" => Some("module Field = struct\n let make ?(hint = \"\") ~label ~for_ ~children () =\n let label_node =\n View.element\n ~attrs:[ View.Attr.className (View.static Ui.label); View.Attr.make \"for\" (View.static for_) ]\n \"label\"\n [ View.text (View.static label) ]\n in\n let hint_node =\n if hint = \"\" then View.empty\n else

(hint)

\n in\n
\n (label_node)\n (View.fragment children)\n (hint_node)\n
\nend\n\nmodule Textarea = struct\n let make ?(placeholder = \"\") ?(rows = 3) ?(required = false) ?id ?(extra_class = \"\") ?on_input\n ~value () =\n let handle ev =\n Signal.set value (Ui.input_value ev);\n match on_input with Some f -> f ev | None -> ()\n in\n let attrs =\n [\n View.Attr.make \"rows\" (View.static (string_of_int rows));\n View.Attr.placeholder (View.static placeholder);\n View.Attr.className (View.static (Ui.cx (Ui.input_base ^ \" resize-y\") extra_class));\n View.Attr.toggle \"required\" (fun () -> required);\n ]\n in\n let attrs = match id with Some i -> View.Attr.id (View.static i) :: attrs | None -> attrs in\n View.element ~attrs ~events:[ View.On.input handle ] \"textarea\" []\nend\n\nlet textarea_example () =\n let value = Signal.make \"\" in\n
\n (Field.make ~label:\"Message\" ~for_:\"ex-ta\"\n ~children:[ Textarea.make ~id:\"ex-ta\" ~rows:4 ~value ~placeholder:\"Write something\\xe2\\x80\\xa6\" () ]\n ())\n

\n (View.dyn_text (fun () -> string_of_int (String.length (Signal.get value))))\n (\" characters\")\n

\n
") + | "textarea" => Some("module Field = struct\n let make ?(hint = \"\") ~label ~for_ ~children () =\n let label_node =\n View.element\n ~attrs:[ View.Attr.className (View.static Ui.label); View.Attr.make \"for\" (View.static for_) ]\n \"label\"\n [ View.text (View.static label) ]\n in\n let hint_node =\n if hint = \"\" then View.empty\n else

(hint)

\n in\n
\n (label_node)\n (View.fragment children)\n (hint_node)\n
\nend\n\nmodule Textarea = struct\n let make ?(placeholder = \"\") ?(rows = 3) ?(required = false) ?id ?(extra_class = \"\") ?on_input\n ~value () =\n let handle ev =\n Signal.set value (Ui.input_value ev);\n match on_input with Some f -> f ev | None -> ()\n in\n let attrs =\n [\n View.Attr.make \"rows\" (View.static (string_of_int rows));\n View.Attr.placeholder (View.static placeholder);\n View.Attr.className (View.static (Ui.cx (Ui.input_base ^ \" resize-y\") extra_class));\n View.Attr.toggle \"required\" (fun () -> required);\n ]\n in\n let attrs = match id with Some i -> View.Attr.id (View.static i) :: attrs | None -> attrs in\n View.element ~attrs ~events:[ View.On.input handle ] \"textarea\" []\nend\n\nlet textarea_example () =\n let value = Signal.make \"\" in\n
\n (Field.make ~label:\"Message\" ~for_:\"ex-ta\"\n ~children:[ Textarea.make ~id:\"ex-ta\" ~rows:4 ~value ~placeholder:{js|Write something…|js} () ]\n ())\n

\n (View.dyn_text (fun () -> string_of_int (String.length (Signal.get value))))\n (\" characters\")\n

\n
") | "toggle" => Some("module Toggle = struct\n let make ?(disabled = false) ~pressed ~children () =\n let cls () =\n \"inline-flex size-10 items-center justify-center rounded-md text-sm font-semibold transition-colors \"\n ^\n if Signal.get pressed then \"bg-neutral-900 text-neutral-0\"\n else \"border border-neutral-300 bg-surface text-neutral-700 hover:bg-neutral-100\"\n in\n Signal.update pressed (fun v -> not v))>\n (View.fragment children)\n \nend\n\nlet toggle_example () =\n let on = Signal.make true in\n Toggle.make ~pressed:on ~children:[ (\"B\") ] ()") | "toggle-group" => Some("module ToggleGroup = struct\n let make ?(type_ : Contracts.ToggleGroup.type_ = `single) ?(disabled = false) ~value ~options () =\n let toggle id =\n match type_ with\n | `single -> Signal.set value [ id ]\n | `multiple ->\n Signal.update value (fun v ->\n if List.mem id v then List.filter (fun x -> x <> id) v else v @ [ id ])\n in\n let render (id, label) =\n let cls () =\n \"border-l border-neutral-300 px-4 py-2 text-sm transition-colors first:border-l-0 \"\n ^\n if List.mem id (Signal.get value) then \"bg-action text-on-action\"\n else \"bg-surface text-neutral-700 hover:bg-neutral-100\"\n in\n let pressed () = if List.mem id (Signal.get value) then \"true\" else \"false\" in\n View.element\n ~attrs:\n [\n View.Attr.type_ (View.static \"button\");\n View.Attr.make \"aria-pressed\" (View.dynamic pressed);\n View.Attr.class_reactive cls;\n ]\n ~events:[ View.On.click (fun _ -> toggle id) ]\n \"button\"\n [ View.text (View.static label) ]\n in\n let wrap_cls =\n \"inline-flex overflow-hidden rounded-md border border-neutral-300\"\n ^ if disabled then \" pointer-events-none opacity-50\" else \"\"\n in\n View.element\n ~attrs:[ View.Attr.make \"role\" (View.static \"group\"); View.Attr.className (View.static wrap_cls) ]\n \"div\"\n (List.map render options)\nend\n\nlet toggle_group_example () =\n let value = Signal.make [ \"center\" ] in\n let format = Signal.make [ \"bold\" ] in\n let opts = [ (\"left\", \"Left\"); (\"center\", \"Center\"); (\"right\", \"Right\") ] in\n
\n (ToggleGroup.make ~value ~options:opts ())\n (ToggleGroup.make ~type_:`multiple ~value:format\n ~options:[ (\"bold\", \"Bold\"); (\"italic\", \"Italic\"); (\"underline\", \"Underline\") ] ())\n
") - | "accordion" => Some("module Accordion = struct\n let make ?(type_ : Contracts.Accordion.type_ = `single) ?(collapsible = true) ~value ~items () =\n let toggle id =\n Signal.update value (fun cur ->\n let is_open = List.mem id cur in\n match (type_, is_open) with\n | _, true -> if collapsible then List.filter (fun x -> x <> id) cur else cur\n | `single, false -> [ id ]\n | `multiple, false -> cur @ [ id ])\n in\n let render (id, header, panel) =\n let is_open () = List.mem id (Signal.get value) in\n let mark () = if List.mem id (Signal.get value) then \"\\xe2\\x88\\x92\" else \"+\" in\n
\n toggle id)>\n (header)\n (View.dyn_text mark)\n \n (View.show is_open (

(panel)

))\n
\n in\n
\n (View.fragment (List.map render items))\n
\nend\n\nlet accordion_example () =\n let value = Signal.make [ \"what\" ] in\n let items =\n [\n (\"what\", \"What is a spec?\", \"A technology-agnostic definition of a UI pattern, described in words.\");\n (\"framework\", \"Is it tied to a framework?\",\n \"No. Each spec maps onto any stack \\xe2\\x80\\x94 this site happens to use Xote.\");\n (\"contribute\", \"Can I contribute?\",\n \"Yes. Copy the template, fill every section, and open a pull request.\");\n ]\n in\n Accordion.make ~value ~items ()") + | "accordion" => Some("module Accordion = struct\n let make ?(type_ : Contracts.Accordion.type_ = `single) ?(collapsible = true) ~value ~items () =\n let toggle id =\n Signal.update value (fun cur ->\n let is_open = List.mem id cur in\n match (type_, is_open) with\n | _, true -> if collapsible then List.filter (fun x -> x <> id) cur else cur\n | `single, false -> [ id ]\n | `multiple, false -> cur @ [ id ])\n in\n let render (id, header, panel) =\n let is_open () = List.mem id (Signal.get value) in\n let mark () = if List.mem id (Signal.get value) then {js|−|js} else \"+\" in\n
\n toggle id)>\n (header)\n (View.dyn_text mark)\n \n (View.show is_open (

(panel)

))\n
\n in\n
\n (View.fragment (List.map render items))\n
\nend\n\nlet accordion_example () =\n let value = Signal.make [ \"what\" ] in\n let items =\n [\n (\"what\", \"What is a spec?\", \"A technology-agnostic definition of a UI pattern, described in words.\");\n (\"framework\", \"Is it tied to a framework?\",\n {js|No. Each spec maps onto any stack — this site happens to use Xote.|js});\n (\"contribute\", \"Can I contribute?\",\n \"Yes. Copy the template, fill every section, and open a pull request.\");\n ]\n in\n Accordion.make ~value ~items ()") | "alert" => Some("module Icon = struct\n (* Fresh host ids so multiple icons of the same name never collide. *)\n let counter = ref 0\n\n let make ?(size : Contracts.Icon.size = `md) ?(label = \"\") ?(extra_class = \"\") ~name () =\n let dims =\n match size with\n | `xs -> \"size-3\"\n | `sm -> \"size-4\"\n | `md -> \"size-5\"\n | `lg -> \"size-6\"\n | `xl -> \"size-8\"\n in\n let body = match Icons.get name with Some b -> b | None -> [] in\n let meaningful = label <> \"\" in\n (* Meaningful icons expose an img role + accessible name; decorative ones are\n hidden so assistive tech doesn't announce them beside their label. *)\n let role_attrs =\n if meaningful then \"role=\\\"img\\\" aria-label=\\\"\" ^ label ^ \"\\\"\" else \"aria-hidden=\\\"true\\\"\"\n in\n let extra = if extra_class = \"\" then \"\" else \" \" ^ extra_class in\n let markup = Icons.svg ~dims ~extra ~role_attrs body in\n View.dyn (fun () ->\n incr counter;\n let id = \"prescriptive-reativa-icon-\" ^ string_of_int !counter in\n Ui.set_inner_html_by_id id markup;\n View.element ~attrs:[ View.Attr.id (View.static id) ] \"span\" [])\nend\n\nmodule Alert = struct\n let make ?(variant : Contracts.Alert.variant = `info) ?(icon = \"\") ~title ~description () =\n (* A per-variant default glyph, used when no explicit [icon] name is given. *)\n let icon_name =\n if icon = \"\" then\n match variant with\n | `info -> \"info\"\n | `success -> \"check-circle\"\n | `warning -> \"alert-triangle\"\n | `danger -> \"alert-circle\"\n else icon\n in\n let border =\n match variant with\n | `info -> \"border-status-info\"\n | `success -> \"border-status-success\"\n | `warning -> \"border-status-warning\"\n | `danger -> \"border-status-danger\"\n in\n let icon_color =\n match variant with\n | `info -> \"text-status-info\"\n | `success -> \"text-status-success\"\n | `warning -> \"text-status-warning\"\n | `danger -> \"text-status-danger\"\n in\n View.element\n ~attrs:\n [\n View.Attr.make \"role\" (View.static \"alert\");\n View.Attr.className\n (View.static (\"flex gap-3 rounded-lg border bg-surface p-4 text-sm text-ink \" ^ border));\n ]\n \"div\"\n [\n (Icon.make ~name:icon_name ());\n
\n

(title)

\n

(description)

\n
;\n ]\nend\n\nlet alert_example () =\n
\n (Alert.make ~variant:`info ~title:\"Heads up\" ~description:\"Your trial ends in 3 days.\" ())\n (Alert.make ~variant:`success ~title:\"Changes saved\" ~description:\"Your profile has been updated.\" ())\n (Alert.make ~variant:`warning ~title:\"Storage almost full\" ~description:\"You've used 90% of your quota.\" ())\n (Alert.make ~variant:`danger ~title:\"Payment failed\"\n ~description:\"Update your card to keep your subscription active.\" ())\n
") - | "collapsible" => Some("module Spinner = struct\n let make ?(size = \"size-4\") ?(tone = `ink) () =\n let colors =\n match tone with\n | `ink -> \"border-neutral-300 border-t-neutral-900\"\n | `on_accent -> \"border-white/40 border-t-white\"\n in\n \nend\n\nmodule Button = struct\n let make ?(variant : Contracts.Button.variant = `primary) ?(size : Contracts.Button.size = `md)\n ?(type_ : Contracts.Button.type_ = `button) ?(disabled = false) ?(loading = false) ?on_click\n ?(extra_class = \"\") ~children () =\n let type_str = match type_ with `button -> \"button\" | `submit -> \"submit\" | `reset -> \"reset\" in\n let size_cls = match size with `sm -> Ui.btn_sm | `md -> Ui.btn_md | `lg -> Ui.btn_lg in\n let colors =\n match variant with\n | `primary -> Ui.btn_primary_colors\n | `secondary -> Ui.btn_secondary_colors\n | `ghost -> Ui.btn_ghost_colors\n | `destructive -> Ui.btn_destructive_colors\n in\n (* Dark-surface variants need an on-accent spinner; light ones use ink. *)\n let spinner_tone =\n match variant with `primary | `destructive -> `on_accent | `secondary | `ghost -> `ink\n in\n let cls = Ui.cx (Ui.btn_core ^ \" \" ^ size_cls ^ \" \" ^ colors) extra_class in\n let attrs =\n [\n View.Attr.type_ (View.static type_str);\n View.Attr.className (View.static cls);\n View.Attr.disabled (fun () -> disabled || loading);\n ]\n in\n let events = match on_click with Some f -> [ View.On.click f ] | None -> [] in\n let spinner = if loading then Spinner.make ~tone:spinner_tone () else View.empty in\n View.element ~attrs ~events \"button\" [ spinner; View.fragment children ]\nend\n\nmodule Collapsible = struct\n let make ~open_ ~label ~children () =\n let caret () = if Signal.get open_ then \"\\xe2\\x8c\\x83\" else \"\\xe2\\x8c\\x84\" in\n
\n (Button.make ~variant:`secondary ~extra_class:\"w-full justify-between\"\n ~on_click:(fun _ -> Signal.update open_ (fun v -> not v))\n ~children:\n [\n View.text (View.static label);\n View.element\n ~attrs:[ View.Attr.className (View.static \"text-neutral-400\") ]\n \"span\"\n [ View.dyn_text caret ];\n ]\n ())\n (View.show\n (fun () -> Signal.get open_)\n (
\n (View.fragment children)\n
))\n
\nend\n\nlet txt s = View.text (View.static s)\n\nlet collapsible_example () =\n let open_ = Signal.make false in\n Collapsible.make ~open_ ~label:\"Show details\"\n ~children:[ txt \"Secondary content revealed on demand, pushing the layout below it.\" ]\n ()") + | "collapsible" => Some("module Spinner = struct\n let make ?(size = \"size-4\") ?(tone = `ink) () =\n let colors =\n match tone with\n | `ink -> \"border-neutral-300 border-t-neutral-900\"\n | `on_accent -> \"border-white/40 border-t-white\"\n in\n \nend\n\nmodule Button = struct\n let make ?(variant : Contracts.Button.variant = `primary) ?(size : Contracts.Button.size = `md)\n ?(type_ : Contracts.Button.type_ = `button) ?(disabled = false) ?(loading = false) ?on_click\n ?(extra_class = \"\") ~children () =\n let type_str = match type_ with `button -> \"button\" | `submit -> \"submit\" | `reset -> \"reset\" in\n let size_cls = match size with `sm -> Ui.btn_sm | `md -> Ui.btn_md | `lg -> Ui.btn_lg in\n let colors =\n match variant with\n | `primary -> Ui.btn_primary_colors\n | `secondary -> Ui.btn_secondary_colors\n | `ghost -> Ui.btn_ghost_colors\n | `destructive -> Ui.btn_destructive_colors\n in\n (* Dark-surface variants need an on-accent spinner; light ones use ink. *)\n let spinner_tone =\n match variant with `primary | `destructive -> `on_accent | `secondary | `ghost -> `ink\n in\n let cls = Ui.cx (Ui.btn_core ^ \" \" ^ size_cls ^ \" \" ^ colors) extra_class in\n let attrs =\n [\n View.Attr.type_ (View.static type_str);\n View.Attr.className (View.static cls);\n View.Attr.disabled (fun () -> disabled || loading);\n ]\n in\n let events = match on_click with Some f -> [ View.On.click f ] | None -> [] in\n let spinner = if loading then Spinner.make ~tone:spinner_tone () else View.empty in\n View.element ~attrs ~events \"button\" [ spinner; View.fragment children ]\nend\n\nmodule Collapsible = struct\n let make ~open_ ~label ~children () =\n let caret () = if Signal.get open_ then {js|⌃|js} else {js|⌄|js} in\n
\n (Button.make ~variant:`secondary ~extra_class:\"w-full justify-between\"\n ~on_click:(fun _ -> Signal.update open_ (fun v -> not v))\n ~children:\n [\n View.text (View.static label);\n View.element\n ~attrs:[ View.Attr.className (View.static \"text-neutral-400\") ]\n \"span\"\n [ View.dyn_text caret ];\n ]\n ())\n (View.show\n (fun () -> Signal.get open_)\n (
\n (View.fragment children)\n
))\n
\nend\n\nlet txt s = View.text (View.static s)\n\nlet collapsible_example () =\n let open_ = Signal.make false in\n Collapsible.make ~open_ ~label:\"Show details\"\n ~children:[ txt \"Secondary content revealed on demand, pushing the layout below it.\" ]\n ()") | "dialog" => Some("module Spinner = struct\n let make ?(size = \"size-4\") ?(tone = `ink) () =\n let colors =\n match tone with\n | `ink -> \"border-neutral-300 border-t-neutral-900\"\n | `on_accent -> \"border-white/40 border-t-white\"\n in\n \nend\n\nmodule Button = struct\n let make ?(variant : Contracts.Button.variant = `primary) ?(size : Contracts.Button.size = `md)\n ?(type_ : Contracts.Button.type_ = `button) ?(disabled = false) ?(loading = false) ?on_click\n ?(extra_class = \"\") ~children () =\n let type_str = match type_ with `button -> \"button\" | `submit -> \"submit\" | `reset -> \"reset\" in\n let size_cls = match size with `sm -> Ui.btn_sm | `md -> Ui.btn_md | `lg -> Ui.btn_lg in\n let colors =\n match variant with\n | `primary -> Ui.btn_primary_colors\n | `secondary -> Ui.btn_secondary_colors\n | `ghost -> Ui.btn_ghost_colors\n | `destructive -> Ui.btn_destructive_colors\n in\n (* Dark-surface variants need an on-accent spinner; light ones use ink. *)\n let spinner_tone =\n match variant with `primary | `destructive -> `on_accent | `secondary | `ghost -> `ink\n in\n let cls = Ui.cx (Ui.btn_core ^ \" \" ^ size_cls ^ \" \" ^ colors) extra_class in\n let attrs =\n [\n View.Attr.type_ (View.static type_str);\n View.Attr.className (View.static cls);\n View.Attr.disabled (fun () -> disabled || loading);\n ]\n in\n let events = match on_click with Some f -> [ View.On.click f ] | None -> [] in\n let spinner = if loading then Spinner.make ~tone:spinner_tone () else View.empty in\n View.element ~attrs ~events \"button\" [ spinner; View.fragment children ]\nend\n\nmodule Dialog = struct\n let make ?(description = \"\") ~open_ ~title ~children () =\n View.show\n (fun () -> Signal.get open_)\n (
\n
Signal.set open_ false) />\n (View.element\n ~attrs:\n [\n View.Attr.make \"role\" (View.static \"dialog\");\n View.Attr.className\n (View.static\n \"relative z-20 w-80 rounded-lg border border-neutral-200 bg-surface p-5 shadow-2xl\");\n ]\n \"div\"\n [\n

(title)

;\n (if description = \"\" then View.empty\n else

(description)

);\n View.fragment children;\n ])\n
)\nend\n\nmodule Field = struct\n let make ?(hint = \"\") ~label ~for_ ~children () =\n let label_node =\n View.element\n ~attrs:[ View.Attr.className (View.static Ui.label); View.Attr.make \"for\" (View.static for_) ]\n \"label\"\n [ View.text (View.static label) ]\n in\n let hint_node =\n if hint = \"\" then View.empty\n else

(hint)

\n in\n
\n (label_node)\n (View.fragment children)\n (hint_node)\n
\nend\n\nmodule Input = struct\n let make ?(type_ = \"text\") ?id ?(placeholder = \"\") ?value ?(required = false) ?on_input\n ?(extra_class = \"\") () =\n let attrs =\n [\n View.Attr.type_ (View.static type_);\n View.Attr.placeholder (View.static placeholder);\n View.Attr.className (View.static (Ui.cx Ui.input_base extra_class));\n View.Attr.toggle \"required\" (fun () -> required);\n ]\n in\n let attrs = match id with Some i -> View.Attr.id (View.static i) :: attrs | None -> attrs in\n let attrs = match value with Some v -> View.Attr.value (View.static v) :: attrs | None -> attrs in\n let events = match on_input with Some f -> [ View.On.input f ] | None -> [] in\n View.element ~attrs ~events \"input\" []\nend\n\nlet txt s = View.text (View.static s)\n\nlet dialog_example () =\n let open_ = Signal.make false in\n
\n (Button.make ~variant:`primary\n ~on_click:(fun _ -> Signal.set open_ true)\n ~children:[ txt \"Edit profile\" ] ())\n (Dialog.make ~open_ ~title:\"Edit profile\" ~description:\"Make changes and save when you're done.\"\n ~children:\n [\n
\n (Field.make ~label:\"Name\" ~for_:\"dlg-name\"\n ~children:[ Input.make ~id:\"dlg-name\" ~value:\"Ada Lovelace\" () ] ())\n
;\n
\n (Button.make ~variant:`secondary\n ~on_click:(fun _ -> Signal.set open_ false)\n ~children:[ txt \"Cancel\" ] ())\n (Button.make ~variant:`primary\n ~on_click:(fun _ -> Signal.set open_ false)\n ~children:[ txt \"Save\" ] ())\n
;\n ]\n ())\n
") | "field" => Some("module Field = struct\n let make ?(hint = \"\") ~label ~for_ ~children () =\n let label_node =\n View.element\n ~attrs:[ View.Attr.className (View.static Ui.label); View.Attr.make \"for\" (View.static for_) ]\n \"label\"\n [ View.text (View.static label) ]\n in\n let hint_node =\n if hint = \"\" then View.empty\n else

(hint)

\n in\n
\n (label_node)\n (View.fragment children)\n (hint_node)\n
\nend\n\nlet field_example () =\n let value = Signal.make \"nope\" in\n let invalid () = not (String.contains (Signal.get value) '@') in\n let cls () =\n Ui.input_base ^ (if invalid () then \" border-neutral-900 ring-1 ring-neutral-900\" else \"\")\n in\n
\n (Field.make ~label:\"Work email\" ~for_:\"fld-email\"\n ~children:\n [\n View.element\n ~attrs:\n [\n View.Attr.id (View.static \"fld-email\");\n View.Attr.value (View.static \"nope\");\n View.Attr.class_reactive cls;\n ]\n ~events:[ View.On.input (fun e -> Signal.set value (Ui.input_value e)) ]\n \"input\" [];\n View.show\n ~fallback:(

(\"We'll only use this to contact you.\")

)\n (fun () -> invalid ())\n (

(\"Enter a valid email address.\")

);\n ]\n ())\n
") - | "select" => Some("module Backdrop = struct\n let make ~on_close () =\n
on_close ()) />\nend\n\nmodule Select = struct\n let make ?(disabled = false) ~value ~options () =\n let open_ = Signal.make false in\n let label () = Signal.get value in\n let option_row o =\n let mark () = if Signal.get value = o then \"\\xe2\\x9c\\x93\" else \"\" in\n View.element ~attrs:[] \"li\"\n [\n View.element\n ~attrs:\n [\n View.Attr.make \"role\" (View.static \"option\");\n View.Attr.className\n (View.static\n \"flex w-full items-center justify-between px-3 py-1.5 text-left text-sm text-neutral-700 hover:bg-neutral-100\");\n ]\n ~events:[ View.On.click (fun _ -> Signal.set value o; Signal.set open_ false) ]\n \"button\"\n [\n View.text (View.static o);\n View.element\n ~attrs:[ View.Attr.className (View.static \"text-neutral-900\") ]\n \"span\"\n [ View.dyn_text mark ];\n ];\n ]\n in\n
\n (View.element\n ~attrs:\n [\n View.Attr.disabled (fun () -> disabled);\n View.Attr.className\n (View.static (Ui.input_base ^ \" flex items-center justify-between disabled:opacity-40\"));\n ]\n ~events:[ View.On.click (fun _ -> Signal.update open_ (fun v -> not v)) ]\n \"button\"\n [ View.dyn_text label; (\"\\xe2\\x8c\\x84\") ])\n (View.show\n (fun () -> Signal.get open_)\n (View.fragment\n [\n Backdrop.make ~on_close:(fun () -> Signal.set open_ false) ();\n View.element\n ~attrs:\n [\n View.Attr.make \"role\" (View.static \"listbox\");\n View.Attr.className\n (View.static\n \"absolute z-20 mt-1 w-full rounded-md border border-neutral-200 bg-surface py-1 shadow-lg\");\n ]\n \"ul\"\n (List.map option_row options);\n ]))\n
\nend\n\nlet select_example () =\n let value = Signal.make \"Medium\" in\n Select.make ~value ~options:[ \"Small\"; \"Medium\"; \"Large\"; \"Extra large\" ] ()") + | "select" => Some("module Backdrop = struct\n let make ~on_close () =\n
on_close ()) />\nend\n\nmodule Select = struct\n let make ?(disabled = false) ~value ~options () =\n let open_ = Signal.make false in\n let label () = Signal.get value in\n let option_row o =\n let mark () = if Signal.get value = o then {js|✓|js} else \"\" in\n View.element ~attrs:[] \"li\"\n [\n View.element\n ~attrs:\n [\n View.Attr.make \"role\" (View.static \"option\");\n View.Attr.className\n (View.static\n \"flex w-full items-center justify-between px-3 py-1.5 text-left text-sm text-neutral-700 hover:bg-neutral-100\");\n ]\n ~events:[ View.On.click (fun _ -> Signal.set value o; Signal.set open_ false) ]\n \"button\"\n [\n View.text (View.static o);\n View.element\n ~attrs:[ View.Attr.className (View.static \"text-neutral-900\") ]\n \"span\"\n [ View.dyn_text mark ];\n ];\n ]\n in\n
\n (View.element\n ~attrs:\n [\n View.Attr.disabled (fun () -> disabled);\n View.Attr.className\n (View.static (Ui.input_base ^ \" flex items-center justify-between disabled:opacity-40\"));\n ]\n ~events:[ View.On.click (fun _ -> Signal.update open_ (fun v -> not v)) ]\n \"button\"\n [ View.dyn_text label; ({js|⌄|js}) ])\n (View.show\n (fun () -> Signal.get open_)\n (View.fragment\n [\n Backdrop.make ~on_close:(fun () -> Signal.set open_ false) ();\n View.element\n ~attrs:\n [\n View.Attr.make \"role\" (View.static \"listbox\");\n View.Attr.className\n (View.static\n \"absolute z-20 mt-1 w-full rounded-md border border-neutral-200 bg-surface py-1 shadow-lg\");\n ]\n \"ul\"\n (List.map option_row options);\n ]))\n
\nend\n\nlet select_example () =\n let value = Signal.make \"Medium\" in\n Select.make ~value ~options:[ \"Small\"; \"Medium\"; \"Large\"; \"Extra large\" ] ()") | "tabs" => Some("module Tabs = struct\n let make ?(orientation : Contracts.Tabs.orientation = `horizontal) ~value ~tabs () =\n let list_cls =\n match orientation with\n | `horizontal -> \"flex gap-1 border-b border-neutral-200\"\n | `vertical -> \"flex flex-col gap-1 border-r border-neutral-200\"\n in\n let render (id, label) =\n let cls () =\n let active = Signal.get value = id in\n \"-mb-px border-b-2 px-4 py-2 text-sm font-medium transition-colors \"\n ^\n if active then \"border-neutral-900 text-neutral-900\"\n else \"border-transparent text-neutral-500 hover:text-neutral-800\"\n in\n View.element\n ~attrs:[ View.Attr.make \"role\" (View.static \"tab\"); View.Attr.class_reactive cls ]\n ~events:[ View.On.click (fun _ -> Signal.set value id) ]\n \"button\"\n [ View.text (View.static label) ]\n in\n View.element\n ~attrs:\n [ View.Attr.make \"role\" (View.static \"tablist\"); View.Attr.className (View.static list_cls) ]\n \"div\"\n (List.map render tabs)\nend\n\nlet tabs_example () =\n let value = Signal.make \"account\" in\n let content () =\n match Signal.get value with\n | \"account\" -> \"Manage your account details and profile information.\"\n | \"password\" -> \"Change your password and configure two-factor authentication.\"\n | _ -> \"Invite teammates and manage their roles and access.\"\n in\n
\n (Tabs.make ~value ~tabs:[ (\"account\", \"Account\"); (\"password\", \"Password\"); (\"team\", \"Team\") ] ())\n

(View.dyn_text content)

\n
") | "tooltip" => Some("module Tooltip = struct\n let make ~content ~children () =\n let open_ = Signal.make false in\n View.element\n ~attrs:[ View.Attr.className (View.static \"relative inline-block\") ]\n ~events:\n [\n View.On.on \"mouseenter\" (fun _ -> Signal.set open_ true);\n View.On.on \"mouseleave\" (fun _ -> Signal.set open_ false);\n View.On.on \"focusin\" (fun _ -> Signal.set open_ true);\n View.On.on \"focusout\" (fun _ -> Signal.set open_ false);\n ]\n \"span\"\n [\n View.fragment children;\n View.show\n (fun () -> Signal.get open_)\n (View.element\n ~attrs:\n [\n View.Attr.make \"role\" (View.static \"tooltip\");\n View.Attr.className\n (View.static\n \"absolute -top-9 left-1/2 -translate-x-1/2 whitespace-nowrap rounded-md \\\n bg-neutral-900 px-2 py-1 text-xs text-neutral-0\");\n ]\n \"span\"\n [ View.text (View.static content) ]);\n ]\nend\n\nmodule Spinner = struct\n let make ?(size = \"size-4\") ?(tone = `ink) () =\n let colors =\n match tone with\n | `ink -> \"border-neutral-300 border-t-neutral-900\"\n | `on_accent -> \"border-white/40 border-t-white\"\n in\n \nend\n\nmodule Button = struct\n let make ?(variant : Contracts.Button.variant = `primary) ?(size : Contracts.Button.size = `md)\n ?(type_ : Contracts.Button.type_ = `button) ?(disabled = false) ?(loading = false) ?on_click\n ?(extra_class = \"\") ~children () =\n let type_str = match type_ with `button -> \"button\" | `submit -> \"submit\" | `reset -> \"reset\" in\n let size_cls = match size with `sm -> Ui.btn_sm | `md -> Ui.btn_md | `lg -> Ui.btn_lg in\n let colors =\n match variant with\n | `primary -> Ui.btn_primary_colors\n | `secondary -> Ui.btn_secondary_colors\n | `ghost -> Ui.btn_ghost_colors\n | `destructive -> Ui.btn_destructive_colors\n in\n (* Dark-surface variants need an on-accent spinner; light ones use ink. *)\n let spinner_tone =\n match variant with `primary | `destructive -> `on_accent | `secondary | `ghost -> `ink\n in\n let cls = Ui.cx (Ui.btn_core ^ \" \" ^ size_cls ^ \" \" ^ colors) extra_class in\n let attrs =\n [\n View.Attr.type_ (View.static type_str);\n View.Attr.className (View.static cls);\n View.Attr.disabled (fun () -> disabled || loading);\n ]\n in\n let events = match on_click with Some f -> [ View.On.click f ] | None -> [] in\n let spinner = if loading then Spinner.make ~tone:spinner_tone () else View.empty in\n View.element ~attrs ~events \"button\" [ spinner; View.fragment children ]\nend\n\nlet txt s = View.text (View.static s)\n\nlet tooltip_example () =\n
\n (Tooltip.make ~content:\"Add to library\"\n ~children:[ Button.make ~variant:`secondary ~children:[ txt \"Hover me\" ] () ] ())\n
") | "label" => Some("module Input = struct\n let make ?(type_ = \"text\") ?id ?(placeholder = \"\") ?value ?(required = false) ?on_input\n ?(extra_class = \"\") () =\n let attrs =\n [\n View.Attr.type_ (View.static type_);\n View.Attr.placeholder (View.static placeholder);\n View.Attr.className (View.static (Ui.cx Ui.input_base extra_class));\n View.Attr.toggle \"required\" (fun () -> required);\n ]\n in\n let attrs = match id with Some i -> View.Attr.id (View.static i) :: attrs | None -> attrs in\n let attrs = match value with Some v -> View.Attr.value (View.static v) :: attrs | None -> attrs in\n let events = match on_input with Some f -> [ View.On.input f ] | None -> [] in\n View.element ~attrs ~events \"input\" []\nend\n\nlet txt s = View.text (View.static s)\n\nlet el ?(cls = \"\") ?(attrs = []) ?(events = []) tag children =\n let attrs = if cls = \"\" then attrs else View.Attr.className (View.static cls) :: attrs in\n View.element ~attrs ~events tag children\n\nlet label_example () =\n el ~cls:\"max-w-sm space-y-1\" \"div\"\n [\n el ~cls:Ui.label ~attrs:[ View.Attr.make \"for\" (View.static \"ex-label\") ] \"label\"\n [ txt \"Full name \"; el ~cls:\"text-neutral-400\" \"span\" [ txt \"(required)\" ] ];\n Input.make ~id:\"ex-label\" ~placeholder:\"Ada Lovelace\" ();\n ]") @@ -48,19 +48,51 @@ let get = (id: string): option => | "list" => Some("module Avatar = struct\n let make ?(size = \"size-10 text-sm\") ~initials () =\n \n (initials)\n \nend\n\nmodule Badge = struct\n let make ?(variant : Contracts.Badge.variant = `solid) ~children () =\n let tone =\n match variant with\n | `solid -> \"bg-neutral-900 text-neutral-0\"\n | `soft -> \"bg-neutral-200 text-neutral-800\"\n | `outline -> \"border border-neutral-300 text-neutral-700\"\n in\n \n (View.fragment children)\n \nend\n\nmodule IconButton = struct\n let make ?(variant : Contracts.IconButton.variant = `ghost) ?on_click ~label ~children () =\n let tone =\n match variant with\n | `solid -> \"bg-action text-on-action hover:bg-action-hover\"\n | `ghost -> \"text-ink hover:bg-action-subtle\"\n in\n let attrs =\n [\n View.Attr.type_ (View.static \"button\");\n View.Attr.make \"aria-label\" (View.static label);\n View.Attr.className\n (View.static\n (\"inline-flex size-9 items-center justify-center rounded-md text-sm transition-colors \\\n focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-action \\\n focus-visible:ring-offset-2 \" ^ tone));\n ]\n in\n let events = match on_click with Some f -> [ View.On.click f ] | None -> [] in\n View.element ~attrs ~events \"button\" [ View.fragment children ]\nend\n\nmodule Icon = struct\n (* Fresh host ids so multiple icons of the same name never collide. *)\n let counter = ref 0\n\n let make ?(size : Contracts.Icon.size = `md) ?(label = \"\") ?(extra_class = \"\") ~name () =\n let dims =\n match size with\n | `xs -> \"size-3\"\n | `sm -> \"size-4\"\n | `md -> \"size-5\"\n | `lg -> \"size-6\"\n | `xl -> \"size-8\"\n in\n let body = match Icons.get name with Some b -> b | None -> [] in\n let meaningful = label <> \"\" in\n (* Meaningful icons expose an img role + accessible name; decorative ones are\n hidden so assistive tech doesn't announce them beside their label. *)\n let role_attrs =\n if meaningful then \"role=\\\"img\\\" aria-label=\\\"\" ^ label ^ \"\\\"\" else \"aria-hidden=\\\"true\\\"\"\n in\n let extra = if extra_class = \"\" then \"\" else \" \" ^ extra_class in\n let markup = Icons.svg ~dims ~extra ~role_attrs body in\n View.dyn (fun () ->\n incr counter;\n let id = \"prescriptive-reativa-icon-\" ^ string_of_int !counter in\n Ui.set_inner_html_by_id id markup;\n View.element ~attrs:[ View.Attr.id (View.static id) ] \"span\" [])\nend\n\nlet txt s = View.text (View.static s)\n\nlet el ?(cls = \"\") ?(attrs = []) ?(events = []) tag children =\n let attrs = if cls = \"\" then attrs else View.Attr.className (View.static cls) :: attrs in\n View.element ~attrs ~events tag children\n\nlet list_example () =\n let people =\n [\n (\"Ada Lovelace\", \"@ada\", \"Owner\", \"AL\");\n (\"Grace Hopper\", \"@grace\", \"Admin\", \"GH\");\n (\"Alan Turing\", \"@alan\", \"Member\", \"AT\");\n ]\n in\n el ~cls:\"w-80 divide-y divide-neutral-100 rounded-lg border border-neutral-200 bg-surface\" \"div\"\n (List.map\n (fun (name, handle, role, initials) ->\n el ~cls:\"flex items-center gap-3 px-4 py-3\" \"div\"\n [\n Avatar.make ~initials ~size:\"size-9 text-xs\" ();\n el ~cls:\"min-w-0 flex-1\" \"div\"\n [\n el ~cls:\"truncate text-sm font-medium text-neutral-900\" \"p\" [ txt name ];\n el ~cls:\"text-xs text-neutral-500\" \"p\" [ txt handle ];\n ];\n Badge.make ~variant:`soft ~children:[ txt role ] ();\n IconButton.make ~label:\"More\" ~children:[ Icon.make ~name:\"more-horizontal\" () ] ();\n ])\n people)") | "pagination" => Some("module Icon = struct\n (* Fresh host ids so multiple icons of the same name never collide. *)\n let counter = ref 0\n\n let make ?(size : Contracts.Icon.size = `md) ?(label = \"\") ?(extra_class = \"\") ~name () =\n let dims =\n match size with\n | `xs -> \"size-3\"\n | `sm -> \"size-4\"\n | `md -> \"size-5\"\n | `lg -> \"size-6\"\n | `xl -> \"size-8\"\n in\n let body = match Icons.get name with Some b -> b | None -> [] in\n let meaningful = label <> \"\" in\n (* Meaningful icons expose an img role + accessible name; decorative ones are\n hidden so assistive tech doesn't announce them beside their label. *)\n let role_attrs =\n if meaningful then \"role=\\\"img\\\" aria-label=\\\"\" ^ label ^ \"\\\"\" else \"aria-hidden=\\\"true\\\"\"\n in\n let extra = if extra_class = \"\" then \"\" else \" \" ^ extra_class in\n let markup = Icons.svg ~dims ~extra ~role_attrs body in\n View.dyn (fun () ->\n incr counter;\n let id = \"prescriptive-reativa-icon-\" ^ string_of_int !counter in\n Ui.set_inner_html_by_id id markup;\n View.element ~attrs:[ View.Attr.id (View.static id) ] \"span\" [])\nend\n\nlet txt s = View.text (View.static s)\n\nlet el ?(cls = \"\") ?(attrs = []) ?(events = []) tag children =\n let attrs = if cls = \"\" then attrs else View.Attr.className (View.static cls) :: attrs in\n View.element ~attrs ~events tag children\n\nlet pagination_example () =\n let page = Signal.make 2 in\n let nav_btn =\n \"inline-flex size-9 items-center justify-center rounded-md text-sm transition-colors\"\n in\n let arrow name step =\n View.element\n ~attrs:\n [\n View.Attr.className\n (View.static (nav_btn ^ \" border border-neutral-300 text-neutral-700 hover:bg-neutral-100\"));\n ]\n ~events:[ View.On.click (fun _ -> Signal.update page step) ]\n \"button\"\n [ Icon.make ~name ~size:`sm () ]\n in\n let page_btn p =\n let cls () =\n nav_btn\n ^\n if Signal.get page = p then \" bg-neutral-900 text-neutral-0\"\n else \" text-neutral-700 hover:bg-neutral-100\"\n in\n View.element\n ~attrs:[ View.Attr.class_reactive cls ]\n ~events:[ View.On.click (fun _ -> Signal.set page p) ]\n \"button\"\n [ txt (string_of_int p) ]\n in\n el ~cls:\"flex items-center gap-1\" \"div\"\n (arrow \"chevron-left\" (fun p -> if p > 1 then p - 1 else 1)\n :: List.map page_btn [ 1; 2; 3; 4; 5 ]\n @ [ arrow \"chevron-right\" (fun p -> if p < 5 then p + 1 else 5) ])") | "toolbar" => Some("module IconButton = struct\n let make ?(variant : Contracts.IconButton.variant = `ghost) ?on_click ~label ~children () =\n let tone =\n match variant with\n | `solid -> \"bg-action text-on-action hover:bg-action-hover\"\n | `ghost -> \"text-ink hover:bg-action-subtle\"\n in\n let attrs =\n [\n View.Attr.type_ (View.static \"button\");\n View.Attr.make \"aria-label\" (View.static label);\n View.Attr.className\n (View.static\n (\"inline-flex size-9 items-center justify-center rounded-md text-sm transition-colors \\\n focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-action \\\n focus-visible:ring-offset-2 \" ^ tone));\n ]\n in\n let events = match on_click with Some f -> [ View.On.click f ] | None -> [] in\n View.element ~attrs ~events \"button\" [ View.fragment children ]\nend\n\nmodule Separator = struct\n let make ?(orientation : Contracts.Separator.orientation = `horizontal) ?(extra_class = \"\") () =\n let base =\n match orientation with\n | `horizontal -> \"h-px w-full bg-neutral-200\"\n | `vertical -> \"h-4 w-px bg-neutral-200\"\n in\n View.element\n ~attrs:\n [\n View.Attr.className (View.static (Ui.cx base extra_class));\n View.Attr.make \"role\" (View.static \"separator\");\n ]\n \"div\" []\nend\n\nmodule Icon = struct\n (* Fresh host ids so multiple icons of the same name never collide. *)\n let counter = ref 0\n\n let make ?(size : Contracts.Icon.size = `md) ?(label = \"\") ?(extra_class = \"\") ~name () =\n let dims =\n match size with\n | `xs -> \"size-3\"\n | `sm -> \"size-4\"\n | `md -> \"size-5\"\n | `lg -> \"size-6\"\n | `xl -> \"size-8\"\n in\n let body = match Icons.get name with Some b -> b | None -> [] in\n let meaningful = label <> \"\" in\n (* Meaningful icons expose an img role + accessible name; decorative ones are\n hidden so assistive tech doesn't announce them beside their label. *)\n let role_attrs =\n if meaningful then \"role=\\\"img\\\" aria-label=\\\"\" ^ label ^ \"\\\"\" else \"aria-hidden=\\\"true\\\"\"\n in\n let extra = if extra_class = \"\" then \"\" else \" \" ^ extra_class in\n let markup = Icons.svg ~dims ~extra ~role_attrs body in\n View.dyn (fun () ->\n incr counter;\n let id = \"prescriptive-reativa-icon-\" ^ string_of_int !counter in\n Ui.set_inner_html_by_id id markup;\n View.element ~attrs:[ View.Attr.id (View.static id) ] \"span\" [])\nend\n\nmodule Spinner = struct\n let make ?(size = \"size-4\") ?(tone = `ink) () =\n let colors =\n match tone with\n | `ink -> \"border-neutral-300 border-t-neutral-900\"\n | `on_accent -> \"border-white/40 border-t-white\"\n in\n \nend\n\nmodule Button = struct\n let make ?(variant : Contracts.Button.variant = `primary) ?(size : Contracts.Button.size = `md)\n ?(type_ : Contracts.Button.type_ = `button) ?(disabled = false) ?(loading = false) ?on_click\n ?(extra_class = \"\") ~children () =\n let type_str = match type_ with `button -> \"button\" | `submit -> \"submit\" | `reset -> \"reset\" in\n let size_cls = match size with `sm -> Ui.btn_sm | `md -> Ui.btn_md | `lg -> Ui.btn_lg in\n let colors =\n match variant with\n | `primary -> Ui.btn_primary_colors\n | `secondary -> Ui.btn_secondary_colors\n | `ghost -> Ui.btn_ghost_colors\n | `destructive -> Ui.btn_destructive_colors\n in\n (* Dark-surface variants need an on-accent spinner; light ones use ink. *)\n let spinner_tone =\n match variant with `primary | `destructive -> `on_accent | `secondary | `ghost -> `ink\n in\n let cls = Ui.cx (Ui.btn_core ^ \" \" ^ size_cls ^ \" \" ^ colors) extra_class in\n let attrs =\n [\n View.Attr.type_ (View.static type_str);\n View.Attr.className (View.static cls);\n View.Attr.disabled (fun () -> disabled || loading);\n ]\n in\n let events = match on_click with Some f -> [ View.On.click f ] | None -> [] in\n let spinner = if loading then Spinner.make ~tone:spinner_tone () else View.empty in\n View.element ~attrs ~events \"button\" [ spinner; View.fragment children ]\nend\n\nlet txt s = View.text (View.static s)\n\nlet el ?(cls = \"\") ?(attrs = []) ?(events = []) tag children =\n let attrs = if cls = \"\" then attrs else View.Attr.className (View.static cls) :: attrs in\n View.element ~attrs ~events tag children\n\nlet toolbar_example () =\n el ~cls:\"flex w-full max-w-xl items-center gap-1 rounded-lg border border-neutral-200 bg-surface p-1\"\n \"div\"\n [\n IconButton.make ~label:\"Bold\" ~children:[ el ~cls:\"font-bold\" \"span\" [ txt \"B\" ] ] ();\n IconButton.make ~label:\"Italic\" ~children:[ el ~cls:\"italic\" \"span\" [ txt \"I\" ] ] ();\n IconButton.make ~label:\"Underline\" ~children:[ el ~cls:\"underline\" \"span\" [ txt \"U\" ] ] ();\n Separator.make ~orientation:`vertical ~extra_class:\"mx-1\" ();\n IconButton.make ~label:\"Align left\" ~children:[ Icon.make ~name:\"align-left\" () ] ();\n IconButton.make ~label:\"Align center\" ~children:[ Icon.make ~name:\"align-center\" () ] ();\n IconButton.make ~label:\"Align right\" ~children:[ Icon.make ~name:\"align-right\" () ] ();\n el ~cls:\"ml-auto\" \"div\"\n [ Button.make ~variant:`primary ~children:[ txt \"Share\" ] () ];\n ]") - | "footer" => Some("module Link = struct\n let make ?(href = \"#\") ?(variant : Contracts.Link.variant = `default) ?(new_tab = false)\n ?(extra_class = \"\") ~children () =\n let base =\n match variant with\n | `default ->\n \"text-neutral-900 underline decoration-neutral-300 underline-offset-4 hover:decoration-neutral-900\"\n | `muted -> \"text-neutral-500 transition-colors hover:text-neutral-900\"\n in\n let attrs =\n [\n View.Attr.href (View.static href);\n View.Attr.className (View.static (Ui.cx base extra_class));\n ]\n in\n let attrs =\n if new_tab then View.Attr.make \"target\" (View.static \"_blank\") :: attrs else attrs\n in\n View.element ~attrs \"a\" [ View.fragment children ]\nend\n\nmodule Separator = struct\n let make ?(orientation : Contracts.Separator.orientation = `horizontal) ?(extra_class = \"\") () =\n let base =\n match orientation with\n | `horizontal -> \"h-px w-full bg-neutral-200\"\n | `vertical -> \"h-4 w-px bg-neutral-200\"\n in\n View.element\n ~attrs:\n [\n View.Attr.className (View.static (Ui.cx base extra_class));\n View.Attr.make \"role\" (View.static \"separator\");\n ]\n \"div\" []\nend\n\nmodule Link_ = Link\n\nlet txt s = View.text (View.static s)\n\nlet el ?(cls = \"\") ?(attrs = []) ?(events = []) tag children =\n let attrs = if cls = \"\" then attrs else View.Attr.className (View.static cls) :: attrs in\n View.element ~attrs ~events tag children\n\nlet footer_example () =\n let col title items =\n el ~cls:\"space-y-2\" \"div\"\n (el ~cls:\"text-xs font-semibold uppercase tracking-wide text-neutral-500\" \"p\" [ txt title ]\n :: List.map\n (fun i ->\n el \"p\"\n [ Link_.make ~href:\"#\" ~variant:`muted ~extra_class:\"text-sm\" ~children:[ txt i ] () ])\n items)\n in\n el ~cls:\"w-full max-w-2xl rounded-lg border border-neutral-200 bg-surface p-6\" \"div\"\n [\n el ~cls:\"grid grid-cols-3 gap-6\" \"div\"\n [\n col \"Product\" [ \"Features\"; \"Pricing\"; \"Changelog\" ];\n col \"Company\" [ \"About\"; \"Blog\"; \"Careers\" ];\n col \"Legal\" [ \"Privacy\"; \"Terms\" ];\n ];\n Separator.make ~extra_class:\"my-5\" ();\n el ~cls:\"flex items-center justify-between text-xs text-neutral-500\" \"div\"\n [\n txt \"\\xc2\\xa9 2026 Acme, Inc.\";\n el ~cls:\"flex gap-3\" \"div\"\n [\n Link_.make ~href:\"#\" ~variant:`muted ~children:[ txt \"Twitter\" ] ();\n Link_.make ~href:\"#\" ~variant:`muted ~children:[ txt \"GitHub\" ] ();\n ];\n ];\n ]") - | "hero" => Some("module Badge = struct\n let make ?(variant : Contracts.Badge.variant = `solid) ~children () =\n let tone =\n match variant with\n | `solid -> \"bg-neutral-900 text-neutral-0\"\n | `soft -> \"bg-neutral-200 text-neutral-800\"\n | `outline -> \"border border-neutral-300 text-neutral-700\"\n in\n \n (View.fragment children)\n \nend\n\nmodule Spinner = struct\n let make ?(size = \"size-4\") ?(tone = `ink) () =\n let colors =\n match tone with\n | `ink -> \"border-neutral-300 border-t-neutral-900\"\n | `on_accent -> \"border-white/40 border-t-white\"\n in\n \nend\n\nmodule Button = struct\n let make ?(variant : Contracts.Button.variant = `primary) ?(size : Contracts.Button.size = `md)\n ?(type_ : Contracts.Button.type_ = `button) ?(disabled = false) ?(loading = false) ?on_click\n ?(extra_class = \"\") ~children () =\n let type_str = match type_ with `button -> \"button\" | `submit -> \"submit\" | `reset -> \"reset\" in\n let size_cls = match size with `sm -> Ui.btn_sm | `md -> Ui.btn_md | `lg -> Ui.btn_lg in\n let colors =\n match variant with\n | `primary -> Ui.btn_primary_colors\n | `secondary -> Ui.btn_secondary_colors\n | `ghost -> Ui.btn_ghost_colors\n | `destructive -> Ui.btn_destructive_colors\n in\n (* Dark-surface variants need an on-accent spinner; light ones use ink. *)\n let spinner_tone =\n match variant with `primary | `destructive -> `on_accent | `secondary | `ghost -> `ink\n in\n let cls = Ui.cx (Ui.btn_core ^ \" \" ^ size_cls ^ \" \" ^ colors) extra_class in\n let attrs =\n [\n View.Attr.type_ (View.static type_str);\n View.Attr.className (View.static cls);\n View.Attr.disabled (fun () -> disabled || loading);\n ]\n in\n let events = match on_click with Some f -> [ View.On.click f ] | None -> [] in\n let spinner = if loading then Spinner.make ~tone:spinner_tone () else View.empty in\n View.element ~attrs ~events \"button\" [ spinner; View.fragment children ]\nend\n\nlet txt s = View.text (View.static s)\n\nlet el ?(cls = \"\") ?(attrs = []) ?(events = []) tag children =\n let attrs = if cls = \"\" then attrs else View.Attr.className (View.static cls) :: attrs in\n View.element ~attrs ~events tag children\n\nlet hero_example () =\n el ~cls:\"w-full max-w-2xl rounded-lg border border-neutral-200 bg-surface px-8 py-12 text-center\"\n \"div\"\n [\n Badge.make ~variant:`outline ~children:[ txt \"New \\xc2\\xb7 v2 is here\" ] ();\n el ~cls:\"mx-auto mt-4 max-w-lg text-4xl font-bold tracking-tight text-neutral-900\" \"h2\"\n [ txt \"Ship your product faster\" ];\n el ~cls:\"mx-auto mt-3 max-w-md text-neutral-600\" \"p\"\n [ txt \"The all-in-one toolkit to design, build, and launch \\xe2\\x80\\x94 without the busywork.\" ];\n el ~cls:\"mt-6 flex justify-center gap-3\" \"div\"\n [\n Button.make ~variant:`primary ~children:[ txt \"Get started\" ] ();\n Button.make ~variant:`secondary ~children:[ txt \"Book a demo\" ] ();\n ];\n el ~cls:\"mt-4 text-xs text-neutral-400\" \"p\"\n [ txt \"Trusted by 4,000+ teams \\xc2\\xb7 No credit card required\" ];\n ]") + | "footer" => Some("module Link = struct\n let make ?(href = \"#\") ?(variant : Contracts.Link.variant = `default) ?(new_tab = false)\n ?(extra_class = \"\") ~children () =\n let base =\n match variant with\n | `default ->\n \"text-neutral-900 underline decoration-neutral-300 underline-offset-4 hover:decoration-neutral-900\"\n | `muted -> \"text-neutral-500 transition-colors hover:text-neutral-900\"\n in\n let attrs =\n [\n View.Attr.href (View.static href);\n View.Attr.className (View.static (Ui.cx base extra_class));\n ]\n in\n let attrs =\n if new_tab then View.Attr.make \"target\" (View.static \"_blank\") :: attrs else attrs\n in\n View.element ~attrs \"a\" [ View.fragment children ]\nend\n\nmodule Separator = struct\n let make ?(orientation : Contracts.Separator.orientation = `horizontal) ?(extra_class = \"\") () =\n let base =\n match orientation with\n | `horizontal -> \"h-px w-full bg-neutral-200\"\n | `vertical -> \"h-4 w-px bg-neutral-200\"\n in\n View.element\n ~attrs:\n [\n View.Attr.className (View.static (Ui.cx base extra_class));\n View.Attr.make \"role\" (View.static \"separator\");\n ]\n \"div\" []\nend\n\nmodule Link_ = Link\n\nlet txt s = View.text (View.static s)\n\nlet el ?(cls = \"\") ?(attrs = []) ?(events = []) tag children =\n let attrs = if cls = \"\" then attrs else View.Attr.className (View.static cls) :: attrs in\n View.element ~attrs ~events tag children\n\nlet footer_example () =\n let col title items =\n el ~cls:\"space-y-2\" \"div\"\n (el ~cls:\"text-xs font-semibold uppercase tracking-wide text-neutral-500\" \"p\" [ txt title ]\n :: List.map\n (fun i ->\n el \"p\"\n [ Link_.make ~href:\"#\" ~variant:`muted ~extra_class:\"text-sm\" ~children:[ txt i ] () ])\n items)\n in\n el ~cls:\"w-full max-w-2xl rounded-lg border border-neutral-200 bg-surface p-6\" \"div\"\n [\n el ~cls:\"grid grid-cols-3 gap-6\" \"div\"\n [\n col \"Product\" [ \"Features\"; \"Pricing\"; \"Changelog\" ];\n col \"Company\" [ \"About\"; \"Blog\"; \"Careers\" ];\n col \"Legal\" [ \"Privacy\"; \"Terms\" ];\n ];\n Separator.make ~extra_class:\"my-5\" ();\n el ~cls:\"flex items-center justify-between text-xs text-neutral-500\" \"div\"\n [\n txt {js|© 2026 Acme, Inc.|js};\n el ~cls:\"flex gap-3\" \"div\"\n [\n Link_.make ~href:\"#\" ~variant:`muted ~children:[ txt \"Twitter\" ] ();\n Link_.make ~href:\"#\" ~variant:`muted ~children:[ txt \"GitHub\" ] ();\n ];\n ];\n ]") + | "hero" => Some("module Badge = struct\n let make ?(variant : Contracts.Badge.variant = `solid) ~children () =\n let tone =\n match variant with\n | `solid -> \"bg-neutral-900 text-neutral-0\"\n | `soft -> \"bg-neutral-200 text-neutral-800\"\n | `outline -> \"border border-neutral-300 text-neutral-700\"\n in\n \n (View.fragment children)\n \nend\n\nmodule Spinner = struct\n let make ?(size = \"size-4\") ?(tone = `ink) () =\n let colors =\n match tone with\n | `ink -> \"border-neutral-300 border-t-neutral-900\"\n | `on_accent -> \"border-white/40 border-t-white\"\n in\n \nend\n\nmodule Button = struct\n let make ?(variant : Contracts.Button.variant = `primary) ?(size : Contracts.Button.size = `md)\n ?(type_ : Contracts.Button.type_ = `button) ?(disabled = false) ?(loading = false) ?on_click\n ?(extra_class = \"\") ~children () =\n let type_str = match type_ with `button -> \"button\" | `submit -> \"submit\" | `reset -> \"reset\" in\n let size_cls = match size with `sm -> Ui.btn_sm | `md -> Ui.btn_md | `lg -> Ui.btn_lg in\n let colors =\n match variant with\n | `primary -> Ui.btn_primary_colors\n | `secondary -> Ui.btn_secondary_colors\n | `ghost -> Ui.btn_ghost_colors\n | `destructive -> Ui.btn_destructive_colors\n in\n (* Dark-surface variants need an on-accent spinner; light ones use ink. *)\n let spinner_tone =\n match variant with `primary | `destructive -> `on_accent | `secondary | `ghost -> `ink\n in\n let cls = Ui.cx (Ui.btn_core ^ \" \" ^ size_cls ^ \" \" ^ colors) extra_class in\n let attrs =\n [\n View.Attr.type_ (View.static type_str);\n View.Attr.className (View.static cls);\n View.Attr.disabled (fun () -> disabled || loading);\n ]\n in\n let events = match on_click with Some f -> [ View.On.click f ] | None -> [] in\n let spinner = if loading then Spinner.make ~tone:spinner_tone () else View.empty in\n View.element ~attrs ~events \"button\" [ spinner; View.fragment children ]\nend\n\nlet txt s = View.text (View.static s)\n\nlet el ?(cls = \"\") ?(attrs = []) ?(events = []) tag children =\n let attrs = if cls = \"\" then attrs else View.Attr.className (View.static cls) :: attrs in\n View.element ~attrs ~events tag children\n\nlet hero_example () =\n el ~cls:\"w-full max-w-2xl rounded-lg border border-neutral-200 bg-surface px-8 py-12 text-center\"\n \"div\"\n [\n Badge.make ~variant:`outline ~children:[ txt {js|New · v2 is here|js} ] ();\n el ~cls:\"mx-auto mt-4 max-w-lg text-4xl font-bold tracking-tight text-neutral-900\" \"h2\"\n [ txt \"Ship your product faster\" ];\n el ~cls:\"mx-auto mt-3 max-w-md text-neutral-600\" \"p\"\n [ txt {js|The all-in-one toolkit to design, build, and launch — without the busywork.|js} ];\n el ~cls:\"mt-6 flex justify-center gap-3\" \"div\"\n [\n Button.make ~variant:`primary ~children:[ txt \"Get started\" ] ();\n Button.make ~variant:`secondary ~children:[ txt \"Book a demo\" ] ();\n ];\n el ~cls:\"mt-4 text-xs text-neutral-400\" \"p\"\n [ txt {js|Trusted by 4,000+ teams · No credit card required|js} ];\n ]") | "feature-grid" => Some("module Icon = struct\n (* Fresh host ids so multiple icons of the same name never collide. *)\n let counter = ref 0\n\n let make ?(size : Contracts.Icon.size = `md) ?(label = \"\") ?(extra_class = \"\") ~name () =\n let dims =\n match size with\n | `xs -> \"size-3\"\n | `sm -> \"size-4\"\n | `md -> \"size-5\"\n | `lg -> \"size-6\"\n | `xl -> \"size-8\"\n in\n let body = match Icons.get name with Some b -> b | None -> [] in\n let meaningful = label <> \"\" in\n (* Meaningful icons expose an img role + accessible name; decorative ones are\n hidden so assistive tech doesn't announce them beside their label. *)\n let role_attrs =\n if meaningful then \"role=\\\"img\\\" aria-label=\\\"\" ^ label ^ \"\\\"\" else \"aria-hidden=\\\"true\\\"\"\n in\n let extra = if extra_class = \"\" then \"\" else \" \" ^ extra_class in\n let markup = Icons.svg ~dims ~extra ~role_attrs body in\n View.dyn (fun () ->\n incr counter;\n let id = \"prescriptive-reativa-icon-\" ^ string_of_int !counter in\n Ui.set_inner_html_by_id id markup;\n View.element ~attrs:[ View.Attr.id (View.static id) ] \"span\" [])\nend\n\nlet txt s = View.text (View.static s)\n\nlet el ?(cls = \"\") ?(attrs = []) ?(events = []) tag children =\n let attrs = if cls = \"\" then attrs else View.Attr.className (View.static cls) :: attrs in\n View.element ~attrs ~events tag children\n\nlet feature_grid_example () =\n let feats =\n [\n (\"zap\", \"Fast\", \"Ship in minutes with sensible defaults.\");\n (\"lock\", \"Secure\", \"Encryption and SSO out of the box.\");\n (\"trending-up\", \"Scalable\", \"Grows from prototype to production.\");\n ]\n in\n el ~cls:\"grid w-full max-w-2xl grid-cols-3 gap-4\" \"div\"\n (List.map\n (fun (ic, title, desc) ->\n el ~cls:(Ui.card ^ \" p-5\") \"div\"\n [\n el ~cls:\"flex size-9 items-center justify-center rounded-md bg-neutral-100 text-neutral-700\"\n \"div\" [ Icon.make ~name:ic () ];\n el ~cls:\"mt-3 text-sm font-semibold text-neutral-900\" \"p\" [ txt title ];\n el ~cls:\"mt-1 text-sm text-neutral-500\" \"p\" [ txt desc ];\n ])\n feats)") - | "testimonial" => Some("module Avatar = struct\n let make ?(size = \"size-10 text-sm\") ~initials () =\n \n (initials)\n \nend\n\nlet txt s = View.text (View.static s)\n\nlet el ?(cls = \"\") ?(attrs = []) ?(events = []) tag children =\n let attrs = if cls = \"\" then attrs else View.Attr.className (View.static cls) :: attrs in\n View.element ~attrs ~events tag children\n\nlet testimonial_example () =\n el ~cls:(Ui.card ^ \" w-full max-w-lg p-6\") \"div\"\n [\n el ~cls:\"text-lg leading-relaxed text-neutral-800\" \"p\"\n [\n txt\n \"\\xe2\\x80\\x9cThe first tool our whole team actually enjoys using. It paid for itself in a \\\n week.\\xe2\\x80\\x9d\";\n ];\n el ~cls:\"mt-4 flex items-center gap-3\" \"div\"\n [\n Avatar.make ~initials:\"GH\" ~size:\"size-10 text-sm\" ();\n el \"div\"\n [\n el ~cls:\"text-sm font-medium text-neutral-900\" \"p\" [ txt \"Grace Hopper\" ];\n el ~cls:\"text-xs text-neutral-500\" \"p\" [ txt \"VP Engineering, Acme\" ];\n ];\n ];\n ]") - | "pricing-table" => Some("module Icon = struct\n (* Fresh host ids so multiple icons of the same name never collide. *)\n let counter = ref 0\n\n let make ?(size : Contracts.Icon.size = `md) ?(label = \"\") ?(extra_class = \"\") ~name () =\n let dims =\n match size with\n | `xs -> \"size-3\"\n | `sm -> \"size-4\"\n | `md -> \"size-5\"\n | `lg -> \"size-6\"\n | `xl -> \"size-8\"\n in\n let body = match Icons.get name with Some b -> b | None -> [] in\n let meaningful = label <> \"\" in\n (* Meaningful icons expose an img role + accessible name; decorative ones are\n hidden so assistive tech doesn't announce them beside their label. *)\n let role_attrs =\n if meaningful then \"role=\\\"img\\\" aria-label=\\\"\" ^ label ^ \"\\\"\" else \"aria-hidden=\\\"true\\\"\"\n in\n let extra = if extra_class = \"\" then \"\" else \" \" ^ extra_class in\n let markup = Icons.svg ~dims ~extra ~role_attrs body in\n View.dyn (fun () ->\n incr counter;\n let id = \"prescriptive-reativa-icon-\" ^ string_of_int !counter in\n Ui.set_inner_html_by_id id markup;\n View.element ~attrs:[ View.Attr.id (View.static id) ] \"span\" [])\nend\n\nmodule Badge = struct\n let make ?(variant : Contracts.Badge.variant = `solid) ~children () =\n let tone =\n match variant with\n | `solid -> \"bg-neutral-900 text-neutral-0\"\n | `soft -> \"bg-neutral-200 text-neutral-800\"\n | `outline -> \"border border-neutral-300 text-neutral-700\"\n in\n \n (View.fragment children)\n \nend\n\nmodule Spinner = struct\n let make ?(size = \"size-4\") ?(tone = `ink) () =\n let colors =\n match tone with\n | `ink -> \"border-neutral-300 border-t-neutral-900\"\n | `on_accent -> \"border-white/40 border-t-white\"\n in\n \nend\n\nmodule Button = struct\n let make ?(variant : Contracts.Button.variant = `primary) ?(size : Contracts.Button.size = `md)\n ?(type_ : Contracts.Button.type_ = `button) ?(disabled = false) ?(loading = false) ?on_click\n ?(extra_class = \"\") ~children () =\n let type_str = match type_ with `button -> \"button\" | `submit -> \"submit\" | `reset -> \"reset\" in\n let size_cls = match size with `sm -> Ui.btn_sm | `md -> Ui.btn_md | `lg -> Ui.btn_lg in\n let colors =\n match variant with\n | `primary -> Ui.btn_primary_colors\n | `secondary -> Ui.btn_secondary_colors\n | `ghost -> Ui.btn_ghost_colors\n | `destructive -> Ui.btn_destructive_colors\n in\n (* Dark-surface variants need an on-accent spinner; light ones use ink. *)\n let spinner_tone =\n match variant with `primary | `destructive -> `on_accent | `secondary | `ghost -> `ink\n in\n let cls = Ui.cx (Ui.btn_core ^ \" \" ^ size_cls ^ \" \" ^ colors) extra_class in\n let attrs =\n [\n View.Attr.type_ (View.static type_str);\n View.Attr.className (View.static cls);\n View.Attr.disabled (fun () -> disabled || loading);\n ]\n in\n let events = match on_click with Some f -> [ View.On.click f ] | None -> [] in\n let spinner = if loading then Spinner.make ~tone:spinner_tone () else View.empty in\n View.element ~attrs ~events \"button\" [ spinner; View.fragment children ]\nend\n\nlet txt s = View.text (View.static s)\n\nlet el ?(cls = \"\") ?(attrs = []) ?(events = []) tag children =\n let attrs = if cls = \"\" then attrs else View.Attr.className (View.static cls) :: attrs in\n View.element ~attrs ~events tag children\n\nlet pricing_table_example () =\n let rows =\n [\n (\"Projects\", \"1\", \"Unlimited\", \"Unlimited\");\n (\"Support\", \"Community\", \"Priority\", \"Dedicated\");\n (\"SSO\", \"\\xe2\\x80\\x93\", \"\\xe2\\x80\\x93\", \"\\xe2\\x9c\\x93\");\n (\"Audit log\", \"\\xe2\\x80\\x93\", \"\\xe2\\x9c\\x93\", \"\\xe2\\x9c\\x93\");\n ]\n in\n (* Cells carry either plain text or a yes/no marker; render markers as icons. *)\n let cell_node v =\n match v with\n | \"\\xe2\\x9c\\x93\" ->\n Icon.make ~name:\"check\" ~size:`sm ~label:\"Included\" ~extra_class:\"mx-auto text-status-success\" ()\n | \"\\xe2\\x80\\x93\" ->\n Icon.make ~name:\"minus\" ~size:`sm ~label:\"Not included\" ~extra_class:\"mx-auto text-neutral-300\" ()\n | _ -> txt v\n in\n let th cls label = el ~cls \"th\" label in\n el ~cls:\"w-full max-w-2xl overflow-hidden rounded-lg border border-neutral-200\" \"div\"\n [\n el ~cls:\"w-full text-sm\" \"table\"\n [\n el ~cls:\"bg-neutral-50\" \"thead\"\n [\n el \"tr\"\n [\n th \"px-4 py-3 text-left text-xs uppercase tracking-wide text-neutral-500\"\n [ txt \"Feature\" ];\n th \"px-4 py-3 text-center font-medium\" [ txt \"Starter\" ];\n th \"px-4 py-3 text-center font-medium\"\n [\n el ~cls:\"flex items-center justify-center gap-2\" \"div\"\n [ txt \"Pro\"; Badge.make ~variant:`solid ~children:[ txt \"Popular\" ] () ];\n ];\n th \"px-4 py-3 text-center font-medium\" [ txt \"Team\" ];\n ];\n ];\n el ~cls:\"divide-y divide-neutral-100 text-neutral-700\" \"tbody\"\n (List.map\n (fun (feat, a, b, c) ->\n el \"tr\"\n [\n el ~cls:\"px-4 py-2 font-medium text-neutral-900\" \"td\" [ txt feat ];\n el ~cls:\"px-4 py-2 text-center\" \"td\" [ cell_node a ];\n el ~cls:\"px-4 py-2 text-center\" \"td\" [ cell_node b ];\n el ~cls:\"px-4 py-2 text-center\" \"td\" [ cell_node c ];\n ])\n rows\n @ [\n el \"tr\"\n [\n el ~cls:\"px-4 py-3\" \"td\" [];\n el ~cls:\"px-4 py-3 text-center\" \"td\"\n [ Button.make ~variant:`secondary ~children:[ txt \"Choose\" ] () ];\n el ~cls:\"px-4 py-3 text-center\" \"td\"\n [ Button.make ~variant:`primary ~children:[ txt \"Choose\" ] () ];\n el ~cls:\"px-4 py-3 text-center\" \"td\"\n [ Button.make ~variant:`secondary ~children:[ txt \"Choose\" ] () ];\n ];\n ]);\n ];\n ]") - | "faq" => Some("module Icon = struct\n (* Fresh host ids so multiple icons of the same name never collide. *)\n let counter = ref 0\n\n let make ?(size : Contracts.Icon.size = `md) ?(label = \"\") ?(extra_class = \"\") ~name () =\n let dims =\n match size with\n | `xs -> \"size-3\"\n | `sm -> \"size-4\"\n | `md -> \"size-5\"\n | `lg -> \"size-6\"\n | `xl -> \"size-8\"\n in\n let body = match Icons.get name with Some b -> b | None -> [] in\n let meaningful = label <> \"\" in\n (* Meaningful icons expose an img role + accessible name; decorative ones are\n hidden so assistive tech doesn't announce them beside their label. *)\n let role_attrs =\n if meaningful then \"role=\\\"img\\\" aria-label=\\\"\" ^ label ^ \"\\\"\" else \"aria-hidden=\\\"true\\\"\"\n in\n let extra = if extra_class = \"\" then \"\" else \" \" ^ extra_class in\n let markup = Icons.svg ~dims ~extra ~role_attrs body in\n View.dyn (fun () ->\n incr counter;\n let id = \"prescriptive-reativa-icon-\" ^ string_of_int !counter in\n Ui.set_inner_html_by_id id markup;\n View.element ~attrs:[ View.Attr.id (View.static id) ] \"span\" [])\nend\n\nlet txt s = View.text (View.static s)\n\nlet el ?(cls = \"\") ?(attrs = []) ?(events = []) tag children =\n let attrs = if cls = \"\" then attrs else View.Attr.className (View.static cls) :: attrs in\n View.element ~attrs ~events tag children\n\nlet faq_example () =\n let open_id = Signal.make 0 in\n let items =\n [\n (0, \"Can I cancel anytime?\", \"Yes \\xe2\\x80\\x94 cancel in one click, no questions asked.\");\n (1, \"Do you offer refunds?\", \"We offer a 30-day money-back guarantee.\");\n (2, \"Is there a free plan?\", \"Yes, the Starter plan is free forever.\");\n ]\n in\n el ~cls:\"w-full max-w-xl divide-y divide-neutral-200 rounded-lg border border-neutral-200\" \"div\"\n (List.map\n (fun (idx, q, a) ->\n let is_open () = Signal.get open_id = idx in\n el \"div\"\n [\n View.element\n ~attrs:\n [\n View.Attr.className\n (View.static\n \"flex w-full items-center justify-between px-4 py-3 text-left text-sm \\\n font-medium text-neutral-800 hover:bg-neutral-50\");\n ]\n ~events:\n [\n View.On.click (fun _ ->\n Signal.update open_id (fun c -> if c = idx then -1 else idx));\n ]\n \"button\"\n [\n txt q;\n el ~cls:\"text-neutral-400\" \"span\"\n [\n View.show ~fallback:(Icon.make ~name:\"plus\" ~size:`sm ()) is_open\n (Icon.make ~name:\"minus\" ~size:`sm ());\n ];\n ];\n View.show is_open (el ~cls:\"px-4 pb-3 text-sm text-neutral-500\" \"p\" [ txt a ]);\n ])\n items)") + | "testimonial" => Some("module Avatar = struct\n let make ?(size = \"size-10 text-sm\") ~initials () =\n \n (initials)\n \nend\n\nlet txt s = View.text (View.static s)\n\nlet el ?(cls = \"\") ?(attrs = []) ?(events = []) tag children =\n let attrs = if cls = \"\" then attrs else View.Attr.className (View.static cls) :: attrs in\n View.element ~attrs ~events tag children\n\nlet testimonial_example () =\n el ~cls:(Ui.card ^ \" w-full max-w-lg p-6\") \"div\"\n [\n el ~cls:\"text-lg leading-relaxed text-neutral-800\" \"p\"\n [\n txt\n {js|“The first tool our whole team actually enjoys using. It paid for itself in a week.”|js};\n ];\n el ~cls:\"mt-4 flex items-center gap-3\" \"div\"\n [\n Avatar.make ~initials:\"GH\" ~size:\"size-10 text-sm\" ();\n el \"div\"\n [\n el ~cls:\"text-sm font-medium text-neutral-900\" \"p\" [ txt \"Grace Hopper\" ];\n el ~cls:\"text-xs text-neutral-500\" \"p\" [ txt \"VP Engineering, Acme\" ];\n ];\n ];\n ]") + | "pricing-table" => Some("module Icon = struct\n (* Fresh host ids so multiple icons of the same name never collide. *)\n let counter = ref 0\n\n let make ?(size : Contracts.Icon.size = `md) ?(label = \"\") ?(extra_class = \"\") ~name () =\n let dims =\n match size with\n | `xs -> \"size-3\"\n | `sm -> \"size-4\"\n | `md -> \"size-5\"\n | `lg -> \"size-6\"\n | `xl -> \"size-8\"\n in\n let body = match Icons.get name with Some b -> b | None -> [] in\n let meaningful = label <> \"\" in\n (* Meaningful icons expose an img role + accessible name; decorative ones are\n hidden so assistive tech doesn't announce them beside their label. *)\n let role_attrs =\n if meaningful then \"role=\\\"img\\\" aria-label=\\\"\" ^ label ^ \"\\\"\" else \"aria-hidden=\\\"true\\\"\"\n in\n let extra = if extra_class = \"\" then \"\" else \" \" ^ extra_class in\n let markup = Icons.svg ~dims ~extra ~role_attrs body in\n View.dyn (fun () ->\n incr counter;\n let id = \"prescriptive-reativa-icon-\" ^ string_of_int !counter in\n Ui.set_inner_html_by_id id markup;\n View.element ~attrs:[ View.Attr.id (View.static id) ] \"span\" [])\nend\n\nmodule Badge = struct\n let make ?(variant : Contracts.Badge.variant = `solid) ~children () =\n let tone =\n match variant with\n | `solid -> \"bg-neutral-900 text-neutral-0\"\n | `soft -> \"bg-neutral-200 text-neutral-800\"\n | `outline -> \"border border-neutral-300 text-neutral-700\"\n in\n \n (View.fragment children)\n \nend\n\nmodule Spinner = struct\n let make ?(size = \"size-4\") ?(tone = `ink) () =\n let colors =\n match tone with\n | `ink -> \"border-neutral-300 border-t-neutral-900\"\n | `on_accent -> \"border-white/40 border-t-white\"\n in\n \nend\n\nmodule Button = struct\n let make ?(variant : Contracts.Button.variant = `primary) ?(size : Contracts.Button.size = `md)\n ?(type_ : Contracts.Button.type_ = `button) ?(disabled = false) ?(loading = false) ?on_click\n ?(extra_class = \"\") ~children () =\n let type_str = match type_ with `button -> \"button\" | `submit -> \"submit\" | `reset -> \"reset\" in\n let size_cls = match size with `sm -> Ui.btn_sm | `md -> Ui.btn_md | `lg -> Ui.btn_lg in\n let colors =\n match variant with\n | `primary -> Ui.btn_primary_colors\n | `secondary -> Ui.btn_secondary_colors\n | `ghost -> Ui.btn_ghost_colors\n | `destructive -> Ui.btn_destructive_colors\n in\n (* Dark-surface variants need an on-accent spinner; light ones use ink. *)\n let spinner_tone =\n match variant with `primary | `destructive -> `on_accent | `secondary | `ghost -> `ink\n in\n let cls = Ui.cx (Ui.btn_core ^ \" \" ^ size_cls ^ \" \" ^ colors) extra_class in\n let attrs =\n [\n View.Attr.type_ (View.static type_str);\n View.Attr.className (View.static cls);\n View.Attr.disabled (fun () -> disabled || loading);\n ]\n in\n let events = match on_click with Some f -> [ View.On.click f ] | None -> [] in\n let spinner = if loading then Spinner.make ~tone:spinner_tone () else View.empty in\n View.element ~attrs ~events \"button\" [ spinner; View.fragment children ]\nend\n\nlet txt s = View.text (View.static s)\n\nlet el ?(cls = \"\") ?(attrs = []) ?(events = []) tag children =\n let attrs = if cls = \"\" then attrs else View.Attr.className (View.static cls) :: attrs in\n View.element ~attrs ~events tag children\n\nlet pricing_table_example () =\n (* Melange rewrites js-quoted literals only in expression position, so bind the\n yes/no markers once and compare against them — the same literal used as a\n *pattern* would still be raw UTF-8 bytes and never match the JS string. *)\n let yes = {js|✓|js} in\n let no = {js|–|js} in\n let rows =\n [\n (\"Projects\", \"1\", \"Unlimited\", \"Unlimited\");\n (\"Support\", \"Community\", \"Priority\", \"Dedicated\");\n (\"SSO\", no, no, yes);\n (\"Audit log\", no, yes, yes);\n ]\n in\n (* Cells carry either plain text or a yes/no marker; render markers as icons. *)\n let cell_node v =\n if v = yes then\n Icon.make ~name:\"check\" ~size:`sm ~label:\"Included\" ~extra_class:\"mx-auto text-status-success\" ()\n else if v = no then\n Icon.make ~name:\"minus\" ~size:`sm ~label:\"Not included\" ~extra_class:\"mx-auto text-neutral-300\" ()\n else txt v\n in\n let th cls label = el ~cls \"th\" label in\n el ~cls:\"w-full max-w-2xl overflow-hidden rounded-lg border border-neutral-200\" \"div\"\n [\n el ~cls:\"w-full text-sm\" \"table\"\n [\n el ~cls:\"bg-neutral-50\" \"thead\"\n [\n el \"tr\"\n [\n th \"px-4 py-3 text-left text-xs uppercase tracking-wide text-neutral-500\"\n [ txt \"Feature\" ];\n th \"px-4 py-3 text-center font-medium\" [ txt \"Starter\" ];\n th \"px-4 py-3 text-center font-medium\"\n [\n el ~cls:\"flex items-center justify-center gap-2\" \"div\"\n [ txt \"Pro\"; Badge.make ~variant:`solid ~children:[ txt \"Popular\" ] () ];\n ];\n th \"px-4 py-3 text-center font-medium\" [ txt \"Team\" ];\n ];\n ];\n el ~cls:\"divide-y divide-neutral-100 text-neutral-700\" \"tbody\"\n (List.map\n (fun (feat, a, b, c) ->\n el \"tr\"\n [\n el ~cls:\"px-4 py-2 font-medium text-neutral-900\" \"td\" [ txt feat ];\n el ~cls:\"px-4 py-2 text-center\" \"td\" [ cell_node a ];\n el ~cls:\"px-4 py-2 text-center\" \"td\" [ cell_node b ];\n el ~cls:\"px-4 py-2 text-center\" \"td\" [ cell_node c ];\n ])\n rows\n @ [\n el \"tr\"\n [\n el ~cls:\"px-4 py-3\" \"td\" [];\n el ~cls:\"px-4 py-3 text-center\" \"td\"\n [ Button.make ~variant:`secondary ~children:[ txt \"Choose\" ] () ];\n el ~cls:\"px-4 py-3 text-center\" \"td\"\n [ Button.make ~variant:`primary ~children:[ txt \"Choose\" ] () ];\n el ~cls:\"px-4 py-3 text-center\" \"td\"\n [ Button.make ~variant:`secondary ~children:[ txt \"Choose\" ] () ];\n ];\n ]);\n ];\n ]") + | "faq" => Some("module Icon = struct\n (* Fresh host ids so multiple icons of the same name never collide. *)\n let counter = ref 0\n\n let make ?(size : Contracts.Icon.size = `md) ?(label = \"\") ?(extra_class = \"\") ~name () =\n let dims =\n match size with\n | `xs -> \"size-3\"\n | `sm -> \"size-4\"\n | `md -> \"size-5\"\n | `lg -> \"size-6\"\n | `xl -> \"size-8\"\n in\n let body = match Icons.get name with Some b -> b | None -> [] in\n let meaningful = label <> \"\" in\n (* Meaningful icons expose an img role + accessible name; decorative ones are\n hidden so assistive tech doesn't announce them beside their label. *)\n let role_attrs =\n if meaningful then \"role=\\\"img\\\" aria-label=\\\"\" ^ label ^ \"\\\"\" else \"aria-hidden=\\\"true\\\"\"\n in\n let extra = if extra_class = \"\" then \"\" else \" \" ^ extra_class in\n let markup = Icons.svg ~dims ~extra ~role_attrs body in\n View.dyn (fun () ->\n incr counter;\n let id = \"prescriptive-reativa-icon-\" ^ string_of_int !counter in\n Ui.set_inner_html_by_id id markup;\n View.element ~attrs:[ View.Attr.id (View.static id) ] \"span\" [])\nend\n\nlet txt s = View.text (View.static s)\n\nlet el ?(cls = \"\") ?(attrs = []) ?(events = []) tag children =\n let attrs = if cls = \"\" then attrs else View.Attr.className (View.static cls) :: attrs in\n View.element ~attrs ~events tag children\n\nlet faq_example () =\n let open_id = Signal.make 0 in\n let items =\n [\n (0, \"Can I cancel anytime?\", {js|Yes — cancel in one click, no questions asked.|js});\n (1, \"Do you offer refunds?\", \"We offer a 30-day money-back guarantee.\");\n (2, \"Is there a free plan?\", \"Yes, the Starter plan is free forever.\");\n ]\n in\n el ~cls:\"w-full max-w-xl divide-y divide-neutral-200 rounded-lg border border-neutral-200\" \"div\"\n (List.map\n (fun (idx, q, a) ->\n let is_open () = Signal.get open_id = idx in\n el \"div\"\n [\n View.element\n ~attrs:\n [\n View.Attr.className\n (View.static\n \"flex w-full items-center justify-between px-4 py-3 text-left text-sm \\\n font-medium text-neutral-800 hover:bg-neutral-50\");\n ]\n ~events:\n [\n View.On.click (fun _ ->\n Signal.update open_id (fun c -> if c = idx then -1 else idx));\n ]\n \"button\"\n [\n txt q;\n el ~cls:\"text-neutral-400\" \"span\"\n [\n View.show ~fallback:(Icon.make ~name:\"plus\" ~size:`sm ()) is_open\n (Icon.make ~name:\"minus\" ~size:`sm ());\n ];\n ];\n View.show is_open (el ~cls:\"px-4 pb-3 text-sm text-neutral-500\" \"p\" [ txt a ]);\n ])\n items)") | "cta-section" => Some("let txt s = View.text (View.static s)\n\nlet el ?(cls = \"\") ?(attrs = []) ?(events = []) tag children =\n let attrs = if cls = \"\" then attrs else View.Attr.className (View.static cls) :: attrs in\n View.element ~attrs ~events tag children\n\nlet cta_section_example () =\n el ~cls:\"w-full max-w-2xl rounded-lg bg-neutral-900 px-8 py-10 text-center text-neutral-0\" \"div\"\n [\n el ~cls:\"text-2xl font-bold\" \"h2\" [ txt \"Start building today\" ];\n el ~cls:\"mt-2 text-sm text-neutral-300\" \"p\"\n [ txt \"Join thousands of teams shipping faster. Free for 14 days.\" ];\n el ~cls:\"mx-auto mt-5 flex max-w-md gap-2\" \"div\"\n [\n View.element\n ~attrs:\n [\n View.Attr.className\n (View.static\n \"flex-1 rounded-md border border-neutral-700 bg-neutral-800 px-3 py-2 text-sm \\\n text-neutral-0 placeholder:text-neutral-500 focus-visible:outline-none \\\n focus-visible:ring-2 focus-visible:ring-white\");\n View.Attr.placeholder (View.static \"you@example.com\");\n ]\n \"input\" [];\n el\n ~cls:\n \"rounded-md bg-surface px-4 py-2 text-sm font-medium text-neutral-900 \\\n hover:bg-neutral-200\"\n \"button\" [ txt \"Get started\" ];\n ];\n ]") - | "announcement-bar" => Some("module Icon = struct\n (* Fresh host ids so multiple icons of the same name never collide. *)\n let counter = ref 0\n\n let make ?(size : Contracts.Icon.size = `md) ?(label = \"\") ?(extra_class = \"\") ~name () =\n let dims =\n match size with\n | `xs -> \"size-3\"\n | `sm -> \"size-4\"\n | `md -> \"size-5\"\n | `lg -> \"size-6\"\n | `xl -> \"size-8\"\n in\n let body = match Icons.get name with Some b -> b | None -> [] in\n let meaningful = label <> \"\" in\n (* Meaningful icons expose an img role + accessible name; decorative ones are\n hidden so assistive tech doesn't announce them beside their label. *)\n let role_attrs =\n if meaningful then \"role=\\\"img\\\" aria-label=\\\"\" ^ label ^ \"\\\"\" else \"aria-hidden=\\\"true\\\"\"\n in\n let extra = if extra_class = \"\" then \"\" else \" \" ^ extra_class in\n let markup = Icons.svg ~dims ~extra ~role_attrs body in\n View.dyn (fun () ->\n incr counter;\n let id = \"prescriptive-reativa-icon-\" ^ string_of_int !counter in\n Ui.set_inner_html_by_id id markup;\n View.element ~attrs:[ View.Attr.id (View.static id) ] \"span\" [])\nend\n\nmodule IconButton = struct\n let make ?(variant : Contracts.IconButton.variant = `ghost) ?on_click ~label ~children () =\n let tone =\n match variant with\n | `solid -> \"bg-action text-on-action hover:bg-action-hover\"\n | `ghost -> \"text-ink hover:bg-action-subtle\"\n in\n let attrs =\n [\n View.Attr.type_ (View.static \"button\");\n View.Attr.make \"aria-label\" (View.static label);\n View.Attr.className\n (View.static\n (\"inline-flex size-9 items-center justify-center rounded-md text-sm transition-colors \\\n focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-action \\\n focus-visible:ring-offset-2 \" ^ tone));\n ]\n in\n let events = match on_click with Some f -> [ View.On.click f ] | None -> [] in\n View.element ~attrs ~events \"button\" [ View.fragment children ]\nend\n\nmodule AnnouncementBar = struct\n let make ?(variant : Contracts.AnnouncementBar.variant = `neutral) ?(action_label = \"\")\n ?(action_href = \"#\") ?on_dismiss ~message () =\n let open_ = Signal.make true in\n let dismiss _ =\n Signal.set open_ false;\n match on_dismiss with Some f -> f () | None -> ()\n in\n let surface, icon_name, icon_cls =\n match variant with\n | `neutral -> (\"border-b border-border bg-surface text-ink\", \"info\", \"text-muted\")\n | `accent -> (\"bg-accent text-accent-contrast\", \"zap\", \"text-accent-contrast\")\n | `warning ->\n (\"border-b border-status-warning bg-surface text-ink\", \"alert-triangle\", \"text-status-warning\")\n in\n let link_cls =\n match variant with\n | `accent -> \"font-medium underline underline-offset-2 hover:opacity-80\"\n | `neutral | `warning ->\n \"font-medium text-ink underline underline-offset-2 hover:text-muted\"\n in\n View.show\n (fun () -> Signal.get open_)\n (View.element\n ~attrs:\n [\n View.Attr.className\n (View.static\n (\"flex w-full flex-wrap items-center justify-center gap-x-3 gap-y-1 px-4 py-2 text-sm \"\n ^ surface));\n ]\n \"div\"\n [\n (Icon.make ~name:icon_name ~size:`sm ());\n

(message)

;\n (if action_label = \"\" then View.empty\n else\n View.element\n ~attrs:\n [ View.Attr.href (View.static action_href); View.Attr.className (View.static link_cls) ]\n \"a\"\n [ View.text (View.static action_label) ]);\n \n (IconButton.make ~label:\"Dismiss announcement\" ~variant:`ghost ~on_click:dismiss\n ~children:[ Icon.make ~name:\"x\" ~size:`sm () ] ())\n ;\n ])\nend\n\nlet announcement_bar_example () =\n
\n (AnnouncementBar.make ~variant:`accent ~message:\"v2 ships May 4 \\xe2\\x80\\x94 everything gets faster.\"\n ~action_label:\"See what's new\" ())\n (AnnouncementBar.make ~variant:`neutral ~message:\"We've updated our terms of service.\"\n ~action_label:\"Read the changes\" ())\n (AnnouncementBar.make ~variant:`warning\n ~message:\"Scheduled maintenance Sunday 02:00\\xe2\\x80\\x9304:00 UTC.\" ())\n
") - | "contact-section" => Some("module Icon = struct\n (* Fresh host ids so multiple icons of the same name never collide. *)\n let counter = ref 0\n\n let make ?(size : Contracts.Icon.size = `md) ?(label = \"\") ?(extra_class = \"\") ~name () =\n let dims =\n match size with\n | `xs -> \"size-3\"\n | `sm -> \"size-4\"\n | `md -> \"size-5\"\n | `lg -> \"size-6\"\n | `xl -> \"size-8\"\n in\n let body = match Icons.get name with Some b -> b | None -> [] in\n let meaningful = label <> \"\" in\n (* Meaningful icons expose an img role + accessible name; decorative ones are\n hidden so assistive tech doesn't announce them beside their label. *)\n let role_attrs =\n if meaningful then \"role=\\\"img\\\" aria-label=\\\"\" ^ label ^ \"\\\"\" else \"aria-hidden=\\\"true\\\"\"\n in\n let extra = if extra_class = \"\" then \"\" else \" \" ^ extra_class in\n let markup = Icons.svg ~dims ~extra ~role_attrs body in\n View.dyn (fun () ->\n incr counter;\n let id = \"prescriptive-reativa-icon-\" ^ string_of_int !counter in\n Ui.set_inner_html_by_id id markup;\n View.element ~attrs:[ View.Attr.id (View.static id) ] \"span\" [])\nend\n\nmodule Field = struct\n let make ?(hint = \"\") ~label ~for_ ~children () =\n let label_node =\n View.element\n ~attrs:[ View.Attr.className (View.static Ui.label); View.Attr.make \"for\" (View.static for_) ]\n \"label\"\n [ View.text (View.static label) ]\n in\n let hint_node =\n if hint = \"\" then View.empty\n else

(hint)

\n in\n
\n (label_node)\n (View.fragment children)\n (hint_node)\n
\nend\n\nmodule Input = struct\n let make ?(type_ = \"text\") ?id ?(placeholder = \"\") ?value ?(required = false) ?on_input\n ?(extra_class = \"\") () =\n let attrs =\n [\n View.Attr.type_ (View.static type_);\n View.Attr.placeholder (View.static placeholder);\n View.Attr.className (View.static (Ui.cx Ui.input_base extra_class));\n View.Attr.toggle \"required\" (fun () -> required);\n ]\n in\n let attrs = match id with Some i -> View.Attr.id (View.static i) :: attrs | None -> attrs in\n let attrs = match value with Some v -> View.Attr.value (View.static v) :: attrs | None -> attrs in\n let events = match on_input with Some f -> [ View.On.input f ] | None -> [] in\n View.element ~attrs ~events \"input\" []\nend\n\nmodule Textarea = struct\n let make ?(placeholder = \"\") ?(rows = 3) ?(required = false) ?id ?(extra_class = \"\") ?on_input\n ~value () =\n let handle ev =\n Signal.set value (Ui.input_value ev);\n match on_input with Some f -> f ev | None -> ()\n in\n let attrs =\n [\n View.Attr.make \"rows\" (View.static (string_of_int rows));\n View.Attr.placeholder (View.static placeholder);\n View.Attr.className (View.static (Ui.cx (Ui.input_base ^ \" resize-y\") extra_class));\n View.Attr.toggle \"required\" (fun () -> required);\n ]\n in\n let attrs = match id with Some i -> View.Attr.id (View.static i) :: attrs | None -> attrs in\n View.element ~attrs ~events:[ View.On.input handle ] \"textarea\" []\nend\n\nmodule Spinner = struct\n let make ?(size = \"size-4\") ?(tone = `ink) () =\n let colors =\n match tone with\n | `ink -> \"border-neutral-300 border-t-neutral-900\"\n | `on_accent -> \"border-white/40 border-t-white\"\n in\n \nend\n\nmodule Button = struct\n let make ?(variant : Contracts.Button.variant = `primary) ?(size : Contracts.Button.size = `md)\n ?(type_ : Contracts.Button.type_ = `button) ?(disabled = false) ?(loading = false) ?on_click\n ?(extra_class = \"\") ~children () =\n let type_str = match type_ with `button -> \"button\" | `submit -> \"submit\" | `reset -> \"reset\" in\n let size_cls = match size with `sm -> Ui.btn_sm | `md -> Ui.btn_md | `lg -> Ui.btn_lg in\n let colors =\n match variant with\n | `primary -> Ui.btn_primary_colors\n | `secondary -> Ui.btn_secondary_colors\n | `ghost -> Ui.btn_ghost_colors\n | `destructive -> Ui.btn_destructive_colors\n in\n (* Dark-surface variants need an on-accent spinner; light ones use ink. *)\n let spinner_tone =\n match variant with `primary | `destructive -> `on_accent | `secondary | `ghost -> `ink\n in\n let cls = Ui.cx (Ui.btn_core ^ \" \" ^ size_cls ^ \" \" ^ colors) extra_class in\n let attrs =\n [\n View.Attr.type_ (View.static type_str);\n View.Attr.className (View.static cls);\n View.Attr.disabled (fun () -> disabled || loading);\n ]\n in\n let events = match on_click with Some f -> [ View.On.click f ] | None -> [] in\n let spinner = if loading then Spinner.make ~tone:spinner_tone () else View.empty in\n View.element ~attrs ~events \"button\" [ spinner; View.fragment children ]\nend\n\nmodule ContactSection = struct\n let make ?(description = \"\") ?(details = []) ?on_submit ~heading () =\n let name = Signal.make \"\" in\n let email = Signal.make \"\" in\n let message = Signal.make \"\" in\n let sent = Signal.make false in\n let submit ev =\n Ui.prevent_default ev;\n (match on_submit with\n | Some f -> f (Signal.get name, Signal.get email, Signal.get message)\n | None -> ());\n Signal.set sent true\n in\n let detail_row (icon, label, href) =\n View.element ~attrs:[] \"li\"\n [\n View.element\n ~attrs:\n [\n View.Attr.href (View.static href);\n View.Attr.className (View.static \"group inline-flex items-center gap-3 text-sm text-ink\");\n ]\n \"a\"\n [\n \n (Icon.make ~name:icon ())\n ;\n (label);\n ];\n ]\n in\n let form_node =\n View.element\n ~attrs:[ View.Attr.className (View.static \"mt-6 space-y-4\") ]\n ~events:[ View.On.submit submit ]\n \"form\"\n [\n
\n (Field.make ~label:\"Name\" ~for_:\"contact-name\"\n ~children:\n [\n Input.make ~id:\"contact-name\" ~placeholder:\"Ada Lovelace\" ~required:true\n ~on_input:(fun e -> Signal.set name (Ui.input_value e))\n ();\n ]\n ())\n (Field.make ~label:\"Email\" ~for_:\"contact-email\"\n ~children:\n [\n Input.make ~id:\"contact-email\" ~type_:\"email\" ~placeholder:\"ada@example.com\"\n ~required:true\n ~on_input:(fun e -> Signal.set email (Ui.input_value e))\n ();\n ]\n ())\n
;\n (Field.make ~label:\"Message\" ~for_:\"contact-message\"\n ~children:\n [\n Textarea.make ~id:\"contact-message\" ~rows:4 ~required:true ~extra_class:\"resize-none\"\n ~placeholder:\"How can we help?\" ~value:message ();\n ]\n ());\n (Button.make ~type_:`submit ~variant:`primary\n ~children:[ View.text (View.static \"Send message\") ] ());\n (View.element\n ~attrs:[ View.Attr.make \"role\" (View.static \"status\") ]\n \"div\"\n [\n View.show\n (fun () -> Signal.get sent)\n (

\n (\"Thanks \\xe2\\x80\\x94 your message is on its way. We reply within one business day.\")\n

);\n ]);\n ]\n in\n View.element\n ~attrs:[ View.Attr.className (View.static \"grid w-full gap-10 md:grid-cols-5\") ]\n \"section\"\n [\n
\n

(heading)

\n (if description = \"\" then View.empty\n else

(description)

)\n (form_node)\n
;\n (if details = [] then View.empty\n else\n View.element\n ~attrs:[ View.Attr.className (View.static \"space-y-4 md:col-span-2 md:pt-12\") ]\n \"ul\"\n (List.map detail_row details));\n ]\nend\n\nlet contact_section_example () =\n
\n (ContactSection.make ~heading:\"Talk to us\"\n ~description:\"Questions about specs, tokens, or the agent skill? We reply within one business day.\"\n ~details:\n [\n (\"mail\", \"hello@acme.dev\", \"mailto:hello@acme.dev\");\n (\"github\", \"acme/support\", \"https://github.com\");\n ]\n ())\n
") + | "alert-dialog" => Some("module Spinner = struct\n let make ?(size = \"size-4\") ?(tone = `ink) () =\n let colors =\n match tone with\n | `ink -> \"border-neutral-300 border-t-neutral-900\"\n | `on_accent -> \"border-white/40 border-t-white\"\n in\n \nend\n\nmodule Button = struct\n let make ?(variant : Contracts.Button.variant = `primary) ?(size : Contracts.Button.size = `md)\n ?(type_ : Contracts.Button.type_ = `button) ?(disabled = false) ?(loading = false) ?on_click\n ?(extra_class = \"\") ~children () =\n let type_str = match type_ with `button -> \"button\" | `submit -> \"submit\" | `reset -> \"reset\" in\n let size_cls = match size with `sm -> Ui.btn_sm | `md -> Ui.btn_md | `lg -> Ui.btn_lg in\n let colors =\n match variant with\n | `primary -> Ui.btn_primary_colors\n | `secondary -> Ui.btn_secondary_colors\n | `ghost -> Ui.btn_ghost_colors\n | `destructive -> Ui.btn_destructive_colors\n in\n (* Dark-surface variants need an on-accent spinner; light ones use ink. *)\n let spinner_tone =\n match variant with `primary | `destructive -> `on_accent | `secondary | `ghost -> `ink\n in\n let cls = Ui.cx (Ui.btn_core ^ \" \" ^ size_cls ^ \" \" ^ colors) extra_class in\n let attrs =\n [\n View.Attr.type_ (View.static type_str);\n View.Attr.className (View.static cls);\n View.Attr.disabled (fun () -> disabled || loading);\n ]\n in\n let events = match on_click with Some f -> [ View.On.click f ] | None -> [] in\n let spinner = if loading then Spinner.make ~tone:spinner_tone () else View.empty in\n View.element ~attrs ~events \"button\" [ spinner; View.fragment children ]\nend\n\nlet txt s = View.text (View.static s)\n\nlet el ?(cls = \"\") ?(attrs = []) ?(events = []) tag children =\n let attrs = if cls = \"\" then attrs else View.Attr.className (View.static cls) :: attrs in\n View.element ~attrs ~events tag children\n\nlet alert_dialog_example () =\n let open_ = Signal.make false in\n el ~cls:\"relative flex h-64 w-full max-w-lg items-center justify-center\" \"div\"\n [\n Button.make ~variant:`destructive\n ~on_click:(fun _ -> Signal.set open_ true)\n ~children:[ txt \"Delete account\" ] ();\n View.show\n (fun () -> Signal.get open_)\n (el ~cls:\"absolute inset-0 z-10 flex items-center justify-center\" \"div\"\n [\n el ~cls:\"absolute inset-0 bg-neutral-900/40\" \"div\" [];\n el\n ~cls:\n \"relative z-20 w-80 rounded-lg border border-neutral-200 bg-surface p-5 shadow-2xl\"\n \"div\"\n [\n el ~cls:\"text-lg font-semibold text-neutral-900\" \"h3\"\n [ txt \"Are you absolutely sure?\" ];\n el ~cls:\"mt-1 text-sm text-neutral-500\" \"p\"\n [\n txt\n \"This permanently deletes your account and all data. This cannot be undone.\";\n ];\n el ~cls:\"mt-5 flex justify-end gap-2\" \"div\"\n [\n Button.make ~variant:`secondary\n ~on_click:(fun _ -> Signal.set open_ false)\n ~children:[ txt \"Cancel\" ] ();\n Button.make ~variant:`destructive\n ~on_click:(fun _ -> Signal.set open_ false)\n ~children:[ txt \"Delete\" ] ();\n ];\n ];\n ])\n ]") + | "dropdown-menu" => Some("module Spinner = struct\n let make ?(size = \"size-4\") ?(tone = `ink) () =\n let colors =\n match tone with\n | `ink -> \"border-neutral-300 border-t-neutral-900\"\n | `on_accent -> \"border-white/40 border-t-white\"\n in\n \nend\n\nmodule Button = struct\n let make ?(variant : Contracts.Button.variant = `primary) ?(size : Contracts.Button.size = `md)\n ?(type_ : Contracts.Button.type_ = `button) ?(disabled = false) ?(loading = false) ?on_click\n ?(extra_class = \"\") ~children () =\n let type_str = match type_ with `button -> \"button\" | `submit -> \"submit\" | `reset -> \"reset\" in\n let size_cls = match size with `sm -> Ui.btn_sm | `md -> Ui.btn_md | `lg -> Ui.btn_lg in\n let colors =\n match variant with\n | `primary -> Ui.btn_primary_colors\n | `secondary -> Ui.btn_secondary_colors\n | `ghost -> Ui.btn_ghost_colors\n | `destructive -> Ui.btn_destructive_colors\n in\n (* Dark-surface variants need an on-accent spinner; light ones use ink. *)\n let spinner_tone =\n match variant with `primary | `destructive -> `on_accent | `secondary | `ghost -> `ink\n in\n let cls = Ui.cx (Ui.btn_core ^ \" \" ^ size_cls ^ \" \" ^ colors) extra_class in\n let attrs =\n [\n View.Attr.type_ (View.static type_str);\n View.Attr.className (View.static cls);\n View.Attr.disabled (fun () -> disabled || loading);\n ]\n in\n let events = match on_click with Some f -> [ View.On.click f ] | None -> [] in\n let spinner = if loading then Spinner.make ~tone:spinner_tone () else View.empty in\n View.element ~attrs ~events \"button\" [ spinner; View.fragment children ]\nend\n\nmodule Icon = struct\n (* Fresh host ids so multiple icons of the same name never collide. *)\n let counter = ref 0\n\n let make ?(size : Contracts.Icon.size = `md) ?(label = \"\") ?(extra_class = \"\") ~name () =\n let dims =\n match size with\n | `xs -> \"size-3\"\n | `sm -> \"size-4\"\n | `md -> \"size-5\"\n | `lg -> \"size-6\"\n | `xl -> \"size-8\"\n in\n let body = match Icons.get name with Some b -> b | None -> [] in\n let meaningful = label <> \"\" in\n (* Meaningful icons expose an img role + accessible name; decorative ones are\n hidden so assistive tech doesn't announce them beside their label. *)\n let role_attrs =\n if meaningful then \"role=\\\"img\\\" aria-label=\\\"\" ^ label ^ \"\\\"\" else \"aria-hidden=\\\"true\\\"\"\n in\n let extra = if extra_class = \"\" then \"\" else \" \" ^ extra_class in\n let markup = Icons.svg ~dims ~extra ~role_attrs body in\n View.dyn (fun () ->\n incr counter;\n let id = \"prescriptive-reativa-icon-\" ^ string_of_int !counter in\n Ui.set_inner_html_by_id id markup;\n View.element ~attrs:[ View.Attr.id (View.static id) ] \"span\" [])\nend\n\nmodule Backdrop = struct\n let make ~on_close () =\n
on_close ()) />\nend\n\nlet txt s = View.text (View.static s)\n\nlet el ?(cls = \"\") ?(attrs = []) ?(events = []) tag children =\n let attrs = if cls = \"\" then attrs else View.Attr.className (View.static cls) :: attrs in\n View.element ~attrs ~events tag children\n\nlet dropdown_menu_example () =\n let open_ = Signal.make false in\n let close _ = Signal.set open_ false in\n el ~cls:\"relative inline-block\" \"div\"\n [\n Button.make ~variant:`secondary\n ~on_click:(fun _ -> Signal.update open_ (fun v -> not v))\n ~children:[ txt \"Options\"; Icon.make ~name:\"chevron-down\" ~size:`sm () ] ();\n View.show\n (fun () -> Signal.get open_)\n (View.fragment\n [\n Backdrop.make ~on_close:(fun () -> Signal.set open_ false) ();\n el\n ~cls:\n \"absolute z-20 mt-1 w-48 rounded-md border border-neutral-200 bg-surface py-1 \\\n shadow-lg\"\n \"div\"\n (List.map (menu_item ~on_click:close)\n [ \"Profile\"; \"Billing\"; \"Settings\"; \"Sign out\" ]);\n ])\n ]") + | "context-menu" => Some("module Backdrop = struct\n let make ~on_close () =\n
on_close ()) />\nend\n\nlet txt s = View.text (View.static s)\n\nlet el ?(cls = \"\") ?(attrs = []) ?(events = []) tag children =\n let attrs = if cls = \"\" then attrs else View.Attr.className (View.static cls) :: attrs in\n View.element ~attrs ~events tag children\n\nlet context_menu_example () =\n let open_ = Signal.make false in\n let close _ = Signal.set open_ false in\n el ~cls:\"relative flex h-40 w-full max-w-md items-center justify-center\" \"div\"\n [\n View.element\n ~attrs:\n [\n View.Attr.className\n (View.static\n \"flex h-28 w-full items-center justify-center rounded-lg border border-dashed \\\n border-neutral-300 text-sm text-neutral-500\");\n ]\n ~events:\n [ View.On.on \"contextmenu\" (fun e -> Ui.prevent_default e; Signal.set open_ true) ]\n \"div\"\n [ txt \"Right-click here\" ];\n View.show\n (fun () -> Signal.get open_)\n (View.fragment\n [\n Backdrop.make ~on_close:(fun () -> Signal.set open_ false) ();\n el\n ~cls:\n \"absolute left-1/2 top-1/2 z-20 w-44 rounded-md border border-neutral-200 \\\n bg-surface py-1 shadow-lg\"\n \"div\"\n (List.map (menu_item ~on_click:close) [ \"Cut\"; \"Copy\"; \"Paste\"; \"Delete\" ]);\n ])\n ]") + | "popover" => Some("module Spinner = struct\n let make ?(size = \"size-4\") ?(tone = `ink) () =\n let colors =\n match tone with\n | `ink -> \"border-neutral-300 border-t-neutral-900\"\n | `on_accent -> \"border-white/40 border-t-white\"\n in\n \nend\n\nmodule Button = struct\n let make ?(variant : Contracts.Button.variant = `primary) ?(size : Contracts.Button.size = `md)\n ?(type_ : Contracts.Button.type_ = `button) ?(disabled = false) ?(loading = false) ?on_click\n ?(extra_class = \"\") ~children () =\n let type_str = match type_ with `button -> \"button\" | `submit -> \"submit\" | `reset -> \"reset\" in\n let size_cls = match size with `sm -> Ui.btn_sm | `md -> Ui.btn_md | `lg -> Ui.btn_lg in\n let colors =\n match variant with\n | `primary -> Ui.btn_primary_colors\n | `secondary -> Ui.btn_secondary_colors\n | `ghost -> Ui.btn_ghost_colors\n | `destructive -> Ui.btn_destructive_colors\n in\n (* Dark-surface variants need an on-accent spinner; light ones use ink. *)\n let spinner_tone =\n match variant with `primary | `destructive -> `on_accent | `secondary | `ghost -> `ink\n in\n let cls = Ui.cx (Ui.btn_core ^ \" \" ^ size_cls ^ \" \" ^ colors) extra_class in\n let attrs =\n [\n View.Attr.type_ (View.static type_str);\n View.Attr.className (View.static cls);\n View.Attr.disabled (fun () -> disabled || loading);\n ]\n in\n let events = match on_click with Some f -> [ View.On.click f ] | None -> [] in\n let spinner = if loading then Spinner.make ~tone:spinner_tone () else View.empty in\n View.element ~attrs ~events \"button\" [ spinner; View.fragment children ]\nend\n\nmodule Backdrop = struct\n let make ~on_close () =\n
on_close ()) />\nend\n\nmodule Input = struct\n let make ?(type_ = \"text\") ?id ?(placeholder = \"\") ?value ?(required = false) ?on_input\n ?(extra_class = \"\") () =\n let attrs =\n [\n View.Attr.type_ (View.static type_);\n View.Attr.placeholder (View.static placeholder);\n View.Attr.className (View.static (Ui.cx Ui.input_base extra_class));\n View.Attr.toggle \"required\" (fun () -> required);\n ]\n in\n let attrs = match id with Some i -> View.Attr.id (View.static i) :: attrs | None -> attrs in\n let attrs = match value with Some v -> View.Attr.value (View.static v) :: attrs | None -> attrs in\n let events = match on_input with Some f -> [ View.On.input f ] | None -> [] in\n View.element ~attrs ~events \"input\" []\nend\n\nlet txt s = View.text (View.static s)\n\nlet el ?(cls = \"\") ?(attrs = []) ?(events = []) tag children =\n let attrs = if cls = \"\" then attrs else View.Attr.className (View.static cls) :: attrs in\n View.element ~attrs ~events tag children\n\nlet popover_example () =\n let open_ = Signal.make false in\n el ~cls:\"relative inline-block\" \"div\"\n [\n Button.make ~variant:`secondary\n ~on_click:(fun _ -> Signal.update open_ (fun v -> not v))\n ~children:[ txt \"Open popover\" ] ();\n View.show\n (fun () -> Signal.get open_)\n (View.fragment\n [\n Backdrop.make ~on_close:(fun () -> Signal.set open_ false) ();\n el\n ~cls:\n \"absolute z-20 mt-2 w-64 rounded-lg border border-neutral-200 bg-surface p-4 \\\n shadow-xl\"\n \"div\"\n [\n el ~cls:\"text-sm font-medium text-neutral-900\" \"p\" [ txt \"Dimensions\" ];\n el ~cls:\"mt-1 text-xs text-neutral-500\" \"p\"\n [ txt \"Set the width and height of the layer.\" ];\n el ~cls:\"mt-3 space-y-2\" \"div\"\n [ Input.make ~placeholder:\"Width\" (); Input.make ~placeholder:\"Height\" () ];\n ];\n ])\n ]") + | "hover-card" => Some("module Avatar = struct\n let make ?(size = \"size-10 text-sm\") ~initials () =\n \n (initials)\n \nend\n\nlet txt s = View.text (View.static s)\n\nlet el ?(cls = \"\") ?(attrs = []) ?(events = []) tag children =\n let attrs = if cls = \"\" then attrs else View.Attr.className (View.static cls) :: attrs in\n View.element ~attrs ~events tag children\n\nlet hover_card_example () =\n let open_ = Signal.make false in\n el ~cls:\"flex h-40 items-center justify-center\" \"div\"\n [\n View.element\n ~attrs:[ View.Attr.className (View.static \"relative inline-block\") ]\n ~events:\n [\n View.On.on \"mouseenter\" (fun _ -> Signal.set open_ true);\n View.On.on \"mouseleave\" (fun _ -> Signal.set open_ false);\n ]\n \"span\"\n [\n el ~cls:\"font-medium text-neutral-900 underline decoration-neutral-300 underline-offset-4\"\n ~attrs:[ View.Attr.href (View.static \"#\") ] \"a\" [ txt \"@ada\" ];\n View.show\n (fun () -> Signal.get open_)\n (el\n ~cls:\n \"absolute left-0 top-7 z-20 w-64 rounded-lg border border-neutral-200 bg-surface \\\n p-4 shadow-xl\"\n \"div\"\n [\n el ~cls:\"flex items-center gap-3\" \"div\"\n [\n Avatar.make ~initials:\"AL\" ();\n el \"div\"\n [\n el ~cls:\"text-sm font-semibold text-neutral-900\" \"p\" [ txt \"Ada Lovelace\" ];\n el ~cls:\"text-xs text-neutral-500\" \"p\" [ txt \"First programmer\" ];\n ];\n ];\n el ~cls:\"mt-3 text-xs text-neutral-600\" \"p\"\n [ txt \"Wrote the first algorithm intended for a machine.\" ];\n ]);\n ]\n ]") + | "sheet" => Some("module Spinner = struct\n let make ?(size = \"size-4\") ?(tone = `ink) () =\n let colors =\n match tone with\n | `ink -> \"border-neutral-300 border-t-neutral-900\"\n | `on_accent -> \"border-white/40 border-t-white\"\n in\n \nend\n\nmodule Button = struct\n let make ?(variant : Contracts.Button.variant = `primary) ?(size : Contracts.Button.size = `md)\n ?(type_ : Contracts.Button.type_ = `button) ?(disabled = false) ?(loading = false) ?on_click\n ?(extra_class = \"\") ~children () =\n let type_str = match type_ with `button -> \"button\" | `submit -> \"submit\" | `reset -> \"reset\" in\n let size_cls = match size with `sm -> Ui.btn_sm | `md -> Ui.btn_md | `lg -> Ui.btn_lg in\n let colors =\n match variant with\n | `primary -> Ui.btn_primary_colors\n | `secondary -> Ui.btn_secondary_colors\n | `ghost -> Ui.btn_ghost_colors\n | `destructive -> Ui.btn_destructive_colors\n in\n (* Dark-surface variants need an on-accent spinner; light ones use ink. *)\n let spinner_tone =\n match variant with `primary | `destructive -> `on_accent | `secondary | `ghost -> `ink\n in\n let cls = Ui.cx (Ui.btn_core ^ \" \" ^ size_cls ^ \" \" ^ colors) extra_class in\n let attrs =\n [\n View.Attr.type_ (View.static type_str);\n View.Attr.className (View.static cls);\n View.Attr.disabled (fun () -> disabled || loading);\n ]\n in\n let events = match on_click with Some f -> [ View.On.click f ] | None -> [] in\n let spinner = if loading then Spinner.make ~tone:spinner_tone () else View.empty in\n View.element ~attrs ~events \"button\" [ spinner; View.fragment children ]\nend\n\nlet txt s = View.text (View.static s)\n\nlet el ?(cls = \"\") ?(attrs = []) ?(events = []) tag children =\n let attrs = if cls = \"\" then attrs else View.Attr.className (View.static cls) :: attrs in\n View.element ~attrs ~events tag children\n\nlet sheet_example () =\n let open_ = Signal.make false in\n el ~cls:\"relative flex h-64 w-full items-center justify-center overflow-hidden rounded-lg\" \"div\"\n [\n Button.make ~variant:`primary\n ~on_click:(fun _ -> Signal.set open_ true)\n ~children:[ txt \"Open sheet\" ] ();\n View.show\n (fun () -> Signal.get open_)\n (View.fragment\n [\n View.element\n ~attrs:[ View.Attr.className (View.static \"absolute inset-0 z-10 bg-neutral-900/40\") ]\n ~events:[ View.On.click (fun _ -> Signal.set open_ false) ]\n \"div\" [];\n el\n ~cls:\n \"absolute right-0 top-0 z-20 flex h-full w-72 flex-col border-l border-neutral-200 \\\n bg-surface p-5 shadow-2xl\"\n \"div\"\n [\n el ~cls:\"text-lg font-semibold text-neutral-900\" \"h3\" [ txt \"Filters\" ];\n el ~cls:\"mt-1 text-sm text-neutral-500\" \"p\"\n [ txt \"Refine the results shown in the list.\" ];\n el ~cls:\"mt-auto flex justify-end\" \"div\"\n [\n Button.make ~variant:`primary\n ~on_click:(fun _ -> Signal.set open_ false)\n ~children:[ txt \"Apply\" ] ();\n ];\n ];\n ])\n ]") + | "drawer" => Some("module Spinner = struct\n let make ?(size = \"size-4\") ?(tone = `ink) () =\n let colors =\n match tone with\n | `ink -> \"border-neutral-300 border-t-neutral-900\"\n | `on_accent -> \"border-white/40 border-t-white\"\n in\n \nend\n\nmodule Button = struct\n let make ?(variant : Contracts.Button.variant = `primary) ?(size : Contracts.Button.size = `md)\n ?(type_ : Contracts.Button.type_ = `button) ?(disabled = false) ?(loading = false) ?on_click\n ?(extra_class = \"\") ~children () =\n let type_str = match type_ with `button -> \"button\" | `submit -> \"submit\" | `reset -> \"reset\" in\n let size_cls = match size with `sm -> Ui.btn_sm | `md -> Ui.btn_md | `lg -> Ui.btn_lg in\n let colors =\n match variant with\n | `primary -> Ui.btn_primary_colors\n | `secondary -> Ui.btn_secondary_colors\n | `ghost -> Ui.btn_ghost_colors\n | `destructive -> Ui.btn_destructive_colors\n in\n (* Dark-surface variants need an on-accent spinner; light ones use ink. *)\n let spinner_tone =\n match variant with `primary | `destructive -> `on_accent | `secondary | `ghost -> `ink\n in\n let cls = Ui.cx (Ui.btn_core ^ \" \" ^ size_cls ^ \" \" ^ colors) extra_class in\n let attrs =\n [\n View.Attr.type_ (View.static type_str);\n View.Attr.className (View.static cls);\n View.Attr.disabled (fun () -> disabled || loading);\n ]\n in\n let events = match on_click with Some f -> [ View.On.click f ] | None -> [] in\n let spinner = if loading then Spinner.make ~tone:spinner_tone () else View.empty in\n View.element ~attrs ~events \"button\" [ spinner; View.fragment children ]\nend\n\nlet txt s = View.text (View.static s)\n\nlet el ?(cls = \"\") ?(attrs = []) ?(events = []) tag children =\n let attrs = if cls = \"\" then attrs else View.Attr.className (View.static cls) :: attrs in\n View.element ~attrs ~events tag children\n\nlet drawer_example () =\n let open_ = Signal.make false in\n el ~cls:\"relative flex h-64 w-full items-center justify-center overflow-hidden rounded-lg\" \"div\"\n [\n Button.make ~variant:`primary\n ~on_click:(fun _ -> Signal.set open_ true)\n ~children:[ txt \"Open drawer\" ] ();\n View.show\n (fun () -> Signal.get open_)\n (View.fragment\n [\n View.element\n ~attrs:[ View.Attr.className (View.static \"absolute inset-0 z-10 bg-neutral-900/40\") ]\n ~events:[ View.On.click (fun _ -> Signal.set open_ false) ]\n \"div\" [];\n el\n ~cls:\n \"absolute bottom-0 left-0 z-20 w-full rounded-t-2xl border-t border-neutral-200 \\\n bg-surface p-5 shadow-2xl\"\n \"div\"\n [\n el ~cls:\"mx-auto mb-4 h-1 w-10 rounded-full bg-neutral-300\" \"div\" [];\n el ~cls:\"text-lg font-semibold text-neutral-900\" \"h3\" [ txt \"Share\" ];\n el ~cls:\"mt-1 text-sm text-neutral-500\" \"p\"\n [ txt \"Swipe down or tap the backdrop to dismiss.\" ];\n el ~cls:\"mt-4 flex gap-2\" \"div\"\n [\n Button.make ~variant:`secondary\n ~on_click:(fun _ -> Signal.set open_ false)\n ~children:[ txt \"Copy link\" ] ();\n Button.make ~variant:`primary\n ~on_click:(fun _ -> Signal.set open_ false)\n ~children:[ txt \"Send\" ] ();\n ];\n ];\n ])\n ]") + | "toast" => Some("module Spinner = struct\n let make ?(size = \"size-4\") ?(tone = `ink) () =\n let colors =\n match tone with\n | `ink -> \"border-neutral-300 border-t-neutral-900\"\n | `on_accent -> \"border-white/40 border-t-white\"\n in\n \nend\n\nmodule Button = struct\n let make ?(variant : Contracts.Button.variant = `primary) ?(size : Contracts.Button.size = `md)\n ?(type_ : Contracts.Button.type_ = `button) ?(disabled = false) ?(loading = false) ?on_click\n ?(extra_class = \"\") ~children () =\n let type_str = match type_ with `button -> \"button\" | `submit -> \"submit\" | `reset -> \"reset\" in\n let size_cls = match size with `sm -> Ui.btn_sm | `md -> Ui.btn_md | `lg -> Ui.btn_lg in\n let colors =\n match variant with\n | `primary -> Ui.btn_primary_colors\n | `secondary -> Ui.btn_secondary_colors\n | `ghost -> Ui.btn_ghost_colors\n | `destructive -> Ui.btn_destructive_colors\n in\n (* Dark-surface variants need an on-accent spinner; light ones use ink. *)\n let spinner_tone =\n match variant with `primary | `destructive -> `on_accent | `secondary | `ghost -> `ink\n in\n let cls = Ui.cx (Ui.btn_core ^ \" \" ^ size_cls ^ \" \" ^ colors) extra_class in\n let attrs =\n [\n View.Attr.type_ (View.static type_str);\n View.Attr.className (View.static cls);\n View.Attr.disabled (fun () -> disabled || loading);\n ]\n in\n let events = match on_click with Some f -> [ View.On.click f ] | None -> [] in\n let spinner = if loading then Spinner.make ~tone:spinner_tone () else View.empty in\n View.element ~attrs ~events \"button\" [ spinner; View.fragment children ]\nend\n\nmodule Icon = struct\n (* Fresh host ids so multiple icons of the same name never collide. *)\n let counter = ref 0\n\n let make ?(size : Contracts.Icon.size = `md) ?(label = \"\") ?(extra_class = \"\") ~name () =\n let dims =\n match size with\n | `xs -> \"size-3\"\n | `sm -> \"size-4\"\n | `md -> \"size-5\"\n | `lg -> \"size-6\"\n | `xl -> \"size-8\"\n in\n let body = match Icons.get name with Some b -> b | None -> [] in\n let meaningful = label <> \"\" in\n (* Meaningful icons expose an img role + accessible name; decorative ones are\n hidden so assistive tech doesn't announce them beside their label. *)\n let role_attrs =\n if meaningful then \"role=\\\"img\\\" aria-label=\\\"\" ^ label ^ \"\\\"\" else \"aria-hidden=\\\"true\\\"\"\n in\n let extra = if extra_class = \"\" then \"\" else \" \" ^ extra_class in\n let markup = Icons.svg ~dims ~extra ~role_attrs body in\n View.dyn (fun () ->\n incr counter;\n let id = \"prescriptive-reativa-icon-\" ^ string_of_int !counter in\n Ui.set_inner_html_by_id id markup;\n View.element ~attrs:[ View.Attr.id (View.static id) ] \"span\" [])\nend\n\nlet txt s = View.text (View.static s)\n\nlet el ?(cls = \"\") ?(attrs = []) ?(events = []) tag children =\n let attrs = if cls = \"\" then attrs else View.Attr.className (View.static cls) :: attrs in\n View.element ~attrs ~events tag children\n\nlet toast_example () =\n let show = Signal.make false in\n el ~cls:\"relative h-40 w-full max-w-md\" \"div\"\n [\n Button.make ~variant:`primary\n ~on_click:(fun _ ->\n Signal.set show true;\n Ui.set_timeout (fun () -> Signal.set show false) 2600)\n ~children:[ txt \"Show toast\" ] ();\n View.show\n (fun () -> Signal.get show)\n (el\n ~cls:\n \"absolute bottom-2 right-2 flex w-72 items-start gap-3 rounded-lg border \\\n border-neutral-200 bg-surface p-3 shadow-xl\"\n \"div\"\n [\n el ~cls:\"mt-0.5 text-status-success\" \"span\"\n [ Icon.make ~name:\"check-circle\" ~size:`sm () ];\n el ~cls:\"flex-1\" \"div\"\n [\n el ~cls:\"text-sm font-medium text-neutral-900\" \"p\" [ txt \"Changes saved\" ];\n el ~cls:\"text-xs text-neutral-500\" \"p\" [ txt \"Your profile has been updated.\" ];\n ];\n View.element\n ~attrs:\n [\n View.Attr.className\n (View.static \"text-sm text-neutral-500 hover:text-neutral-900\");\n ]\n ~events:[ View.On.click (fun _ -> Signal.set show false) ]\n \"button\"\n [ txt \"Undo\" ];\n ])\n ]") + | "table" => Some("module Badge = struct\n let make ?(variant : Contracts.Badge.variant = `solid) ~children () =\n let tone =\n match variant with\n | `solid -> \"bg-neutral-900 text-neutral-0\"\n | `soft -> \"bg-neutral-200 text-neutral-800\"\n | `outline -> \"border border-neutral-300 text-neutral-700\"\n in\n \n (View.fragment children)\n \nend\n\nlet txt s = View.text (View.static s)\n\nlet el ?(cls = \"\") ?(attrs = []) ?(events = []) tag children =\n let attrs = if cls = \"\" then attrs else View.Attr.className (View.static cls) :: attrs in\n View.element ~attrs ~events tag children\n\nlet table_example () =\n let rows =\n [\n (\"INV-001\", \"Paid\", \"$250.00\");\n (\"INV-002\", \"Pending\", \"$150.00\");\n (\"INV-003\", \"Unpaid\", \"$350.00\");\n ]\n in\n let th cls label = el ~cls \"th\" label in\n el ~cls:\"w-96 overflow-hidden rounded-lg border border-neutral-200\" \"div\"\n [\n el ~cls:\"w-full text-sm\" \"table\"\n [\n el ~cls:\"bg-neutral-50 text-left text-xs uppercase tracking-wide text-neutral-500\" \"thead\"\n [\n el \"tr\"\n [\n th \"px-4 py-2 font-medium\" [ txt \"Invoice\" ];\n th \"px-4 py-2 font-medium\" [ txt \"Status\" ];\n th \"px-4 py-2 text-right font-medium\" [ txt \"Amount\" ];\n ];\n ];\n el ~cls:\"divide-y divide-neutral-100\" \"tbody\"\n (List.map\n (fun (inv, status, amount) ->\n el ~cls:\"text-neutral-700\" \"tr\"\n [\n el ~cls:\"px-4 py-2 font-medium text-neutral-900\" \"td\" [ txt inv ];\n el ~cls:\"px-4 py-2\" \"td\" [ Badge.make ~variant:`soft ~children:[ txt status ] () ];\n el ~cls:\"px-4 py-2 text-right tabular-nums\" \"td\" [ txt amount ];\n ])\n rows);\n ];\n ]") + | "data-table" => Some("module Input = struct\n let make ?(type_ = \"text\") ?id ?(placeholder = \"\") ?value ?(required = false) ?on_input\n ?(extra_class = \"\") () =\n let attrs =\n [\n View.Attr.type_ (View.static type_);\n View.Attr.placeholder (View.static placeholder);\n View.Attr.className (View.static (Ui.cx Ui.input_base extra_class));\n View.Attr.toggle \"required\" (fun () -> required);\n ]\n in\n let attrs = match id with Some i -> View.Attr.id (View.static i) :: attrs | None -> attrs in\n let attrs = match value with Some v -> View.Attr.value (View.static v) :: attrs | None -> attrs in\n let events = match on_input with Some f -> [ View.On.input f ] | None -> [] in\n View.element ~attrs ~events \"input\" []\nend\n\nmodule Spinner = struct\n let make ?(size = \"size-4\") ?(tone = `ink) () =\n let colors =\n match tone with\n | `ink -> \"border-neutral-300 border-t-neutral-900\"\n | `on_accent -> \"border-white/40 border-t-white\"\n in\n \nend\n\nmodule Button = struct\n let make ?(variant : Contracts.Button.variant = `primary) ?(size : Contracts.Button.size = `md)\n ?(type_ : Contracts.Button.type_ = `button) ?(disabled = false) ?(loading = false) ?on_click\n ?(extra_class = \"\") ~children () =\n let type_str = match type_ with `button -> \"button\" | `submit -> \"submit\" | `reset -> \"reset\" in\n let size_cls = match size with `sm -> Ui.btn_sm | `md -> Ui.btn_md | `lg -> Ui.btn_lg in\n let colors =\n match variant with\n | `primary -> Ui.btn_primary_colors\n | `secondary -> Ui.btn_secondary_colors\n | `ghost -> Ui.btn_ghost_colors\n | `destructive -> Ui.btn_destructive_colors\n in\n (* Dark-surface variants need an on-accent spinner; light ones use ink. *)\n let spinner_tone =\n match variant with `primary | `destructive -> `on_accent | `secondary | `ghost -> `ink\n in\n let cls = Ui.cx (Ui.btn_core ^ \" \" ^ size_cls ^ \" \" ^ colors) extra_class in\n let attrs =\n [\n View.Attr.type_ (View.static type_str);\n View.Attr.className (View.static cls);\n View.Attr.disabled (fun () -> disabled || loading);\n ]\n in\n let events = match on_click with Some f -> [ View.On.click f ] | None -> [] in\n let spinner = if loading then Spinner.make ~tone:spinner_tone () else View.empty in\n View.element ~attrs ~events \"button\" [ spinner; View.fragment children ]\nend\n\nmodule Icon = struct\n (* Fresh host ids so multiple icons of the same name never collide. *)\n let counter = ref 0\n\n let make ?(size : Contracts.Icon.size = `md) ?(label = \"\") ?(extra_class = \"\") ~name () =\n let dims =\n match size with\n | `xs -> \"size-3\"\n | `sm -> \"size-4\"\n | `md -> \"size-5\"\n | `lg -> \"size-6\"\n | `xl -> \"size-8\"\n in\n let body = match Icons.get name with Some b -> b | None -> [] in\n let meaningful = label <> \"\" in\n (* Meaningful icons expose an img role + accessible name; decorative ones are\n hidden so assistive tech doesn't announce them beside their label. *)\n let role_attrs =\n if meaningful then \"role=\\\"img\\\" aria-label=\\\"\" ^ label ^ \"\\\"\" else \"aria-hidden=\\\"true\\\"\"\n in\n let extra = if extra_class = \"\" then \"\" else \" \" ^ extra_class in\n let markup = Icons.svg ~dims ~extra ~role_attrs body in\n View.dyn (fun () ->\n incr counter;\n let id = \"prescriptive-reativa-icon-\" ^ string_of_int !counter in\n Ui.set_inner_html_by_id id markup;\n View.element ~attrs:[ View.Attr.id (View.static id) ] \"span\" [])\nend\n\nmodule Badge = struct\n let make ?(variant : Contracts.Badge.variant = `solid) ~children () =\n let tone =\n match variant with\n | `solid -> \"bg-neutral-900 text-neutral-0\"\n | `soft -> \"bg-neutral-200 text-neutral-800\"\n | `outline -> \"border border-neutral-300 text-neutral-700\"\n in\n \n (View.fragment children)\n \nend\n\nlet txt s = View.text (View.static s)\n\nlet el ?(cls = \"\") ?(attrs = []) ?(events = []) tag children =\n let attrs = if cls = \"\" then attrs else View.Attr.className (View.static cls) :: attrs in\n View.element ~attrs ~events tag children\n\nlet data_table_example () =\n let source =\n [\n (\"Ada Lovelace\", \"Owner\", \"Active\");\n (\"Grace Hopper\", \"Admin\", \"Active\");\n (\"Alan Turing\", \"Member\", \"Invited\");\n (\"Katherine Johnson\", \"Member\", \"Active\");\n ]\n in\n let query = Signal.make \"\" in\n let asc = Signal.make true in\n let rows () =\n let filtered = List.filter (fun (name, _, _) -> contains_ci name (Signal.get query)) source in\n let sorted = List.stable_sort (fun (a, _, _) (b, _, _) -> String.compare a b) filtered in\n if Signal.get asc then sorted else List.rev sorted\n in\n let th label = el ~cls:\"px-4 py-2 font-medium\" \"th\" [ txt label ] in\n el ~cls:\"w-[28rem] space-y-3\" \"div\"\n [\n el ~cls:\"flex items-center justify-between\" \"div\"\n [\n Input.make ~type_:\"search\" ~extra_class:\"max-w-48\" ~placeholder:{js|Filter people…|js}\n ~on_input:(fun e -> Signal.set query (Ui.input_value e))\n ();\n Button.make ~variant:`secondary\n ~on_click:(fun _ -> Signal.update asc (fun v -> not v))\n ~children:\n [\n txt \"Sort name\";\n View.show\n ~fallback:(Icon.make ~name:\"arrow-down\" ~size:`sm ())\n (fun () -> Signal.get asc)\n (Icon.make ~name:\"arrow-up\" ~size:`sm ());\n ]\n ();\n ];\n el ~cls:\"overflow-hidden rounded-lg border border-neutral-200\" \"div\"\n [\n el ~cls:\"w-full text-sm\" \"table\"\n [\n el ~cls:\"bg-neutral-50 text-left text-xs uppercase tracking-wide text-neutral-500\"\n \"thead\" [ el \"tr\" [ th \"Name\"; th \"Role\"; th \"Status\" ] ];\n el ~cls:\"divide-y divide-neutral-100\" \"tbody\"\n [\n View.for_ rows (fun (name, role, status) ->\n el ~cls:\"text-neutral-700\" \"tr\"\n [\n el ~cls:\"px-4 py-2 font-medium text-neutral-900\" \"td\" [ txt name ];\n el ~cls:\"px-4 py-2\" \"td\" [ txt role ];\n el ~cls:\"px-4 py-2\" \"td\"\n [ Badge.make ~variant:`soft ~children:[ txt status ] () ];\n ]);\n ];\n ];\n ];\n ]") + | "chart" => Some("let txt s = View.text (View.static s)\n\nlet el ?(cls = \"\") ?(attrs = []) ?(events = []) tag children =\n let attrs = if cls = \"\" then attrs else View.Attr.className (View.static cls) :: attrs in\n View.element ~attrs ~events tag children\n\nlet chart_example () =\n let bars =\n [\n (\"Mon\", 40); (\"Tue\", 72); (\"Wed\", 55); (\"Thu\", 88); (\"Fri\", 63); (\"Sat\", 30); (\"Sun\", 20);\n ]\n in\n el ~cls:\"w-96\" \"div\"\n [\n el ~cls:\"flex h-40 items-end gap-2 border-b border-l border-neutral-200 p-2\" \"div\"\n (List.map\n (fun (_l, v) ->\n el ~cls:\"flex flex-1 items-end justify-center\" \"div\"\n [\n el ~cls:\"w-full rounded-t bg-neutral-900\"\n ~attrs:\n [ View.Attr.make \"style\" (View.static (\"height:\" ^ string_of_int v ^ \"%\")) ]\n \"div\" [];\n ])\n bars);\n el ~cls:\"mt-1 flex gap-2 px-2\" \"div\"\n (List.map\n (fun (l, _v) -> el ~cls:\"flex-1 text-center text-xs text-neutral-400\" \"div\" [ txt l ])\n bars);\n ]") + | "carousel" => Some("module Icon = struct\n (* Fresh host ids so multiple icons of the same name never collide. *)\n let counter = ref 0\n\n let make ?(size : Contracts.Icon.size = `md) ?(label = \"\") ?(extra_class = \"\") ~name () =\n let dims =\n match size with\n | `xs -> \"size-3\"\n | `sm -> \"size-4\"\n | `md -> \"size-5\"\n | `lg -> \"size-6\"\n | `xl -> \"size-8\"\n in\n let body = match Icons.get name with Some b -> b | None -> [] in\n let meaningful = label <> \"\" in\n (* Meaningful icons expose an img role + accessible name; decorative ones are\n hidden so assistive tech doesn't announce them beside their label. *)\n let role_attrs =\n if meaningful then \"role=\\\"img\\\" aria-label=\\\"\" ^ label ^ \"\\\"\" else \"aria-hidden=\\\"true\\\"\"\n in\n let extra = if extra_class = \"\" then \"\" else \" \" ^ extra_class in\n let markup = Icons.svg ~dims ~extra ~role_attrs body in\n View.dyn (fun () ->\n incr counter;\n let id = \"prescriptive-reativa-icon-\" ^ string_of_int !counter in\n Ui.set_inner_html_by_id id markup;\n View.element ~attrs:[ View.Attr.id (View.static id) ] \"span\" [])\nend\n\nlet txt s = View.text (View.static s)\n\nlet el ?(cls = \"\") ?(attrs = []) ?(events = []) tag children =\n let attrs = if cls = \"\" then attrs else View.Attr.className (View.static cls) :: attrs in\n View.element ~attrs ~events tag children\n\nlet carousel_example () =\n let idx = Signal.make 0 in\n let slides = [ \"Slide 1\"; \"Slide 2\"; \"Slide 3\" ] in\n let total = List.length slides in\n let track () = \"transform:translateX(-\" ^ string_of_int (Signal.get idx * 100) ^ \"%)\" in\n let arrow name pos step =\n View.element\n ~attrs:\n [\n View.Attr.className\n (View.static\n (pos\n ^ \" absolute top-1/2 flex size-8 -translate-y-1/2 items-center justify-center \\\n rounded-full border border-neutral-200 bg-surface/90 hover:bg-surface\"));\n ]\n ~events:[ View.On.click (fun _ -> Signal.update idx step) ]\n \"button\"\n [ Icon.make ~name ~size:`sm () ]\n in\n el ~cls:\"w-80\" \"div\"\n [\n el ~cls:\"relative overflow-hidden rounded-lg border border-neutral-200\" \"div\"\n [\n el ~cls:\"flex transition-transform duration-300\"\n ~attrs:[ View.Attr.make \"style\" (View.dynamic track) ] \"div\"\n (List.map\n (fun s ->\n el\n ~cls:\n \"flex aspect-video w-80 shrink-0 items-center justify-center bg-neutral-100 \\\n text-lg font-medium text-neutral-500\"\n \"div\" [ txt s ])\n slides);\n arrow \"chevron-left\" \"left-2\" (fun i -> if i > 0 then i - 1 else 0);\n arrow \"chevron-right\" \"right-2\" (fun i -> if i < total - 1 then i + 1 else i);\n ];\n el ~cls:\"mt-3 flex justify-center gap-1.5\" \"div\"\n (List.map\n (fun i ->\n let cls () =\n \"size-2 rounded-full transition-colors \"\n ^ (if Signal.get idx = i then \"bg-neutral-900\" else \"bg-neutral-300\")\n in\n View.element ~attrs:[ View.Attr.class_reactive cls ] \"span\" [])\n (List.init total (fun i -> i)));\n ]") + | "combobox" => Some("module Icon = struct\n (* Fresh host ids so multiple icons of the same name never collide. *)\n let counter = ref 0\n\n let make ?(size : Contracts.Icon.size = `md) ?(label = \"\") ?(extra_class = \"\") ~name () =\n let dims =\n match size with\n | `xs -> \"size-3\"\n | `sm -> \"size-4\"\n | `md -> \"size-5\"\n | `lg -> \"size-6\"\n | `xl -> \"size-8\"\n in\n let body = match Icons.get name with Some b -> b | None -> [] in\n let meaningful = label <> \"\" in\n (* Meaningful icons expose an img role + accessible name; decorative ones are\n hidden so assistive tech doesn't announce them beside their label. *)\n let role_attrs =\n if meaningful then \"role=\\\"img\\\" aria-label=\\\"\" ^ label ^ \"\\\"\" else \"aria-hidden=\\\"true\\\"\"\n in\n let extra = if extra_class = \"\" then \"\" else \" \" ^ extra_class in\n let markup = Icons.svg ~dims ~extra ~role_attrs body in\n View.dyn (fun () ->\n incr counter;\n let id = \"prescriptive-reativa-icon-\" ^ string_of_int !counter in\n Ui.set_inner_html_by_id id markup;\n View.element ~attrs:[ View.Attr.id (View.static id) ] \"span\" [])\nend\n\nmodule Backdrop = struct\n let make ~on_close () =\n
on_close ()) />\nend\n\nmodule Input = struct\n let make ?(type_ = \"text\") ?id ?(placeholder = \"\") ?value ?(required = false) ?on_input\n ?(extra_class = \"\") () =\n let attrs =\n [\n View.Attr.type_ (View.static type_);\n View.Attr.placeholder (View.static placeholder);\n View.Attr.className (View.static (Ui.cx Ui.input_base extra_class));\n View.Attr.toggle \"required\" (fun () -> required);\n ]\n in\n let attrs = match id with Some i -> View.Attr.id (View.static i) :: attrs | None -> attrs in\n let attrs = match value with Some v -> View.Attr.value (View.static v) :: attrs | None -> attrs in\n let events = match on_input with Some f -> [ View.On.input f ] | None -> [] in\n View.element ~attrs ~events \"input\" []\nend\n\nlet txt s = View.text (View.static s)\n\nlet el ?(cls = \"\") ?(attrs = []) ?(events = []) tag children =\n let attrs = if cls = \"\" then attrs else View.Attr.className (View.static cls) :: attrs in\n View.element ~attrs ~events tag children\n\nlet combobox_example () =\n let all = [ \"Next.js\"; \"SvelteKit\"; \"Remix\"; \"Astro\"; \"Nuxt\"; \"SolidStart\"; \"Qwik City\" ] in\n let query = Signal.make \"\" in\n let open_ = Signal.make false in\n let value = Signal.make \"\" in\n let filtered () = List.filter (fun o -> contains_ci o (Signal.get query)) all in\n let display () = if Signal.get value = \"\" then {js|Select framework…|js} else Signal.get value in\n el ~cls:\"relative w-64\" \"div\"\n [\n View.element\n ~attrs:\n [\n View.Attr.className\n (View.static (Ui.input_base ^ \" flex items-center justify-between text-left\"));\n ]\n ~events:[ View.On.click (fun _ -> Signal.update open_ (fun v -> not v)) ]\n \"button\"\n [\n View.dyn_text display;\n el ~cls:\"text-neutral-400\" \"span\" [ Icon.make ~name:\"chevron-down\" ~size:`sm () ];\n ];\n View.show\n (fun () -> Signal.get open_)\n (View.fragment\n [\n Backdrop.make ~on_close:(fun () -> Signal.set open_ false) ();\n el\n ~cls:\n \"absolute z-20 mt-1 w-full rounded-md border border-neutral-200 bg-surface p-1 \\\n shadow-lg\"\n \"div\"\n [\n Input.make ~extra_class:\"mb-1\" ~placeholder:{js|Search…|js}\n ~on_input:(fun e -> Signal.set query (Ui.input_value e))\n ();\n el ~cls:\"max-h-40 overflow-y-auto\" \"ul\"\n [\n View.for_ filtered (fun o ->\n el \"li\"\n [\n View.element\n ~attrs:\n [\n View.Attr.className\n (View.static\n \"block w-full px-3 py-1.5 text-left text-sm \\\n text-neutral-700 hover:bg-neutral-100\");\n ]\n ~events:\n [\n View.On.click (fun _ ->\n Signal.set value o;\n Signal.set open_ false);\n ]\n \"button\"\n [ txt o ];\n ]);\n ];\n ];\n ])\n ]") + | "command" => Some("module Icon = struct\n (* Fresh host ids so multiple icons of the same name never collide. *)\n let counter = ref 0\n\n let make ?(size : Contracts.Icon.size = `md) ?(label = \"\") ?(extra_class = \"\") ~name () =\n let dims =\n match size with\n | `xs -> \"size-3\"\n | `sm -> \"size-4\"\n | `md -> \"size-5\"\n | `lg -> \"size-6\"\n | `xl -> \"size-8\"\n in\n let body = match Icons.get name with Some b -> b | None -> [] in\n let meaningful = label <> \"\" in\n (* Meaningful icons expose an img role + accessible name; decorative ones are\n hidden so assistive tech doesn't announce them beside their label. *)\n let role_attrs =\n if meaningful then \"role=\\\"img\\\" aria-label=\\\"\" ^ label ^ \"\\\"\" else \"aria-hidden=\\\"true\\\"\"\n in\n let extra = if extra_class = \"\" then \"\" else \" \" ^ extra_class in\n let markup = Icons.svg ~dims ~extra ~role_attrs body in\n View.dyn (fun () ->\n incr counter;\n let id = \"prescriptive-reativa-icon-\" ^ string_of_int !counter in\n Ui.set_inner_html_by_id id markup;\n View.element ~attrs:[ View.Attr.id (View.static id) ] \"span\" [])\nend\n\nlet txt s = View.text (View.static s)\n\nlet el ?(cls = \"\") ?(attrs = []) ?(events = []) tag children =\n let attrs = if cls = \"\" then attrs else View.Attr.className (View.static cls) :: attrs in\n View.element ~attrs ~events tag children\n\nlet command_example () =\n let all = [ \"New file\"; \"New folder\"; \"Search\"; \"Go to settings\"; \"Toggle theme\"; \"Sign out\" ] in\n let query = Signal.make \"\" in\n let filtered () = List.filter (fun o -> contains_ci o (Signal.get query)) all in\n el ~cls:\"w-80 overflow-hidden rounded-lg border border-neutral-200 shadow-sm\" \"div\"\n [\n View.element\n ~attrs:\n [\n View.Attr.className\n (View.static \"w-full border-b border-neutral-200 px-4 py-3 text-sm focus:outline-none\");\n View.Attr.placeholder (View.static {js|Type a command…|js});\n ]\n ~events:[ View.On.input (fun e -> Signal.set query (Ui.input_value e)) ]\n \"input\" [];\n el ~cls:\"max-h-52 overflow-y-auto p-1\" \"ul\"\n [\n View.for_ filtered (fun o ->\n el \"li\"\n [\n el\n ~cls:\n \"flex w-full items-center gap-2 rounded px-3 py-2 text-left text-sm \\\n text-neutral-700 hover:bg-neutral-100\"\n \"button\"\n [\n el ~cls:\"text-neutral-400\" \"span\"\n [ Icon.make ~name:\"chevron-right\" ~size:`sm () ];\n txt o;\n ];\n ]);\n ];\n ]") + | "calendar" => Some("module Icon = struct\n (* Fresh host ids so multiple icons of the same name never collide. *)\n let counter = ref 0\n\n let make ?(size : Contracts.Icon.size = `md) ?(label = \"\") ?(extra_class = \"\") ~name () =\n let dims =\n match size with\n | `xs -> \"size-3\"\n | `sm -> \"size-4\"\n | `md -> \"size-5\"\n | `lg -> \"size-6\"\n | `xl -> \"size-8\"\n in\n let body = match Icons.get name with Some b -> b | None -> [] in\n let meaningful = label <> \"\" in\n (* Meaningful icons expose an img role + accessible name; decorative ones are\n hidden so assistive tech doesn't announce them beside their label. *)\n let role_attrs =\n if meaningful then \"role=\\\"img\\\" aria-label=\\\"\" ^ label ^ \"\\\"\" else \"aria-hidden=\\\"true\\\"\"\n in\n let extra = if extra_class = \"\" then \"\" else \" \" ^ extra_class in\n let markup = Icons.svg ~dims ~extra ~role_attrs body in\n View.dyn (fun () ->\n incr counter;\n let id = \"prescriptive-reativa-icon-\" ^ string_of_int !counter in\n Ui.set_inner_html_by_id id markup;\n View.element ~attrs:[ View.Attr.id (View.static id) ] \"span\" [])\nend\n\nlet txt s = View.text (View.static s)\n\nlet el ?(cls = \"\") ?(attrs = []) ?(events = []) tag children =\n let attrs = if cls = \"\" then attrs else View.Attr.className (View.static cls) :: attrs in\n View.element ~attrs ~events tag children\n\nlet calendar_example () =\n let selected = Signal.make 14 in\n let days = List.init 30 (fun i -> i + 1) in\n let dow = [ \"S\"; \"M\"; \"T\"; \"W\"; \"T\"; \"F\"; \"S\" ] in\n el ~cls:\"w-72 rounded-lg border border-neutral-200 p-3\" \"div\"\n [\n el ~cls:\"mb-2 flex items-center justify-between px-1\" \"div\"\n [\n el ~cls:\"text-sm font-medium text-neutral-900\" \"span\" [ txt \"July 2026\" ];\n el ~cls:\"flex items-center gap-2 text-neutral-400\" \"span\"\n [\n Icon.make ~name:\"chevron-left\" ~size:`sm ();\n Icon.make ~name:\"chevron-right\" ~size:`sm ();\n ];\n ];\n el ~cls:\"grid grid-cols-7 gap-1 text-center\" \"div\"\n (List.map (fun d -> el ~cls:\"py-1 text-xs text-neutral-400\" \"span\" [ txt d ]) dow\n @ List.map\n (fun d ->\n let cls () =\n \"flex size-8 items-center justify-center rounded-full text-sm transition-colors \"\n ^\n if Signal.get selected = d then \"bg-neutral-900 text-neutral-0\"\n else \"text-neutral-700 hover:bg-neutral-100\"\n in\n View.element\n ~attrs:[ View.Attr.class_reactive cls ]\n ~events:[ View.On.click (fun _ -> Signal.set selected d) ]\n \"button\"\n [ txt (string_of_int d) ])\n days);\n ]") + | "date-picker" => Some("module Icon = struct\n (* Fresh host ids so multiple icons of the same name never collide. *)\n let counter = ref 0\n\n let make ?(size : Contracts.Icon.size = `md) ?(label = \"\") ?(extra_class = \"\") ~name () =\n let dims =\n match size with\n | `xs -> \"size-3\"\n | `sm -> \"size-4\"\n | `md -> \"size-5\"\n | `lg -> \"size-6\"\n | `xl -> \"size-8\"\n in\n let body = match Icons.get name with Some b -> b | None -> [] in\n let meaningful = label <> \"\" in\n (* Meaningful icons expose an img role + accessible name; decorative ones are\n hidden so assistive tech doesn't announce them beside their label. *)\n let role_attrs =\n if meaningful then \"role=\\\"img\\\" aria-label=\\\"\" ^ label ^ \"\\\"\" else \"aria-hidden=\\\"true\\\"\"\n in\n let extra = if extra_class = \"\" then \"\" else \" \" ^ extra_class in\n let markup = Icons.svg ~dims ~extra ~role_attrs body in\n View.dyn (fun () ->\n incr counter;\n let id = \"prescriptive-reativa-icon-\" ^ string_of_int !counter in\n Ui.set_inner_html_by_id id markup;\n View.element ~attrs:[ View.Attr.id (View.static id) ] \"span\" [])\nend\n\nmodule Backdrop = struct\n let make ~on_close () =\n
on_close ()) />\nend\n\nlet txt s = View.text (View.static s)\n\nlet el ?(cls = \"\") ?(attrs = []) ?(events = []) tag children =\n let attrs = if cls = \"\" then attrs else View.Attr.className (View.static cls) :: attrs in\n View.element ~attrs ~events tag children\n\nlet date_picker_example () =\n let open_ = Signal.make false in\n let day = Signal.make 14 in\n let label () = \"July \" ^ string_of_int (Signal.get day) ^ \", 2026\" in\n let days = List.init 30 (fun i -> i + 1) in\n el ~cls:\"relative w-64\" \"div\"\n [\n View.element\n ~attrs:\n [\n View.Attr.className\n (View.static (Ui.input_base ^ \" flex items-center justify-between text-left\"));\n ]\n ~events:[ View.On.click (fun _ -> Signal.update open_ (fun v -> not v)) ]\n \"button\"\n [\n View.dyn_text label;\n el ~cls:\"text-neutral-400\" \"span\" [ Icon.make ~name:\"calendar\" ~size:`sm () ];\n ];\n View.show\n (fun () -> Signal.get open_)\n (View.fragment\n [\n Backdrop.make ~on_close:(fun () -> Signal.set open_ false) ();\n el\n ~cls:\n \"absolute z-20 mt-1 w-64 rounded-lg border border-neutral-200 bg-surface p-3 \\\n shadow-xl\"\n \"div\"\n [\n el ~cls:\"grid grid-cols-7 gap-1 text-center\" \"div\"\n (List.map\n (fun d ->\n let cls () =\n \"flex size-8 items-center justify-center rounded-full text-sm \"\n ^\n if Signal.get day = d then \"bg-neutral-900 text-neutral-0\"\n else \"text-neutral-700 hover:bg-neutral-100\"\n in\n View.element\n ~attrs:[ View.Attr.class_reactive cls ]\n ~events:\n [\n View.On.click (fun _ ->\n Signal.set day d;\n Signal.set open_ false);\n ]\n \"button\"\n [ txt (string_of_int d) ])\n days);\n ];\n ])\n ]") + | "navbar" => Some("module Spinner = struct\n let make ?(size = \"size-4\") ?(tone = `ink) () =\n let colors =\n match tone with\n | `ink -> \"border-neutral-300 border-t-neutral-900\"\n | `on_accent -> \"border-white/40 border-t-white\"\n in\n \nend\n\nmodule Button = struct\n let make ?(variant : Contracts.Button.variant = `primary) ?(size : Contracts.Button.size = `md)\n ?(type_ : Contracts.Button.type_ = `button) ?(disabled = false) ?(loading = false) ?on_click\n ?(extra_class = \"\") ~children () =\n let type_str = match type_ with `button -> \"button\" | `submit -> \"submit\" | `reset -> \"reset\" in\n let size_cls = match size with `sm -> Ui.btn_sm | `md -> Ui.btn_md | `lg -> Ui.btn_lg in\n let colors =\n match variant with\n | `primary -> Ui.btn_primary_colors\n | `secondary -> Ui.btn_secondary_colors\n | `ghost -> Ui.btn_ghost_colors\n | `destructive -> Ui.btn_destructive_colors\n in\n (* Dark-surface variants need an on-accent spinner; light ones use ink. *)\n let spinner_tone =\n match variant with `primary | `destructive -> `on_accent | `secondary | `ghost -> `ink\n in\n let cls = Ui.cx (Ui.btn_core ^ \" \" ^ size_cls ^ \" \" ^ colors) extra_class in\n let attrs =\n [\n View.Attr.type_ (View.static type_str);\n View.Attr.className (View.static cls);\n View.Attr.disabled (fun () -> disabled || loading);\n ]\n in\n let events = match on_click with Some f -> [ View.On.click f ] | None -> [] in\n let spinner = if loading then Spinner.make ~tone:spinner_tone () else View.empty in\n View.element ~attrs ~events \"button\" [ spinner; View.fragment children ]\nend\n\nlet txt s = View.text (View.static s)\n\nlet el ?(cls = \"\") ?(attrs = []) ?(events = []) tag children =\n let attrs = if cls = \"\" then attrs else View.Attr.className (View.static cls) :: attrs in\n View.element ~attrs ~events tag children\n\nlet navbar_example () =\n let nav_link label =\n el ~cls:\"hover:text-neutral-900\" ~attrs:[ View.Attr.href (View.static \"#\") ] \"a\" [ txt label ]\n in\n el ~cls:\"w-full max-w-2xl rounded-lg border border-neutral-200 bg-surface\" \"div\"\n [\n el ~cls:\"flex items-center justify-between px-4 py-3\" \"div\"\n [\n el ~cls:\"flex items-center gap-6\" \"div\"\n [\n el ~cls:\"font-semibold text-neutral-900\" \"span\" [ txt \"Acme\" ];\n el ~cls:\"hidden gap-4 text-sm text-neutral-600 sm:flex\" \"nav\"\n [ nav_link \"Product\"; nav_link \"Pricing\"; nav_link \"Docs\" ];\n ];\n el ~cls:\"flex items-center gap-2\" \"div\"\n [\n Button.make ~variant:`ghost ~children:[ txt \"Sign in\" ] ();\n Button.make ~variant:`primary ~children:[ txt \"Get started\" ] ();\n ];\n ];\n ]") + | "menubar" => Some("let txt s = View.text (View.static s)\n\nlet el ?(cls = \"\") ?(attrs = []) ?(events = []) tag children =\n let attrs = if cls = \"\" then attrs else View.Attr.className (View.static cls) :: attrs in\n View.element ~attrs ~events tag children\n\nlet menubar_example () =\n el\n ~cls:\n \"flex w-full max-w-lg items-center gap-1 rounded-lg border border-neutral-200 bg-surface p-1 \\\n text-sm\"\n \"div\"\n (List.map\n (fun m ->\n el ~cls:\"rounded px-3 py-1.5 text-neutral-700 hover:bg-neutral-100\" \"button\" [ txt m ])\n [ \"File\"; \"Edit\"; \"View\"; \"Help\" ])") + | "navigation-menu" => Some("module Icon = struct\n (* Fresh host ids so multiple icons of the same name never collide. *)\n let counter = ref 0\n\n let make ?(size : Contracts.Icon.size = `md) ?(label = \"\") ?(extra_class = \"\") ~name () =\n let dims =\n match size with\n | `xs -> \"size-3\"\n | `sm -> \"size-4\"\n | `md -> \"size-5\"\n | `lg -> \"size-6\"\n | `xl -> \"size-8\"\n in\n let body = match Icons.get name with Some b -> b | None -> [] in\n let meaningful = label <> \"\" in\n (* Meaningful icons expose an img role + accessible name; decorative ones are\n hidden so assistive tech doesn't announce them beside their label. *)\n let role_attrs =\n if meaningful then \"role=\\\"img\\\" aria-label=\\\"\" ^ label ^ \"\\\"\" else \"aria-hidden=\\\"true\\\"\"\n in\n let extra = if extra_class = \"\" then \"\" else \" \" ^ extra_class in\n let markup = Icons.svg ~dims ~extra ~role_attrs body in\n View.dyn (fun () ->\n incr counter;\n let id = \"prescriptive-reativa-icon-\" ^ string_of_int !counter in\n Ui.set_inner_html_by_id id markup;\n View.element ~attrs:[ View.Attr.id (View.static id) ] \"span\" [])\nend\n\nmodule Backdrop = struct\n let make ~on_close () =\n
on_close ()) />\nend\n\nlet txt s = View.text (View.static s)\n\nlet el ?(cls = \"\") ?(attrs = []) ?(events = []) tag children =\n let attrs = if cls = \"\" then attrs else View.Attr.className (View.static cls) :: attrs in\n View.element ~attrs ~events tag children\n\nlet navigation_menu_example () =\n let open_ = Signal.make false in\n let link label =\n el ~cls:\"rounded px-3 py-1.5 text-neutral-700 hover:bg-neutral-100\"\n ~attrs:[ View.Attr.href (View.static \"#\") ] \"a\" [ txt label ]\n in\n el ~cls:\"relative w-full max-w-lg\" \"div\"\n [\n el ~cls:\"flex items-center gap-1 rounded-lg border border-neutral-200 bg-surface p-1 text-sm\"\n \"div\"\n [\n View.element\n ~attrs:\n [\n View.Attr.className\n (View.static\n \"inline-flex items-center gap-1 rounded px-3 py-1.5 text-neutral-700 \\\n hover:bg-neutral-100\");\n ]\n ~events:[ View.On.click (fun _ -> Signal.update open_ (fun v -> not v)) ]\n \"button\"\n [ txt \"Products\"; Icon.make ~name:\"chevron-down\" ~size:`sm () ];\n link \"Pricing\";\n link \"Company\";\n ];\n View.show\n (fun () -> Signal.get open_)\n (View.fragment\n [\n Backdrop.make ~on_close:(fun () -> Signal.set open_ false) ();\n el\n ~cls:\n \"absolute z-20 mt-1 grid w-96 grid-cols-2 gap-1 rounded-lg border \\\n border-neutral-200 bg-surface p-2 shadow-xl\"\n \"div\"\n (List.map\n (fun (t, d) ->\n el ~cls:\"rounded-md p-3 hover:bg-neutral-50\"\n ~attrs:[ View.Attr.href (View.static \"#\") ] \"a\"\n [\n el ~cls:\"text-sm font-medium text-neutral-900\" \"p\" [ txt t ];\n el ~cls:\"text-xs text-neutral-500\" \"p\" [ txt d ];\n ])\n [\n (\"Analytics\", \"Understand your traffic\");\n (\"Automations\", \"Build no-code workflows\");\n (\"Reports\", \"Share insights\");\n (\"Integrations\", \"Connect your stack\");\n ]);\n ])\n ]") + | "sidebar" => Some("let txt s = View.text (View.static s)\n\nlet el ?(cls = \"\") ?(attrs = []) ?(events = []) tag children =\n let attrs = if cls = \"\" then attrs else View.Attr.className (View.static cls) :: attrs in\n View.element ~attrs ~events tag children\n\nlet sidebar_example () =\n let item ?(active = false) label =\n let cls =\n if active then \"block rounded-md bg-neutral-900 px-2 py-1.5 text-neutral-0\"\n else \"block rounded-md px-2 py-1.5 text-neutral-700 hover:bg-neutral-100\"\n in\n el ~cls ~attrs:[ View.Attr.href (View.static \"#\") ] \"a\" [ txt label ]\n in\n el ~cls:\"flex h-56 w-56 flex-col rounded-lg border border-neutral-200 bg-neutral-50 p-2\" \"div\"\n [\n el ~cls:\"px-2 py-1.5 text-sm font-semibold text-neutral-900\" \"div\" [ txt \"Workspace\" ];\n el ~cls:\"mt-1 space-y-0.5 text-sm\" \"nav\"\n [ item ~active:true \"Dashboard\"; item \"Projects\"; item \"Reports\"; item \"Settings\" ];\n ]") + | "resizable" => Some("let txt s = View.text (View.static s)\n\nlet el ?(cls = \"\") ?(attrs = []) ?(events = []) tag children =\n let attrs = if cls = \"\" then attrs else View.Attr.className (View.static cls) :: attrs in\n View.element ~attrs ~events tag children\n\nlet resizable_example () =\n let split = Signal.make 55 in\n let left_style () = \"width:\" ^ string_of_int (Signal.get split) ^ \"%\" in\n let right_style () = \"width:\" ^ string_of_int (100 - Signal.get split) ^ \"%\" in\n el ~cls:\"w-96 space-y-3\" \"div\"\n [\n el ~cls:\"flex h-40 overflow-hidden rounded-lg border border-neutral-200\" \"div\"\n [\n el ~cls:\"flex items-center justify-center bg-neutral-50 text-sm text-neutral-500\"\n ~attrs:[ View.Attr.make \"style\" (View.dynamic left_style) ] \"div\" [ txt \"Panel A\" ];\n el ~cls:\"w-1.5 cursor-col-resize bg-neutral-200\" \"div\" [];\n el ~cls:\"flex items-center justify-center bg-surface text-sm text-neutral-500\"\n ~attrs:[ View.Attr.make \"style\" (View.dynamic right_style) ] \"div\" [ txt \"Panel B\" ];\n ];\n View.element\n ~attrs:\n [\n View.Attr.type_ (View.static \"range\");\n View.Attr.make \"min\" (View.static \"20\");\n View.Attr.make \"max\" (View.static \"80\");\n View.Attr.value_reactive (fun () -> string_of_int (Signal.get split));\n View.Attr.className (View.static \"w-full accent-neutral-900\");\n ]\n ~events:\n [\n View.On.input (fun e ->\n match int_of_string_opt (Ui.input_value e) with\n | Some n -> Signal.set split n\n | None -> Signal.set split 50);\n ]\n \"input\" [];\n ]") + | "search" => Some("module Icon = struct\n (* Fresh host ids so multiple icons of the same name never collide. *)\n let counter = ref 0\n\n let make ?(size : Contracts.Icon.size = `md) ?(label = \"\") ?(extra_class = \"\") ~name () =\n let dims =\n match size with\n | `xs -> \"size-3\"\n | `sm -> \"size-4\"\n | `md -> \"size-5\"\n | `lg -> \"size-6\"\n | `xl -> \"size-8\"\n in\n let body = match Icons.get name with Some b -> b | None -> [] in\n let meaningful = label <> \"\" in\n (* Meaningful icons expose an img role + accessible name; decorative ones are\n hidden so assistive tech doesn't announce them beside their label. *)\n let role_attrs =\n if meaningful then \"role=\\\"img\\\" aria-label=\\\"\" ^ label ^ \"\\\"\" else \"aria-hidden=\\\"true\\\"\"\n in\n let extra = if extra_class = \"\" then \"\" else \" \" ^ extra_class in\n let markup = Icons.svg ~dims ~extra ~role_attrs body in\n View.dyn (fun () ->\n incr counter;\n let id = \"prescriptive-reativa-icon-\" ^ string_of_int !counter in\n Ui.set_inner_html_by_id id markup;\n View.element ~attrs:[ View.Attr.id (View.static id) ] \"span\" [])\nend\n\nmodule IconButton = struct\n let make ?(variant : Contracts.IconButton.variant = `ghost) ?on_click ~label ~children () =\n let tone =\n match variant with\n | `solid -> \"bg-action text-on-action hover:bg-action-hover\"\n | `ghost -> \"text-ink hover:bg-action-subtle\"\n in\n let attrs =\n [\n View.Attr.type_ (View.static \"button\");\n View.Attr.make \"aria-label\" (View.static label);\n View.Attr.className\n (View.static\n (\"inline-flex size-9 items-center justify-center rounded-md text-sm transition-colors \\\n focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-action \\\n focus-visible:ring-offset-2 \" ^ tone));\n ]\n in\n let events = match on_click with Some f -> [ View.On.click f ] | None -> [] in\n View.element ~attrs ~events \"button\" [ View.fragment children ]\nend\n\nmodule Backdrop = struct\n let make ~on_close () =\n
on_close ()) />\nend\n\nlet txt s = View.text (View.static s)\n\nlet el ?(cls = \"\") ?(attrs = []) ?(events = []) tag children =\n let attrs = if cls = \"\" then attrs else View.Attr.className (View.static cls) :: attrs in\n View.element ~attrs ~events tag children\n\nlet search_example () =\n let query = Signal.make \"\" in\n let open_ = Signal.make false in\n let all = [ \"Dashboard\"; \"Settings\"; \"Billing\"; \"Team members\"; \"API keys\" ] in\n let filtered () = List.filter (fun o -> contains_ci o (Signal.get query)) all in\n el ~cls:\"relative w-72\" \"div\"\n [\n el ~cls:\"flex items-center gap-2 rounded-md border border-neutral-300 bg-surface pl-3 pr-1\" \"div\"\n [\n el ~cls:\"text-neutral-400\" \"span\" [ Icon.make ~name:\"search\" ~size:`sm () ];\n View.element\n ~attrs:\n [\n View.Attr.className\n (View.static \"flex-1 bg-transparent py-2 text-sm focus:outline-none\");\n View.Attr.placeholder (View.static {js|Search…|js});\n ]\n ~events:\n [\n View.On.on \"focus\" (fun _ -> Signal.set open_ true);\n View.On.input (fun e ->\n Signal.set query (Ui.input_value e);\n Signal.set open_ true);\n ]\n \"input\" [];\n View.show\n (fun () -> Signal.get query <> \"\")\n (IconButton.make ~label:\"Clear search\"\n ~on_click:(fun _ -> Signal.set query \"\")\n ~children:[ txt {js|×|js} ] ());\n ];\n View.show\n (fun () -> Signal.get open_)\n (View.fragment\n [\n Backdrop.make ~on_close:(fun () -> Signal.set open_ false) ();\n el\n ~cls:\n \"absolute z-20 mt-1 w-full rounded-md border border-neutral-200 bg-surface py-1 \\\n shadow-lg\"\n \"ul\"\n [\n View.for_ filtered (fun o ->\n el \"li\"\n [\n View.element\n ~attrs:\n [\n View.Attr.className\n (View.static\n \"block w-full px-3 py-1.5 text-left text-sm text-neutral-700 \\\n hover:bg-neutral-100\");\n ]\n ~events:\n [\n View.On.click (fun _ ->\n Signal.set query o;\n Signal.set open_ false);\n ]\n \"button\"\n [ txt o ];\n ]);\n ];\n ])\n ]") + | "comment" => Some("module Avatar = struct\n let make ?(size = \"size-10 text-sm\") ~initials () =\n \n (initials)\n \nend\n\nmodule Badge = struct\n let make ?(variant : Contracts.Badge.variant = `solid) ~children () =\n let tone =\n match variant with\n | `solid -> \"bg-neutral-900 text-neutral-0\"\n | `soft -> \"bg-neutral-200 text-neutral-800\"\n | `outline -> \"border border-neutral-300 text-neutral-700\"\n in\n \n (View.fragment children)\n \nend\n\nmodule Icon = struct\n (* Fresh host ids so multiple icons of the same name never collide. *)\n let counter = ref 0\n\n let make ?(size : Contracts.Icon.size = `md) ?(label = \"\") ?(extra_class = \"\") ~name () =\n let dims =\n match size with\n | `xs -> \"size-3\"\n | `sm -> \"size-4\"\n | `md -> \"size-5\"\n | `lg -> \"size-6\"\n | `xl -> \"size-8\"\n in\n let body = match Icons.get name with Some b -> b | None -> [] in\n let meaningful = label <> \"\" in\n (* Meaningful icons expose an img role + accessible name; decorative ones are\n hidden so assistive tech doesn't announce them beside their label. *)\n let role_attrs =\n if meaningful then \"role=\\\"img\\\" aria-label=\\\"\" ^ label ^ \"\\\"\" else \"aria-hidden=\\\"true\\\"\"\n in\n let extra = if extra_class = \"\" then \"\" else \" \" ^ extra_class in\n let markup = Icons.svg ~dims ~extra ~role_attrs body in\n View.dyn (fun () ->\n incr counter;\n let id = \"prescriptive-reativa-icon-\" ^ string_of_int !counter in\n Ui.set_inner_html_by_id id markup;\n View.element ~attrs:[ View.Attr.id (View.static id) ] \"span\" [])\nend\n\nlet txt s = View.text (View.static s)\n\nlet el ?(cls = \"\") ?(attrs = []) ?(events = []) tag children =\n let attrs = if cls = \"\" then attrs else View.Attr.className (View.static cls) :: attrs in\n View.element ~attrs ~events tag children\n\nlet comment_example () =\n let liked = Signal.make false in\n let like_cls () =\n \"inline-flex items-center gap-1 \"\n ^ (if Signal.get liked then \"text-status-danger\" else \"hover:text-neutral-900\")\n in\n el ~cls:\"w-full max-w-lg\" \"div\"\n [\n el ~cls:\"flex gap-3\" \"div\"\n [\n Avatar.make ~initials:\"AT\" ~size:\"size-9 text-xs\" ();\n el ~cls:\"flex-1\" \"div\"\n [\n el ~cls:\"flex items-center gap-2\" \"div\"\n [\n el ~cls:\"text-sm font-medium text-neutral-900\" \"span\" [ txt \"Alan Turing\" ];\n Badge.make ~variant:`soft ~children:[ txt \"Author\" ] ();\n el ~cls:\"text-xs text-neutral-400\" \"span\" [ txt \"2h ago\" ];\n ];\n el ~cls:\"mt-1 text-sm text-neutral-700\" \"p\"\n [\n txt\n {js|Great write-up — the section on reuse really clicked for me. Shipping this to my team.|js};\n ];\n el ~cls:\"mt-2 flex gap-3 text-xs text-neutral-500\" \"div\"\n [\n View.element\n ~attrs:[ View.Attr.class_reactive like_cls ]\n ~events:[ View.On.click (fun _ -> Signal.update liked (fun v -> not v)) ]\n \"button\"\n [\n Icon.make ~name:\"heart\" ~size:`sm ();\n View.show ~fallback:(txt \"Like\") (fun () -> Signal.get liked) (txt \"Liked\");\n ];\n el ~cls:\"hover:text-neutral-900\" \"button\" [ txt \"Reply\" ];\n ];\n ];\n ];\n ]") + | "form" => Some("module Field = struct\n let make ?(hint = \"\") ~label ~for_ ~children () =\n let label_node =\n View.element\n ~attrs:[ View.Attr.className (View.static Ui.label); View.Attr.make \"for\" (View.static for_) ]\n \"label\"\n [ View.text (View.static label) ]\n in\n let hint_node =\n if hint = \"\" then View.empty\n else

(hint)

\n in\n
\n (label_node)\n (View.fragment children)\n (hint_node)\n
\nend\n\nmodule Input = struct\n let make ?(type_ = \"text\") ?id ?(placeholder = \"\") ?value ?(required = false) ?on_input\n ?(extra_class = \"\") () =\n let attrs =\n [\n View.Attr.type_ (View.static type_);\n View.Attr.placeholder (View.static placeholder);\n View.Attr.className (View.static (Ui.cx Ui.input_base extra_class));\n View.Attr.toggle \"required\" (fun () -> required);\n ]\n in\n let attrs = match id with Some i -> View.Attr.id (View.static i) :: attrs | None -> attrs in\n let attrs = match value with Some v -> View.Attr.value (View.static v) :: attrs | None -> attrs in\n let events = match on_input with Some f -> [ View.On.input f ] | None -> [] in\n View.element ~attrs ~events \"input\" []\nend\n\nmodule Spinner = struct\n let make ?(size = \"size-4\") ?(tone = `ink) () =\n let colors =\n match tone with\n | `ink -> \"border-neutral-300 border-t-neutral-900\"\n | `on_accent -> \"border-white/40 border-t-white\"\n in\n \nend\n\nmodule Button = struct\n let make ?(variant : Contracts.Button.variant = `primary) ?(size : Contracts.Button.size = `md)\n ?(type_ : Contracts.Button.type_ = `button) ?(disabled = false) ?(loading = false) ?on_click\n ?(extra_class = \"\") ~children () =\n let type_str = match type_ with `button -> \"button\" | `submit -> \"submit\" | `reset -> \"reset\" in\n let size_cls = match size with `sm -> Ui.btn_sm | `md -> Ui.btn_md | `lg -> Ui.btn_lg in\n let colors =\n match variant with\n | `primary -> Ui.btn_primary_colors\n | `secondary -> Ui.btn_secondary_colors\n | `ghost -> Ui.btn_ghost_colors\n | `destructive -> Ui.btn_destructive_colors\n in\n (* Dark-surface variants need an on-accent spinner; light ones use ink. *)\n let spinner_tone =\n match variant with `primary | `destructive -> `on_accent | `secondary | `ghost -> `ink\n in\n let cls = Ui.cx (Ui.btn_core ^ \" \" ^ size_cls ^ \" \" ^ colors) extra_class in\n let attrs =\n [\n View.Attr.type_ (View.static type_str);\n View.Attr.className (View.static cls);\n View.Attr.disabled (fun () -> disabled || loading);\n ]\n in\n let events = match on_click with Some f -> [ View.On.click f ] | None -> [] in\n let spinner = if loading then Spinner.make ~tone:spinner_tone () else View.empty in\n View.element ~attrs ~events \"button\" [ spinner; View.fragment children ]\nend\n\nlet txt s = View.text (View.static s)\n\nlet el ?(cls = \"\") ?(attrs = []) ?(events = []) tag children =\n let attrs = if cls = \"\" then attrs else View.Attr.className (View.static cls) :: attrs in\n View.element ~attrs ~events tag children\n\nlet form_example () =\n let sent = Signal.make false in\n View.element\n ~attrs:[ View.Attr.className (View.static \"w-80 space-y-4\") ]\n ~events:[ View.On.submit (fun e -> Ui.prevent_default e; Signal.set sent true) ]\n \"form\"\n [\n Field.make ~label:\"Name\" ~for_:\"frm-name\"\n ~children:[ Input.make ~id:\"frm-name\" ~placeholder:\"Ada Lovelace\" ~required:true () ] ();\n Field.make ~label:\"Message\" ~for_:\"frm-msg\"\n ~children:\n [\n View.element\n ~attrs:\n [\n View.Attr.id (View.static \"frm-msg\");\n View.Attr.make \"rows\" (View.static \"3\");\n View.Attr.className (View.static (Ui.input_base ^ \" resize-none\"));\n View.Attr.placeholder (View.static {js|Say hello…|js});\n ]\n \"textarea\" [];\n ]\n ();\n Button.make ~type_:`submit ~variant:`primary ~extra_class:\"w-full\"\n ~children:[ txt \"Send message\" ] ();\n View.show\n (fun () -> Signal.get sent)\n (el ~cls:\"rounded-md bg-neutral-100 px-3 py-2 text-center text-sm text-neutral-700\" \"p\"\n [ txt {js|Thanks — we'll be in touch.|js} ]);\n ]") + | "landing-page" => Some("module Spinner = struct\n let make ?(size = \"size-4\") ?(tone = `ink) () =\n let colors =\n match tone with\n | `ink -> \"border-neutral-300 border-t-neutral-900\"\n | `on_accent -> \"border-white/40 border-t-white\"\n in\n \nend\n\nmodule Button = struct\n let make ?(variant : Contracts.Button.variant = `primary) ?(size : Contracts.Button.size = `md)\n ?(type_ : Contracts.Button.type_ = `button) ?(disabled = false) ?(loading = false) ?on_click\n ?(extra_class = \"\") ~children () =\n let type_str = match type_ with `button -> \"button\" | `submit -> \"submit\" | `reset -> \"reset\" in\n let size_cls = match size with `sm -> Ui.btn_sm | `md -> Ui.btn_md | `lg -> Ui.btn_lg in\n let colors =\n match variant with\n | `primary -> Ui.btn_primary_colors\n | `secondary -> Ui.btn_secondary_colors\n | `ghost -> Ui.btn_ghost_colors\n | `destructive -> Ui.btn_destructive_colors\n in\n (* Dark-surface variants need an on-accent spinner; light ones use ink. *)\n let spinner_tone =\n match variant with `primary | `destructive -> `on_accent | `secondary | `ghost -> `ink\n in\n let cls = Ui.cx (Ui.btn_core ^ \" \" ^ size_cls ^ \" \" ^ colors) extra_class in\n let attrs =\n [\n View.Attr.type_ (View.static type_str);\n View.Attr.className (View.static cls);\n View.Attr.disabled (fun () -> disabled || loading);\n ]\n in\n let events = match on_click with Some f -> [ View.On.click f ] | None -> [] in\n let spinner = if loading then Spinner.make ~tone:spinner_tone () else View.empty in\n View.element ~attrs ~events \"button\" [ spinner; View.fragment children ]\nend\n\nmodule Badge = struct\n let make ?(variant : Contracts.Badge.variant = `solid) ~children () =\n let tone =\n match variant with\n | `solid -> \"bg-neutral-900 text-neutral-0\"\n | `soft -> \"bg-neutral-200 text-neutral-800\"\n | `outline -> \"border border-neutral-300 text-neutral-700\"\n in\n \n (View.fragment children)\n \nend\n\nlet txt s = View.text (View.static s)\n\nlet el ?(cls = \"\") ?(attrs = []) ?(events = []) tag children =\n let attrs = if cls = \"\" then attrs else View.Attr.className (View.static cls) :: attrs in\n View.element ~attrs ~events tag children\n\nlet landing_page_example () =\n el ~cls:\"w-full max-w-2xl overflow-hidden rounded-lg border border-neutral-200 bg-surface\" \"div\"\n [\n el ~cls:\"flex items-center justify-between border-b border-neutral-200 px-5 py-3\" \"div\"\n [\n el ~cls:\"font-semibold text-neutral-900\" \"span\" [ txt \"Acme\" ];\n Button.make ~variant:`primary ~children:[ txt \"Start free\" ] ();\n ];\n el ~cls:\"px-8 py-12 text-center\" \"div\"\n [\n Badge.make ~variant:`outline ~children:[ txt {js|New · v2 is here|js} ] ();\n el ~cls:\"mx-auto mt-4 max-w-md text-3xl font-bold tracking-tight text-neutral-900\" \"h2\"\n [ txt \"Ship your product faster\" ];\n el ~cls:\"mx-auto mt-3 max-w-sm text-sm text-neutral-500\" \"p\"\n [\n txt\n {js|One primary action, front and center — everything on the page builds toward it.|js};\n ];\n el ~cls:\"mt-6 flex justify-center gap-3\" \"div\"\n [\n Button.make ~variant:`primary ~children:[ txt \"Get started\" ] ();\n Button.make ~variant:`secondary ~children:[ txt \"Book a demo\" ] ();\n ];\n ];\n ]") + | "dashboard" => Some("module Badge = struct\n let make ?(variant : Contracts.Badge.variant = `solid) ~children () =\n let tone =\n match variant with\n | `solid -> \"bg-neutral-900 text-neutral-0\"\n | `soft -> \"bg-neutral-200 text-neutral-800\"\n | `outline -> \"border border-neutral-300 text-neutral-700\"\n in\n \n (View.fragment children)\n \nend\n\nlet txt s = View.text (View.static s)\n\nlet el ?(cls = \"\") ?(attrs = []) ?(events = []) tag children =\n let attrs = if cls = \"\" then attrs else View.Attr.className (View.static cls) :: attrs in\n View.element ~attrs ~events tag children\n\nlet dashboard_example () =\n let stat label value delta =\n el ~cls:(Ui.card ^ \" p-4\") \"div\"\n [\n el ~cls:\"text-xs text-neutral-500\" \"p\" [ txt label ];\n el ~cls:\"mt-1 text-2xl font-bold text-neutral-900\" \"p\" [ txt value ];\n el ~cls:\"mt-1 text-xs text-neutral-400\" \"p\" [ txt delta ];\n ]\n in\n let bars = [ 50; 72; 40; 88; 63; 45; 70 ] in\n el ~cls:\"w-full max-w-2xl space-y-4\" \"div\"\n [\n el ~cls:\"grid grid-cols-3 gap-4\" \"div\"\n [\n stat \"Revenue\" \"$48.2k\" \"+12% MoM\";\n stat \"Active users\" \"3,190\" \"+4% MoM\";\n stat \"Churn\" \"1.8%\" {js|−0.3% MoM|js};\n ];\n el ~cls:(Ui.card ^ \" p-4\") \"div\"\n [\n el ~cls:\"mb-3 flex items-center justify-between\" \"div\"\n [\n el ~cls:\"text-sm font-medium text-neutral-900\" \"p\" [ txt \"Signups this week\" ];\n Badge.make ~variant:`soft ~children:[ txt \"Live\" ] ();\n ];\n el ~cls:\"flex h-24 items-end gap-2\" \"div\"\n (List.map\n (fun v ->\n el ~cls:\"flex-1 rounded-t bg-neutral-900\"\n ~attrs:\n [ View.Attr.make \"style\" (View.static (\"height:\" ^ string_of_int v ^ \"%\")) ]\n \"div\" [])\n bars);\n ];\n ]") + | "settings" => Some("module Switch = struct\n let make ?(label = \"\") ?(disabled = false) ~checked () =\n let track () =\n \"relative inline-flex h-6 w-11 items-center rounded-full transition-colors \"\n ^ (if Signal.get checked then \"bg-action\" else \"bg-neutral-300\")\n ^ if disabled then \" opacity-40\" else \"\"\n in\n let knob () =\n \"inline-block size-5 transform rounded-full bg-surface shadow transition-transform \"\n ^ if Signal.get checked then \"translate-x-5\" else \"translate-x-0.5\"\n in\n let aria_checked () = if Signal.get checked then \"true\" else \"false\" in\n let knob_node = View.element ~attrs:[ View.Attr.class_reactive knob ] \"span\" [] in\n let control =\n View.element\n ~attrs:\n [\n View.Attr.type_ (View.static \"button\");\n View.Attr.make \"role\" (View.static \"switch\");\n View.Attr.make \"aria-checked\" (View.dynamic aria_checked);\n View.Attr.disabled (fun () -> disabled);\n View.Attr.class_reactive track;\n ]\n ~events:\n [ View.On.click (fun _ -> if disabled then () else Signal.update checked (fun v -> not v)) ]\n \"button\" [ knob_node ]\n in\n let label_cls = if disabled then \"flex items-center gap-3 cursor-not-allowed\" else \"flex items-center gap-3\" in\n View.element\n ~attrs:[ View.Attr.className (View.static label_cls) ]\n \"label\"\n [\n control;\n (if label = \"\" then View.empty\n else (label));\n ]\nend\n\nmodule Field = struct\n let make ?(hint = \"\") ~label ~for_ ~children () =\n let label_node =\n View.element\n ~attrs:[ View.Attr.className (View.static Ui.label); View.Attr.make \"for\" (View.static for_) ]\n \"label\"\n [ View.text (View.static label) ]\n in\n let hint_node =\n if hint = \"\" then View.empty\n else

(hint)

\n in\n
\n (label_node)\n (View.fragment children)\n (hint_node)\n
\nend\n\nmodule Input = struct\n let make ?(type_ = \"text\") ?id ?(placeholder = \"\") ?value ?(required = false) ?on_input\n ?(extra_class = \"\") () =\n let attrs =\n [\n View.Attr.type_ (View.static type_);\n View.Attr.placeholder (View.static placeholder);\n View.Attr.className (View.static (Ui.cx Ui.input_base extra_class));\n View.Attr.toggle \"required\" (fun () -> required);\n ]\n in\n let attrs = match id with Some i -> View.Attr.id (View.static i) :: attrs | None -> attrs in\n let attrs = match value with Some v -> View.Attr.value (View.static v) :: attrs | None -> attrs in\n let events = match on_input with Some f -> [ View.On.input f ] | None -> [] in\n View.element ~attrs ~events \"input\" []\nend\n\nmodule Separator = struct\n let make ?(orientation : Contracts.Separator.orientation = `horizontal) ?(extra_class = \"\") () =\n let base =\n match orientation with\n | `horizontal -> \"h-px w-full bg-neutral-200\"\n | `vertical -> \"h-4 w-px bg-neutral-200\"\n in\n View.element\n ~attrs:\n [\n View.Attr.className (View.static (Ui.cx base extra_class));\n View.Attr.make \"role\" (View.static \"separator\");\n ]\n \"div\" []\nend\n\nmodule Spinner = struct\n let make ?(size = \"size-4\") ?(tone = `ink) () =\n let colors =\n match tone with\n | `ink -> \"border-neutral-300 border-t-neutral-900\"\n | `on_accent -> \"border-white/40 border-t-white\"\n in\n \nend\n\nmodule Button = struct\n let make ?(variant : Contracts.Button.variant = `primary) ?(size : Contracts.Button.size = `md)\n ?(type_ : Contracts.Button.type_ = `button) ?(disabled = false) ?(loading = false) ?on_click\n ?(extra_class = \"\") ~children () =\n let type_str = match type_ with `button -> \"button\" | `submit -> \"submit\" | `reset -> \"reset\" in\n let size_cls = match size with `sm -> Ui.btn_sm | `md -> Ui.btn_md | `lg -> Ui.btn_lg in\n let colors =\n match variant with\n | `primary -> Ui.btn_primary_colors\n | `secondary -> Ui.btn_secondary_colors\n | `ghost -> Ui.btn_ghost_colors\n | `destructive -> Ui.btn_destructive_colors\n in\n (* Dark-surface variants need an on-accent spinner; light ones use ink. *)\n let spinner_tone =\n match variant with `primary | `destructive -> `on_accent | `secondary | `ghost -> `ink\n in\n let cls = Ui.cx (Ui.btn_core ^ \" \" ^ size_cls ^ \" \" ^ colors) extra_class in\n let attrs =\n [\n View.Attr.type_ (View.static type_str);\n View.Attr.className (View.static cls);\n View.Attr.disabled (fun () -> disabled || loading);\n ]\n in\n let events = match on_click with Some f -> [ View.On.click f ] | None -> [] in\n let spinner = if loading then Spinner.make ~tone:spinner_tone () else View.empty in\n View.element ~attrs ~events \"button\" [ spinner; View.fragment children ]\nend\n\nlet txt s = View.text (View.static s)\n\nlet el ?(cls = \"\") ?(attrs = []) ?(events = []) tag children =\n let attrs = if cls = \"\" then attrs else View.Attr.className (View.static cls) :: attrs in\n View.element ~attrs ~events tag children\n\nlet settings_example () =\n let notifications = Signal.make true in\n let marketing = Signal.make false in\n let row text sig_ =\n el ~cls:\"flex items-center justify-between\" \"div\"\n [ el ~cls:\"text-sm text-neutral-800\" \"span\" [ txt text ]; Switch.make ~checked:sig_ () ]\n in\n el ~cls:\"w-full max-w-lg space-y-5 rounded-lg border border-neutral-200 bg-surface p-6\" \"div\"\n [\n el \"div\"\n [\n el ~cls:\"text-sm font-semibold text-neutral-900\" \"h3\" [ txt \"Profile\" ];\n el ~cls:\"text-xs text-neutral-500\" \"p\" [ txt \"Update your account details.\" ];\n ];\n Field.make ~label:\"Display name\" ~for_:\"set-name\"\n ~children:[ Input.make ~id:\"set-name\" ~value:\"Ada Lovelace\" () ] ();\n Separator.make ();\n el ~cls:\"space-y-3\" \"div\"\n [ row \"Product notifications\" notifications; row \"Marketing emails\" marketing ];\n el ~cls:\"flex justify-end gap-2\" \"div\"\n [\n Button.make ~variant:`ghost ~children:[ txt \"Cancel\" ] ();\n Button.make ~variant:`primary ~children:[ txt \"Save changes\" ] ();\n ];\n ]") + | "sign-in" => Some("module Field = struct\n let make ?(hint = \"\") ~label ~for_ ~children () =\n let label_node =\n View.element\n ~attrs:[ View.Attr.className (View.static Ui.label); View.Attr.make \"for\" (View.static for_) ]\n \"label\"\n [ View.text (View.static label) ]\n in\n let hint_node =\n if hint = \"\" then View.empty\n else

(hint)

\n in\n
\n (label_node)\n (View.fragment children)\n (hint_node)\n
\nend\n\nmodule Input = struct\n let make ?(type_ = \"text\") ?id ?(placeholder = \"\") ?value ?(required = false) ?on_input\n ?(extra_class = \"\") () =\n let attrs =\n [\n View.Attr.type_ (View.static type_);\n View.Attr.placeholder (View.static placeholder);\n View.Attr.className (View.static (Ui.cx Ui.input_base extra_class));\n View.Attr.toggle \"required\" (fun () -> required);\n ]\n in\n let attrs = match id with Some i -> View.Attr.id (View.static i) :: attrs | None -> attrs in\n let attrs = match value with Some v -> View.Attr.value (View.static v) :: attrs | None -> attrs in\n let events = match on_input with Some f -> [ View.On.input f ] | None -> [] in\n View.element ~attrs ~events \"input\" []\nend\n\nmodule Link = struct\n let make ?(href = \"#\") ?(variant : Contracts.Link.variant = `default) ?(new_tab = false)\n ?(extra_class = \"\") ~children () =\n let base =\n match variant with\n | `default ->\n \"text-neutral-900 underline decoration-neutral-300 underline-offset-4 hover:decoration-neutral-900\"\n | `muted -> \"text-neutral-500 transition-colors hover:text-neutral-900\"\n in\n let attrs =\n [\n View.Attr.href (View.static href);\n View.Attr.className (View.static (Ui.cx base extra_class));\n ]\n in\n let attrs =\n if new_tab then View.Attr.make \"target\" (View.static \"_blank\") :: attrs else attrs\n in\n View.element ~attrs \"a\" [ View.fragment children ]\nend\n\nmodule Spinner = struct\n let make ?(size = \"size-4\") ?(tone = `ink) () =\n let colors =\n match tone with\n | `ink -> \"border-neutral-300 border-t-neutral-900\"\n | `on_accent -> \"border-white/40 border-t-white\"\n in\n \nend\n\nmodule Button = struct\n let make ?(variant : Contracts.Button.variant = `primary) ?(size : Contracts.Button.size = `md)\n ?(type_ : Contracts.Button.type_ = `button) ?(disabled = false) ?(loading = false) ?on_click\n ?(extra_class = \"\") ~children () =\n let type_str = match type_ with `button -> \"button\" | `submit -> \"submit\" | `reset -> \"reset\" in\n let size_cls = match size with `sm -> Ui.btn_sm | `md -> Ui.btn_md | `lg -> Ui.btn_lg in\n let colors =\n match variant with\n | `primary -> Ui.btn_primary_colors\n | `secondary -> Ui.btn_secondary_colors\n | `ghost -> Ui.btn_ghost_colors\n | `destructive -> Ui.btn_destructive_colors\n in\n (* Dark-surface variants need an on-accent spinner; light ones use ink. *)\n let spinner_tone =\n match variant with `primary | `destructive -> `on_accent | `secondary | `ghost -> `ink\n in\n let cls = Ui.cx (Ui.btn_core ^ \" \" ^ size_cls ^ \" \" ^ colors) extra_class in\n let attrs =\n [\n View.Attr.type_ (View.static type_str);\n View.Attr.className (View.static cls);\n View.Attr.disabled (fun () -> disabled || loading);\n ]\n in\n let events = match on_click with Some f -> [ View.On.click f ] | None -> [] in\n let spinner = if loading then Spinner.make ~tone:spinner_tone () else View.empty in\n View.element ~attrs ~events \"button\" [ spinner; View.fragment children ]\nend\n\nmodule Link_ = Link\n\nlet txt s = View.text (View.static s)\n\nlet el ?(cls = \"\") ?(attrs = []) ?(events = []) tag children =\n let attrs = if cls = \"\" then attrs else View.Attr.className (View.static cls) :: attrs in\n View.element ~attrs ~events tag children\n\nlet sign_in_example () =\n let remember = Signal.make true in\n el ~cls:\"w-full max-w-sm space-y-5 rounded-lg border border-neutral-200 bg-surface p-6\" \"div\"\n [\n el ~cls:\"text-center\" \"div\"\n [\n el\n ~cls:\n \"mx-auto mb-2 flex size-9 items-center justify-center rounded-md bg-neutral-900 \\\n text-sm font-bold text-neutral-0\"\n \"div\" [ txt \"U\" ];\n el ~cls:\"text-lg font-semibold text-neutral-900\" \"h3\" [ txt \"Welcome back\" ];\n el ~cls:\"text-sm text-neutral-500\" \"p\" [ txt \"Sign in to your account\" ];\n ];\n Field.make ~label:\"Email\" ~for_:\"si-email\"\n ~children:[ Input.make ~id:\"si-email\" ~type_:\"email\" ~placeholder:\"you@example.com\" () ]\n ();\n Field.make ~label:\"Password\" ~for_:\"si-pass\"\n ~children:[ Input.make ~id:\"si-pass\" ~type_:\"password\" ~placeholder:{js|••••••••|js} () ]\n ();\n el ~cls:\"flex items-center justify-between text-sm\" \"div\"\n [\n el ~cls:\"flex items-center gap-2\" \"div\"\n [\n View.element\n ~attrs:\n [\n View.Attr.type_ (View.static \"checkbox\");\n View.Attr.checked (View.dynamic (fun () -> Signal.get remember));\n View.Attr.className (View.static \"size-4 accent-neutral-900\");\n ]\n ~events:[ View.On.change (fun e -> Signal.set remember (Ui.checked e)) ]\n \"input\" [];\n el ~cls:\"text-neutral-700\" \"span\" [ txt \"Remember me\" ];\n ];\n Link_.make ~href:\"#\" ~children:[ txt \"Forgot?\" ] ();\n ];\n Button.make ~variant:`primary ~extra_class:\"w-full\" ~children:[ txt \"Sign in\" ] ();\n el ~cls:\"text-center text-sm text-neutral-500\" \"p\"\n [ txt \"No account? \"; Link_.make ~href:\"#\" ~children:[ txt \"Create one\" ] () ];\n ]") + | "pricing" => Some("module Badge = struct\n let make ?(variant : Contracts.Badge.variant = `solid) ~children () =\n let tone =\n match variant with\n | `solid -> \"bg-neutral-900 text-neutral-0\"\n | `soft -> \"bg-neutral-200 text-neutral-800\"\n | `outline -> \"border border-neutral-300 text-neutral-700\"\n in\n \n (View.fragment children)\n \nend\n\nmodule Icon = struct\n (* Fresh host ids so multiple icons of the same name never collide. *)\n let counter = ref 0\n\n let make ?(size : Contracts.Icon.size = `md) ?(label = \"\") ?(extra_class = \"\") ~name () =\n let dims =\n match size with\n | `xs -> \"size-3\"\n | `sm -> \"size-4\"\n | `md -> \"size-5\"\n | `lg -> \"size-6\"\n | `xl -> \"size-8\"\n in\n let body = match Icons.get name with Some b -> b | None -> [] in\n let meaningful = label <> \"\" in\n (* Meaningful icons expose an img role + accessible name; decorative ones are\n hidden so assistive tech doesn't announce them beside their label. *)\n let role_attrs =\n if meaningful then \"role=\\\"img\\\" aria-label=\\\"\" ^ label ^ \"\\\"\" else \"aria-hidden=\\\"true\\\"\"\n in\n let extra = if extra_class = \"\" then \"\" else \" \" ^ extra_class in\n let markup = Icons.svg ~dims ~extra ~role_attrs body in\n View.dyn (fun () ->\n incr counter;\n let id = \"prescriptive-reativa-icon-\" ^ string_of_int !counter in\n Ui.set_inner_html_by_id id markup;\n View.element ~attrs:[ View.Attr.id (View.static id) ] \"span\" [])\nend\n\nmodule Spinner = struct\n let make ?(size = \"size-4\") ?(tone = `ink) () =\n let colors =\n match tone with\n | `ink -> \"border-neutral-300 border-t-neutral-900\"\n | `on_accent -> \"border-white/40 border-t-white\"\n in\n \nend\n\nmodule Button = struct\n let make ?(variant : Contracts.Button.variant = `primary) ?(size : Contracts.Button.size = `md)\n ?(type_ : Contracts.Button.type_ = `button) ?(disabled = false) ?(loading = false) ?on_click\n ?(extra_class = \"\") ~children () =\n let type_str = match type_ with `button -> \"button\" | `submit -> \"submit\" | `reset -> \"reset\" in\n let size_cls = match size with `sm -> Ui.btn_sm | `md -> Ui.btn_md | `lg -> Ui.btn_lg in\n let colors =\n match variant with\n | `primary -> Ui.btn_primary_colors\n | `secondary -> Ui.btn_secondary_colors\n | `ghost -> Ui.btn_ghost_colors\n | `destructive -> Ui.btn_destructive_colors\n in\n (* Dark-surface variants need an on-accent spinner; light ones use ink. *)\n let spinner_tone =\n match variant with `primary | `destructive -> `on_accent | `secondary | `ghost -> `ink\n in\n let cls = Ui.cx (Ui.btn_core ^ \" \" ^ size_cls ^ \" \" ^ colors) extra_class in\n let attrs =\n [\n View.Attr.type_ (View.static type_str);\n View.Attr.className (View.static cls);\n View.Attr.disabled (fun () -> disabled || loading);\n ]\n in\n let events = match on_click with Some f -> [ View.On.click f ] | None -> [] in\n let spinner = if loading then Spinner.make ~tone:spinner_tone () else View.empty in\n View.element ~attrs ~events \"button\" [ spinner; View.fragment children ]\nend\n\nlet txt s = View.text (View.static s)\n\nlet el ?(cls = \"\") ?(attrs = []) ?(events = []) tag children =\n let attrs = if cls = \"\" then attrs else View.Attr.className (View.static cls) :: attrs in\n View.element ~attrs ~events tag children\n\nlet pricing_example () =\n let plan name price feats recommended =\n let card_cls =\n if recommended then Ui.card ^ \" p-5 ring-2 ring-neutral-900\" else Ui.card ^ \" p-5\"\n in\n el ~cls:card_cls \"div\"\n [\n el ~cls:\"flex items-center justify-between\" \"div\"\n [\n el ~cls:\"text-sm font-semibold text-neutral-900\" \"p\" [ txt name ];\n (if recommended then Badge.make ~variant:`solid ~children:[ txt \"Popular\" ] ()\n else View.empty);\n ];\n el ~cls:\"mt-2\" \"p\"\n [\n el ~cls:\"text-3xl font-bold text-neutral-900\" \"span\" [ txt price ];\n el ~cls:\"text-sm text-neutral-500\" \"span\" [ txt \"/mo\" ];\n ];\n el ~cls:\"mt-3 space-y-1 text-sm text-neutral-600\" \"ul\"\n (List.map\n (fun f ->\n el ~cls:\"flex items-center gap-2\" \"li\"\n [\n Icon.make ~name:\"check\" ~size:`sm ~extra_class:\"text-status-success\" ();\n txt f;\n ])\n feats);\n el ~cls:\"mt-4\" \"div\"\n [\n Button.make\n ~variant:(if recommended then `primary else `secondary)\n ~extra_class:\"w-full\" ~children:[ txt \"Choose\" ] ();\n ];\n ]\n in\n el ~cls:\"grid w-full max-w-2xl grid-cols-3 gap-4\" \"div\"\n [\n plan \"Starter\" \"$0\" [ \"1 project\"; \"Community support\" ] false;\n plan \"Pro\" \"$12\" [ \"Unlimited projects\"; \"Priority support\"; \"Analytics\" ] true;\n plan \"Team\" \"$29\" [ \"Everything in Pro\"; \"SSO\"; \"Audit log\" ] false;\n ]") + | "authentication" => Some("module Field = struct\n let make ?(hint = \"\") ~label ~for_ ~children () =\n let label_node =\n View.element\n ~attrs:[ View.Attr.className (View.static Ui.label); View.Attr.make \"for\" (View.static for_) ]\n \"label\"\n [ View.text (View.static label) ]\n in\n let hint_node =\n if hint = \"\" then View.empty\n else

(hint)

\n in\n
\n (label_node)\n (View.fragment children)\n (hint_node)\n
\nend\n\nmodule Input = struct\n let make ?(type_ = \"text\") ?id ?(placeholder = \"\") ?value ?(required = false) ?on_input\n ?(extra_class = \"\") () =\n let attrs =\n [\n View.Attr.type_ (View.static type_);\n View.Attr.placeholder (View.static placeholder);\n View.Attr.className (View.static (Ui.cx Ui.input_base extra_class));\n View.Attr.toggle \"required\" (fun () -> required);\n ]\n in\n let attrs = match id with Some i -> View.Attr.id (View.static i) :: attrs | None -> attrs in\n let attrs = match value with Some v -> View.Attr.value (View.static v) :: attrs | None -> attrs in\n let events = match on_input with Some f -> [ View.On.input f ] | None -> [] in\n View.element ~attrs ~events \"input\" []\nend\n\nmodule Spinner = struct\n let make ?(size = \"size-4\") ?(tone = `ink) () =\n let colors =\n match tone with\n | `ink -> \"border-neutral-300 border-t-neutral-900\"\n | `on_accent -> \"border-white/40 border-t-white\"\n in\n \nend\n\nmodule Button = struct\n let make ?(variant : Contracts.Button.variant = `primary) ?(size : Contracts.Button.size = `md)\n ?(type_ : Contracts.Button.type_ = `button) ?(disabled = false) ?(loading = false) ?on_click\n ?(extra_class = \"\") ~children () =\n let type_str = match type_ with `button -> \"button\" | `submit -> \"submit\" | `reset -> \"reset\" in\n let size_cls = match size with `sm -> Ui.btn_sm | `md -> Ui.btn_md | `lg -> Ui.btn_lg in\n let colors =\n match variant with\n | `primary -> Ui.btn_primary_colors\n | `secondary -> Ui.btn_secondary_colors\n | `ghost -> Ui.btn_ghost_colors\n | `destructive -> Ui.btn_destructive_colors\n in\n (* Dark-surface variants need an on-accent spinner; light ones use ink. *)\n let spinner_tone =\n match variant with `primary | `destructive -> `on_accent | `secondary | `ghost -> `ink\n in\n let cls = Ui.cx (Ui.btn_core ^ \" \" ^ size_cls ^ \" \" ^ colors) extra_class in\n let attrs =\n [\n View.Attr.type_ (View.static type_str);\n View.Attr.className (View.static cls);\n View.Attr.disabled (fun () -> disabled || loading);\n ]\n in\n let events = match on_click with Some f -> [ View.On.click f ] | None -> [] in\n let spinner = if loading then Spinner.make ~tone:spinner_tone () else View.empty in\n View.element ~attrs ~events \"button\" [ spinner; View.fragment children ]\nend\n\nlet txt s = View.text (View.static s)\n\nlet el ?(cls = \"\") ?(attrs = []) ?(events = []) tag children =\n let attrs = if cls = \"\" then attrs else View.Attr.className (View.static cls) :: attrs in\n View.element ~attrs ~events tag children\n\nlet authentication_example () =\n let step = Signal.make 1 in\n let step_label () = \"Step \" ^ string_of_int (Signal.get step) ^ \" of 2\" in\n let on_step1 () = Signal.get step = 1 in\n el ~cls:\"w-full max-w-sm rounded-lg border border-neutral-200 bg-surface p-6\" \"div\"\n [\n el ~cls:\"text-xs text-neutral-400\" \"p\" [ View.dyn_text step_label ];\n View.show\n ~fallback:\n (el ~cls:\"mt-2 space-y-4\" \"div\"\n [\n el ~cls:\"text-lg font-semibold text-neutral-900\" \"h3\" [ txt \"Enter your code\" ];\n el ~cls:\"text-sm text-neutral-500\" \"p\"\n [ txt \"We sent a 6-digit code to your email.\" ];\n Field.make ~label:\"Verification code\" ~for_:\"auth-code\"\n ~children:[ Input.make ~id:\"auth-code\" ~placeholder:\"123456\" () ] ();\n Button.make ~variant:`primary ~extra_class:\"w-full\"\n ~on_click:(fun _ -> Signal.set step 1) ~children:[ txt \"Verify\" ] ();\n ])\n on_step1\n (el ~cls:\"mt-2 space-y-4\" \"div\"\n [\n el ~cls:\"text-lg font-semibold text-neutral-900\" \"h3\" [ txt \"Sign in\" ];\n Field.make ~label:\"Email\" ~for_:\"auth-email\"\n ~children:\n [ Input.make ~id:\"auth-email\" ~type_:\"email\" ~placeholder:\"you@example.com\" () ]\n ();\n Field.make ~label:\"Password\" ~for_:\"auth-pass\"\n ~children:\n [ Input.make ~id:\"auth-pass\" ~type_:\"password\" ~placeholder:{js|••••••••|js} () ]\n ();\n Button.make ~variant:`primary ~extra_class:\"w-full\"\n ~on_click:(fun _ -> Signal.set step 2) ~children:[ txt \"Continue\" ] ();\n ]);\n ]") + | "onboarding" => Some("module Spinner = struct\n let make ?(size = \"size-4\") ?(tone = `ink) () =\n let colors =\n match tone with\n | `ink -> \"border-neutral-300 border-t-neutral-900\"\n | `on_accent -> \"border-white/40 border-t-white\"\n in\n \nend\n\nmodule Button = struct\n let make ?(variant : Contracts.Button.variant = `primary) ?(size : Contracts.Button.size = `md)\n ?(type_ : Contracts.Button.type_ = `button) ?(disabled = false) ?(loading = false) ?on_click\n ?(extra_class = \"\") ~children () =\n let type_str = match type_ with `button -> \"button\" | `submit -> \"submit\" | `reset -> \"reset\" in\n let size_cls = match size with `sm -> Ui.btn_sm | `md -> Ui.btn_md | `lg -> Ui.btn_lg in\n let colors =\n match variant with\n | `primary -> Ui.btn_primary_colors\n | `secondary -> Ui.btn_secondary_colors\n | `ghost -> Ui.btn_ghost_colors\n | `destructive -> Ui.btn_destructive_colors\n in\n (* Dark-surface variants need an on-accent spinner; light ones use ink. *)\n let spinner_tone =\n match variant with `primary | `destructive -> `on_accent | `secondary | `ghost -> `ink\n in\n let cls = Ui.cx (Ui.btn_core ^ \" \" ^ size_cls ^ \" \" ^ colors) extra_class in\n let attrs =\n [\n View.Attr.type_ (View.static type_str);\n View.Attr.className (View.static cls);\n View.Attr.disabled (fun () -> disabled || loading);\n ]\n in\n let events = match on_click with Some f -> [ View.On.click f ] | None -> [] in\n let spinner = if loading then Spinner.make ~tone:spinner_tone () else View.empty in\n View.element ~attrs ~events \"button\" [ spinner; View.fragment children ]\nend\n\nlet txt s = View.text (View.static s)\n\nlet el ?(cls = \"\") ?(attrs = []) ?(events = []) tag children =\n let attrs = if cls = \"\" then attrs else View.Attr.className (View.static cls) :: attrs in\n View.element ~attrs ~events tag children\n\nlet onboarding_example () =\n let step = Signal.make 1 in\n let total = 3 in\n let pct () = \"height:100%;width:\" ^ string_of_int (Signal.get step * 100 / total) ^ \"%\" in\n let title () =\n match Signal.get step with\n | 1 -> \"Welcome to Acme\"\n | 2 -> \"Set up your workspace\"\n | _ -> \"Invite your team\"\n in\n let body () =\n match Signal.get step with\n | 1 -> \"Let's get you set up in a couple of steps.\"\n | 2 -> \"Name your workspace and pick a theme.\"\n | _ -> \"Add teammates to collaborate. You can skip this.\"\n in\n let next_label () = if Signal.get step = total then \"Finish\" else \"Next\" in\n el ~cls:\"w-full max-w-md rounded-lg border border-neutral-200 bg-surface p-6\" \"div\"\n [\n el ~cls:\"h-1.5 w-full overflow-hidden rounded-full bg-neutral-200\" \"div\"\n [\n el ~cls:\"rounded-full bg-neutral-900 transition-all\"\n ~attrs:[ View.Attr.make \"style\" (View.dynamic pct) ] \"div\" [];\n ];\n el ~cls:\"mt-4 text-lg font-semibold text-neutral-900\" \"h3\" [ View.dyn_text title ];\n el ~cls:\"mt-1 text-sm text-neutral-500\" \"p\" [ View.dyn_text body ];\n el ~cls:\"mt-5 flex justify-between\" \"div\"\n [\n Button.make ~variant:`ghost\n ~on_click:(fun _ -> Signal.update step (fun s -> if s > 1 then s - 1 else 1))\n ~children:[ txt \"Back\" ] ();\n Button.make ~variant:`primary\n ~on_click:(fun _ -> Signal.update step (fun s -> if s < total then s + 1 else 1))\n ~children:[ View.dyn_text next_label ] ();\n ];\n ]") + | "checkout" => Some("module Field = struct\n let make ?(hint = \"\") ~label ~for_ ~children () =\n let label_node =\n View.element\n ~attrs:[ View.Attr.className (View.static Ui.label); View.Attr.make \"for\" (View.static for_) ]\n \"label\"\n [ View.text (View.static label) ]\n in\n let hint_node =\n if hint = \"\" then View.empty\n else

(hint)

\n in\n
\n (label_node)\n (View.fragment children)\n (hint_node)\n
\nend\n\nmodule Input = struct\n let make ?(type_ = \"text\") ?id ?(placeholder = \"\") ?value ?(required = false) ?on_input\n ?(extra_class = \"\") () =\n let attrs =\n [\n View.Attr.type_ (View.static type_);\n View.Attr.placeholder (View.static placeholder);\n View.Attr.className (View.static (Ui.cx Ui.input_base extra_class));\n View.Attr.toggle \"required\" (fun () -> required);\n ]\n in\n let attrs = match id with Some i -> View.Attr.id (View.static i) :: attrs | None -> attrs in\n let attrs = match value with Some v -> View.Attr.value (View.static v) :: attrs | None -> attrs in\n let events = match on_input with Some f -> [ View.On.input f ] | None -> [] in\n View.element ~attrs ~events \"input\" []\nend\n\nmodule Spinner = struct\n let make ?(size = \"size-4\") ?(tone = `ink) () =\n let colors =\n match tone with\n | `ink -> \"border-neutral-300 border-t-neutral-900\"\n | `on_accent -> \"border-white/40 border-t-white\"\n in\n \nend\n\nmodule Button = struct\n let make ?(variant : Contracts.Button.variant = `primary) ?(size : Contracts.Button.size = `md)\n ?(type_ : Contracts.Button.type_ = `button) ?(disabled = false) ?(loading = false) ?on_click\n ?(extra_class = \"\") ~children () =\n let type_str = match type_ with `button -> \"button\" | `submit -> \"submit\" | `reset -> \"reset\" in\n let size_cls = match size with `sm -> Ui.btn_sm | `md -> Ui.btn_md | `lg -> Ui.btn_lg in\n let colors =\n match variant with\n | `primary -> Ui.btn_primary_colors\n | `secondary -> Ui.btn_secondary_colors\n | `ghost -> Ui.btn_ghost_colors\n | `destructive -> Ui.btn_destructive_colors\n in\n (* Dark-surface variants need an on-accent spinner; light ones use ink. *)\n let spinner_tone =\n match variant with `primary | `destructive -> `on_accent | `secondary | `ghost -> `ink\n in\n let cls = Ui.cx (Ui.btn_core ^ \" \" ^ size_cls ^ \" \" ^ colors) extra_class in\n let attrs =\n [\n View.Attr.type_ (View.static type_str);\n View.Attr.className (View.static cls);\n View.Attr.disabled (fun () -> disabled || loading);\n ]\n in\n let events = match on_click with Some f -> [ View.On.click f ] | None -> [] in\n let spinner = if loading then Spinner.make ~tone:spinner_tone () else View.empty in\n View.element ~attrs ~events \"button\" [ spinner; View.fragment children ]\nend\n\nmodule Separator = struct\n let make ?(orientation : Contracts.Separator.orientation = `horizontal) ?(extra_class = \"\") () =\n let base =\n match orientation with\n | `horizontal -> \"h-px w-full bg-neutral-200\"\n | `vertical -> \"h-4 w-px bg-neutral-200\"\n in\n View.element\n ~attrs:\n [\n View.Attr.className (View.static (Ui.cx base extra_class));\n View.Attr.make \"role\" (View.static \"separator\");\n ]\n \"div\" []\nend\n\nlet txt s = View.text (View.static s)\n\nlet el ?(cls = \"\") ?(attrs = []) ?(events = []) tag children =\n let attrs = if cls = \"\" then attrs else View.Attr.className (View.static cls) :: attrs in\n View.element ~attrs ~events tag children\n\nlet checkout_example () =\n let items = [ (\"Pro plan (annual)\", \"$120.00\"); (\"Add-on: Analytics\", \"$24.00\") ] in\n el ~cls:\"grid w-full max-w-2xl gap-4 sm:grid-cols-2\" \"div\"\n [\n el ~cls:\"space-y-4 rounded-lg border border-neutral-200 bg-surface p-5\" \"div\"\n [\n el ~cls:\"text-sm font-semibold text-neutral-900\" \"h3\" [ txt \"Payment details\" ];\n Field.make ~label:\"Card number\" ~for_:\"co-card\"\n ~children:[ Input.make ~id:\"co-card\" ~placeholder:\"4242 4242 4242 4242\" () ] ();\n el ~cls:\"grid grid-cols-2 gap-3\" \"div\"\n [\n Field.make ~label:\"Expiry\" ~for_:\"co-exp\"\n ~children:[ Input.make ~id:\"co-exp\" ~placeholder:\"MM/YY\" () ] ();\n Field.make ~label:\"CVC\" ~for_:\"co-cvc\"\n ~children:[ Input.make ~id:\"co-cvc\" ~placeholder:\"123\" () ] ();\n ];\n Button.make ~variant:`primary ~extra_class:\"w-full\"\n ~children:[ txt \"Pay $144.00\" ] ();\n ];\n el ~cls:\"space-y-3 rounded-lg border border-neutral-200 bg-neutral-50 p-5\" \"div\"\n [\n el ~cls:\"text-sm font-semibold text-neutral-900\" \"h3\" [ txt \"Order summary\" ];\n el ~cls:\"space-y-2 text-sm\" \"ul\"\n (List.map\n (fun (name, price) ->\n el ~cls:\"flex justify-between text-neutral-700\" \"li\"\n [ txt name; el ~cls:\"tabular-nums\" \"span\" [ txt price ] ])\n items);\n Separator.make ();\n el ~cls:\"flex justify-between text-sm font-semibold text-neutral-900\" \"div\"\n [ txt \"Total\"; el ~cls:\"tabular-nums\" \"span\" [ txt \"$144.00\" ] ];\n ];\n ]") + | "announcement-bar" => Some("module Icon = struct\n (* Fresh host ids so multiple icons of the same name never collide. *)\n let counter = ref 0\n\n let make ?(size : Contracts.Icon.size = `md) ?(label = \"\") ?(extra_class = \"\") ~name () =\n let dims =\n match size with\n | `xs -> \"size-3\"\n | `sm -> \"size-4\"\n | `md -> \"size-5\"\n | `lg -> \"size-6\"\n | `xl -> \"size-8\"\n in\n let body = match Icons.get name with Some b -> b | None -> [] in\n let meaningful = label <> \"\" in\n (* Meaningful icons expose an img role + accessible name; decorative ones are\n hidden so assistive tech doesn't announce them beside their label. *)\n let role_attrs =\n if meaningful then \"role=\\\"img\\\" aria-label=\\\"\" ^ label ^ \"\\\"\" else \"aria-hidden=\\\"true\\\"\"\n in\n let extra = if extra_class = \"\" then \"\" else \" \" ^ extra_class in\n let markup = Icons.svg ~dims ~extra ~role_attrs body in\n View.dyn (fun () ->\n incr counter;\n let id = \"prescriptive-reativa-icon-\" ^ string_of_int !counter in\n Ui.set_inner_html_by_id id markup;\n View.element ~attrs:[ View.Attr.id (View.static id) ] \"span\" [])\nend\n\nmodule IconButton = struct\n let make ?(variant : Contracts.IconButton.variant = `ghost) ?on_click ~label ~children () =\n let tone =\n match variant with\n | `solid -> \"bg-action text-on-action hover:bg-action-hover\"\n | `ghost -> \"text-ink hover:bg-action-subtle\"\n in\n let attrs =\n [\n View.Attr.type_ (View.static \"button\");\n View.Attr.make \"aria-label\" (View.static label);\n View.Attr.className\n (View.static\n (\"inline-flex size-9 items-center justify-center rounded-md text-sm transition-colors \\\n focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-action \\\n focus-visible:ring-offset-2 \" ^ tone));\n ]\n in\n let events = match on_click with Some f -> [ View.On.click f ] | None -> [] in\n View.element ~attrs ~events \"button\" [ View.fragment children ]\nend\n\nmodule AnnouncementBar = struct\n let make ?(variant : Contracts.AnnouncementBar.variant = `neutral) ?(action_label = \"\")\n ?(action_href = \"#\") ?on_dismiss ~message () =\n let open_ = Signal.make true in\n let dismiss _ =\n Signal.set open_ false;\n match on_dismiss with Some f -> f () | None -> ()\n in\n let surface, icon_name, icon_cls =\n match variant with\n | `neutral -> (\"border-b border-border bg-surface text-ink\", \"info\", \"text-muted\")\n | `accent -> (\"bg-accent text-accent-contrast\", \"zap\", \"text-accent-contrast\")\n | `warning ->\n (\"border-b border-status-warning bg-surface text-ink\", \"alert-triangle\", \"text-status-warning\")\n in\n let link_cls =\n match variant with\n | `accent -> \"font-medium underline underline-offset-2 hover:opacity-80\"\n | `neutral | `warning ->\n \"font-medium text-ink underline underline-offset-2 hover:text-muted\"\n in\n View.show\n (fun () -> Signal.get open_)\n (View.element\n ~attrs:\n [\n View.Attr.className\n (View.static\n (\"flex w-full flex-wrap items-center justify-center gap-x-3 gap-y-1 px-4 py-2 text-sm \"\n ^ surface));\n ]\n \"div\"\n [\n (Icon.make ~name:icon_name ~size:`sm ());\n

(message)

;\n (if action_label = \"\" then View.empty\n else\n View.element\n ~attrs:\n [ View.Attr.href (View.static action_href); View.Attr.className (View.static link_cls) ]\n \"a\"\n [ View.text (View.static action_label) ]);\n \n (IconButton.make ~label:\"Dismiss announcement\" ~variant:`ghost ~on_click:dismiss\n ~children:[ Icon.make ~name:\"x\" ~size:`sm () ] ())\n ;\n ])\nend\n\nlet announcement_bar_example () =\n
\n (AnnouncementBar.make ~variant:`accent ~message:{js|v2 ships May 4 — everything gets faster.|js}\n ~action_label:\"See what's new\" ())\n (AnnouncementBar.make ~variant:`neutral ~message:\"We've updated our terms of service.\"\n ~action_label:\"Read the changes\" ())\n (AnnouncementBar.make ~variant:`warning\n ~message:{js|Scheduled maintenance Sunday 02:00–04:00 UTC.|js} ())\n
") + | "contact-section" => Some("module Icon = struct\n (* Fresh host ids so multiple icons of the same name never collide. *)\n let counter = ref 0\n\n let make ?(size : Contracts.Icon.size = `md) ?(label = \"\") ?(extra_class = \"\") ~name () =\n let dims =\n match size with\n | `xs -> \"size-3\"\n | `sm -> \"size-4\"\n | `md -> \"size-5\"\n | `lg -> \"size-6\"\n | `xl -> \"size-8\"\n in\n let body = match Icons.get name with Some b -> b | None -> [] in\n let meaningful = label <> \"\" in\n (* Meaningful icons expose an img role + accessible name; decorative ones are\n hidden so assistive tech doesn't announce them beside their label. *)\n let role_attrs =\n if meaningful then \"role=\\\"img\\\" aria-label=\\\"\" ^ label ^ \"\\\"\" else \"aria-hidden=\\\"true\\\"\"\n in\n let extra = if extra_class = \"\" then \"\" else \" \" ^ extra_class in\n let markup = Icons.svg ~dims ~extra ~role_attrs body in\n View.dyn (fun () ->\n incr counter;\n let id = \"prescriptive-reativa-icon-\" ^ string_of_int !counter in\n Ui.set_inner_html_by_id id markup;\n View.element ~attrs:[ View.Attr.id (View.static id) ] \"span\" [])\nend\n\nmodule Field = struct\n let make ?(hint = \"\") ~label ~for_ ~children () =\n let label_node =\n View.element\n ~attrs:[ View.Attr.className (View.static Ui.label); View.Attr.make \"for\" (View.static for_) ]\n \"label\"\n [ View.text (View.static label) ]\n in\n let hint_node =\n if hint = \"\" then View.empty\n else

(hint)

\n in\n
\n (label_node)\n (View.fragment children)\n (hint_node)\n
\nend\n\nmodule Input = struct\n let make ?(type_ = \"text\") ?id ?(placeholder = \"\") ?value ?(required = false) ?on_input\n ?(extra_class = \"\") () =\n let attrs =\n [\n View.Attr.type_ (View.static type_);\n View.Attr.placeholder (View.static placeholder);\n View.Attr.className (View.static (Ui.cx Ui.input_base extra_class));\n View.Attr.toggle \"required\" (fun () -> required);\n ]\n in\n let attrs = match id with Some i -> View.Attr.id (View.static i) :: attrs | None -> attrs in\n let attrs = match value with Some v -> View.Attr.value (View.static v) :: attrs | None -> attrs in\n let events = match on_input with Some f -> [ View.On.input f ] | None -> [] in\n View.element ~attrs ~events \"input\" []\nend\n\nmodule Textarea = struct\n let make ?(placeholder = \"\") ?(rows = 3) ?(required = false) ?id ?(extra_class = \"\") ?on_input\n ~value () =\n let handle ev =\n Signal.set value (Ui.input_value ev);\n match on_input with Some f -> f ev | None -> ()\n in\n let attrs =\n [\n View.Attr.make \"rows\" (View.static (string_of_int rows));\n View.Attr.placeholder (View.static placeholder);\n View.Attr.className (View.static (Ui.cx (Ui.input_base ^ \" resize-y\") extra_class));\n View.Attr.toggle \"required\" (fun () -> required);\n ]\n in\n let attrs = match id with Some i -> View.Attr.id (View.static i) :: attrs | None -> attrs in\n View.element ~attrs ~events:[ View.On.input handle ] \"textarea\" []\nend\n\nmodule Spinner = struct\n let make ?(size = \"size-4\") ?(tone = `ink) () =\n let colors =\n match tone with\n | `ink -> \"border-neutral-300 border-t-neutral-900\"\n | `on_accent -> \"border-white/40 border-t-white\"\n in\n \nend\n\nmodule Button = struct\n let make ?(variant : Contracts.Button.variant = `primary) ?(size : Contracts.Button.size = `md)\n ?(type_ : Contracts.Button.type_ = `button) ?(disabled = false) ?(loading = false) ?on_click\n ?(extra_class = \"\") ~children () =\n let type_str = match type_ with `button -> \"button\" | `submit -> \"submit\" | `reset -> \"reset\" in\n let size_cls = match size with `sm -> Ui.btn_sm | `md -> Ui.btn_md | `lg -> Ui.btn_lg in\n let colors =\n match variant with\n | `primary -> Ui.btn_primary_colors\n | `secondary -> Ui.btn_secondary_colors\n | `ghost -> Ui.btn_ghost_colors\n | `destructive -> Ui.btn_destructive_colors\n in\n (* Dark-surface variants need an on-accent spinner; light ones use ink. *)\n let spinner_tone =\n match variant with `primary | `destructive -> `on_accent | `secondary | `ghost -> `ink\n in\n let cls = Ui.cx (Ui.btn_core ^ \" \" ^ size_cls ^ \" \" ^ colors) extra_class in\n let attrs =\n [\n View.Attr.type_ (View.static type_str);\n View.Attr.className (View.static cls);\n View.Attr.disabled (fun () -> disabled || loading);\n ]\n in\n let events = match on_click with Some f -> [ View.On.click f ] | None -> [] in\n let spinner = if loading then Spinner.make ~tone:spinner_tone () else View.empty in\n View.element ~attrs ~events \"button\" [ spinner; View.fragment children ]\nend\n\nmodule ContactSection = struct\n let make ?(description = \"\") ?(details = []) ?on_submit ~heading () =\n let name = Signal.make \"\" in\n let email = Signal.make \"\" in\n let message = Signal.make \"\" in\n let sent = Signal.make false in\n let submit ev =\n Ui.prevent_default ev;\n (match on_submit with\n | Some f -> f (Signal.get name, Signal.get email, Signal.get message)\n | None -> ());\n Signal.set sent true\n in\n let detail_row (icon, label, href) =\n View.element ~attrs:[] \"li\"\n [\n View.element\n ~attrs:\n [\n View.Attr.href (View.static href);\n View.Attr.className (View.static \"group inline-flex items-center gap-3 text-sm text-ink\");\n ]\n \"a\"\n [\n \n (Icon.make ~name:icon ())\n ;\n (label);\n ];\n ]\n in\n let form_node =\n View.element\n ~attrs:[ View.Attr.className (View.static \"mt-6 space-y-4\") ]\n ~events:[ View.On.submit submit ]\n \"form\"\n [\n
\n (Field.make ~label:\"Name\" ~for_:\"contact-name\"\n ~children:\n [\n Input.make ~id:\"contact-name\" ~placeholder:\"Ada Lovelace\" ~required:true\n ~on_input:(fun e -> Signal.set name (Ui.input_value e))\n ();\n ]\n ())\n (Field.make ~label:\"Email\" ~for_:\"contact-email\"\n ~children:\n [\n Input.make ~id:\"contact-email\" ~type_:\"email\" ~placeholder:\"ada@example.com\"\n ~required:true\n ~on_input:(fun e -> Signal.set email (Ui.input_value e))\n ();\n ]\n ())\n
;\n (Field.make ~label:\"Message\" ~for_:\"contact-message\"\n ~children:\n [\n Textarea.make ~id:\"contact-message\" ~rows:4 ~required:true ~extra_class:\"resize-none\"\n ~placeholder:\"How can we help?\" ~value:message ();\n ]\n ());\n (Button.make ~type_:`submit ~variant:`primary\n ~children:[ View.text (View.static \"Send message\") ] ());\n (View.element\n ~attrs:[ View.Attr.make \"role\" (View.static \"status\") ]\n \"div\"\n [\n View.show\n (fun () -> Signal.get sent)\n (

\n ({js|Thanks — your message is on its way. We reply within one business day.|js})\n

);\n ]);\n ]\n in\n View.element\n ~attrs:[ View.Attr.className (View.static \"grid w-full gap-10 md:grid-cols-5\") ]\n \"section\"\n [\n
\n

(heading)

\n (if description = \"\" then View.empty\n else

(description)

)\n (form_node)\n
;\n (if details = [] then View.empty\n else\n View.element\n ~attrs:[ View.Attr.className (View.static \"space-y-4 md:col-span-2 md:pt-12\") ]\n \"ul\"\n (List.map detail_row details));\n ]\nend\n\nlet contact_section_example () =\n
\n (ContactSection.make ~heading:\"Talk to us\"\n ~description:\"Questions about specs, tokens, or the agent skill? We reply within one business day.\"\n ~details:\n [\n (\"mail\", \"hello@acme.dev\", \"mailto:hello@acme.dev\");\n (\"github\", \"acme/support\", \"https://github.com\");\n ]\n ())\n
") | "logo-cloud" => Some("module LogoCloud = struct\n let make ?(heading = \"\") ~logos () =\n let logo_item name =\n View.element ~attrs:[] \"li\"\n [\n View.element\n ~attrs:\n [\n View.Attr.make \"role\" (View.static \"img\");\n View.Attr.make \"aria-label\" (View.static name);\n View.Attr.className\n (View.static \"text-lg font-semibold tracking-tight text-neutral-400 select-none\");\n ]\n \"span\"\n [ View.text (View.static name) ];\n ]\n in\n View.element\n ~attrs:[ View.Attr.className (View.static \"w-full py-6 text-center\") ]\n \"section\"\n [\n (if heading = \"\" then View.empty\n else\n

(heading)

);\n View.element\n ~attrs:\n [\n View.Attr.className\n (View.static \"flex flex-wrap items-center justify-center gap-x-10 gap-y-5\");\n ]\n \"ul\"\n (List.map logo_item logos);\n ]\nend\n\nlet logo_cloud_example () =\n
\n (LogoCloud.make ~heading:\"Trusted by teams at\"\n ~logos:[ \"Acme\"; \"Northwind\"; \"Globex\"; \"Initech\"; \"Umbrella\"; \"Aperture\" ] ())\n
") - | "newsletter" => Some("module Spinner = struct\n let make ?(size = \"size-4\") ?(tone = `ink) () =\n let colors =\n match tone with\n | `ink -> \"border-neutral-300 border-t-neutral-900\"\n | `on_accent -> \"border-white/40 border-t-white\"\n in\n \nend\n\nmodule Button = struct\n let make ?(variant : Contracts.Button.variant = `primary) ?(size : Contracts.Button.size = `md)\n ?(type_ : Contracts.Button.type_ = `button) ?(disabled = false) ?(loading = false) ?on_click\n ?(extra_class = \"\") ~children () =\n let type_str = match type_ with `button -> \"button\" | `submit -> \"submit\" | `reset -> \"reset\" in\n let size_cls = match size with `sm -> Ui.btn_sm | `md -> Ui.btn_md | `lg -> Ui.btn_lg in\n let colors =\n match variant with\n | `primary -> Ui.btn_primary_colors\n | `secondary -> Ui.btn_secondary_colors\n | `ghost -> Ui.btn_ghost_colors\n | `destructive -> Ui.btn_destructive_colors\n in\n (* Dark-surface variants need an on-accent spinner; light ones use ink. *)\n let spinner_tone =\n match variant with `primary | `destructive -> `on_accent | `secondary | `ghost -> `ink\n in\n let cls = Ui.cx (Ui.btn_core ^ \" \" ^ size_cls ^ \" \" ^ colors) extra_class in\n let attrs =\n [\n View.Attr.type_ (View.static type_str);\n View.Attr.className (View.static cls);\n View.Attr.disabled (fun () -> disabled || loading);\n ]\n in\n let events = match on_click with Some f -> [ View.On.click f ] | None -> [] in\n let spinner = if loading then Spinner.make ~tone:spinner_tone () else View.empty in\n View.element ~attrs ~events \"button\" [ spinner; View.fragment children ]\nend\n\nmodule Icon = struct\n (* Fresh host ids so multiple icons of the same name never collide. *)\n let counter = ref 0\n\n let make ?(size : Contracts.Icon.size = `md) ?(label = \"\") ?(extra_class = \"\") ~name () =\n let dims =\n match size with\n | `xs -> \"size-3\"\n | `sm -> \"size-4\"\n | `md -> \"size-5\"\n | `lg -> \"size-6\"\n | `xl -> \"size-8\"\n in\n let body = match Icons.get name with Some b -> b | None -> [] in\n let meaningful = label <> \"\" in\n (* Meaningful icons expose an img role + accessible name; decorative ones are\n hidden so assistive tech doesn't announce them beside their label. *)\n let role_attrs =\n if meaningful then \"role=\\\"img\\\" aria-label=\\\"\" ^ label ^ \"\\\"\" else \"aria-hidden=\\\"true\\\"\"\n in\n let extra = if extra_class = \"\" then \"\" else \" \" ^ extra_class in\n let markup = Icons.svg ~dims ~extra ~role_attrs body in\n View.dyn (fun () ->\n incr counter;\n let id = \"prescriptive-reativa-icon-\" ^ string_of_int !counter in\n Ui.set_inner_html_by_id id markup;\n View.element ~attrs:[ View.Attr.id (View.static id) ] \"span\" [])\nend\n\nmodule Newsletter = struct\n let make ?(description = \"\") ?(consent = \"\") ?on_subscribe ~heading () =\n let email = Signal.make \"\" in\n let done_ = Signal.make false in\n let submit ev =\n Ui.prevent_default ev;\n (match on_subscribe with Some f -> f (Signal.get email) | None -> ());\n Signal.set done_ true\n in\n let form_node =\n View.element\n ~attrs:\n [\n View.Attr.className\n (View.static \"mx-auto mt-5 flex w-full max-w-md flex-col gap-2 sm:flex-row\");\n ]\n ~events:[ View.On.submit submit ]\n \"form\"\n [\n View.element\n ~attrs:\n [\n View.Attr.type_ (View.static \"email\");\n View.Attr.toggle \"required\" (fun () -> true);\n View.Attr.make \"aria-label\" (View.static \"Email address\");\n View.Attr.placeholder (View.static \"you@example.com\");\n View.Attr.className (View.static (Ui.input_base ^ \" flex-1\"));\n ]\n ~events:[ View.On.input (fun e -> Signal.set email (Ui.input_value e)) ]\n \"input\" [];\n (Button.make ~type_:`submit ~variant:`primary\n ~children:[ View.text (View.static \"Subscribe\") ] ());\n ]\n in\n View.element\n ~attrs:\n [\n View.Attr.className\n (View.static \"w-full rounded-2xl border border-border bg-surface p-8 text-center\");\n ]\n \"section\"\n [\n

(heading)

;\n (if description = \"\" then View.empty\n else

(description)

);\n (View.show (fun () -> not (Signal.get done_)) form_node);\n (View.element\n ~attrs:[ View.Attr.make \"role\" (View.static \"status\") ]\n \"div\"\n [\n View.show\n (fun () -> Signal.get done_)\n (

\n (Icon.make ~name:\"check-circle\" ())\n (\"Almost there \\xe2\\x80\\x94 check your inbox to confirm.\")\n

);\n ]);\n (if consent = \"\" then View.empty\n else

(consent)

);\n ]\nend\n\nlet newsletter_example () =\n
\n (Newsletter.make ~heading:\"Get the monthly digest\"\n ~description:\"One email a month: new specs, patterns, and releases. No spam.\"\n ~consent:\"By subscribing you agree to the privacy policy. Unsubscribe anytime.\" ())\n
") + | "newsletter" => Some("module Spinner = struct\n let make ?(size = \"size-4\") ?(tone = `ink) () =\n let colors =\n match tone with\n | `ink -> \"border-neutral-300 border-t-neutral-900\"\n | `on_accent -> \"border-white/40 border-t-white\"\n in\n \nend\n\nmodule Button = struct\n let make ?(variant : Contracts.Button.variant = `primary) ?(size : Contracts.Button.size = `md)\n ?(type_ : Contracts.Button.type_ = `button) ?(disabled = false) ?(loading = false) ?on_click\n ?(extra_class = \"\") ~children () =\n let type_str = match type_ with `button -> \"button\" | `submit -> \"submit\" | `reset -> \"reset\" in\n let size_cls = match size with `sm -> Ui.btn_sm | `md -> Ui.btn_md | `lg -> Ui.btn_lg in\n let colors =\n match variant with\n | `primary -> Ui.btn_primary_colors\n | `secondary -> Ui.btn_secondary_colors\n | `ghost -> Ui.btn_ghost_colors\n | `destructive -> Ui.btn_destructive_colors\n in\n (* Dark-surface variants need an on-accent spinner; light ones use ink. *)\n let spinner_tone =\n match variant with `primary | `destructive -> `on_accent | `secondary | `ghost -> `ink\n in\n let cls = Ui.cx (Ui.btn_core ^ \" \" ^ size_cls ^ \" \" ^ colors) extra_class in\n let attrs =\n [\n View.Attr.type_ (View.static type_str);\n View.Attr.className (View.static cls);\n View.Attr.disabled (fun () -> disabled || loading);\n ]\n in\n let events = match on_click with Some f -> [ View.On.click f ] | None -> [] in\n let spinner = if loading then Spinner.make ~tone:spinner_tone () else View.empty in\n View.element ~attrs ~events \"button\" [ spinner; View.fragment children ]\nend\n\nmodule Icon = struct\n (* Fresh host ids so multiple icons of the same name never collide. *)\n let counter = ref 0\n\n let make ?(size : Contracts.Icon.size = `md) ?(label = \"\") ?(extra_class = \"\") ~name () =\n let dims =\n match size with\n | `xs -> \"size-3\"\n | `sm -> \"size-4\"\n | `md -> \"size-5\"\n | `lg -> \"size-6\"\n | `xl -> \"size-8\"\n in\n let body = match Icons.get name with Some b -> b | None -> [] in\n let meaningful = label <> \"\" in\n (* Meaningful icons expose an img role + accessible name; decorative ones are\n hidden so assistive tech doesn't announce them beside their label. *)\n let role_attrs =\n if meaningful then \"role=\\\"img\\\" aria-label=\\\"\" ^ label ^ \"\\\"\" else \"aria-hidden=\\\"true\\\"\"\n in\n let extra = if extra_class = \"\" then \"\" else \" \" ^ extra_class in\n let markup = Icons.svg ~dims ~extra ~role_attrs body in\n View.dyn (fun () ->\n incr counter;\n let id = \"prescriptive-reativa-icon-\" ^ string_of_int !counter in\n Ui.set_inner_html_by_id id markup;\n View.element ~attrs:[ View.Attr.id (View.static id) ] \"span\" [])\nend\n\nmodule Newsletter = struct\n let make ?(description = \"\") ?(consent = \"\") ?on_subscribe ~heading () =\n let email = Signal.make \"\" in\n let done_ = Signal.make false in\n let submit ev =\n Ui.prevent_default ev;\n (match on_subscribe with Some f -> f (Signal.get email) | None -> ());\n Signal.set done_ true\n in\n let form_node =\n View.element\n ~attrs:\n [\n View.Attr.className\n (View.static \"mx-auto mt-5 flex w-full max-w-md flex-col gap-2 sm:flex-row\");\n ]\n ~events:[ View.On.submit submit ]\n \"form\"\n [\n View.element\n ~attrs:\n [\n View.Attr.type_ (View.static \"email\");\n View.Attr.toggle \"required\" (fun () -> true);\n View.Attr.make \"aria-label\" (View.static \"Email address\");\n View.Attr.placeholder (View.static \"you@example.com\");\n View.Attr.className (View.static (Ui.input_base ^ \" flex-1\"));\n ]\n ~events:[ View.On.input (fun e -> Signal.set email (Ui.input_value e)) ]\n \"input\" [];\n (Button.make ~type_:`submit ~variant:`primary\n ~children:[ View.text (View.static \"Subscribe\") ] ());\n ]\n in\n View.element\n ~attrs:\n [\n View.Attr.className\n (View.static \"w-full rounded-2xl border border-border bg-surface p-8 text-center\");\n ]\n \"section\"\n [\n

(heading)

;\n (if description = \"\" then View.empty\n else

(description)

);\n (View.show (fun () -> not (Signal.get done_)) form_node);\n (View.element\n ~attrs:[ View.Attr.make \"role\" (View.static \"status\") ]\n \"div\"\n [\n View.show\n (fun () -> Signal.get done_)\n (

\n (Icon.make ~name:\"check-circle\" ())\n ({js|Almost there — check your inbox to confirm.|js})\n

);\n ]);\n (if consent = \"\" then View.empty\n else

(consent)

);\n ]\nend\n\nlet newsletter_example () =\n
\n (Newsletter.make ~heading:\"Get the monthly digest\"\n ~description:\"One email a month: new specs, patterns, and releases. No spam.\"\n ~consent:\"By subscribing you agree to the privacy policy. Unsubscribe anytime.\" ())\n
") | "page-header" => Some("module Icon = struct\n (* Fresh host ids so multiple icons of the same name never collide. *)\n let counter = ref 0\n\n let make ?(size : Contracts.Icon.size = `md) ?(label = \"\") ?(extra_class = \"\") ~name () =\n let dims =\n match size with\n | `xs -> \"size-3\"\n | `sm -> \"size-4\"\n | `md -> \"size-5\"\n | `lg -> \"size-6\"\n | `xl -> \"size-8\"\n in\n let body = match Icons.get name with Some b -> b | None -> [] in\n let meaningful = label <> \"\" in\n (* Meaningful icons expose an img role + accessible name; decorative ones are\n hidden so assistive tech doesn't announce them beside their label. *)\n let role_attrs =\n if meaningful then \"role=\\\"img\\\" aria-label=\\\"\" ^ label ^ \"\\\"\" else \"aria-hidden=\\\"true\\\"\"\n in\n let extra = if extra_class = \"\" then \"\" else \" \" ^ extra_class in\n let markup = Icons.svg ~dims ~extra ~role_attrs body in\n View.dyn (fun () ->\n incr counter;\n let id = \"prescriptive-reativa-icon-\" ^ string_of_int !counter in\n Ui.set_inner_html_by_id id markup;\n View.element ~attrs:[ View.Attr.id (View.static id) ] \"span\" [])\nend\n\nmodule PageHeader = struct\n let make ?(description = \"\") ?(breadcrumb = []) ~title ~children () =\n let crumb_item (label, href) =\n let inner =\n if href = \"\" then (label)\n else\n \n (label)\n (Icon.make ~name:\"chevron-right\" ~size:`xs ())\n \n in\n
  • (inner)
    • \n in\n let breadcrumb_node =\n if breadcrumb = [] then View.empty\n else\n View.element\n ~attrs:\n [\n View.Attr.make \"aria-label\" (View.static \"Breadcrumb\");\n View.Attr.className (View.static \"mb-1.5\");\n ]\n \"nav\"\n [\n View.element\n ~attrs:[ View.Attr.className (View.static \"flex items-center gap-1.5 text-xs text-muted\") ]\n \"ul\"\n (List.map crumb_item breadcrumb);\n ]\n in\n View.element\n ~attrs:\n [\n View.Attr.className\n (View.static\n \"flex w-full flex-wrap items-start justify-between gap-x-6 gap-y-4 border-b border-border pb-5\");\n ]\n \"header\"\n [\n
    \n (breadcrumb_node)\n

    (title)

    \n (if description = \"\" then View.empty\n else

    (description)

    )\n
    ;\n
    (View.fragment children)
    ;\n ]\nend\n\nmodule Spinner = struct\n let make ?(size = \"size-4\") ?(tone = `ink) () =\n let colors =\n match tone with\n | `ink -> \"border-neutral-300 border-t-neutral-900\"\n | `on_accent -> \"border-white/40 border-t-white\"\n in\n \nend\n\nmodule Button = struct\n let make ?(variant : Contracts.Button.variant = `primary) ?(size : Contracts.Button.size = `md)\n ?(type_ : Contracts.Button.type_ = `button) ?(disabled = false) ?(loading = false) ?on_click\n ?(extra_class = \"\") ~children () =\n let type_str = match type_ with `button -> \"button\" | `submit -> \"submit\" | `reset -> \"reset\" in\n let size_cls = match size with `sm -> Ui.btn_sm | `md -> Ui.btn_md | `lg -> Ui.btn_lg in\n let colors =\n match variant with\n | `primary -> Ui.btn_primary_colors\n | `secondary -> Ui.btn_secondary_colors\n | `ghost -> Ui.btn_ghost_colors\n | `destructive -> Ui.btn_destructive_colors\n in\n (* Dark-surface variants need an on-accent spinner; light ones use ink. *)\n let spinner_tone =\n match variant with `primary | `destructive -> `on_accent | `secondary | `ghost -> `ink\n in\n let cls = Ui.cx (Ui.btn_core ^ \" \" ^ size_cls ^ \" \" ^ colors) extra_class in\n let attrs =\n [\n View.Attr.type_ (View.static type_str);\n View.Attr.className (View.static cls);\n View.Attr.disabled (fun () -> disabled || loading);\n ]\n in\n let events = match on_click with Some f -> [ View.On.click f ] | None -> [] in\n let spinner = if loading then Spinner.make ~tone:spinner_tone () else View.empty in\n View.element ~attrs ~events \"button\" [ spinner; View.fragment children ]\nend\n\nlet txt s = View.text (View.static s)\n\nlet page_header_example () =\n
    \n (PageHeader.make ~title:\"Deployments\"\n ~description:\"Everything your team shipped in the last 30 days.\"\n ~breadcrumb:[ (\"Acme\", \"#\"); (\"Production\", \"#\"); (\"Deployments\", \"\") ]\n ~children:\n [\n Button.make ~variant:`secondary ~size:`sm ~children:[ txt \"Export\" ] ();\n Button.make ~variant:`primary ~size:`sm ~children:[ txt \"New deploy\" ] ();\n ]\n ())\n
    ") - | "stat-grid" => Some("module Skeleton = struct\n let make ?(shape : Contracts.Skeleton.shape = `text) ?(extra_class = \"\") () =\n let shape_cls =\n match shape with\n | `text -> \"h-3 rounded\"\n | `circle -> \"rounded-full\"\n | `rect -> \"rounded-lg\"\n in\n
    \nend\n\nmodule Icon = struct\n (* Fresh host ids so multiple icons of the same name never collide. *)\n let counter = ref 0\n\n let make ?(size : Contracts.Icon.size = `md) ?(label = \"\") ?(extra_class = \"\") ~name () =\n let dims =\n match size with\n | `xs -> \"size-3\"\n | `sm -> \"size-4\"\n | `md -> \"size-5\"\n | `lg -> \"size-6\"\n | `xl -> \"size-8\"\n in\n let body = match Icons.get name with Some b -> b | None -> [] in\n let meaningful = label <> \"\" in\n (* Meaningful icons expose an img role + accessible name; decorative ones are\n hidden so assistive tech doesn't announce them beside their label. *)\n let role_attrs =\n if meaningful then \"role=\\\"img\\\" aria-label=\\\"\" ^ label ^ \"\\\"\" else \"aria-hidden=\\\"true\\\"\"\n in\n let extra = if extra_class = \"\" then \"\" else \" \" ^ extra_class in\n let markup = Icons.svg ~dims ~extra ~role_attrs body in\n View.dyn (fun () ->\n incr counter;\n let id = \"prescriptive-reativa-icon-\" ^ string_of_int !counter in\n Ui.set_inner_html_by_id id markup;\n View.element ~attrs:[ View.Attr.id (View.static id) ] \"span\" [])\nend\n\nmodule StatGrid = struct\n let make ?(heading = \"\") ?(loading = false) ~stats () =\n let loading_tile _ =\n View.element\n ~attrs:\n [\n View.Attr.className (View.static (Ui.card ^ \" p-4\"));\n View.Attr.make \"aria-hidden\" (View.static \"true\");\n ]\n \"li\"\n [\n Skeleton.make ~shape:`text ~extra_class:\"w-20\" ();\n Skeleton.make ~shape:`text ~extra_class:\"mt-3 h-7 w-28\" ();\n Skeleton.make ~shape:`text ~extra_class:\"mt-3 w-16\" ();\n ]\n in\n let stat_tile (label, value, delta, trend) =\n (* Direction is conveyed by icon + text, not color alone. *)\n let trend_icon, trend_cls =\n match trend with\n | `up -> (\"arrow-up\", \"text-status-success\")\n | `down -> (\"arrow-down\", \"text-status-danger\")\n | `flat -> (\"minus\", \"text-muted\")\n in\n View.element\n ~attrs:[ View.Attr.className (View.static (Ui.card ^ \" p-4\")) ]\n \"li\"\n [\n

    (label)

    ;\n

    (value)

    ;\n (if delta = \"\" then View.empty\n else\n View.element\n ~attrs:\n [\n View.Attr.className\n (View.static (\"mt-1 flex items-center gap-1 text-xs font-medium \" ^ trend_cls));\n ]\n \"p\"\n [ Icon.make ~name:trend_icon ~size:`xs (); View.text (View.static delta) ]);\n ]\n in\n let tiles = if loading then List.map loading_tile stats else List.map stat_tile stats in\n View.element\n ~attrs:[ View.Attr.className (View.static \"w-full\") ]\n \"section\"\n [\n (if heading = \"\" then View.empty\n else

    (heading)

    );\n View.element\n ~attrs:\n [\n View.Attr.className\n (View.static \"grid w-full grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4\");\n ]\n \"ul\" tiles;\n ]\nend\n\nmodule Spinner = struct\n let make ?(size = \"size-4\") ?(tone = `ink) () =\n let colors =\n match tone with\n | `ink -> \"border-neutral-300 border-t-neutral-900\"\n | `on_accent -> \"border-white/40 border-t-white\"\n in\n \nend\n\nmodule Button = struct\n let make ?(variant : Contracts.Button.variant = `primary) ?(size : Contracts.Button.size = `md)\n ?(type_ : Contracts.Button.type_ = `button) ?(disabled = false) ?(loading = false) ?on_click\n ?(extra_class = \"\") ~children () =\n let type_str = match type_ with `button -> \"button\" | `submit -> \"submit\" | `reset -> \"reset\" in\n let size_cls = match size with `sm -> Ui.btn_sm | `md -> Ui.btn_md | `lg -> Ui.btn_lg in\n let colors =\n match variant with\n | `primary -> Ui.btn_primary_colors\n | `secondary -> Ui.btn_secondary_colors\n | `ghost -> Ui.btn_ghost_colors\n | `destructive -> Ui.btn_destructive_colors\n in\n (* Dark-surface variants need an on-accent spinner; light ones use ink. *)\n let spinner_tone =\n match variant with `primary | `destructive -> `on_accent | `secondary | `ghost -> `ink\n in\n let cls = Ui.cx (Ui.btn_core ^ \" \" ^ size_cls ^ \" \" ^ colors) extra_class in\n let attrs =\n [\n View.Attr.type_ (View.static type_str);\n View.Attr.className (View.static cls);\n View.Attr.disabled (fun () -> disabled || loading);\n ]\n in\n let events = match on_click with Some f -> [ View.On.click f ] | None -> [] in\n let spinner = if loading then Spinner.make ~tone:spinner_tone () else View.empty in\n View.element ~attrs ~events \"button\" [ spinner; View.fragment children ]\nend\n\nlet txt s = View.text (View.static s)\n\nlet stat_grid_example () =\n let loading = Signal.make false in\n let stats =\n [\n (\"Revenue\", \"$48.2k\", \"+12% vs. last month\", `up);\n (\"Active users\", \"1,203\", \"+3% vs. last month\", `up);\n (\"Signups\", \"312\", \"\\xe2\\x88\\x925% vs. last month\", `down);\n (\"Uptime\", \"99.98%\", \"flat vs. last month\", `flat);\n ]\n in\n
    \n (View.show\n ~fallback:(StatGrid.make ~heading:\"This month\" ~stats ())\n (fun () -> Signal.get loading)\n (StatGrid.make ~heading:\"This month\" ~stats ~loading:true ()))\n (Button.make ~variant:`secondary ~size:`sm\n ~on_click:(fun _ ->\n Signal.set loading true;\n Ui.set_timeout (fun () -> Signal.set loading false) 1500)\n ~children:[ txt \"Simulate loading\" ] ())\n
    ") + | "stat-grid" => Some("module Skeleton = struct\n let make ?(shape : Contracts.Skeleton.shape = `text) ?(extra_class = \"\") () =\n let shape_cls =\n match shape with\n | `text -> \"h-3 rounded\"\n | `circle -> \"rounded-full\"\n | `rect -> \"rounded-lg\"\n in\n
    \nend\n\nmodule Icon = struct\n (* Fresh host ids so multiple icons of the same name never collide. *)\n let counter = ref 0\n\n let make ?(size : Contracts.Icon.size = `md) ?(label = \"\") ?(extra_class = \"\") ~name () =\n let dims =\n match size with\n | `xs -> \"size-3\"\n | `sm -> \"size-4\"\n | `md -> \"size-5\"\n | `lg -> \"size-6\"\n | `xl -> \"size-8\"\n in\n let body = match Icons.get name with Some b -> b | None -> [] in\n let meaningful = label <> \"\" in\n (* Meaningful icons expose an img role + accessible name; decorative ones are\n hidden so assistive tech doesn't announce them beside their label. *)\n let role_attrs =\n if meaningful then \"role=\\\"img\\\" aria-label=\\\"\" ^ label ^ \"\\\"\" else \"aria-hidden=\\\"true\\\"\"\n in\n let extra = if extra_class = \"\" then \"\" else \" \" ^ extra_class in\n let markup = Icons.svg ~dims ~extra ~role_attrs body in\n View.dyn (fun () ->\n incr counter;\n let id = \"prescriptive-reativa-icon-\" ^ string_of_int !counter in\n Ui.set_inner_html_by_id id markup;\n View.element ~attrs:[ View.Attr.id (View.static id) ] \"span\" [])\nend\n\nmodule StatGrid = struct\n let make ?(heading = \"\") ?(loading = false) ~stats () =\n let loading_tile _ =\n View.element\n ~attrs:\n [\n View.Attr.className (View.static (Ui.card ^ \" p-4\"));\n View.Attr.make \"aria-hidden\" (View.static \"true\");\n ]\n \"li\"\n [\n Skeleton.make ~shape:`text ~extra_class:\"w-20\" ();\n Skeleton.make ~shape:`text ~extra_class:\"mt-3 h-7 w-28\" ();\n Skeleton.make ~shape:`text ~extra_class:\"mt-3 w-16\" ();\n ]\n in\n let stat_tile (label, value, delta, trend) =\n (* Direction is conveyed by icon + text, not color alone. *)\n let trend_icon, trend_cls =\n match trend with\n | `up -> (\"arrow-up\", \"text-status-success\")\n | `down -> (\"arrow-down\", \"text-status-danger\")\n | `flat -> (\"minus\", \"text-muted\")\n in\n View.element\n ~attrs:[ View.Attr.className (View.static (Ui.card ^ \" p-4\")) ]\n \"li\"\n [\n

    (label)

    ;\n

    (value)

    ;\n (if delta = \"\" then View.empty\n else\n View.element\n ~attrs:\n [\n View.Attr.className\n (View.static (\"mt-1 flex items-center gap-1 text-xs font-medium \" ^ trend_cls));\n ]\n \"p\"\n [ Icon.make ~name:trend_icon ~size:`xs (); View.text (View.static delta) ]);\n ]\n in\n let tiles = if loading then List.map loading_tile stats else List.map stat_tile stats in\n View.element\n ~attrs:[ View.Attr.className (View.static \"w-full\") ]\n \"section\"\n [\n (if heading = \"\" then View.empty\n else

    (heading)

    );\n View.element\n ~attrs:\n [\n View.Attr.className\n (View.static \"grid w-full grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4\");\n ]\n \"ul\" tiles;\n ]\nend\n\nmodule Spinner = struct\n let make ?(size = \"size-4\") ?(tone = `ink) () =\n let colors =\n match tone with\n | `ink -> \"border-neutral-300 border-t-neutral-900\"\n | `on_accent -> \"border-white/40 border-t-white\"\n in\n \nend\n\nmodule Button = struct\n let make ?(variant : Contracts.Button.variant = `primary) ?(size : Contracts.Button.size = `md)\n ?(type_ : Contracts.Button.type_ = `button) ?(disabled = false) ?(loading = false) ?on_click\n ?(extra_class = \"\") ~children () =\n let type_str = match type_ with `button -> \"button\" | `submit -> \"submit\" | `reset -> \"reset\" in\n let size_cls = match size with `sm -> Ui.btn_sm | `md -> Ui.btn_md | `lg -> Ui.btn_lg in\n let colors =\n match variant with\n | `primary -> Ui.btn_primary_colors\n | `secondary -> Ui.btn_secondary_colors\n | `ghost -> Ui.btn_ghost_colors\n | `destructive -> Ui.btn_destructive_colors\n in\n (* Dark-surface variants need an on-accent spinner; light ones use ink. *)\n let spinner_tone =\n match variant with `primary | `destructive -> `on_accent | `secondary | `ghost -> `ink\n in\n let cls = Ui.cx (Ui.btn_core ^ \" \" ^ size_cls ^ \" \" ^ colors) extra_class in\n let attrs =\n [\n View.Attr.type_ (View.static type_str);\n View.Attr.className (View.static cls);\n View.Attr.disabled (fun () -> disabled || loading);\n ]\n in\n let events = match on_click with Some f -> [ View.On.click f ] | None -> [] in\n let spinner = if loading then Spinner.make ~tone:spinner_tone () else View.empty in\n View.element ~attrs ~events \"button\" [ spinner; View.fragment children ]\nend\n\nlet txt s = View.text (View.static s)\n\nlet stat_grid_example () =\n let loading = Signal.make false in\n let stats =\n [\n (\"Revenue\", \"$48.2k\", \"+12% vs. last month\", `up);\n (\"Active users\", \"1,203\", \"+3% vs. last month\", `up);\n (\"Signups\", \"312\", {js|−5% vs. last month|js}, `down);\n (\"Uptime\", \"99.98%\", \"flat vs. last month\", `flat);\n ]\n in\n
    \n (View.show\n ~fallback:(StatGrid.make ~heading:\"This month\" ~stats ())\n (fun () -> Signal.get loading)\n (StatGrid.make ~heading:\"This month\" ~stats ~loading:true ()))\n (Button.make ~variant:`secondary ~size:`sm\n ~on_click:(fun _ ->\n Signal.set loading true;\n Ui.set_timeout (fun () -> Signal.set loading false) 1500)\n ~children:[ txt \"Simulate loading\" ] ())\n
    ") | "steps" => Some("module Steps = struct\n let make ?(orientation : Contracts.Steps.orientation = `horizontal) ?(heading = \"\") ~steps () =\n let n = List.length steps in\n let numbered =\n List.mapi (fun i (title, description) -> (string_of_int (i + 1), title, description, i = n - 1)) steps\n in\n let list_cls =\n match orientation with\n | `horizontal -> \"flex flex-col gap-8 md:flex-row md:gap-6\"\n | `vertical -> \"flex flex-col gap-8\"\n in\n let step_item (number, title, description, is_last) =\n
  • \n (View.element\n ~attrs:\n [\n View.Attr.className (View.static \"flex flex-col items-center\");\n View.Attr.make \"aria-hidden\" (View.static \"true\");\n ]\n \"div\"\n [\n \n (number)\n ;\n (* The vertical connector between markers; the last step ends the path. *)\n (if (not is_last) && orientation = `vertical then\n \n else View.empty);\n ])\n
    \n

    (title)

    \n

    (description)

    \n
    \n
    • \n in\n View.element\n ~attrs:[ View.Attr.className (View.static \"w-full\") ]\n \"section\"\n [\n (if heading = \"\" then View.empty\n else\n

    (heading)

    );\n View.element\n ~attrs:[ View.Attr.className (View.static list_cls) ]\n \"ol\"\n (List.map step_item numbered);\n ]\nend\n\nlet steps_example () =\n let steps =\n [\n (\"Connect your repo\", \"Authorize once; we pick up every branch automatically.\");\n (\"Push a commit\", \"Each push builds, tests, and previews in isolation.\");\n (\"Ship it\", \"Promote the preview to production with one click.\");\n ]\n in\n
    (Steps.make ~heading:\"How it works\" ~steps ())
    ") | _ => None }