🥮 mooncakes.io
    Sign in

    howtomakeaname/sumi/layout does not have a README file

    MdTextKind

    source
    pub(all) enum MdTextKind {
      H2
      H3
      H4
      Body
    } derive(Eq)

    The block kinds of a markdown answer body, matching the MD 基础组件 type scale: H2 is 16/24 Medium, H3 and H4 are 14/22 Medium (headings carry 12px vertical padding), and Body is 14/22 Regular.

    MdTextKind::equal

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

    MdTextKind::not_equal

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

    SessionStatus

    source
    pub(all) enum SessionStatus {
      Generating
      Count(Int)
      Done
      Dot
      Pending(String)
      Partial
    } derive(Eq)

    The generation state shown next to session titles and task cards.

    • Generating — a spinner while a run is in flight
    • Count(n) — a white square with the number of queued/finished tasks
    • Done — a brand-blue tick circle
    • Dot — a small brand-blue unread dot
    • Pending(label) — an orange pill while a run awaits review
    • Partial — an orange info circle for partial failures

    SessionStatus::equal

    source

    SessionStatus::not_equal

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

    ShortcutItem

    source
    pub(all) struct ShortcutItem {
      label : String
      keys : String
    }

    One shortcut row: an action label and its key combination.

    ShortcutItem::new

    source
    fn ShortcutItem::new(label : String, keys : String) -> ShortcutItem

    ShortcutSection

    source
    pub(all) struct ShortcutSection {
      title : String
      items : Array[ShortcutItem]
    }

    A titled cluster of shortcuts. The title carries a hairline underline; sections are separated by an 8px gap.

    ShortcutSection::new

    source
    fn ShortcutSection::new(title : String, items : Array[ShortcutItem]) -> ShortcutSection

    TabEntry

    source
    pub(all) struct TabEntry {
      value : String
      label : String
      icon : 
    Html    ?
    }

    One tab in a tabs control.

    TabEntry::new

    source
    fn TabEntry::new(value : String, label : String, icon? : 
    Html    ) -> TabEntry

    card

    source
    fn[C : 
    IsChildren    ] card(id? : String, class? : String, title? : String, attrs? : 
    Attrs    , style? : Array[String], children : C) -> 
    Html

    A surface container for grouping content on the canvas.

    card_section

    source

    A card with the design's header/content split.

    chat_bubble

    source
    fn chat_bubble(text? : String, children? : Array[
    Html    ], collapsible? : Bool, collapsed? : Bool, on_toggle? : 
    Cmd    , collapse_lines? : Int, on_copy? : 
    Cmd    , aria_label? : String, id? : String, class? : String, attrs? : 
    Attrs    , style? : Array[String]) -> 
    Html

    The right-aligned bubble of a sent message. Plain text by default; pass children to compose rich content (inline media tags and text spans share the same baseline flow). Long messages can be clamped to collapse_lines behind a fade with an Expand/Collapse toggle — the caller owns collapsed. on_copy reveals a copy action below the bubble on hover.

    chat_bubble(text="Continue")
    chat_bubble(children=[
      media_tag(kind=Image, variant=Inline, thumbnail=thumb),
      @html.text("Add more detail"),
    ])
    chat_bubble(text=long, collapsible=true, collapsed=c, on_toggle=set_c.map(v => _ => !v))

    divider

    source
    fn divider(id? : String, class? : String, attrs? : 
    Attrs    , style? : Array[String]) -> 
    Html

    A thin horizontal rule for separating stacked content.

    generation_meta

    source
    fn generation_meta(text~ : String, on_copy? : 
    Cmd    , copy_label? : String, aria_label? : String, id? : String, class? : String, attrs? : 
    Attrs    , style? : Array[String]) -> 
    Html

    The info-and-actions block under a generation result: a 14/22 tertiary disclaimer line (e.g. the content notice and the credits spent) with a bare copy action below it. Render the action by passing on_copy.

    generation_meta(
      text="AI-generated content | 0 credits used",
      on_copy=emit(CopyResult),
    )

    md_text

    source
    fn md_text(text~ : String, kind? : MdTextKind, id? : String, class? : String, attrs? : 
    Attrs    , style? : Array[String]) -> 
    Html

    One block of a markdown answer: a semantic heading (H2–H4) or body paragraph in the design's type scale. All kinds read at the primary text tone; headings pad 12px above and below, the body pads none.

    md_text(kind=H2, text="Story beats")
    md_text(kind=Body, text="The opening shot drifts over the quiet bay.")
    fn pagination(page~ : Int, total~ : Int, on_change? : 
    Emit    [Int], id? : String, class? : String, attrs? : 
    Attrs    , style? : Array[String]) -> 
    Html

    A minimal ‹ page / total › pager for stepping through a small result set. Controlled: the parent owns page and applies on_change. The arrow buttons clamp at the range ends and disable there.

    session_divider

    source
    fn session_divider(id? : String, class? : String, attrs? : 
    Attrs    , style? : Array[String]) -> 
    Html

    The hairline separator of a session list: a 0.5px rule inset 12px on both sides inside a 4px-tall cell.

    session_header

    source
    fn session_header(title~ : String, status? : SessionStatus, on_title? : 
    Cmd    , on_new? : 
    Cmd    , on_collapse? : 
    Cmd    , new_label? : String, collapse_label? : String, aria_label? : String, id? : String, class? : String, attrs? : 
    Attrs    , style? : Array[String]) -> 
    Html

    The header row of a chat window: the current-session session_title on the left and new-conversation / collapse icon buttons on the right (gap 4).

    session_header(
      title="Desert Mirage Expedition",
      status=Done,
      on_title=emit(ToggleSessionMenu),
      on_new=emit(NewConversation),
      on_collapse=emit(CollapsePanel),
    )

    session_item

    source
    fn session_item(label~ : String, active? : Bool, disabled? : Bool, status? : SessionStatus, on_click? : 
    Cmd    , on_edit? : 
    Cmd    , on_delete? : 
    Cmd    , edit_label? : String, delete_label? : String, aria_label? : String, id? : String, class? : String, attrs? : 
    Attrs    , style? : Array[String]) -> 
    Html

    One row of a session list: a 13/22 label with an optional trailing generation status (or a check mark while active), revealing rename / delete actions on hover. The status cell hides while hovered so the actions take its place.

    session_item(
      label="Desert Mirage Expedition",
      active=current == id,
      status=Done,
      on_click=emit.map(Open(id)),
      on_edit=emit.map(Rename(id)),
      on_delete=emit.map(Remove(id)),
    )

    session_list

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

    The session-list panel: a floating menu surface (--sumi-menu, 12px radius, 4px padding) holding session_item rows and session_divider separators. With max_height the panel scrolls with the library's thin scrollbar, tinted to the design's blue.

    session_list(max_height=320, [
      session_item(label="Neon Harbor Nights", active=true),
      session_item(label="Alpine Sunrise Timelapse", status=Generating),
      session_divider(),
      session_item(label="Archived Storyboards", disabled=true),
    ])

    session_status

    source
    fn session_status(kind~ : SessionStatus, id? : String, class? : String, attrs? : 
    Attrs    , style? : Array[String]) -> 
    Html

    The 20px generation-status indicator of session rows, titles, and task cards. Pending sizes to its label; every other kind is a fixed 20px cell.

    session_status(kind=Generating)
    session_status(kind=Count(5))
    session_status(kind=Pending("Review"))

    session_title

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

    The current-session pill of a chat window header: a 14/22 label, an optional generation status, and a 12px chevron, with the design's ghost hover/press fills. Typically the trigger of a session_list dropdown.

    shortcuts_panel

    source
    fn shortcuts_panel(sections~ : Array[ShortcutSection], title? : String, on_close? : 
    Cmd    , width? : Int, max_height? : Int, id? : String, class? : String, attrs? : 
    Attrs    , style? : Array[String]) -> 
    Html

    The keyboard-shortcuts reference panel from the design: an elevated 264px sheet with a titled header and close button, then titled sections of label + key-chip rows. Long lists scroll inside the body with the library's standard scrollbar.

    shortcuts_panel(
      title="Shortcuts",
      sections=[
        ShortcutSection::new(
          "General",
          [
            ShortcutItem::new("Toggle sidebar", "Cmd /"),
            ShortcutItem::new("Send message", "Enter"),
          ],
        ),
      ],
      on_close=close_panel,
    )

    tabs

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

    A tab strip. Controlled: the caller owns the selected value; render the matching panel content next to the returned strip.

    tabs(
      items=[TabEntry::new("all", "All"), TabEntry::new("mine", "Mine")],
      selected=tab,
      on_select=set_tab.map(v => _ => v),
    )

    task_card

    source
    fn task_card(title~ : String, status? : SessionStatus, summary? : String, children? : Array[
    Html    ], on_click? : 
    Cmd    , aria_label? : String, id? : String, class? : String, attrs? : 
    Attrs    , style? : Array[String]) -> 
    Html

    A submitted-task bubble of the task list: a frosted 16px-radius card with a 14/24 Medium title, an optional generation status, and a two-line summary. Pass children instead of summary for a rich body (e.g. a tool_call_row).

    task_card(
      title="Neon Harbor Nights",
      status=Generating,
      summary="I will first break down the brief into its core elements.",
    )

    task_list

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

    The scrollable task-card feed ("bubble list"): 8px padding and gaps, a bottom fade mask (fade px, default 44), and the blue-tinted thin scrollbar. Children are usually task_card bubbles.

    task_list(height=400, children=cards)

    toolbar

    source
    fn[C : 
    IsChildren    ] toolbar(id? : String, class? : String, title? : String, attrs? : 
    Attrs    , style? : Array[String], children : C) -> 
    Html

    A floating horizontal bar that groups controls — the design's signature pill-shaped toolbar. Compose with button(variant=Ghost), segmented, dropdown_menu and toolbar_divider.

    toolbar_divider

    source
    fn toolbar_divider(style? : Array[String]) -> 
    Html

    The thin vertical separator used between control groups inside a toolbar.

    Source Files

    Powered by MoonBit

    Site sourceReport issuePackagesBuild queueSkillsStatistics

    © 2026 mooncakes.io