🥮 mooncakes.io
    Sign in

    howtomakeaname/sumi/forms does not have a README file

    AttachmentItem

    source
    pub(all) struct AttachmentItem {
      kind : AttachmentKind
      src : String
      label : String
    } derive(Eq)

    One attachment in the strip.

    AttachmentItem::document

    source
    fn AttachmentItem::document(label : String) -> AttachmentItem

    A non-image attachment, rendered as a slate gradient placeholder with a centered document glyph.

    AttachmentItem::equal

    source

    AttachmentItem::image

    source
    fn AttachmentItem::image(src : String, label? : String) -> AttachmentItem

    An image attachment, rendered cover-fit slightly overset so the thumbnail hides the tile border.

    AttachmentItem::not_equal

    source
    fn AttachmentItem::not_equal(x : AttachmentItem, y : AttachmentItem) -> Bool

    AttachmentKind

    source
    pub(all) enum AttachmentKind {
      Image
      Document
    } derive(Eq)

    The kind of attachment a tile renders: a cover-fit image thumbnail, or a gradient placeholder with a document glyph for everything else.

    AttachmentKind::equal

    source

    AttachmentKind::not_equal

    source
    fn AttachmentKind::not_equal(x : AttachmentKind, y : AttachmentKind) -> Bool

    HitlItem

    source
    pub(all) struct HitlItem {
      label : String
      thumbnails : Array[String]
      cost : Int
      checked : Bool
    } derive(Eq)

    One generation option of a hitl_card: a label, optional reference thumbnails (one per modality), a credit cost, and whether it is checked for the confirm run.

    HitlItem::equal

    source
    fn HitlItem::equal(HitlItem, HitlItem) -> Bool

    HitlItem::new

    source
    fn HitlItem::new(label : String, cost? : Int, thumbnails? : Array[String], checked? : Bool) -> HitlItem

    HitlItem::not_equal

    source
    fn HitlItem::not_equal(x : HitlItem, y : HitlItem) -> Bool

    SegmentedItem

    source
    pub(all) struct SegmentedItem {
      value : String
      label : String
      icon : 
    Html    ?
      trailing : 
    Html    ?
      numeric : Bool
      disabled : Bool
    }

    One option in a segmented control.

    SegmentedItem::new

    source
    fn SegmentedItem::new(value : String, label : String, icon? : 
    Html    , trailing? : 
    Html    , numeric? : Bool, disabled? : Bool) -> SegmentedItem

    SelectVariant

    source
    pub(all) enum SelectVariant {
      Form
      Filter
    }

    SkillMark

    source
    pub(all) enum SkillMark {
      New
      Hot
    } derive(Eq)

    The small corner tag of a skill_chip highlighting a skill's freshness.

    • New — brand blue on the translucent brand block
    • Hot — orange on the translucent orange block

    SkillMark::equal

    source
    fn SkillMark::equal(SkillMark, SkillMark) -> Bool

    SkillMark::not_equal

    source
    fn SkillMark::not_equal(x : SkillMark, y : SkillMark) -> Bool

    action_chip

    source
    fn action_chip(label~ : String, on_click? : 
    Cmd    , disabled? : Bool, aria_label? : String, id? : String, class? : String, attrs? : 
    Attrs    , style? : Array[String]) -> 
    Html

    One quick-action button of the "more actions" sheet: a 36px radius-8 block-fill button with a centered 13/22 Regular label and an 80px minimum width, wrapping alongside its siblings inside a chip_panel.

    action_chip(label="Storyboard", on_click=emit.map(Run("storyboard")))

    agent_input

    source
    fn agent_input(value? : String, placeholder? : String, rows? : Int, on_input? : 
    Emit    [String], on_send? : 
    Cmd    , on_stop? : 
    Cmd    , send_disabled? : Bool, send_loading? : Bool, generating? : Bool, disabled? : Bool, autofocus? : Bool, actions? : Array[
    Html    ], children? : Array[
    Html    ], aria_label? : String, id? : String, class? : String, attrs? : 
    Attrs    , style? : Array[String]) -> 
    Html

    The agent chat dock: a frosted 24px-radius container holding an input region and a toolbar row (left action atoms + circular send button). Controlled: the caller owns value.

    By default the input region is an auto-clamped textarea (86px min, 252px max, thin scrollbar). Pass children instead to compose rich content — inline media tags and text spans share the same baseline flow; the caller then owns the editing surface.

    generating=true swaps the send arrow for the stop square and routes the click to on_stop; send_disabled only gates the send state.

    agent_input(
      value=prompt,
      placeholder="Describe your idea, or type / to use a skill",
      on_input=emit.map(PromptChanged),
      on_send=emit(Submit),
      send_disabled=prompt.is_empty(),
      actions=[
        icon_button(icon_plus_fill(size=14), aria_label="Add attachment"),
        agent_tool_button(icon=icon_skill(), label="Use Skill"),
        icon_button(icon_at(), aria_label="Mention a reference"),
      ],
    )

    agent_tool_button

    source
    fn agent_tool_button(icon : 
    Html    , label~ : String, disabled? : Bool, on_click? : 
    Cmd    , id? : String, class? : String, title? : String, aria_label? : String, attrs? : 
    Attrs    , style? : Array[String]) -> 
    Html

    The icon-leading pill of the agent input toolbar (e.g. "Use Skill") — a 32px-high ghost button with a 16px icon and a 12/20 label. Square icon-only toolbar atoms are plain icon_button instead.

    agent_tool_button(icon=icon_skill(), label="Use Skill", on_click=pick_skill)

    attachment_strip

    source
    fn attachment_strip(items~ : Array[AttachmentItem], on_add? : 
    Cmd    , on_remove? : 
    Emit    [Int], max_visible? : Int, aria_label? : String, id? : String, class? : String, attrs? : 
    Attrs    , style? : Array[String]) -> 
    Html

    The attachment strip from the design: a row of 48px tiles — image thumbnails and document placeholders — followed by the add tile. Each tile can carry an 8px remove badge that fades in on tile hover or keyboard focus. Past max_visible attachments the row clips, a right-edge fade appears, and the add tile pins itself over the fade.

    attachment_strip(
      items=[
        AttachmentItem::image("cover.png", label="Cover"),
        AttachmentItem::document("Brief.pdf"),
      ],
      on_add=pick_files,
      on_remove=set_items.map(i => items => items.filteri(fn(j, _) { j != i })),
    )

    checkbox

    source
    fn checkbox(checked~ : Bool, label? : String, indeterminate? : Bool, on_change? : 
    Emit    [Bool], disabled? : Bool, id? : String, class? : String, attrs? : 
    Attrs    , style? : Array[String]) -> 
    Html

    A checkbox with an optional text label. Controlled: the caller owns checked. indeterminate=true renders the mixed dash state and reports aria-checked="mixed"; clicking it resolves to checked.

    chip

    source
    fn chip(label : String, selected? : Bool, on_click? : 
    Cmd    , disabled? : Bool, aria_label? : String, id? : String, class? : String, attrs? : 
    Attrs    , style? : Array[String]) -> 
    Html

    A single selectable pill — the resolution/quality option in the design. Text stays full-white in both states; selection shows only through the block fill. Fully controlled — the caller owns selected; group several chips under one value to build a radio-like row.

    chip("720P", selected=quality == "720p", on_click=set_quality.map(v => _ => "720p"))

    chip_panel

    source
    fn chip_panel(children~ : Array[
    Html    ], width? : Int, aria_label? : String, id? : String, class? : String, attrs? : 
    Attrs    , style? : Array[String]) -> 
    Html

    The "more actions" sheet of the agent input: a frosted top-rounded panel (24px backdrop blur) whose children — skill_chip or action_chip — wrap with 8px gaps around centered rows.

    chip_panel(children=[
      skill_chip(label="Storyboard", mark=Hot),
      skill_chip(label="Quick Cut"),
    ])

    editable_text

    source
    fn editable_text(value~ : String, placeholder? : String, on_change? : 
    Emit    [String], read_only? : Bool, id? : String, class? : String, attrs? : 
    Attrs    , style? : Array[String]) -> 
    Html

    A title that reads as plain text and turns into an input on click. Focus selects the whole value so typing replaces it (interaction sheet handles select-all, Enter, and Escape); the parent only sees commits — Enter or blur emits on_change, Escape restores the last value. The placeholder shows when the value is empty.

    hitl_card

    source
    fn hitl_card(title~ : String, items~ : Array[HitlItem], on_toggle? : 
    Emit    [Int], confirmed? : Bool, on_cancel? : 
    Cmd    , on_confirm? : 
    Cmd    , cancel_label? : String, confirm_label? : String, max_height? : Int, aria_label? : String, id? : String, class? : String, attrs? : 
    Attrs    , style? : Array[String]) -> 
    Html

    A human-in-the-loop confirm card: a titled list of generation options with per-row checkboxes and credit costs, plus a Cancel / confirm footer whose primary button carries the total cost of the checked rows. Controlled: the caller owns each item's checked and receives row clicks via on_toggle(index).

    confirmed=true renders the read-only receipt state — checkboxes and the footer drop out, leaving the settled list.

    hitl_card(
      title="Generate the following 4 videos",
      items=plan,
      on_toggle=emit.map(ToggleRow),
      on_cancel=emit(Dismiss),
      on_confirm=emit(ConfirmAll),
    )

    input

    source
    fn input(value~ : String, placeholder? : String, input_type? : 
    InputType    , on_input? : 
    Emit    [String], on_change? : 
    Emit    [String], on_clear? : 
    Cmd    , clearable? : Bool, prefix? : 
    Html    , suffix? : 
    Html    , error? : Bool, error_text? : String, disabled? : Bool, read_only? : Bool, name? : String, maxlength? : Int, autofocus? : Bool, id? : String, class? : String, title? : String, attrs? : 
    Attrs    , style? : Array[String]) -> 
    Html

    A single-line text field. Controlled: the caller owns the value.

    prefix/suffix slot icons or text inside the field; clearable=true shows a small ✕ while the value is non-empty (clears through on_input or the explicit on_clear). error/error_text render the design's error border and an optional hint line below the field.

    prompt_box

    source
    fn prompt_box(value~ : String, placeholder? : String, rows? : Int, on_input? : 
    Emit    [String], on_send? : 
    Cmd    , send_disabled? : Bool, send_loading? : Bool, disabled? : Bool, maxlength? : Int, show_count? : Bool, autofocus? : Bool, actions? : 
    Html    , id? : String, class? : String, attrs? : 
    Attrs    , style? : Array[String]) -> 
    Html

    The composite prompt input: a frosted, rounded container holding an auto-sized textarea and a footer row (action slot + circular send button). Controlled: the caller owns value.

    show_count=true renders a n / max counter next to the send button; it turns error-red once the value exceeds maxlength. The textarea carries the library's thin-scrollbar styling.

    prompt_box(
      value=prompt,
      placeholder="Describe what to create",
      on_input=emit.map(PromptChanged),
      on_send=emit(Submit),
      send_disabled=prompt.is_empty(),
      maxlength=800,
      show_count=true,
    )

    segmented

    source
    fn segmented(items~ : Array[SegmentedItem], selected~ : String, stacked? : Bool, on_select? : 
    Emit    [String], id? : String, class? : String, attrs? : 
    Attrs    , style? : Array[String]) -> 
    Html

    A segmented single-choice control (aspect-ratio / resolution pickers in the design). Controlled: the caller owns the selected value.

    stacked=true renders tall items with the icon above the label — the ratio-picker look (16px artwork icons over 12px labels, 56px tall).

    select

    source
    fn select(options~ : Array[
    MenuItem    ], value~ : String, placeholder? : String, open~ : Bool, on_open_change? : 
    Emit    [Bool], on_select? : 
    Emit    [String], variant? : SelectVariant, on_clear? : 
    Cmd    , disabled? : Bool, id? : String, class? : String, attrs? : 
    Attrs    , style? : Array[String]) -> 
    Html

    A form-style single select: an input-look trigger opening the compact menu. Fully controlled — the caller owns open and value. Built on dropdown_menu, so outside click, Escape, and arrow-key navigation all behave the same.

    variant=Filter swaps in the compact toolbar trigger: the label is the filter name (placeholder) until a value is selected, then the selected label with a clear affordance that emits on_clear (without opening the menu). The caller resets value in response.

    select(
      options=[@overlays.MenuItem::new("png", "PNG"), @overlays.MenuItem::new("webp", "WebP")],
      value=format,
      placeholder="Export format",
      open=select_open,
      on_open_change=set_select_open.map(v => _ => v),
      on_select=set_format.map(v => _ => v),
    )

    send_button

    source
    fn send_button(disabled? : Bool, loading? : Bool, stop? : Bool, on_click? : 
    Cmd    , id? : String, class? : String, title? : String, aria_label? : String, attrs? : 
    Attrs    , style? : Array[String]) -> 
    Html

    The circular submit button used by prompt_box and agent_input. Disabled state uses the design's exact muted fill rather than opacity. loading=true keeps the muted fill, swaps the glyph for a 20px spinner in the disabled tone, and blocks clicks while a submission is in flight. stop=true swaps the arrow for the stop square — the affordance for halting an in-flight generation; pair it with an enabled click.

    skill_chip

    source
    fn skill_chip(label~ : String, icon? : 
    Html    , mark? : SkillMark, mark_label? : String, more? : Bool, on_click? : 
    Cmd    , disabled? : Bool, aria_label? : String, id? : String, class? : String, attrs? : 
    Attrs    , style? : Array[String]) -> 
    Html

    One skill pill of the agent's skill picker: a 36px radius-40 chip with a hairline border and a translucent fill, holding an optional 16px leading icon, a 12/20 label, and an optional New/Hot mark. With more=true the chip becomes the "More" trigger: tighter gap, asymmetric padding, and a trailing 12px right chevron.

    skill_chip(label="Storyboard", icon=@sumi.icon_draw(size=16), mark=New)
    skill_chip(label="More", more=true, on_click=emit(OpenSkillPanel))

    slider

    source
    fn slider(value~ : Int, min? : Int, max? : Int, step? : Int, on_input? : 
    Emit    [Int], on_commit? : 
    Emit    [Int], disabled? : Bool, show_value? : Bool, value_tooltip? : Bool, suffix? : String, id? : String, class? : String, attrs? : 
    Attrs    , style? : Array[String]) -> 
    Html

    A single-value slider built on the native range input; track fill and thumb styling live in the interaction sheet emitted by theme.

    value_tooltip=true adds the design's value bubble above the thumb, visible while hovering, dragging, or keyboard-focusing the slider. on_input fires per tick (keep it cheap); on_commit fires once on release for expensive reactions.

    slider(
      value=35,
      value_tooltip=true,
      on_input=set_strength.map(v => _ => v),
      on_commit=emit(CommitStrength),
      suffix="°",
    )

    slider_field

    source
    fn slider_field(value~ : Int, min? : Int, max? : Int, step? : Int, label? : String, unit? : String, ticks? : Array[Int], auto? : Bool, auto_label? : String, on_auto_change? : 
    Emit    [Bool], on_input? : 
    Emit    [Int], on_commit? : 
    Emit    [Int], disabled? : Bool, id? : String, class? : String, attrs? : 
    Attrs    , style? : Array[String]) -> 
    Html

    A labelled numeric field composing the slider with tick marks, tick labels, and a number box carrying the unit suffix — the duration-field pattern. Fully controlled: the parent owns value (and auto when the optional auto row is shown by passing it). The slider fires on_input per tick and on_commit on release; the number box commits on Enter or blur (Escape reverts), firing both.

    ticks lists the values that get a track mark and a label below; the first and last marks stay invisible like the design's end caps.

    slider_field(
      value=duration,
      min=0, max=180,
      label="Total duration",
      unit="s",
      ticks=[0, 30, 60, 90, 120, 150, 180],
      on_input=set_duration.map(v => _ => v),
    )

    stepper

    source
    fn stepper(value~ : Int, min? : Int, max? : Int, step? : Int, on_change? : 
    Emit    [Int], disabled? : Bool, id? : String, class? : String, attrs? : 
    Attrs    , style? : Array[String]) -> 
    Html

    A numeric stepper (e.g. the batch-count picker). Controlled: the caller owns value; the buttons clamp to min/max and disable at the bounds.

    switch

    source
    fn switch(checked~ : Bool, on_change? : 
    Emit    [Bool], disabled? : Bool, id? : String, class? : String, title? : String, attrs? : 
    Attrs    , style? : Array[String]) -> 
    Html

    A toggle switch. Controlled: the caller owns checked.

    textarea

    source
    fn textarea(value~ : String, placeholder? : String, rows? : Int, on_input? : 
    Emit    [String], on_change? : 
    Emit    [String], disabled? : Bool, read_only? : Bool, name? : String, maxlength? : Int, autofocus? : Bool, id? : String, class? : String, title? : String, attrs? : 
    Attrs    , style? : Array[String]) -> 
    Html

    A multi-line text field. Controlled: the caller owns the value.

    Source Files

    Powered by MoonBit

    Site sourceReport issuePackagesBuild queueSkillsStatistics

    © 2026 mooncakes.io