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 }