@slotted/react 0.0.0-stage → 0.1.0-beta.1

package/dist/docs/import-export-center.json

@@ -0,0 +1,831 @@
+{
+  "family": "import-export-center",
+  "ui": "import-export-center",
+  "binding": "react",
+  "catalog": {
+    "group": "Feedback",
+    "summary": "Import and export jobs with progress."
+  },
+  "axes": {
+    "size": [
+      "sm",
+      "md"
+    ],
+    "level": [
+      "2",
+      "3",
+      "4"
+    ],
+    "growing": [
+      "none",
+      "button"
+    ],
+    "timeFormat": [
+      "relative",
+      "absolute"
+    ],
+    "status": [
+      "ready",
+      "error"
+    ],
+    "direction": [
+      "import",
+      "export"
+    ],
+    "jobStatus": [
+      "queued",
+      "running",
+      "succeeded",
+      "failed",
+      "canceled"
+    ],
+    "outcome": [
+      "success",
+      "partial",
+      "failed",
+      "canceled"
+    ]
+  },
+  "members": {
+    "importExportCenter": {
+      "nativeElement": "section",
+      "defaults": {
+        "size": "md",
+        "level": "2",
+        "growing": "none",
+        "timeFormat": "relative",
+        "status": "ready",
+        "view": "all",
+        "loading": false,
+        "hasMore": false
+      },
+      "capabilities": [
+        "current",
+        "open",
+        "removable",
+        "status",
+        "live",
+        "size",
+        "loading",
+        "content",
+        "wiring"
+      ],
+      "states": [
+        "default",
+        "hover",
+        "focus-visible",
+        "expanded",
+        "loading"
+      ],
+      "parts": [
+        "root",
+        "header",
+        "title",
+        "count",
+        "tools",
+        "clear",
+        "actions",
+        "views",
+        "list",
+        "job",
+        "visual",
+        "body",
+        "heading",
+        "job-title",
+        "meta",
+        "file-name",
+        "name",
+        "extension",
+        "time",
+        "status",
+        "mark",
+        "status-label",
+        "stage",
+        "progress",
+        "progress-text",
+        "summary",
+        "message",
+        "controls",
+        "download",
+        "cancel",
+        "retry",
+        "toggle",
+        "chevron",
+        "job-actions",
+        "remove",
+        "details",
+        "counts",
+        "files",
+        "file",
+        "errors",
+        "errors-note",
+        "more",
+        "empty",
+        "error",
+        "footer"
+      ]
+    }
+  },
+  "docs": {
+    "importExportCenter": {
+      "imports": {
+        "source": "import { ImportExportCenter, ImportExportCenterDefaultsProvider, useJobToasts } from '@slotted/react';"
+      },
+      "anatomy": [
+        {
+          "part": "root",
+          "element": "section, or the element render returns",
+          "required": true,
+          "purpose": "The region, named by the title unless the consumer names it. It carries data-ui, the axes as data attributes, data-loading and data-status=\"error\", and it is the container every width decision reads."
+        },
+        {
+          "part": "header",
+          "element": "div",
+          "required": true,
+          "purpose": "The row above the views: the title on the start side, the tools at the end. A tool that wraps lands at the end of the next line."
+        },
+        {
+          "part": "title",
+          "element": "h2, h3 or h4 per level",
+          "required": true,
+          "purpose": "The title message, the words the region and the list are named by, with the count after them."
+        },
+        {
+          "part": "count",
+          "element": "span",
+          "required": false,
+          "purpose": "How many jobs are queued or running, in the accent pair and tabular figures. Absent at nought."
+        },
+        {
+          "part": "tools",
+          "element": "div",
+          "required": false,
+          "purpose": "The family’s clear and the consumer’s actions, one group that wraps as one so the title keeps its line."
+        },
+        {
+          "part": "clear",
+          "element": "span around a Button",
+          "required": false,
+          "purpose": "The ghost Button that asks onRemove for every finished, removable job of the view, with the reason clear. Absent when none is finished."
+        },
+        {
+          "part": "actions",
+          "element": "div",
+          "required": false,
+          "purpose": "The consumer’s own controls, from actions: an Importar button that opens a dialog holding upload, an Exportar button that opens the format dialog."
+        },
+        {
+          "part": "views",
+          "element": "div around a Tabs list",
+          "required": false,
+          "purpose": "The strip over views — tabs with its list alone and no track, every tab naming the list with aria-controls. Absent when views holds one entry."
+        },
+        {
+          "part": "list",
+          "element": "ul",
+          "required": true,
+          "purpose": "The jobs, named by the title, aria-busy while loading, tabindex=\"-1\" so focus can land on it when the last job leaves."
+        },
+        {
+          "part": "job",
+          "element": "li",
+          "required": false,
+          "purpose": "One job, carrying data-key, data-direction, data-status, data-outcome once finished, data-expired and data-expanded. Below 42rem the tile and a column of words; from 42rem a row of the list’s grid."
+        },
+        {
+          "part": "visual",
+          "element": "span, aria-hidden",
+          "required": false,
+          "purpose": "The file-kind tile: the kind’s colour from upload’s File kind scale and the kind’s glyph knocked out of it, so a CSV is the same tile in the field it was chosen from and in the job that imports it."
+        },
+        {
+          "part": "body",
+          "element": "div",
+          "required": false,
+          "purpose": "The column that shrinks: heading, status, progress, summary and message. From 42rem it lets its parts into the job’s grid."
+        },
+        {
+          "part": "heading",
+          "element": "div",
+          "required": false,
+          "purpose": "The job’s name and the line of what it is about."
+        },
+        {
+          "part": "job-title",
+          "element": "a when job.href, span otherwise",
+          "required": false,
+          "purpose": "The job’s name, and the second half of every control’s accessible name. The span takes tabindex=\"-1\" so reveal() and a withdrawn control can land on it."
+        },
+        {
+          "part": "meta",
+          "element": "p",
+          "required": false,
+          "purpose": "Direction, format, the file, its size, the actor and the time, each a plain span in the line’s direction; a drawn dot between two items is clipped at the start of a wrapped line."
+        },
+        {
+          "part": "file-name",
+          "element": "span dir=\"auto\"",
+          "required": false,
+          "purpose": "The name and its extension as one bidi-isolated run in the name’s own direction."
+        },
+        {
+          "part": "name",
+          "element": "span",
+          "required": false,
+          "purpose": "The stem, shrinking to an ellipsis before the extension."
+        },
+        {
+          "part": "extension",
+          "element": "span",
+          "required": false,
+          "purpose": "The last dot and what follows it, which does not shrink."
+        },
+        {
+          "part": "time",
+          "element": "time",
+          "required": false,
+          "purpose": "datetime holds the ISO value; the words are relative — há 3 h — with the absolute reading in title, or absolute under timeFormat=\"absolute\". finishedAt once finished, createdAt before."
+        },
+        {
+          "part": "status",
+          "element": "div",
+          "required": false,
+          "purpose": "A grid of two columns: the mark, and the words beside it. The words never wrap under the mark. Its id describes every control of the job."
+        },
+        {
+          "part": "mark",
+          "element": "span, aria-hidden",
+          "required": false,
+          "purpose": "An Icon with the status glyph — clock, circle-check, circle-alert, circle-x, circle — or spinner while running, the line’s own size, centred on the band between the cap height and the x-height."
+        },
+        {
+          "part": "status-label",
+          "element": "span",
+          "required": false,
+          "purpose": "The word for the state — Concluído com 12 erros — and the stage after it, one run that wraps inside its column."
+        },
+        {
+          "part": "stage",
+          "element": "span",
+          "required": false,
+          "purpose": "The consumer’s phrase for the phase, in the muted voice, on one line ending in an ellipsis; the whole phrase is in title and in the DOM."
+        },
+        {
+          "part": "progress",
+          "element": "div",
+          "required": false,
+          "purpose": "While running: progress-indicator at its small step, named by the job title, indeterminate without a value, and the text under it."
+        },
+        {
+          "part": "progress-text",
+          "element": "span",
+          "required": false,
+          "purpose": "Processed of total in the job’s unit, the percentage, and the time left — the server’s eta, or the family’s estimate after three updates over five seconds."
+        },
+        {
+          "part": "summary",
+          "element": "p",
+          "required": false,
+          "purpose": "The counts of a finished job in one line: processed of total, created, updated, skipped."
+        },
+        {
+          "part": "message",
+          "element": "p",
+          "required": false,
+          "purpose": "The job’s message — why it failed — in the outcome’s tone; otherwise the deadline or the denial of its result in the muted voice."
+        },
+        {
+          "part": "controls",
+          "element": "div",
+          "required": false,
+          "purpose": "What jobControls returns, in order: download or retry, cancel, toggle, the consumer’s job-actions, remove at the far end. Under the status column from 42rem."
+        },
+        {
+          "part": "download",
+          "element": "span around a ButtonLink or a Button",
+          "required": false,
+          "purpose": "A ButtonLink with download when the file has an href, a Button that asks onDownload when it has none. Baixar erros when the file is the report of a partial import."
+        },
+        {
+          "part": "cancel",
+          "element": "span around a Button",
+          "required": false,
+          "purpose": "Asks onCancel. Absent under cancelable: false."
+        },
+        {
+          "part": "retry",
+          "element": "span around a Button",
+          "required": false,
+          "purpose": "Asks onRetry: Tentar de novo after a failure or a cancel, Gerar novamente on an export whose result expired."
+        },
+        {
+          "part": "toggle",
+          "element": "span around a Button",
+          "required": false,
+          "purpose": "The Disclosure button: Detalhes in both states, aria-expanded and aria-controls the details. Present only when the job has a count, a file or a failed row."
+        },
+        {
+          "part": "chevron",
+          "element": "span in the button’s end slot",
+          "required": false,
+          "purpose": "An Icon with chevron-down, turning half a turn while the details are shown."
+        },
+        {
+          "part": "job-actions",
+          "element": "span",
+          "required": false,
+          "purpose": "What renderJobActions returns for the job, after the family’s controls. Absent when it returns nothing."
+        },
+        {
+          "part": "remove",
+          "element": "button",
+          "required": false,
+          "purpose": "The family’s icon button, named Remover do histórico by aria-label and a tooltip, described by the job title. Only on a finished job."
+        },
+        {
+          "part": "details",
+          "element": "div role=\"region\"",
+          "required": false,
+          "purpose": "What the toggle shows, named by the toggle: counts, files and failed rows, on the sunken ground with the family’s rule."
+        },
+        {
+          "part": "counts",
+          "element": "dl",
+          "required": false,
+          "purpose": "Total, processed, created, updated, skipped and failed, in that order, leaving out what the job does not state."
+        },
+        {
+          "part": "files",
+          "element": "ul",
+          "required": false,
+          "purpose": "The original file, the result and the report of failed rows, each with its availability."
+        },
+        {
+          "part": "file",
+          "element": "li",
+          "required": false,
+          "purpose": "One file: its role, its name, its size, its deadline or denial, and a download while it is available. data-availability says which."
+        },
+        {
+          "part": "errors",
+          "element": "div around a Table",
+          "required": false,
+          "purpose": "The rows that failed — row, message, column, value — in a framed table whose box scrolls past sixteen rem."
+        },
+        {
+          "part": "errors-note",
+          "element": "p",
+          "required": false,
+          "purpose": "Mostrando 50 de 12.000 when errorCount is larger than the rows sent."
+        },
+        {
+          "part": "more",
+          "element": "button",
+          "required": false,
+          "purpose": "growing=\"button\" with hasMore: asks onLoadMore; says Carregando and refuses a second press while loading."
+        },
+        {
+          "part": "empty",
+          "element": "div",
+          "required": false,
+          "purpose": "In place of the list when the view has nothing: a result-state with the view’s words, or empty."
+        },
+        {
+          "part": "error",
+          "element": "div",
+          "required": false,
+          "purpose": "status=\"error\": a result-state with the control that asks onReload, in place of the list."
+        },
+        {
+          "part": "footer",
+          "element": "div",
+          "required": false,
+          "purpose": "The consumer’s footer: the link from a popover to the whole page."
+        }
+      ],
+      "api": [
+        {
+          "name": "jobs",
+          "type": "readonly ImportExportJob[]",
+          "defaultValue": "—",
+          "appliesTo": "ImportExportCenter",
+          "description": "The consumer’s jobs: key, direction, title, status, format, stage, progress, eta, counts, errors, errorCount, message, source, result, errorsFile, actor, createdAt, finishedAt, href, cancelable, retryable, removable. The family changes none of them"
+        },
+        {
+          "name": "view",
+          "type": "string",
+          "defaultValue": "all",
+          "appliesTo": "ImportExportCenter",
+          "description": "Present means the consumer owns the view. all shows every job, import and export filter by direction, any other value shows what the consumer gave"
+        },
+        {
+          "name": "defaultView",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "ImportExportCenter",
+          "description": "The view an uncontrolled centre starts on, read once"
+        },
+        {
+          "name": "views",
+          "type": "readonly { value, label }[]",
+          "defaultValue": "all, import, export",
+          "appliesTo": "ImportExportCenter",
+          "description": "The strip’s entries; one entry draws no strip"
+        },
+        {
+          "name": "expanded",
+          "type": "readonly string[]",
+          "defaultValue": "—",
+          "appliesTo": "ImportExportCenter",
+          "description": "Present means the consumer owns which jobs show their details"
+        },
+        {
+          "name": "defaultExpanded",
+          "type": "readonly string[]",
+          "defaultValue": "—",
+          "appliesTo": "ImportExportCenter",
+          "description": "The keys an uncontrolled centre starts with shown, read once"
+        },
+        {
+          "name": "size",
+          "type": "'sm' | 'md'",
+          "defaultValue": "md",
+          "appliesTo": "ImportExportCenter, ImportExportCenterDefaultsProvider",
+          "description": "sm for a popover or a drawer, with a floor width; md for a page"
+        },
+        {
+          "name": "level",
+          "type": "'2' | '3' | '4'",
+          "defaultValue": "2",
+          "appliesTo": "ImportExportCenter, ImportExportCenterDefaultsProvider",
+          "description": "The rank of the title’s heading"
+        },
+        {
+          "name": "growing",
+          "type": "'none' | 'button'",
+          "defaultValue": "none",
+          "appliesTo": "ImportExportCenter, ImportExportCenterDefaultsProvider",
+          "description": "Whether the history grows by a more button; the button is drawn while hasMore"
+        },
+        {
+          "name": "hasMore",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "ImportExportCenter",
+          "description": "Whether another page of history exists"
+        },
+        {
+          "name": "timeFormat",
+          "type": "'relative' | 'absolute'",
+          "defaultValue": "relative",
+          "appliesTo": "ImportExportCenter, ImportExportCenterDefaultsProvider",
+          "description": "How createdAt and finishedAt are written. A deadline is always a date"
+        },
+        {
+          "name": "status",
+          "type": "'ready' | 'error'",
+          "defaultValue": "ready",
+          "appliesTo": "ImportExportCenter",
+          "description": "error replaces the list with the page whose control asks onReload"
+        },
+        {
+          "name": "loading",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "ImportExportCenter",
+          "description": "aria-busy on the list and data-loading on the root; skeleton jobs while nothing is loaded, more waiting otherwise"
+        },
+        {
+          "name": "locale, timeZone, now",
+          "type": "string, string, number",
+          "defaultValue": "the language in force, the runtime’s zone",
+          "appliesTo": "ImportExportCenter (all three), ImportExportCenterDefaultsProvider (timeZone)",
+          "description": "What numbers, sizes, times and deadlines are written with, and the moment they count from. State now for a stable server render"
+        },
+        {
+          "name": "messages",
+          "type": "Partial<ImportExportCenterMessages>",
+          "defaultValue": "—",
+          "appliesTo": "ImportExportCenter, useJobToasts",
+          "description": "Words laid over the language in force, key by key: every word the family writes, the announcer says and a toast shows"
+        },
+        {
+          "name": "actions, empty, footer",
+          "type": "ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "ImportExportCenter",
+          "description": "The consumer’s header controls; the view’s empty page; the footer"
+        },
+        {
+          "name": "renderJobActions",
+          "type": "(job) => ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "ImportExportCenter",
+          "description": "The consumer’s controls for one job, after the family’s"
+        },
+        {
+          "name": "render",
+          "type": "(props) => ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "ImportExportCenter",
+          "description": "Substitutes the root element and hands it every attribute, the ref callback included"
+        },
+        {
+          "name": "ref",
+          "type": "Ref<ImportExportCenterHandle>",
+          "defaultValue": "—",
+          "appliesTo": "ImportExportCenter",
+          "description": "element; focus(), on the first job’s first control; reveal(key), which shows the job’s details, returns to all if the view hides it, scrolls it into view and focuses its title"
+        },
+        {
+          "name": "ImportExportCenterDefaultsProvider",
+          "type": "{ size, level, growing, timeFormat, timeZone }",
+          "defaultValue": "—",
+          "appliesTo": "a subtree",
+          "description": "The decisions an application takes once. A centre that states any of them itself still wins"
+        },
+        {
+          "name": "native props",
+          "type": "ComponentPropsWithRef<\"section\">",
+          "defaultValue": "—",
+          "appliesTo": "ImportExportCenter",
+          "description": "aria-*, data-*, className, style and handlers reach the section; a consumer’s aria-label or aria-labelledby replaces the title wiring"
+        }
+      ],
+      "composition": [],
+      "events": [
+        {
+          "name": "onViewChange",
+          "payload": "(view: string, request: ChangeRequest<string>)",
+          "when": "Before the view moves: a tab (pointer, keyboard) or reveal() of a job the view hides (programmatic). cancel() refuses the move."
+        },
+        {
+          "name": "onExpandedChange",
+          "payload": "(keys: readonly string[], request: ChangeRequest<readonly string[]>)",
+          "when": "Before a job’s details show or hide: the toggle (pointer, keyboard) or reveal() (programmatic). A key that leaves jobs leaves an uncontrolled set on the next render."
+        },
+        {
+          "name": "onCancel",
+          "payload": "(key: string, request: { reason, source, cancelled, cancel() })",
+          "when": "When the reader presses Cancelar on a queued or running job — reasons pointer, keyboard. The store stops the job and answers by changing its status."
+        },
+        {
+          "name": "onRetry",
+          "payload": "(key: string, request)",
+          "when": "When the reader presses Tentar de novo or Gerar novamente — reasons pointer, keyboard."
+        },
+        {
+          "name": "onRemove",
+          "payload": "({ keys }, request)",
+          "when": "When the reader presses remove on a finished job (pointer, keyboard) or clear in the header (clear, with every finished removable key of the view)."
+        },
+        {
+          "name": "onDownload",
+          "payload": "({ key, file }, request)",
+          "when": "Before a download — the primary control or a file in the details; file is source, result or errors. With an href the link navigates unless cancelled; without one the consumer produces the file here."
+        },
+        {
+          "name": "onOpen",
+          "payload": "(key: string, request)",
+          "when": "Before the title’s link navigates to job.href — reasons pointer, keyboard; cancel() keeps the reader here."
+        },
+        {
+          "name": "onLoadMore",
+          "payload": "(request)",
+          "when": "When the reader presses more — reasons pointer, keyboard. Not while loading."
+        },
+        {
+          "name": "onReload",
+          "payload": "(request)",
+          "when": "When the reader presses the error page’s control under status=\"error\" — reasons pointer, keyboard."
+        },
+        {
+          "name": "useJobToasts(jobs, { toaster, onView, messages })",
+          "payload": "a hook; onView(key)",
+          "when": "On every change of jobs after the first: one toast per job that started, finished, finished with failed rows or failed, under the id import-export-center:<key>. View calls onView."
+        }
+      ],
+      "accessibility": [
+        "No WAI-ARIA Authoring Practices pattern covers a job centre, so the platform is the pattern: the root is a section named by its heading, the jobs a native ul of li, every control a real button or link. The toggle follows the Disclosure pattern (w3.org/WAI/ARIA/apg/patterns/disclosure/): Enter and Space show and hide the details, aria-expanded says which, aria-controls names the region the details are, and the words stay Detalhes in both states.",
+        "Every control of a job is named by its own words and the job title — aria-labelledby holds both ids, so a reader hears Baixar Faturas do 3.º trimestre and not five Baixar in a row — and described by the job’s status line. The remove control is an icon, so its name is aria-label and a tooltip shows the same words on hover, on keyboard focus and on a press held on touch.",
+        "A job reaching another state is announced once, politely, through the shared live announcer — Importação Contatos do CRM concluída com 12 erros — and nothing is said on the first render or while the bar moves; the bar is a progressbar named by the job title with the progress text as aria-valuetext for a reader who asks. A toast from useJobToasts carries the same sentence, which the announcer does not repeat.",
+        "Focus never falls to the body. A job that finishes while focus is on Cancelar keeps focus in the job, on its first remaining control or on its title; a removed job hands focus to the same control of the job now in its place, then of the one before, then to the list — focusDestination in @slotted/core/import-export-center decides it for both bindings.",
+        "Colour never says a state alone: the outcome has a word and a mark as well as a tone, every mark a circle or a clock, and partial is a warning with its failed-row count in the words. Under forced colours the tile keeps its square as an edge, the marks draw in the system’s ink, and a running mark that turns stops under reduced motion while the bar still says how far the job is."
+      ]
+    }
+  },
+  "tokens": [
+    "--slotted-border-strong",
+    "--slotted-border-subtle",
+    "--slotted-border-width-thin",
+    "--slotted-control-gap-sm",
+    "--slotted-control-height-sm",
+    "--slotted-control-icon-size-md",
+    "--slotted-control-icon-size-sm",
+    "--slotted-control-inner-size-md",
+    "--slotted-control-inner-size-sm",
+    "--slotted-control-line-height",
+    "--slotted-control-padding-inline-md",
+    "--slotted-control-radius",
+    "--slotted-control-transition-duration",
+    "--slotted-control-transition-easing",
+    "--slotted-focus-ring-color",
+    "--slotted-focus-ring-offset",
+    "--slotted-focus-ring-width",
+    "--slotted-font-family-heading",
+    "--slotted-font-family-sans",
+    "--slotted-font-size-lg",
+    "--slotted-font-size-md",
+    "--slotted-font-size-sm",
+    "--slotted-font-size-xs",
+    "--slotted-font-weight-medium",
+    "--slotted-font-weight-regular",
+    "--slotted-font-weight-semibold",
+    "--slotted-import-export-center-background",
+    "--slotted-import-export-center-border",
+    "--slotted-import-export-center-errors-max-block-size",
+    "--slotted-import-export-center-gap-md",
+    "--slotted-import-export-center-gap-sm",
+    "--slotted-import-export-center-inset-block-md",
+    "--slotted-import-export-center-inset-block-sm",
+    "--slotted-import-export-center-inset-inline-md",
+    "--slotted-import-export-center-inset-inline-sm",
+    "--slotted-import-export-center-min-inline-size-sm",
+    "--slotted-import-export-center-status-column",
+    "--slotted-line-height-lg",
+    "--slotted-line-height-md",
+    "--slotted-line-height-sm",
+    "--slotted-line-height-xs",
+    "--slotted-radius-full",
+    "--slotted-radius-md",
+    "--slotted-radius-sm",
+    "--slotted-radius-xs",
+    "--slotted-space-1",
+    "--slotted-space-2",
+    "--slotted-space-3",
+    "--slotted-space-4",
+    "--slotted-space-5",
+    "--slotted-space-6",
+    "--slotted-space-7",
+    "--slotted-space-8",
+    "--slotted-space-9",
+    "--slotted-surface",
+    "--slotted-surface-sunken",
+    "--slotted-target-min",
+    "--slotted-text",
+    "--slotted-text-muted",
+    "--slotted-tone-accent-solid",
+    "--slotted-tone-accent-surface",
+    "--slotted-tone-accent-text",
+    "--slotted-tone-danger-solid",
+    "--slotted-tone-danger-text",
+    "--slotted-tone-secondary-solid",
+    "--slotted-tone-secondary-subtle-active",
+    "--slotted-tone-secondary-subtle-hover",
+    "--slotted-tone-secondary-text",
+    "--slotted-tone-success-solid",
+    "--slotted-tone-success-text",
+    "--slotted-tone-warning-solid",
+    "--slotted-tone-warning-text",
+    "--slotted-upload-kind-archive",
+    "--slotted-upload-kind-audio",
+    "--slotted-upload-kind-document",
+    "--slotted-upload-kind-foreground",
+    "--slotted-upload-kind-image",
+    "--slotted-upload-kind-other",
+    "--slotted-upload-kind-pdf",
+    "--slotted-upload-kind-presentation",
+    "--slotted-upload-kind-spreadsheet",
+    "--slotted-upload-kind-video"
+  ],
+  "examples": [
+    {
+      "id": "playground",
+      "title": "Playground",
+      "note": "Six jobs of Vale Norte Distribuidora over a store that answers every request, and a server that moves the running import forward. Cancel it, retry the failed export, open the catalogue’s details, remove a finished job, and watch the queued export start when the import ends.",
+      "language": "tsx",
+      "source": "<ImportExportCenter\n  jobs={jobs}\n  onCancel={(key) => cancel(key)}\n  onRemove={({ keys }) => remove(keys)}\n  onRetry={(key) => retry(key)}\n/>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "anatomy",
+      "title": "Every part, written out",
+      "note": "The header with its count, clear and the consumer’s two actions; the strip; a running job with its bar; a partial import with its details open — counts, the original file, the report and the failed rows; growing by button; a footer. Every part the contract names, in one box.",
+      "language": "tsx",
+      "source": "<ImportExportCenter\n  actions={<ImportActions />}\n  defaultExpanded={['catalog-autumn']}\n  footer={<Link href=\"/jobs\">Ver todos os jobs</Link>}\n  growing=\"button\"\n  hasMore\n  jobs={jobs}\n/>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "statuses",
+      "title": "Five statuses, four outcomes",
+      "note": "Queued, running, succeeded, succeeded with failed rows, failed and cancelled, each with its word, its mark and its tone. The partial row is derived: the store wrote succeeded and counts.failed 12, and the family refused to paint it green.",
+      "language": "tsx",
+      "source": "const catalog: ImportExportJob = {\n  counts: { failed: 12, processed: 2988, total: 3000 },\n  direction: 'import',\n  key: 'catalog-autumn',\n  status: 'succeeded',\n  title: 'Catálogo de produtos',\n};\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "progress",
+      "title": "Progress, in the job’s unit",
+      "note": "Rows with a percentage and the server’s eta; bytes in the size scale; a bare percentage; an indeterminate bar that says only its stage; and a job whose time left the family estimates from the updates it saw. The bar is progress-indicator at its small step and says nothing aloud.",
+      "language": "tsx",
+      "source": "const jobs: ImportExportJob[] = [\n  { ...rows, eta: '2026-09-25T14:03:00Z', progress: { max: 5000, value: 1204 } },\n  { ...bytes, progress: { max: 10_000_000, unit: 'bytes', value: 2_500_000 } },\n  { ...waiting, progress: {}, stage: 'Preparando o arquivo' },\n];\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "errors",
+      "title": "Rows that failed",
+      "note": "A partial import with its details open: the counts, the report download as the job’s primary control, and a table of the rows the store sent — the message second, so it stays in view when the table scrolls sideways — with Mostrando 5 de 1.284 because the store sent a sample.",
+      "language": "tsx",
+      "source": "const catalog: ImportExportJob = {\n  ...job,\n  errorCount: 1284,\n  errors: firstPage,\n  errorsFile: { href: '/imports/481/errors.csv', name: 'catalogo-erros.csv' },\n};\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "files",
+      "title": "Deadlines and permission",
+      "note": "An export whose file expired offers Gerar novamente in place of Baixar and says when it expired; an export still available says until when; an import whose original the reader may not download says why in the consumer’s words, and draws no control for it.",
+      "language": "tsx",
+      "source": "const result: JobFile = { expiresAt: '2026-09-08T10:00:00Z', href, name: 'nfe.zip' };\nconst source: JobFile = {\n  denied: 'Só quem importou o arquivo ou um administrador pode baixar o original.',\n  name: 'precos-atacado.csv',\n};\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "views",
+      "title": "Views",
+      "note": "The built-in Todos, Importações and Exportações, filtered by direction; below, the consumer’s own views — Minhas is the consumer’s query, so the family shows the jobs it is given — held in the consumer’s state, which refuses Arquivados with request.cancel().",
+      "language": "tsx",
+      "source": "<ImportExportCenter\n  jobs={view === 'mine' ? mine : jobs}\n  onViewChange={(next, request) => {\n    if (next === 'archived') request.cancel();\n    else setView(next);\n  }}\n  view={view}\n  views={views}\n/>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "intake",
+      "title": "Starting a job",
+      "note": "Importar opens a dialog with upload as its dropzone; its adapter sends the bytes and the store creates the job, which appears at the top of the list. Exportar opens a dialog with the format and the file name. The centre starts nothing itself and never transfers a byte.",
+      "language": "tsx",
+      "source": "<ImportExportCenter\n  actions={\n    <>\n      <ImportDialog onUploaded={(file) => store.createImport(file)} />\n      <ExportDialog onConfirm={(format) => store.createExport(format)} />\n    </>\n  }\n  jobs={store.jobs}\n/>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "toasts",
+      "title": "The toast points at the job",
+      "note": "useJobToasts in the shell raises one toast per job when it starts and replaces it when it finishes, under the job’s key; View reveals the job in the centre — details open, title focused. The toast carries no progress, no cancel and no download.",
+      "language": "tsx",
+      "source": "useJobToasts(jobs, {\n  onView: (key) => {\n    navigate('/jobs');\n    centre.current?.reveal(key);\n  },\n});\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "hosts",
+      "title": "In a popover, on a page",
+      "note": "The same jobs in a popover under the top bar, at size sm with a footer link to the page, and on the page at md, where from 42rem every job is a row of one grid and the states line up in one column.",
+      "language": "tsx",
+      "source": "<Popover>\n  <PopoverTrigger render={(props) => <Button {...props}>Jobs</Button>} />\n  <PopoverLayer>\n    <PopoverContent aria-label=\"Importações e exportações\">\n      <ImportExportCenter footer={<SeeAll />} jobs={jobs} size=\"sm\" />\n    </PopoverContent>\n  </PopoverLayer>\n</Popover>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "loading",
+      "title": "The first wait, and the next page",
+      "note": "Three skeleton jobs with the anatomy of a job — the tile, the name, the meta line — stand in the boxes the jobs will occupy while the list is busy; with jobs already shown, more says Carregando and refuses a second press.",
+      "language": "tsx",
+      "source": "<ImportExportCenter jobs={[]} loading />;\n<ImportExportCenter growing=\"button\" hasMore jobs={jobs} loading />;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "empty",
+      "title": "Nothing yet, and a list that failed",
+      "note": "An empty view draws the view’s own words — Nenhuma exportação — or the consumer’s empty; a list the store could not load draws the error page whose control asks onReload.",
+      "language": "tsx",
+      "source": "<ImportExportCenter defaultView=\"export\" jobs={[]} />;\n<ImportExportCenter jobs={[]} onReload={() => refetch()} status=\"error\" />;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "sizes",
+      "title": "Two sizes",
+      "note": "sm for the popover and the drawer: the small type steps, tighter insets, a floor width so a panel sized to its content does not collapse; md for the page. The controls keep the button family’s small step in both.",
+      "language": "tsx",
+      "source": "<ImportExportCenter jobs={jobs} size=\"sm\" />;\n<ImportExportCenter jobs={jobs} size=\"md\" />;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "content",
+      "title": "Content the family did not choose",
+      "note": "A title of fourteen words, a file name of ninety characters that keeps its extension, an Arabic report in a left-to-right page, a stage longer than the line, a million rows, and a job with the consumer’s own action.",
+      "language": "tsx",
+      "source": "<ImportExportCenter\n  jobs={jobs}\n  renderJobActions={(job) =>\n    job.direction === 'export' ? <Link href={shareUrl(job)}>Partilhar</Link> : null\n  }\n/>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "defaults",
+      "title": "Defaults, once",
+      "note": "ImportExportCenterDefaultsProvider sets the size, the rank, the time format and the zone for a whole application — here with absolute times; the second centre states size=\"md\" itself and wins. The words and the locale come from SlottedProvider.",
+      "language": "tsx",
+      "source": "<ImportExportCenterDefaultsProvider level=\"3\" size=\"sm\" timeFormat=\"absolute\">\n  <App />\n</ImportExportCenterDefaultsProvider>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "accessibility",
+      "title": "Keyboard and focus",
+      "note": "Tab through the controls: every one is named by its words and the job — Cancel Contatos do CRM. Press Cancel: the job ends, the control leaves, and focus stays in the job on its first control. Remove a job: focus goes to the same control of the job in its place.",
+      "language": "tsx",
+      "source": "<ImportExportCenter\n  jobs={jobs}\n  onCancel={(key) => cancel(key)}\n  onRemove={({ keys }) => remove(keys)}\n/>;\n",
+      "verdict": "excerpt"
+    }
+  ]
+}