@kernhq/module-inventory 0.2.0 → 0.3.0

package/src/client/components/AssetFormDialog.svelte

@@ -1,11 +1,23 @@
 <script lang="ts">
-import { Button, Dialog, Field, Input, messageLocale, Select, Textarea, toast } from '@kernhq/ui'
-import { createMutation, useQueryClient } from '@tanstack/svelte-query'
-import type { Asset } from '../../contract/index.js'
+import {
+  Button,
+  Dialog,
+  Field,
+  Input,
+  messageLocale,
+  Select,
+  type SelectOption,
+  Textarea,
+  toast,
+} from '@kernhq/ui'
+import { createMutation, createQuery, useQueryClient } from '@tanstack/svelte-query'
+import type { Asset, Category } from '../../contract/index.js'
 import { getInventoryApi } from '../api-instance.js'
+import { isolated } from '../bidi.js'
+import { errorMessage } from '../errors.js'
 import { t } from '../i18n.js'
 import { canInventory } from '../permissions.js'
-import { formatPrice, parsePrice } from '../price.js'
+import { currencyOptions, formatPrice, parsePrice, priceExample } from '../price.js'
 import { inventoryKeys } from '../query.js'
 
 /**
@@ -39,6 +51,7 @@ $effect(() => {
 
 let name = $state('')
 let description = $state('')
+let categoryId = $state('')
 let serialNumber = $state('')
 let location = $state('')
 let purchasedOn = $state('')
@@ -66,16 +79,43 @@ $effect(() => {
   fill(asset)
 })
 
+/**
+ * What this asset can be filed under.
+ *
+ * Archived categories are asked for as well, so a row that already carries one keeps naming it —
+ * the picker offers only live categories plus whichever this asset is already in. Without the
+ * second half, opening the form on an asset in an archived category would silently show "no
+ * category" and saving would move it out of one nobody meant to leave.
+ *
+ * `enabled` on `open` rather than always: this dialog is mounted by the list page for its whole
+ * life, and a picker nobody has opened does not need a request. The key is the page's own, so when
+ * it does fire the answer is usually already in the cache.
+ */
+const categoriesQuery = createQuery(() => ({
+  queryKey: inventoryKeys.categories(workspaceId, true),
+  queryFn: () => api.categories.list({ workspaceId, archived: true }),
+  enabled: Boolean(workspaceId) && shown,
+}))
+
+const categoryOptions = $derived<SelectOption[]>([
+  { value: '', label: t('category_none') },
+  ...(categoriesQuery.data ?? [])
+    .filter((row: Category) => !row.archivedAt || row.id === categoryId)
+    .map((row: Category) => ({ value: row.id, label: row.name })),
+])
+
 function fill(row: Asset | null) {
   name = row?.name ?? ''
   description = row?.description ?? ''
+  categoryId = row?.categoryId ?? ''
   serialNumber = row?.serialNumber ?? ''
   location = row?.location ?? ''
   purchasedOn = row?.purchasedOn ?? ''
   purchasedFrom = row?.purchasedFrom ?? ''
-  // Formatted for the reader's own locale, and `parsePrice` reads back exactly what this writes.
-  priceText = formatPrice(row?.priceMinor, messageLocale())
   currency = row?.currency ?? ''
+  // Formatted for the reader's own locale *and this row's currency* — `parsePrice` reads back
+  // exactly what this writes only if both halves agree on how many decimal places the money has.
+  priceText = formatPrice(row?.priceMinor, messageLocale(), currency || null)
   warrantyUntil = row?.warrantyUntil ?? ''
 }
 
