<kaf version="1">

  <!-- The dashboard's shared chrome: the page every section wears and the header every editor
       wears, with the styles they share. Imported by the root and by each lazy section, since a
       file's imports are its own. docs/specs/dashboard.md §1, §3. -->

  <import src="kit:tokens"/>
  <import src="kit:segmented"/>

  <!-- The languages content is authored in, in the order the switch shows them. A third language
       is one entry here plus the models and catalog work docs/plans/dashboard-ui.md D3 names. -->
  <const name="languages" value="{['en', 'fr']}"/>
  <const name="languageLabels" value="{{ en: 'EN', fr: 'FR' }}"/>
  <const name="languageOptions" value="{list.map(languages, l => ({ value: l, label: languageLabels[l], mark: false }))}"/>

  <!-- One width for every section. A section's frame wears `wideHead` above its outlet, which is
       the scroller, and each sub-screen wears `wide`. -->
  <style name="wide" pad="24" gap="16" maxWidth="1100" width="100%" selfAlign="center"/>
  <style name="wideHead" pad="24 24 0 24" maxWidth="1100" width="100%" selfAlign="center"/>
  <!-- The small link button: the store's Edit on a product row, an order's organization. -->
  <style name="subtab" pad="6 10" radius="8" size="13" weight="600" textColor="{dim}" bg="{paper}"/>
  <style name="statePill" size="12" weight="700" textColor="{ink}" bg="{track}" radius="6" pad="3 8"/>
  <style name="banner" bg="{paper}" radius="12" pad="12 16" gap="6" border="1 {danger}"/>
  <!-- A section's overview is one card per sub-page, each a link: the name, the counts, Open. -->
  <style name="homeCard" bg="{paper}" radius="12" pad="16" gap="6" border="1 {line}" grow="1" width="0" minWidth="220"/>
  <style name="homeTitle" size="18" weight="700"/>
  <style name="homeCount" size="14" textColor="{ink}"/>

  <!-- The way back out of an editor. Public because the editor's back link is the screen's own,
       projected into the head's `back` slot (docs/plans/dashboard-ui.md, "Landed"). -->
  <style name="backLink" pad="6 10" radius="8" size="13" weight="600" textColor="{dim}" bg="{canvas}">
    <pressed scale="0.97"/>
  </style>

  <private>
    <style name="headRow" gap="10" align="center" wrap/>
    <style name="pageTitle" size="26" weight="700"/>
    <style name="editorTitle" size="20" weight="700"/>
  </private>

  <!-- The head row of a section: its title on the left, and whatever the section puts beside it
       on the right — nothing today, since a section's sub-pages are the root's pane's. -->
  <component name="PageHead">
    <param name="title"/>

    <row style="headRow">
      <text style="pageTitle">{title}</text>
      <spacer/>
      <slot/>
    </row>
  </component>

  <!-- The header of an editor: the way back (the `back` slot), what is being edited and its
       pills, the language switch when the object is bilingual, and the state's buttons on the
       right. `marks` lists the languages with gaps; a pick raises `pick` with the language and the
       screen holds it. -->
  <component name="EditorHead">
    <param name="title"/>
    <param name="bilingual" default="{true}"/>
    <param name="lang" default=""/>
    <param name="marks" default="{[]}"/>
    <event name="pick" params="value"/>

    <row style="headRow">
      <slot name="back"/>
      <text style="editorTitle">{title}</text>
      <slot name="pills"/>
      <spacer/>
      <if test="{bilingual}">
        <Segmented options="{list.map(languages, l => ({ value: l, label: languageLabels[l], mark: list.exists(marks, m => m == l) }))}"
                   value="{lang}" on:pick="pick(event.value)"/>
      </if>
      <slot name="actions"/>
    </row>
  </component>

</kaf>