@@ -91,10 +131,18 @@ const close = () => {
  * Turkish and Persian for twelve hundred — was stored as €1.23, and `abc` and `-5` were stored as
  * no price at all. Neither said anything. Now an amount this locale cannot read is an error on the
  * field, and there is no path where a wrong number is saved quietly.
+ *
+ * The **currency** is a dependency of the parse, not decoration beside it: yen has no minor unit
+ * and the dinar has three, so the same keystrokes mean different money in different currencies.
+ * Switching the picker re-parses what is already typed, which is what makes `1000` in a yen field
+ * ¥1000 rather than ¥10 — and `19.99` there an error rather than a silent ¥20.
  */
-const priceResult = $derived(parsePrice(priceText, messageLocale()))
+const currencyCode = $derived(currency.trim().toUpperCase() || null)
+const priceResult = $derived(parsePrice(priceText, messageLocale(), currencyCode))
 const priceError = $derived(
-  priceResult.ok ? null : t('price_invalid', { example: formatPrice(123456, messageLocale()) }),
+  priceResult.ok
+    ? null
+    : t('price_invalid', isolated({ example: priceExample(messageLocale(), currencyCode) })),
 )
 
 /**
@@ -110,13 +158,15 @@ let submitting = $state(false)
 const fields = () => ({
   name: name.trim(),
   description: description.trim(),
+  // `null`, never `''`: the contract takes a uuid or nothing, and an empty string is neither.
+  categoryId: categoryId || null,
   serialNumber: serialNumber.trim() || null,
   location: location.trim() || null,
   purchasedFrom: purchasedFrom.trim() || null,
   purchasedOn: purchasedOn || null,
   warrantyUntil: warrantyUntil || null,
   priceMinor: priceResult.ok ? priceResult.minor : null,
-  currency: currency.trim().toUpperCase() || null,
+  currency: currencyCode,
 })
 
 const save = createMutation(() => ({
@@ -129,11 +179,12 @@ const save = createMutation(() => ({
   onSuccess: (saved: Asset) => {
     // Not `t('new')`: that is the label on the button that opened this, so the toast used to
     // congratulate somebody on the words "New asset" rather than telling them what happened.
-    toast.success(t(editing ? 'updated_toast' : 'created_toast', { name: saved.name }))
+    toast.success(t(editing ? 'updated_toast' : 'created_toast', isolated({ name: saved.name })))
     void queryClient.invalidateQueries({ queryKey: inventoryKeys.all })
     close()
   },
-  onError: (error: Error) => toast.error(error.message || t('common.error')),
+  // Translated rather than the server's English prose: see `errors.ts`.
+  onError: (error: unknown) => toast.error(errorMessage(error, t)),
   onSettled: () => {
     submitting = false
   },
@@ -176,6 +227,12 @@ function submit() {
       {/snippet}
     </Field>
 
+    <Field label={t('category')} id="inv-category">
+      {#snippet children(id)}
+        <Select {id} bind:value={categoryId} options={categoryOptions} ariaLabel={t('category')} />
+      {/snippet}
+    </Field>
+
     <div class="pair">
       <Field label={t('serial_number')} id="inv-serial">
         {#snippet children(id)}
@@ -221,17 +278,9 @@ function submit() {
              Persian, Arabic, German or Turkish form, explained by an example that is not a hint. -->
         <Field label={t('currency')} id="inv-currency">
           {#snippet children(id)}
-            <Select
-              {id}
-              bind:value={currency}
-              options={[
-                { value: '', label: '—' },
-                { value: 'USD', label: 'USD' },
-                { value: 'EUR', label: 'EUR' },
-                { value: 'IRR', label: 'IRR' },
-                { value: 'AED', label: 'AED' },
-              ]}
-            />
+            <!-- The list lives in `price.ts`: the repair form asks the same question, and two
+                 copies are two lists that gain a currency in one form and not the other. -->
+            <Select {id} bind:value={currency} options={currencyOptions('—')} />
           {/snippet}
         </Field>
       </div>

package/src/client/components/AssetPhoto.svelte

@@ -0,0 +1,178 @@
+<script lang="ts">
+import { Button, coreApi, Skeleton, toast, uploadFile } from '@kernhq/ui'
+import { createMutation, createQuery, useQueryClient } from '@tanstack/svelte-query'
+import type { Asset } from '../../contract/index.js'
+import { getInventoryApi } from '../api-instance.js'
+import { isolated } from '../bidi.js'
+import type { CoreApi } from '../core-api.js'
+import { errorMessage } from '../errors.js'
+import { t } from '../i18n.js'
+import { inventoryKeys } from '../query.js'
+
+/**
+ * The asset's photo.
+ *
+ * `assets.photoFileId` has been a field of every asset since the module existed, settable through
+ * `create` and `update` and by **nothing on screen** — an API that could store a photo and an
+ * interface that could not show one. This is that half.
+ *
+ * It sits in **Details**, not in Files, and that is a decision: the photo is a field of the asset,
+ * so it belongs with the asset's other fields. Putting it in the Files tab would hide it from any
+ * workspace that switches the `attachments` capability off, and the photo has nothing to do with
+ * that feature — it is `core`.
+ *
+ * The bytes go to core through `uploadFile`, exactly as an attachment's do; this module stores the
+ * id it is handed and asks core to sign a URL to read it back. `thumbnail: true`, because a
+ * full-size photograph in a 440px panel is a megabyte nobody looks at.
+ */
+interface Props {
+  workspaceId: string
+  asset: Asset
+  /** `inventory.asset.manage`. Without it the photo is shown and cannot be changed. */
+  canManage: boolean
+}
+const { workspaceId, asset, canManage }: Props = $props()
+
+const api = getInventoryApi()
+const core = coreApi<CoreApi>()
+const queryClient = useQueryClient()
+
+const photoQuery = createQuery(() => ({
+  // Keyed by the file rather than by the asset: replacing the photo changes the id, so the old
+  // signed URL is never served for the new photo.
+  queryKey: ['inventory', 'photo', asset.photoFileId ?? ''],
+  queryFn: () =>
+    core.files.downloadUrl({ id: asset.photoFileId as string, disposition: 'inline', thumbnail: true }),
+  enabled: Boolean(asset.photoFileId),
+  // Core signs these with a lifetime measured in minutes, so a panel left open all afternoon asks
+  // again rather than rendering a broken image.
+  staleTime: 4 * 60_000,
+}))
+
+/**
+ * A plain flag set in the same tick as the click, not `mutation.isPending`.
+ *
+ * The attribute reaches the button one render later and two quick clicks are one render apart.
+ */
+let busy = $state(false)
+let input = $state<HTMLInputElement | null>(null)
+
+const save = createMutation(() => ({
+  mutationFn: (photoFileId: string | null) =>
+    api.assets.update({ workspaceId, assetId: asset.id, photoFileId }),
+  onSuccess: (_saved: Asset, photoFileId: string | null) => {
+    toast.success(photoFileId ? t('photo_saved_toast') : t('photo_removed_toast'))
+    void queryClient.invalidateQueries({ queryKey: inventoryKeys.all })
+  },
+  // Translated rather than the server's English prose: see `errors.ts`.
+  onError: (error: unknown) => toast.error(errorMessage(error, t)),
+  onSettled: () => {
+    busy = false
+  },
+}))
+
+async function choose(list: FileList | null) {
+  const file = list?.[0]
+  if (!file || busy) return
+  busy = true
+  try {
+    const uploaded = await uploadFile({
+      workspaceId,
+      file,
+      name: file.name,
+      mimeType: file.type || undefined,
+      attachedTo: { module: 'inventory', type: 'asset', id: asset.id },
+    })
+    save.mutate(uploaded.id)
+  } catch {
+    toast.error(t('file_upload_failed', isolated({ name: file.name })))
+    busy = false
+  }
+}
+
+/**
+ * No confirmation, deliberately.
+ *
+ * Nothing is destroyed: the file stays in core's storage exactly where it was, and this clears one
+ * uuid on one row. A dialog asking whether you are sure about a thumbnail is a dialog people learn
+ * to dismiss without reading, which is what makes the ones that matter stop working.
+ */
+function remove() {
+  if (busy) return
+  busy = true
+  save.mutate(null)
+}
+</script>
+
+<div class="photo">
+  {#if canManage}
+    <input
+      bind:this={input}
+      type="file"
+      accept="image/*"
+      hidden
+      onchange={(e) => {
+        void choose(e.currentTarget.files)
+        e.currentTarget.value = ''
+      }}
+    />
+  {/if}
+
+  {#if asset.photoFileId}
+    {#if photoQuery.isPending}
+      <Skeleton height="120px" radius="10px" />
+    {:else if photoQuery.isError}
+      <!-- The field is set and the URL could not be signed. Saying so beats a broken image icon. -->
+      <p class="none">{t('files_error')}</p>
+    {:else}
+      <img src={photoQuery.data?.url} alt={t('photo_alt', isolated({ name: asset.name }))} />
+    {/if}
+  {:else}
+    <p class="none">{t('photo_none')}</p>
+  {/if}
+
+  {#if canManage}
+    <div class="acts">
+      <Button size="sm" variant="secondary" icon="image" loading={busy} onclick={() => input?.click()}>
+        {asset.photoFileId ? t('photo_replace') : t('photo_set')}
+      </Button>
+      {#if asset.photoFileId}
+        <Button size="sm" variant="ghost" onclick={remove}>{t('photo_remove')}</Button>
+      {/if}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .photo {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+  img {
+    display: block;
+    inline-size: 100%;
+    max-block-size: 200px;
+    object-fit: cover;
+    border-radius: var(--kern-r-lg);
+    border: 1px solid var(--kern-border-hairline);
+    /* Behind a photo with transparency, and while one loads. Not `--kern-surface-raised`: a `Sheet`
+       is already that colour, so it would be no ground at all. */
+    background: var(--kern-surface-chip);
+  }
+  .none {
+    margin: 0;
+    padding: 18px 0;
+    text-align: center;
+    font-size: 12.5px;
+    /* Muted with a colour, never opacity: a faded sentence is unreadable whatever its token. */
+    color: var(--kern-ink-500);
+    border: 1px dashed var(--kern-border);
+    border-radius: var(--kern-r-lg);
+  }
+  .acts {
+    display: flex;
+    gap: 8px;
+    flex-wrap: wrap;
+  }
+</style>

package/src/client/components/AttachmentsSection.svelte

@@ -0,0 +1,327 @@
+<script lang="ts">
+import {
+  Button,
+  coreApi,
+  Dialog,
+  EmptyState,
+  formatBytes,
+  Icon,
+  IconButton,
+  Skeleton,
+  toast,
+  uploadFile,
+} from '@kernhq/ui'
+import { createMutation, createQuery, useQueryClient } from '@tanstack/svelte-query'
+import type { Attachment } from '../../contract/index.js'
+import { getInventoryApi } from '../api-instance.js'
+import { isolated } from '../bidi.js'
+import type { CoreApi } from '../core-api.js'
+import { errorMessage } from '../errors.js'
+import { t } from '../i18n.js'
+import { inventoryKeys } from '../query.js'
+
+/**
+ * The files kept against an asset, or against one of its repairs.
+ *
+ * **This module does not upload.** The browser sends the bytes to core through `uploadFile` and is
+ * handed an id; `attachments.add` then records that the asset has that file. Reading one back is a
+ * URL core signs for the person asking — which is why a file another workspace owns cannot be read
+ * here even though this module's server can see its name.
+ *
+ * One component, mounted twice: with `repairId={null}` for the asset's own paperwork, and inside a
+ * repair with that repair's id. Both read one query — `attachments.list` returns every file on the
+ * asset — and filter it here. That is the one case where filtering in the browser is right: the
+ * list is bounded by how much paperwork one item collects and is entirely loaded, unlike a paged
+ * asset list, where the same shortcut returns twenty rows and shows eleven.
+ */
+interface Props {
+  workspaceId: string
+  assetId: string
+  /** Null for the asset's own files; a repair id for that repair's paperwork. */
+  repairId?: string | null
+  /** `inventory.asset.manage` — whether uploading and removing are offered at all. */
+  canManage: boolean
+  /** Inside a repair card: no empty state and no error card, because it is a detail of a detail. */
+  compact?: boolean
+}
+const { workspaceId, assetId, repairId = null, canManage, compact = false }: Props = $props()
+
+const api = getInventoryApi()
+const core = coreApi<CoreApi>()
+const queryClient = useQueryClient()
+
+const filesQuery = createQuery(() => ({
+  queryKey: inventoryKeys.assetAttachments(workspaceId, assetId),
+  queryFn: () => api.attachments.list({ workspaceId, assetId }),
+  enabled: Boolean(workspaceId && assetId),
+}))
+
+const rows = $derived<readonly Attachment[]>(
+  (filesQuery.data ?? []).filter((row: Attachment) => (row.repairId ?? null) === repairId),
+)
+
+/**
+ * A signed URL per file, resolved once and kept for as long as the panel is open.
+ *
+ * Core signs these with a lifetime measured in minutes, so they are deliberately not stored in the
+ * query cache — a link that worked when the panel opened and 404s an hour later is worse than one
+ * fetched again. `{#await}` on a memoised promise is what `module-chat` does with the same files.
+ */
+const urls = new Map<string, Promise<string>>()
+function urlFor(fileId: string): Promise<string> {
+  const cached = urls.get(fileId)
+  if (cached) return cached
+  const pending = core.files.downloadUrl({ id: fileId, disposition: 'attachment' }).then((res) => res.url)
+  urls.set(fileId, pending)
+  return pending
+}
+
+// ------------------------------------------------------------------------------- uploading
+
+let input = $state<HTMLInputElement | null>(null)
+/**
+ * A plain flag set in the same tick as the click, not `mutation.isPending`.
+ *
+ * The attribute reaches the button one render later and two quick clicks are one render apart, so a
+ * double-click uploads the same file twice — the second insert is dropped by the unique index, but
+ * the bytes have already gone to storage.
+ */
+let busy = $state(false)
+
+const attach = createMutation(() => ({
+  mutationFn: (fileIds: string[]) => api.attachments.add({ workspaceId, assetId, fileIds, repairId }),
+  onSuccess: (added: Attachment[]) => {
+    if (added.length) toast.success(t('file_added_toast', { n: added.length }))
+    void queryClient.invalidateQueries({ queryKey: inventoryKeys.all })
+  },
+  // Translated rather than the server's English prose: see `errors.ts`.
+  onError: (error: unknown) => toast.error(errorMessage(error, t)),
+  onSettled: () => {
+    busy = false
+  },
+}))
+
+/** Uploads first, then attaches: an attachment points at a file that already exists. */
+async function upload(list: FileList | null) {
+  if (!list?.length || busy) return
+  busy = true
+  const ids: string[] = []
+  for (const file of Array.from(list)) {
+    try {
+      const uploaded = await uploadFile({
+        workspaceId,
+        file,
+        name: file.name,
+        mimeType: file.type || undefined,
+        // Core keeps the owning object, so a file uploaded here is not an orphan if this module
+        // then fails to record it.
+        attachedTo: { module: 'inventory', type: 'asset', id: assetId },
+      })
+      ids.push(uploaded.id)
+    } catch {
+      // Named, not "an upload failed": with several files the reader has to know which one.
+      toast.error(t('file_upload_failed', isolated({ name: file.name })))
+    }
+  }
+  if (ids.length) attach.mutate(ids)
+  else busy = false
+}
+
+// -------------------------------------------------------------------------------- removing
+
+let removing = $state<Attachment | null>(null)
+let removingBusy = $state(false)
+
+const detach = createMutation(() => ({
+  mutationFn: (attachmentId: string) => api.attachments.remove({ workspaceId, attachmentId }),
+  onSuccess: () => {
+    toast.success(t('file_removed_toast', isolated({ name: removing?.name ?? '' })))
+    void queryClient.invalidateQueries({ queryKey: inventoryKeys.all })
+    removing = null
+  },
+  // Translated rather than the server's English prose: see `errors.ts`.
+  onError: (error: unknown) => toast.error(errorMessage(error, t)),
+  onSettled: () => {
+    removingBusy = false
+  },
+}))
+
+function confirmRemove() {
+  const target = removing
+  if (!target || removingBusy) return
+  removingBusy = true
+  detach.mutate(target.id)
+}
+
+/** A picture reads as a picture, a receipt as a receipt; anything else is just a file. */
+function iconFor(mimeType: string | null): string {
+  if (mimeType?.startsWith('image/')) return 'image'
+  if (mimeType === 'application/pdf') return 'receipt'
+  return 'file-text'
+}
+</script>
+
+<div class="files" class:compact>
+  {#if canManage}
+    <input
+      bind:this={input}
+      type="file"
+      multiple
+      hidden
+      onchange={(e) => {
+        void upload(e.currentTarget.files)
+        // Cleared so choosing the same file twice in a row still fires `change`.
+        e.currentTarget.value = ''
+      }}
+    />
+  {/if}
+
+  {#if filesQuery.isPending}
+    <Skeleton height="34px" radius="8px" />
+  {:else if filesQuery.isError && !compact}
+    <EmptyState bare compact icon="triangle-alert" title={t('files_error')}>
+      {#snippet actions()}
+        <Button size="sm" variant="secondary" onclick={() => void filesQuery.refetch()}>
+          {t('common.retry')}
+        </Button>
+      {/snippet}
+    </EmptyState>
+  {:else if rows.length === 0 && !compact}
+    <EmptyState bare compact icon="paperclip" title={t('files_empty')} description={t('files_empty_desc')} />
+  {:else if rows.length}
+    <ul class="rows">
+      {#each rows as row (row.id)}
+        <li class="row">
+          <Icon name={iconFor(row.mimeType)} size={14} strokeWidth={1.7} />
+          {#await urlFor(row.fileId)}
+            <span class="name" title={row.name}>{row.name}</span>
+          {:then url}
+            <a
+              class="name"
+              href={url}
+              target="_blank"
+              rel="noopener noreferrer"
+              title={row.name}
+              aria-label={t('file_download', isolated({ name: row.name }))}
+            >
+              {row.name}
+            </a>
+          {:catch}
+            <!-- The row still says what it is: a file whose URL could not be signed is not a file
+                 that has gone away. -->
+            <span class="name" title={row.name}>{row.name}</span>
+          {/await}
+          {#if row.size !== null}<span class="size">{formatBytes(row.size)}</span>{/if}
+          {#if canManage}
+            <IconButton
+              icon="x"
+              size={26}
+              label={t('file_remove', isolated({ name: row.name }))}
+              onclick={() => (removing = row)}
+            />
+          {/if}
+        </li>
+      {/each}
+    </ul>
+  {/if}
+
+  {#if canManage}
+    <div class="add">
+      <Button size="sm" variant="secondary" icon="upload" loading={busy} onclick={() => input?.click()}>
+        {t('file_add')}
+      </Button>
+    </div>
+  {/if}
+</div>
+
+<!-- States what happens and to what, rather than asking "Are you sure?" — and the sentence's whole
+     job is to say that the file itself survives, because this module never owned it. -->
+<Dialog
+  open={removing !== null}
+  size="sm"
+  title={t('file_remove_title', isolated({ name: removing?.name ?? '' }))}
+  onOpenChange={(next) => {
+    if (!next) removing = null
+  }}
+>
+  <p class="dialog-body">{t('file_remove_body')}</p>
+  {#snippet footer()}
+    <Button variant="ghost" onclick={() => (removing = null)}>{t('common.cancel')}</Button>
+    <Button variant="danger" onclick={confirmRemove} loading={removingBusy}>
+      {t('common.remove')}
+    </Button>
+  {/snippet}
+</Dialog>
+
+<style>
+  .files {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+  .compact {
+    gap: 6px;
+  }
+  .rows {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .row {
+    display: grid;
+    grid-template-columns: 14px minmax(0, 1fr) auto auto;
+    align-items: center;
+    gap: 8px;
+    font-size: 12.5px;
+    color: var(--kern-ink-700);
+    /* Rhythm between the rows. It is *not* what makes the download link a legal target — the
+       comment here used to claim a negative margin that was not in the file, and padding on the
+       row would not have grown the anchor's hit area anyway: `align-items: center` sizes a grid
+       item to its own content. The link carries that itself, below. */
+    padding-block: 3px;
+  }
+  .name {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: var(--kern-ink-900);
+    /* A value somebody typed decides its own direction: `plaintext` takes it from the value's
+       first strong character, so a Latin name inside a Persian screen reads left to right and
+       keeps its own trailing punctuation instead of donating it to the paragraph. */
+    unicode-bidi: plaintext;
+  }
+  a.name {
+    text-decoration: none;
+    border-radius: var(--kern-r-sm);
+    /* WCAG 2.5.8 wants 24px, and a line of 12.5px text is about 18 — with the remove button 26px
+       away, the spacing exception does not save it. The padding grows the hit area and the equal
+       negative margin gives the space back, so the margin box, and therefore the row, is exactly
+       where it was. Same shape as `.name` on the assets table. */
+    padding-block: 4px;
+    margin-block: -4px;
+  }
+  a.name:hover {
+    text-decoration: underline;
+  }
+  .size {
+    /* Muted with a colour, never opacity: a faded row at 0.5 is unreadable whatever its token. */
+    color: var(--kern-ink-500);
+    font-variant-numeric: tabular-nums;
+    /* A size is a Latin number with a Latin unit; it stays left-to-right inside an Arabic panel. */
+    direction: ltr;
+    unicode-bidi: isolate;
+  }
+  .add {
+    display: flex;
+  }
+  .dialog-body {
+    margin: 0;
+    font-size: 13.5px;
+    line-height: 1.55;
+    color: var(--kern-ink-700);
+  }
+</style>