kempo-inventory 0.4.0 → 0.4.2

package/admin/index.page.html

@@ -4,6 +4,7 @@ locked: true
 <page title="Inventory - Admin">
 <content>
   <script type="module" src="/kempo-ui/components/Table.js"></script>
+  <script type="module" src="/kempo-ui/components/Tabs.js"></script>
   <script type="module" src="/kempo-ui/components/controls/TcSearch.js"></script>
   <script type="module" src="/kempo-ui/components/controls/TcFilters.js"></script>
   <script type="module" src="/kempo-ui/components/controls/TcFieldSortHide.js"></script>
@@ -17,17 +18,27 @@ locked: true
   <script type="module" src="/kempo-ui/components/Toggle.js"></script>
   <script type="module" src="/kempo-ui/components/Combobox.js"></script>
   <script type="module" src="/kempo-ui/components/Icon.js"></script>
+  <script type="module" src="/kempo-ui/components/controls/TcOpen.js"></script>
   <script type="module" src="/kempo/components/Permission.js"></script>
   <script type="module" src="/inventory/components/RowAction.js"></script>
+  <script type="module" src="/inventory/components/FieldsManager.js"></script>
+  <script type="module" src="/inventory/components/ToolbarControl.js"></script>
 
   <h1 class="mb">Inventory</h1>
 
+  <k-tabs active="items" hash-routing>
+    <k-tab id="itemsTab" for="items">Items</k-tab>
+    <k-tab id="categoriesTab" for="categories">Categories</k-tab>
+    <k-tab id="fieldsTab" for="fields">Fields</k-tab>
+
+    <k-tab-content id="itemsContent" name="items">
   <!--
     Everything that acts on the table lives in the table: search, filters and the buttons above it,
     paging below it, and the row actions beside each record.
   -->
   <k-table
     id="itemsTable"
+    open-on-click
     enable-pages
     page-size="25"
     page-size-options="[10,25,50,100]"
@@ -40,14 +51,10 @@ locked: true
       <kc-tc-field-sort-hide></kc-tc-field-sort-hide>
       <div class="flex"></div>
       <k-permission has="kempo-inventory:fields:manage">
-        <button id="importBtn" class="btn m0"><k-icon name="download" rotation="180"></k-icon> Import</button>
-      </k-permission>
-      <k-permission has="kempo-inventory:fields:manage">
-        <button id="exportBtn" class="btn m0"><k-icon name="download"></k-icon> Export</button>
+        <k-inventory-toolbar-control action="import"><k-icon name="download" rotation="180"></k-icon> Import</k-inventory-toolbar-control>
       </k-permission>
-      <a href="/admin/extension/kempo-inventory/categories" class="btn"><k-icon name="folder"></k-icon> Categories</a>
       <k-permission has="kempo-inventory:fields:manage">
-        <a href="/admin/extension/kempo-inventory/fields" class="btn"><k-icon name="fields"></k-icon> Fields</a>
+        <k-inventory-toolbar-control action="export"><k-icon name="download"></k-icon> Export</k-inventory-toolbar-control>
       </k-permission>
       <k-permission has="kempo-inventory:items:create">
         <button id="newItemBtn" class="primary m0"><k-icon name="add"></k-icon> New Item</button>
@@ -66,6 +73,49 @@ locked: true
       <div><kc-tc-page-size></kc-tc-page-size></div>
     </div>
   </k-table>
+    </k-tab-content>
+
+    <k-tab-content id="categoriesContent" name="categories">
+      <p class="mb tc-muted">
+        An item's category is the text in its Category box, so a category appears here as soon as an item uses it.
+        Here you can give each one a picture and a description, set up fields that only items in it have (the gear button), rename it (which updates its items, and merges it
+        into another category if you pick a name that already exists), or add one before any item uses it.
+      </p>
+
+      <k-table id="categoriesTable" enable-pages page-size="25" page-size-options="[10,25,50]" placeholder="No categories yet." filtered-placeholder="No categories match your search.">
+        <div slot="top" class="d-f full" style="align-items: center; gap: var(--spacer_h); flex-wrap: wrap;">
+          <kc-tc-search style="width: 16rem"></kc-tc-search>
+          <kc-tc-filters></kc-tc-filters>
+          <kc-tc-field-sort-hide></kc-tc-field-sort-hide>
+          <div class="flex"></div>
+          <k-permission has="kempo-inventory:items:update">
+            <button id="newCategoryBtn" class="primary m0"><k-icon name="add"></k-icon> New Category</button>
+          </k-permission>
+        </div>
+        <div class="d-f full" style="align-items: center;">
+          <div>
+            <kc-tc-first-page></kc-tc-first-page>
+            <kc-tc-prev-page></kc-tc-prev-page>
+            <kc-tc-next-page></kc-tc-next-page>
+            <kc-tc-last-page></kc-tc-last-page>
+          </div>
+          <div class="flex"></div>
+          <div><kc-tc-page-select></kc-tc-page-select></div>
+          <div class="flex"></div>
+          <div><kc-tc-page-size></kc-tc-page-size></div>
+        </div>
+      </k-table>
+      <p id="uncategorised" class="mt tc-muted"></p>
+    </k-tab-content>
+
+    <k-tab-content id="fieldsContent" name="fields">
+      <k-inventory-fields></k-inventory-fields>
+    </k-tab-content>
+
+    <location name="inventory-admin-tabs" />
+  </k-tabs>
+
+  <k-permission-target has="kempo-inventory:fields:manage" target="#fieldsTab, #fieldsContent"></k-permission-target>
 
   <script type="module">
     import { getItems, deleteItem, getFields } from '/inventory/sdk.js';
@@ -90,8 +140,9 @@ locked: true
       $control.setAttribute('slot', slot);
       for(const [name, value] of Object.entries(attributes)) $control.setAttribute(name, value);
       $table.appendChild($control);
+      return $control;
     };
-    if(can('items:update')) addControl('k-inventory-row-action', 'before', { action: 'edit', icon: 'edit', title: 'Edit' });
+    if(can('items:update')) addControl('kc-tc-open', 'before', { title: 'Edit' }).appendChild(Object.assign(document.createElement('k-icon'), { name: 'edit' }));
     if(can('quantity:adjust')) addControl('k-inventory-row-action', 'before', { action: 'adjust', icon: 'repeat', title: 'Adjust quantity' });
     if(can('items:delete')){
       $table.setAttribute('request-delete', '');
@@ -111,7 +162,7 @@ locked: true
       user-supplied text itself.
     */
     const decorate = (item, ctx) => {
-      const record = { ...item, qtyText: String(item.quantity), tagsText: item.tags.join(', '), ownerText: item.owner };
+      const record = { ...item, qtyText: String(item.quantity), tagsText: item.tags.join(', '), ownerText: item.owner, ...(can('items:update') && { _url: `/admin/extension/kempo-inventory/edit?id=${encodeURIComponent(item.id)}` }) };
       /* Only the fields that apply to this item's category; a column another category's items fill stays blank here. */
       for(const field of applicableFields(fields, item.category).filter(f => f.listed)) record[`f_${field.key}`] = displayValue(field, item.fields[field.key], ctx);
       return record;
@@ -119,7 +170,7 @@ locked: true
 
     const columns = () => [
       { name: 'sku', label: 'SKU', size: 130, editable: false },
-      { name: 'name', label: 'Name', size: 240, editable: false },
+      { name: 'name', label: 'Name', editable: false },
       { name: 'category', label: 'Category', size: 140, editable: false },
       { name: 'qtyText', label: 'Quantity', size: 100, editable: false },
       { name: 'tagsText', label: 'Tags', size: 160, editable: false },
@@ -185,13 +236,13 @@ locked: true
     });
 
     $table.addEventListener('itemAction', ({ detail: { action, record } }) => {
-      /* Editing is a page of its own, like adding: a dialog is too easy to dismiss and loses what was entered. */
-      if(action === 'edit') location.href = `/admin/extension/kempo-inventory/edit?id=${encodeURIComponent(record.id)}`;
       if(action === 'adjust') openAdjustDialog({ item: record, onSaved: load });
     });
 
-    document.getElementById('importBtn')?.addEventListener('click', () => openImportDialog({ onDone: load }));
-    document.getElementById('exportBtn')?.addEventListener('click', () => openExportDialog());
+    $table.addEventListener('toolbarAction', ({ detail: { action } }) => {
+      if(action === 'import') openImportDialog({ onDone: load });
+      else if(action === 'export') openExportDialog();
+    });
     /* Adding an item is a page of its own: a dialog is too easy to dismiss and loses everything entered. */
     document.getElementById('newItemBtn')?.addEventListener('click', () => { location.href = '/admin/extension/kempo-inventory/new'; });
 
@@ -199,5 +250,190 @@ locked: true
     await load();
     showFlash();
   </script>
+
+  <script type="module">
+    import { getCategories, saveCategory, deleteCategory } from '/inventory/sdk.js';
+    import { getAllCurrentUserPermissions } from '/kempo/sdk.js';
+    import { html } from '/kempo-ui/lit-all.min.js';
+    import Toast from '/kempo-ui/components/Toast.js';
+    import Dialog from '/kempo-ui/components/Dialog.js';
+    import { tagsValue, suggestTags, readTags, lowerTagInput, lowerTagChips } from '/inventory/components/ItemFields.js';
+
+    await window.customElements.whenDefined('k-table');
+    const $table = document.getElementById('categoriesTable');
+
+    const [, permData] = await getAllCurrentUserPermissions();
+    const canEdit = new Set(permData?.permissions ?? []).has('kempo-inventory:items:update');
+
+    const manageFields = document.createElement('k-inventory-row-action');
+    manageFields.setAttribute('slot', 'before');
+    manageFields.setAttribute('action', 'fields');
+    manageFields.setAttribute('icon', 'settings');
+    manageFields.setAttribute('title', 'Fields for this category');
+    $table.appendChild(manageFields);
+
+    if(canEdit){
+      const edit = document.createElement('k-inventory-row-action');
+      edit.setAttribute('slot', 'before');
+      edit.setAttribute('action', 'edit');
+      edit.setAttribute('icon', 'edit');
+      edit.setAttribute('title', 'Edit');
+      $table.appendChild(edit);
+
+      $table.setAttribute('request-delete', '');
+      const del = document.createElement('kc-tc-delete-record');
+      del.setAttribute('slot', 'after');
+      $table.appendChild(del);
+    }
+
+    const keyOf = name => String(name ?? '').trim().replace(/\s+/g, ' ').toLowerCase();
+    let categories = [];
+
+    /* Plain strings only, so a name or description can never be read as markup. */
+    const decorate = c => ({
+      ...c,
+      itemsText: String(c.count),
+      imageText: c.image ? 'Yes' : '',
+      fieldsText: String(c.fields),
+      tagsText: c.tags.join(', '),
+      ownerText: c.owner,
+    });
+
+    const load = async () => {
+      const [error, data] = await getCategories({ includeEmpty: true });
+      if(error){
+        Toast.error(error.msg || 'Failed to load the categories');
+        return;
+      }
+      categories = data.categories;
+      $table.setData({
+        records: categories.map(decorate),
+        fields: [
+          { name: 'name', label: 'Name', size: 220, editable: false },
+          { name: 'itemsText', label: 'Items', size: 80, editable: false },
+          { name: 'fieldsText', label: 'Fields', size: 80, editable: false },
+          { name: 'description', label: 'Description', size: 300, editable: false },
+          { name: 'tagsText', label: 'Tags', size: 200, editable: false },
+          { name: 'imageText', label: 'Image', size: 80, editable: false },
+          ...(categories.some(c => c.owner) ? [{ name: 'ownerText', label: 'Managed by', size: 170, editable: false }] : []),
+        ],
+      });
+      document.getElementById('uncategorised').textContent = data.uncategorised
+        ? `${data.uncategorised} item${data.uncategorised === 1 ? ' has' : 's have'} no category.`
+        : '';
+    };
+
+    /* One dialog for new and edit. Saving always sends what the dialog shows, so it is the source of truth. */
+    const openDialog = category => {
+      const editing = Boolean(category);
+      const $dialog = Dialog.create(html`
+        <div class="p" style="max-height: calc(100vh - 14rem); overflow-y: auto;">
+          <div class="mb">
+            <label class="d-b mb-sm" for="cat-name">Name *</label>
+            <input type="text" id="cat-name" class="full" maxlength="100" ?disabled=${editing && category.owner} .value=${category?.name ?? ''}>
+            ${editing && category.owner ? html`<small class="d-b tc-muted">Managed by the ${category.owner} extension, which is the only one that can rename it. You can still change everything else.</small>` : ''}
+            ${editing && !category.owner && category.count ? html`<small class="d-b tc-muted">Renaming also changes the category on its ${category.count} item${category.count === 1 ? '' : 's'}.</small>` : ''}
+          </div>
+          <div class="mb">
+            <label class="d-b mb-sm" for="cat-description">Description</label>
+            <textarea id="cat-description" class="full" rows="3" maxlength="500" .value=${category?.description ?? ''}></textarea>
+          </div>
+          <div class="mb">
+            <label class="d-b mb-sm" for="cat-tags">Tags</label>
+            <k-tags id="cat-tags" .value=${tagsValue(category?.tags)} .getSuggestions=${suggestTags} @input=${lowerTagInput} @change=${lowerTagChips}></k-tags>
+          </div>
+          <div class="mb">
+            <label class="d-b mb-sm">Image</label>
+            <k-inventory-media-field id="cat-image" ratio-for="category" .max=${1} .value=${category?.image ? [category.image.id] : []} .assets=${category?.image ? { [category.image.id]: category.image } : {}}></k-inventory-media-field>
+          </div>
+        </div>
+      `, {
+        title: editing ? `Edit ${category.name}` : 'New Category',
+        confirmText: editing ? 'Save' : 'Create',
+        cancelText: 'Cancel',
+        confirmAction: async event => {
+          event.keepDialogOpen = true;
+          const name = $dialog.querySelector('#cat-name').value.trim();
+          if(!name){
+            Toast.error('A name is required');
+            return;
+          }
+          const changes = {
+            description: $dialog.querySelector('#cat-description').value,
+            tags: readTags($dialog.querySelector('#cat-tags')),
+            image: $dialog.querySelector('#cat-image').value[0] ?? null,
+          };
+
+          let error, result;
+          if(editing){
+            if(name !== category.name && !category.owner) changes.newName = name;
+            [error, result] = await saveCategory(category.name, changes);
+          } else {
+            /* Creating must not silently overwrite one that is already there. */
+            if(categories.some(c => keyOf(c.name) === keyOf(name))){
+              Toast.error('That category already exists. Edit it instead');
+              return;
+            }
+            [error, result] = await saveCategory(name, changes);
+          }
+          if(error){
+            Toast.error(error.msg || 'Failed to save the category');
+            return;
+          }
+          $dialog.close();
+          const moved = result.category.moved;
+          Toast.success(!editing ? 'Category created' : moved ? `Saved. ${moved} item${moved === 1 ? '' : 's'} updated` : 'Category saved');
+          load();
+        },
+      });
+    };
+
+    $table.addEventListener('itemAction', ({ detail: { action, record } }) => {
+      if(action === 'edit') openDialog(categories.find(c => c.key === record.key));
+      if(action === 'fields'){
+        document.querySelector('k-tabs').active = 'fields';
+        history.pushState(null, '', '#fields');
+        document.querySelector('k-inventory-fields').setPicked([record.key]);
+      }
+    });
+    document.getElementById('newCategoryBtn')?.addEventListener('click', () => openDialog(null));
+
+    $table.addEventListener('requestDelete', ({ detail: { records, approve, reject } }) => {
+      const [record] = records;
+      if(record.owner){
+        reject();
+        Toast.error(`"${record.name}" is managed by the ${record.owner} extension and cannot be deleted here`);
+        return;
+      }
+      if(record.fields){
+        reject();
+        Toast.error(`"${record.name}" still has ${record.fields} field${record.fields === 1 ? '' : 's'}. Delete ${record.fields === 1 ? 'it' : 'them'} first`);
+        return;
+      }
+      if(record.count){
+        reject();
+        Toast.error(`${record.count} item${record.count === 1 ? ' is' : 's are'} still in "${record.name}". Move or clear ${record.count === 1 ? 'it' : 'them'} first`);
+        return;
+      }
+      Dialog.confirm(`Delete the category "${record.name}"? Its image and description are removed. This action cannot be undone.`, async confirmed => {
+        if(!confirmed){ reject(); return; }
+        const [error] = await deleteCategory(record.name);
+        if(error){
+          reject();
+          Toast.error(error.msg || 'Failed to delete the category');
+          return;
+        }
+        approve();
+        Toast.success('Category deleted');
+        load();
+      });
+    });
+
+    const categoriesPane = document.querySelector('k-tab-content[name="categories"]');
+    if(categoriesPane.active) load();
+    else document.querySelector('k-tabs').addEventListener('tabfirstshown', ({ detail }) => {
+      if(detail.tab === 'categories') load();
+    });
+  </script>
 </content>
 </page>

package/admin/nav.global.html

@@ -1,6 +1,3 @@
 <content id="kempo-inventory-nav" name="Inventory" owner="kempo-inventory" enabled="true" locked="true" location="admin-nav-extensions" priority="87">
 <k-aside-item icon-src="/admin/extension/kempo-inventory/icons/inventory.svg" group="Products" href="/admin/extension/kempo-inventory/" no-expand>Inventory</k-aside-item>
 </content>
-<content id="kempo-inventory-categories-nav" name="Inventory Categories" owner="kempo-inventory" enabled="true" locked="true" location="admin-nav-extensions" priority="86">
-<k-aside-item icon-src="/admin/extension/kempo-inventory/icons/inventory-categories.svg" group="Products" href="/admin/extension/kempo-inventory/categories/" no-expand>Inventory Categories</k-aside-item>
-</content>

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "kempo-inventory",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "description": "A basic inventory management system for kempo cms",
   "license": "MIT",
-  "author": "Dustin Poissant",
+  "author": "Dustin Poissant <dustinpoissant@gmail.com>",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/dustinpoissant/kempo-inventory.git"
@@ -39,8 +39,8 @@
     "drizzle-orm": "^0.45.2"
   },
   "peerDependencies": {
-    "kempo": ">=4.7.0",
-    "kempo-ui": ">=0.6.0",
+    "kempo": ">=4.9.10",
+    "kempo-ui": ">=0.7.0",
     "kempo-media": ">=0.3.0",
     "kempo-files": ">=0.1.3",
     "kempo-thumbs": ">=0.1.3"

package/public/components/FieldsManager.js

@@ -0,0 +1,340 @@
+import ShadowComponent from '/kempo-ui/components/ShadowComponent.js';
+import { html, css, nothing, render } from '/kempo-ui/lit-all.min.js';
+import '/kempo-ui/components/Table.js';
+import '/kempo-ui/components/controls/TcDeleteRecord.js';
+import '/kempo-ui/components/controls/TcSearch.js';
+import '/kempo-ui/components/Toggle.js';
+import '/kempo-ui/components/Icon.js';
+import '/kempo-ui/components/FilterList.js';
+import '/kempo-ui/components/FilterItem.js';
+import '/inventory/components/ToolbarControl.js';
+import '/kempo/components/Permission.js';
+import Toast from '/kempo-ui/components/Toast.js';
+import Dialog from '/kempo-ui/components/Dialog.js';
+import '/inventory/components/RowAction.js';
+import { getFields, createField, updateField, deleteField, getCategories } from '/inventory/sdk.js';
+
+/*
+  The item fields, as a tab of the inventory page (served at /inventory/components/FieldsManager.js). A field you add for every item
+  appears on all of them; a field added for one category only appears on items in that category. Loads when its tab is first shown.
+
+    <k-inventory-fields></k-inventory-fields>
+*/
+const TYPE_LABELS = {
+  text: 'Text',
+  longtext: 'Long text',
+  number: 'Number',
+  boolean: 'Yes / No',
+  date: 'Date',
+  color: 'Color',
+  rating: 'Rating (stars)',
+  select: 'Choice list',
+  item: 'Link to another item',
+  media: 'Photos / files',
+};
+
+/* Same rule the server applies, so the key preview matches what gets saved. */
+const keyFromLabel = label => {
+  const words = String(label ?? '').replace(/[^a-zA-Z0-9]+/g, ' ').trim().split(' ').filter(Boolean);
+  const key = words.map((w, i) => i === 0 ? w.charAt(0).toLowerCase() + w.slice(1) : w.charAt(0).toUpperCase() + w.slice(1)).join('');
+  return /^[a-z]/.test(key) ? key.slice(0, 40) : '';
+};
+
+const decorate = field => ({
+  ...field,
+  typeText: TYPE_LABELS[field.type] ?? field.type,
+  requiredText: field.required ? 'Yes' : 'No',
+  listedText: field.listed ? 'Yes' : 'No',
+  ownerText: field.owner || 'Custom',
+  scopeText: field.category ? field.categoryName : 'Every item',
+  optionsText: field.options.join(', '),
+  cropText: field.type === 'media' ? [field.imageRatio ? field.imageRatio.replace(' / ', ':') : '', field.imageMax ? `max ${field.imageMax}px` : ''].filter(Boolean).join(', ') : '',
+});
+
+export default class FieldsManager extends ShadowComponent {
+  constructor(){
+    super();
+    this.creatableTypes = Object.keys(TYPE_LABELS);
+    this.conversions = {};
+    this.categories = [];
+    this.allFields = [];
+    this.loaded = false;
+    /* '' = every field, '*' = the default fields only, otherwise a category key. The category link on the Categories tab sets it. */
+    const wanted = new URLSearchParams(location.search).get('category');
+    this.scope = wanted ? wanted.trim().replace(/\s+/g, ' ').toLowerCase() : '';
+    this.picked = this.scope ? [this.scope] : [];
+  }
+
+  connectedCallback(){
+    super.connectedCallback();
+    if(this.hasAttribute('category')) this.setPicked([this.getAttribute('category')]);
+    const pane = this.closest('k-tab-content');
+    // Loads when its tab is first opened, so a tab nobody opens makes no requests.
+    if(!pane || pane.active) this.start();
+    else this.closest('k-tabs')?.addEventListener('tabfirstshown', ({ detail }) => {
+      if(detail.tab === pane.name) this.start();
+    });
+  }
+
+  firstUpdated(){
+    this.table.addEventListener('requestDelete', this.requestDelete);
+    this.table.addEventListener('toolbarAction', ({ detail: { action } }) => {
+      if(action === 'scope') this.picked.length ? this.setPicked([]) : this.openScopePicker();
+    });
+    this.table.addEventListener('itemAction', ({ detail: { action, record } }) => {
+      if(action === 'edit') this.openFieldDialog(record);
+    });
+    this.renderRoot.querySelector('#newFieldBtn').addEventListener('click', () => this.openFieldDialog(null));
+  }
+
+  get table(){
+    return this.renderRoot.querySelector('#fieldsTable');
+  }
+
+  start = () => {
+    if(this.loaded) return;
+    this.loaded = true;
+    this.load();
+  };
+
+  load = async () => {
+    const [categoriesError, categoryData] = await getCategories({ includeEmpty: true });
+    if(!categoriesError) this.categories = categoryData.categories;
+    const [error, data] = await getFields();
+    if(error){
+      Toast.error(error.msg || 'Failed to load fields');
+      return;
+    }
+    this.creatableTypes = data.types;
+    this.conversions = data.conversions ?? {};
+    this.allFields = data.fields;
+    this.requestUpdate();
+    this.renderTable();
+  };
+
+  static styles = css`
+    .scope.selected:hover { text-decoration: line-through; }
+  `;
+
+  scopeLabel(){
+    const labels = new Map(this.scopeOptions());
+    return this.picked.map(key => labels.get(key) ?? key).join(', ');
+  }
+
+  /* A fixed-height, filterable list in a dialog: picking one closes it, and the choice shows as a chip above the table. */
+  openScopePicker = () => {
+    const $dialog = Dialog.create(html`
+      <div class="p">
+        <input type="search" class="full m0 rb0" placeholder="Search Categories" aria-label="Search Categories" @input=${event => $dialog.querySelector('k-filter-list').filter(event.target.value)}>
+        <k-filter-list class="bl br bb" style="display: block; height: 20rem; overflow-y: auto;">
+          ${this.scopeOptions().map(([key, label]) => html`
+            <k-filter-item filter-keywords=${label}><a href="#" class="d-b px pyh no-link bb r0" @click=${event => { event.preventDefault(); $dialog.close(); this.setPicked([key]); }}>${label}</a></k-filter-item>
+          `)}
+        </k-filter-list>
+      </div>
+    `, { title: 'Show fields for', confirmText: 'Close', cancelText: '' });
+  };
+
+  setPicked = keys => {
+    this.picked = keys;
+    this.scope = keys.length === 1 ? keys[0] : '';
+    this.requestUpdate();
+    this.renderTable();
+  };
+
+  /* The filter's choices: the default fields, then each category, as the names the tags show. */
+  scopeOptions(){
+    return [['*', 'Every item (default fields)'], ...this.categories.map(c => [c.key, c.name])];
+  }
+
+  renderTable(){
+    const visible = this.allFields.filter(f => this.picked.length === 0 || this.picked.some(key => key === '*' ? !f.category : f.category === key));
+    this.table?.setData({
+      records: visible.map(decorate),
+      fields: [
+        { name: 'label', label: 'Label', size: 200, editable: false },
+        { name: 'key', label: 'Key', size: 150, editable: false },
+        { name: 'scopeText', label: 'Applies to', size: 170, editable: false },
+        { name: 'typeText', label: 'Type', size: 170, editable: false },
+        { name: 'requiredText', label: 'Required', size: 90, editable: false },
+        { name: 'listedText', label: 'In list', size: 80, editable: false },
+        { name: 'optionsText', label: 'Choices', size: 200, editable: false },
+        { name: 'cropText', label: 'Photo crop', size: 150, editable: false },
+        { name: 'ownerText', label: 'Managed by', size: 170, editable: false },
+      ],
+    });
+  }
+
+  requestDelete = ({ detail: { records, approve, reject } }) => {
+    const [record] = records;
+    if(record.owner){
+      reject();
+      Toast.error(`"${record.label}" is managed by the ${record.owner} extension and cannot be deleted here`);
+      return;
+    }
+    Dialog.confirm(`Delete the field "${record.label}"? Its value is removed from ${record.category ? 'every item in that category' : 'every item'}. This action cannot be undone.`, async confirmed => {
+      if(!confirmed){ reject(); return; }
+      const [error] = await deleteField(record.key, { category: record.category });
+      if(error){
+        reject();
+        Toast.error(error.msg || 'Failed to delete field');
+        return;
+      }
+      approve();
+      Toast.success('Field deleted');
+      this.load();
+    });
+  };
+
+  openFieldDialog(field){
+    const editing = Boolean(field);
+    const managed = editing && Boolean(field.owner);
+    let keyTouched = editing;
+    const categories = this.categories;
+    const scope = this.scope;
+
+    const $dialog = Dialog.create(html`
+      <div class="p" style="max-height: calc(100vh - 14rem); overflow-y: auto;">
+        ${managed ? html`<p class="mb tc-muted">Managed by the ${field.owner} extension. You can rename it, change its description and choose whether it shows in the list.</p>` : ''}
+        <div class="mb">
+          <label class="d-b mb-sm" for="fld-label">Label *</label>
+          <input type="text" id="fld-label" class="full" .value=${field?.label ?? ''}
+            @input=${e => {
+              if(keyTouched) return;
+              $dialog.querySelector('#fld-key').value = keyFromLabel(e.target.value);
+            }}>
+        </div>
+        <div class="mb">
+          <label class="d-b mb-sm" for="fld-scope">Applies to</label>
+          <select id="fld-scope" class="full" ?disabled=${editing}>
+            <option value="" ?selected=${editing ? !field.category : scope === '' || scope === '*'}>Every item</option>
+            ${categories.map(c => html`<option value=${c.name} ?selected=${editing ? c.key === field.category : c.key === scope}>Only ${c.name}</option>`)}
+          </select>
+        </div>
+        <div class="d-f mb" style="gap: var(--spacer);">
+          <div class="flex">
+            <label class="d-b mb-sm" for="fld-key">Key *</label>
+            <input type="text" id="fld-key" class="full" ?disabled=${editing} .value=${field?.key ?? ''}
+              @input=${() => { keyTouched = true; }}>
+          </div>
+          <div class="flex">
+            <label class="d-b mb-sm" for="fld-type">Type *</label>
+            <select id="fld-type" class="full" ?disabled=${editing && (managed || !this.conversions[field.type]?.length)}>
+              ${Object.entries(TYPE_LABELS).filter(([value]) => editing
+                ? value === field.type || (!managed && this.conversions[field.type]?.includes(value))
+                : this.creatableTypes.includes(value)).map(([value, label]) => html`<option value=${value} ?selected=${value === (field?.type ?? 'text')}>${label}</option>`)}
+            </select>
+          </div>
+        </div>
+        <div id="fld-options-row" class="mb" style="display: none;">
+          <label class="d-b mb-sm" for="fld-options">Choices (one per line)</label>
+          <textarea id="fld-options" class="full" rows="4" ?disabled=${managed} .value=${field?.options.join('\n') ?? ''}></textarea>
+        </div>
+        <div id="fld-crop-row" class="mb" style="display: none;">
+          <div class="d-f" style="gap: var(--spacer);">
+            <div class="flex">
+              <label class="d-b mb-sm" for="fld-ratio">Force photo shape</label>
+              <input type="text" id="fld-ratio" class="full" placeholder="e.g. 1:1, 4:3, 16:9" autocomplete="off" .value=${field?.imageRatio ? field.imageRatio.replace(' / ', ':') : ''}>
+            </div>
+            <div style="width: 9rem;">
+              <label class="d-b mb-sm" for="fld-max">Max size (px)</label>
+              <input type="number" id="fld-max" class="full" min="0" max="8000" step="1" placeholder="no limit" .value=${field?.imageMax || ''}>
+            </div>
+          </div>
+          <small class="d-b tc-muted">Photos are cropped to this shape as they are added (a cropper opens, locked to it) and kept within the maximum size. Leave the shape empty to allow any shape; with only a maximum, photos are just scaled down.</small>
+        </div>
+        <div id="fld-suggest-row" class="mb" style="display: none;">
+          <k-toggle id="fld-suggest" .value=${Boolean(field?.suggest)}>Suggest values already used</k-toggle>
+          <small class="d-b tc-muted">Offers values from other items as you type, so repeated entries such as a brand stay consistent. Anything new can still be typed.</small>
+        </div>
+        <div class="mb">
+          <label class="d-b mb-sm" for="fld-description">Description</label>
+          <input type="text" id="fld-description" class="full" .value=${field?.description ?? ''}>
+        </div>
+        <div class="d-f mb" style="gap: var(--spacer); align-items: center;">
+          ${managed ? '' : html`<k-toggle id="fld-required" .value=${Boolean(field?.required)}>Required</k-toggle>`}
+          <k-toggle id="fld-listed" .value=${field ? Boolean(field.listed) : true}>Show in list</k-toggle>
+          <div class="flex"></div>
+          <div style="width: 7rem;">
+            <label class="d-b mb-sm" for="fld-position">Order</label>
+            <input type="number" id="fld-position" class="full" step="1" .value=${field?.position ?? 0}>
+          </div>
+        </div>
+      </div>
+    `, {
+      title: editing ? `Edit ${field.label}` : 'New Field',
+      confirmText: editing ? 'Save' : 'Create',
+      cancelText: 'Cancel',
+      confirmAction: async event => {
+        event.keepDialogOpen = true;
+        const value = id => $dialog.querySelector(id).value;
+        const data = {
+          label: value('#fld-label').trim(),
+          description: value('#fld-description'),
+          listed: $dialog.querySelector('#fld-listed').value === true,
+          suggest: $dialog.querySelector('#fld-suggest').value === true,
+          position: Number(value('#fld-position') || 0),
+        };
+        if($type.value === 'media'){
+          data.imageRatio = value('#fld-ratio').trim();
+          data.imageMax = Number(value('#fld-max') || 0);
+        }
+        if(!managed){
+          data.required = $dialog.querySelector('#fld-required').value === true;
+          data.options = value('#fld-options').split('\n').map(o => o.trim()).filter(Boolean);
+        }
+        if(!data.label){
+          Toast.error('A label is required');
+          return;
+        }
+        let error;
+        if(editing){
+          if(value('#fld-type') !== field.type) data.type = value('#fld-type');
+          [error] = await updateField(field.key, data, { category: field.category });
+        } else {
+          [error] = await createField({ ...data, key: value('#fld-key').trim(), type: value('#fld-type'), category: value('#fld-scope') });
+        }
+        if(error){
+          Toast.error(error.msg || 'Failed to save field');
+          return;
+        }
+        $dialog.close();
+        Toast.success(editing ? 'Field saved' : 'Field created');
+        this.load();
+      },
+    });
+
+    const $type = $dialog.querySelector('#fld-type');
+    const syncOptions = () => {
+      $dialog.querySelector('#fld-options-row').style.display = $type.value === 'select' ? '' : 'none';
+      $dialog.querySelector('#fld-suggest-row').style.display = $type.value === 'text' ? '' : 'none';
+      $dialog.querySelector('#fld-crop-row').style.display = $type.value === 'media' ? '' : 'none';
+    };
+    $type.addEventListener('change', syncOptions);
+    syncOptions();
+  }
+
+  render(){
+    return html`
+      <p class="mb tc-muted">
+        Every item has a SKU, name, category, quantity and description. A field you add for <strong>every item</strong> appears on all of them;
+        a field you add for one category (a paint's "Finish", say) only appears on items in that category.
+        Fields added by other extensions are managed by those extensions.
+      </p>
+      <k-table id="fieldsTable" request-delete enable-pages page-size="25" page-size-options="[10,25,50,100]" placeholder="No custom fields yet." filtered-placeholder="No fields match your search.">
+        <k-inventory-row-action slot="before" action="edit" icon="edit" title="Edit"></k-inventory-row-action>
+        <kc-tc-delete-record slot="after"></kc-tc-delete-record>
+        <div slot="top" class="d-f full" style="align-items: center; gap: var(--spacer_h); flex-wrap: wrap;">
+          <kc-tc-search style="width: 16rem"></kc-tc-search>
+          ${this.hasAttribute('category') ? nothing : html`<k-inventory-toolbar-control action="scope" class="scope${this.picked.length ? ' selected' : ''}">${this.picked.length ? html`<k-icon name="close"></k-icon> ${this.scopeLabel()}` : html`<k-icon name="filter"></k-icon> Category`}</k-inventory-toolbar-control>`}
+          <div class="flex"></div>
+          <k-permission has="kempo-inventory:fields:manage">
+            <button id="newFieldBtn" class="primary m0"><k-icon name="add"></k-icon> New Field</button>
+          </k-permission>
+        </div>
+      </k-table>
+    `;
+  }
+}
+
+customElements.define('k-inventory-fields', FieldsManager);

package/public/components/ToolbarControl.js

@@ -0,0 +1,31 @@
+import ButtonControl from '/kempo-ui/components/controls/ButtonControl.js';
+import { html } from '/kempo-ui/lit-all.min.js';
+import '/kempo-ui/components/Icon.js';
+
+/*
+  A labelled control for the table's top bar, drawn like the table's own controls. It reports its action as a
+  `toolbarAction` event on the table: { action }. The page does the work.
+
+    <k-inventory-toolbar-control action="export"><k-icon name="download"></k-icon> Export</k-inventory-toolbar-control>
+*/
+export default class ToolbarControl extends ButtonControl {
+  static properties = {
+    ...ButtonControl.properties,
+    action: { type: String },
+  };
+
+  constructor(){
+    super();
+    this.action = '';
+  }
+
+  handleAction(){
+    this.host?.dispatchEvent(new CustomEvent('toolbarAction', { detail: { action: this.action } }));
+  }
+
+  render(){
+    return html`<slot></slot>`;
+  }
+}
+
+customElements.define('k-inventory-toolbar-control', ToolbarControl);

package/admin/categories/index.page.html

@@ -1,229 +0,0 @@
-<!--
-locked: true
--->
-<page title="Inventory Categories - Admin">
-<content>
-  <script type="module" src="/kempo-ui/components/Table.js"></script>
-  <script type="module" src="/kempo-ui/components/controls/TcDeleteRecord.js"></script>
-  <script type="module" src="/kempo-ui/components/controls/TcSearch.js"></script>
-  <script type="module" src="/kempo-ui/components/controls/TcFirstPage.js"></script>
-  <script type="module" src="/kempo-ui/components/controls/TcPrevPage.js"></script>
-  <script type="module" src="/kempo-ui/components/controls/TcNextPage.js"></script>
-  <script type="module" src="/kempo-ui/components/controls/TcLastPage.js"></script>
-  <script type="module" src="/kempo-ui/components/controls/TcPageSelect.js"></script>
-  <script type="module" src="/kempo-ui/components/controls/TcPageSize.js"></script>
-  <script type="module" src="/kempo-ui/components/Icon.js"></script>
-  <script type="module" src="/kempo/components/Permission.js"></script>
-  <script type="module" src="/inventory/components/RowAction.js"></script>
-
-  <div class="d-f mb" style="align-items: center; gap: var(--spacer);">
-    <a href="/admin/extension/kempo-inventory/" class="btn"><k-icon name="arrow" direction="left"></k-icon> Inventory</a>
-    <h1 class="flex mb0">Categories</h1>
-  </div>
-  <p class="mb tc-muted">
-    An item's category is the text in its Category box, so a category appears here as soon as an item uses it.
-    Here you can give each one a picture and a description, set up fields that only items in it have (the gear button), rename it (which updates its items, and merges it
-    into another category if you pick a name that already exists), or add one before any item uses it.
-  </p>
-
-  <k-table id="categoriesTable" enable-pages page-size="25" page-size-options="[10,25,50]" placeholder="No categories yet." filtered-placeholder="No categories match your search.">
-    <div slot="top" class="d-f full" style="align-items: center; gap: var(--spacer_h); flex-wrap: wrap;">
-      <kc-tc-search style="width: 16rem"></kc-tc-search>
-      <div class="flex"></div>
-      <k-permission has="kempo-inventory:items:update">
-        <button id="newCategoryBtn" class="primary m0"><k-icon name="add"></k-icon> New Category</button>
-      </k-permission>
-    </div>
-    <div class="d-f full" style="align-items: center;">
-      <div>
-        <kc-tc-first-page></kc-tc-first-page>
-        <kc-tc-prev-page></kc-tc-prev-page>
-        <kc-tc-next-page></kc-tc-next-page>
-        <kc-tc-last-page></kc-tc-last-page>
-      </div>
-      <div class="flex"></div>
-      <div><kc-tc-page-select></kc-tc-page-select></div>
-      <div class="flex"></div>
-      <div><kc-tc-page-size></kc-tc-page-size></div>
-    </div>
-  </k-table>
-  <p id="uncategorised" class="mt tc-muted"></p>
-
-  <script type="module">
-    import { getCategories, saveCategory, deleteCategory } from '/inventory/sdk.js';
-    import { getAllCurrentUserPermissions } from '/kempo/sdk.js';
-    import { html } from '/kempo-ui/lit-all.min.js';
-    import Toast from '/kempo-ui/components/Toast.js';
-    import Dialog from '/kempo-ui/components/Dialog.js';
-    import { tagsValue, suggestTags, readTags, lowerTagInput, lowerTagChips } from '/inventory/components/ItemFields.js';
-
-    await window.customElements.whenDefined('k-table');
-    const $table = document.getElementById('categoriesTable');
-
-    const [, permData] = await getAllCurrentUserPermissions();
-    const canEdit = new Set(permData?.permissions ?? []).has('kempo-inventory:items:update');
-
-    const manageFields = document.createElement('k-inventory-row-action');
-    manageFields.setAttribute('slot', 'before');
-    manageFields.setAttribute('action', 'fields');
-    manageFields.setAttribute('icon', 'settings');
-    manageFields.setAttribute('title', 'Fields for this category');
-    $table.appendChild(manageFields);
-
-    if(canEdit){
-      const edit = document.createElement('k-inventory-row-action');
-      edit.setAttribute('slot', 'before');
-      edit.setAttribute('action', 'edit');
-      edit.setAttribute('icon', 'edit');
-      edit.setAttribute('title', 'Edit');
-      $table.appendChild(edit);
-
-      $table.setAttribute('request-delete', '');
-      const del = document.createElement('kc-tc-delete-record');
-      del.setAttribute('slot', 'after');
-      $table.appendChild(del);
-    }
-
-    const keyOf = name => String(name ?? '').trim().replace(/\s+/g, ' ').toLowerCase();
-    let categories = [];
-
-    /* Plain strings only, so a name or description can never be read as markup. */
-    const decorate = c => ({
-      ...c,
-      itemsText: String(c.count),
-      imageText: c.image ? 'Yes' : '',
-      fieldsText: String(c.fields),
-      tagsText: c.tags.join(', '),
-      ownerText: c.owner,
-    });
-
-    const load = async () => {
-      const [error, data] = await getCategories({ includeEmpty: true });
-      if(error){
-        Toast.error(error.msg || 'Failed to load the categories');
-        return;
-      }
-      categories = data.categories;
-      $table.setData({
-        records: categories.map(decorate),
-        fields: [
-          { name: 'name', label: 'Name', size: 220, editable: false },
-          { name: 'itemsText', label: 'Items', size: 80, editable: false },
-          { name: 'fieldsText', label: 'Fields', size: 80, editable: false },
-          { name: 'description', label: 'Description', size: 300, editable: false },
-          { name: 'tagsText', label: 'Tags', size: 200, editable: false },
-          { name: 'imageText', label: 'Image', size: 80, editable: false },
-          ...(categories.some(c => c.owner) ? [{ name: 'ownerText', label: 'Managed by', size: 170, editable: false }] : []),
-        ],
-      });
-      document.getElementById('uncategorised').textContent = data.uncategorised
-        ? `${data.uncategorised} item${data.uncategorised === 1 ? ' has' : 's have'} no category.`
-        : '';
-    };
-
-    /* One dialog for new and edit. Saving always sends what the dialog shows, so it is the source of truth. */
-    const openDialog = category => {
-      const editing = Boolean(category);
-      const $dialog = Dialog.create(html`
-        <div class="p" style="max-height: calc(100vh - 14rem); overflow-y: auto;">
-          <div class="mb">
-            <label class="d-b mb-sm" for="cat-name">Name *</label>
-            <input type="text" id="cat-name" class="full" maxlength="100" ?disabled=${editing && category.owner} .value=${category?.name ?? ''}>
-            ${editing && category.owner ? html`<small class="d-b tc-muted">Managed by the ${category.owner} extension, which is the only one that can rename it. You can still change everything else.</small>` : ''}
-            ${editing && !category.owner && category.count ? html`<small class="d-b tc-muted">Renaming also changes the category on its ${category.count} item${category.count === 1 ? '' : 's'}.</small>` : ''}
-          </div>
-          <div class="mb">
-            <label class="d-b mb-sm" for="cat-description">Description</label>
-            <textarea id="cat-description" class="full" rows="3" maxlength="500" .value=${category?.description ?? ''}></textarea>
-          </div>
-          <div class="mb">
-            <label class="d-b mb-sm" for="cat-tags">Tags</label>
-            <k-tags id="cat-tags" .value=${tagsValue(category?.tags)} .getSuggestions=${suggestTags} @input=${lowerTagInput} @change=${lowerTagChips}></k-tags>
-          </div>
-          <div class="mb">
-            <label class="d-b mb-sm">Image</label>
-            <k-inventory-media-field id="cat-image" ratio-for="category" .max=${1} .value=${category?.image ? [category.image.id] : []} .assets=${category?.image ? { [category.image.id]: category.image } : {}}></k-inventory-media-field>
-          </div>
-        </div>
-      `, {
-        title: editing ? `Edit ${category.name}` : 'New Category',
-        confirmText: editing ? 'Save' : 'Create',
-        cancelText: 'Cancel',
-        confirmAction: async event => {
-          event.keepDialogOpen = true;
-          const name = $dialog.querySelector('#cat-name').value.trim();
-          if(!name){
-            Toast.error('A name is required');
-            return;
-          }
-          const changes = {
-            description: $dialog.querySelector('#cat-description').value,
-            tags: readTags($dialog.querySelector('#cat-tags')),
-            image: $dialog.querySelector('#cat-image').value[0] ?? null,
-          };
-
-          let error, result;
-          if(editing){
-            if(name !== category.name && !category.owner) changes.newName = name;
-            [error, result] = await saveCategory(category.name, changes);
-          } else {
-            /* Creating must not silently overwrite one that is already there. */
-            if(categories.some(c => keyOf(c.name) === keyOf(name))){
-              Toast.error('That category already exists. Edit it instead');
-              return;
-            }
-            [error, result] = await saveCategory(name, changes);
-          }
-          if(error){
-            Toast.error(error.msg || 'Failed to save the category');
-            return;
-          }
-          $dialog.close();
-          const moved = result.category.moved;
-          Toast.success(!editing ? 'Category created' : moved ? `Saved. ${moved} item${moved === 1 ? '' : 's'} updated` : 'Category saved');
-          load();
-        },
-      });
-    };
-
-    $table.addEventListener('itemAction', ({ detail: { action, record } }) => {
-      if(action === 'edit') openDialog(categories.find(c => c.key === record.key));
-      if(action === 'fields') location.href = `/admin/extension/kempo-inventory/fields?category=${encodeURIComponent(record.name)}`;
-    });
-    document.getElementById('newCategoryBtn')?.addEventListener('click', () => openDialog(null));
-
-    $table.addEventListener('requestDelete', ({ detail: { records, approve, reject } }) => {
-      const [record] = records;
-      if(record.owner){
-        reject();
-        Toast.error(`"${record.name}" is managed by the ${record.owner} extension and cannot be deleted here`);
-        return;
-      }
-      if(record.fields){
-        reject();
-        Toast.error(`"${record.name}" still has ${record.fields} field${record.fields === 1 ? '' : 's'}. Delete ${record.fields === 1 ? 'it' : 'them'} first`);
-        return;
-      }
-      if(record.count){
-        reject();
-        Toast.error(`${record.count} item${record.count === 1 ? ' is' : 's are'} still in "${record.name}". Move or clear ${record.count === 1 ? 'it' : 'them'} first`);
-        return;
-      }
-      Dialog.confirm(`Delete the category "${record.name}"? Its image and description are removed. This action cannot be undone.`, async confirmed => {
-        if(!confirmed){ reject(); return; }
-        const [error] = await deleteCategory(record.name);
-        if(error){
-          reject();
-          Toast.error(error.msg || 'Failed to delete the category');
-          return;
-        }
-        approve();
-        Toast.success('Category deleted');
-        load();
-      });
-    });
-
-    await load();
-  </script>
-</content>
-</page>

package/admin/fields/index.page.html

@@ -1,300 +0,0 @@
-<!--
-locked: true
--->
-<page title="Inventory Fields - Admin">
-<content>
-  <script type="module" src="/kempo-ui/components/Table.js"></script>
-  <script type="module" src="/kempo-ui/components/controls/TcDeleteRecord.js"></script>
-  <script type="module" src="/kempo-ui/components/controls/TcSearch.js"></script>
-  <script type="module" src="/kempo-ui/components/Toggle.js"></script>
-  <script type="module" src="/kempo-ui/components/Icon.js"></script>
-  <script type="module" src="/kempo/components/Permission.js"></script>
-  <script type="module" src="/inventory/components/RowAction.js"></script>
-
-  <div class="d-f mb" style="align-items: center; gap: var(--spacer);">
-    <a href="/admin/extension/kempo-inventory/" class="btn"><k-icon name="arrow" direction="left"></k-icon> Inventory</a>
-    <h1 class="flex mb0">Item Fields</h1>
-  </div>
-  <p class="mb tc-muted">
-    Every item has a SKU, name, category, quantity and description. A field you add for <strong>every item</strong> appears on all of them;
-    a field you add for one category (a paint's "Finish", say) only appears on items in that category.
-    Fields added by other extensions are managed by those extensions.
-  </p>
-
-  <k-table id="fieldsTable" placeholder="No custom fields yet." filtered-placeholder="No fields match your search.">
-    <div slot="top" class="d-f full" style="align-items: center; gap: var(--spacer_h); flex-wrap: wrap;">
-      <kc-tc-search style="width: 16rem"></kc-tc-search>
-      <label class="d-f m0" style="align-items: center; gap: var(--spacer_h);">Show fields for
-        <select id="scopeFilter" style="width: auto;" aria-label="Show fields for"></select>
-      </label>
-      <div class="flex"></div>
-      <k-permission has="kempo-inventory:fields:manage">
-        <button id="newFieldBtn" class="primary m0"><k-icon name="add"></k-icon> New Field</button>
-      </k-permission>
-    </div>
-  </k-table>
-
-  <script type="module">
-    import { getFields, createField, updateField, deleteField, getCategories } from '/inventory/sdk.js';
-    import { html } from '/kempo-ui/lit-all.min.js';
-    import Toast from '/kempo-ui/components/Toast.js';
-    import Dialog from '/kempo-ui/components/Dialog.js';
-
-    await window.customElements.whenDefined('k-table');
-    await window.customElements.whenDefined('k-toggle');
-    const $table = document.getElementById('fieldsTable');
-
-    const TYPE_LABELS = {
-      text: 'Text',
-      longtext: 'Long text',
-      number: 'Number',
-      boolean: 'Yes / No',
-      date: 'Date',
-      color: 'Color',
-      rating: 'Rating (stars)',
-      select: 'Choice list',
-      item: 'Link to another item',
-      media: 'Photos / files',
-    };
-
-    const addControl = (tag, slot, attributes = {}) => {
-      const $control = document.createElement(tag);
-      $control.setAttribute('slot', slot);
-      for(const [name, value] of Object.entries(attributes)) $control.setAttribute(name, value);
-      $table.appendChild($control);
-    };
-    addControl('k-inventory-row-action', 'before', { action: 'edit', icon: 'edit', title: 'Edit' });
-    $table.setAttribute('request-delete', '');
-    addControl('kc-tc-delete-record', 'after');
-
-    /* Same rule the server applies, so the key preview matches what gets saved. */
-    const keyFromLabel = label => {
-      const words = String(label ?? '').replace(/[^a-zA-Z0-9]+/g, ' ').trim().split(' ').filter(Boolean);
-      const key = words.map((w, i) => i === 0 ? w.charAt(0).toLowerCase() + w.slice(1) : w.charAt(0).toUpperCase() + w.slice(1)).join('');
-      return /^[a-z]/.test(key) ? key.slice(0, 40) : '';
-    };
-
-    const decorate = field => ({
-      ...field,
-      typeText: TYPE_LABELS[field.type] ?? field.type,
-      requiredText: field.required ? 'Yes' : 'No',
-      listedText: field.listed ? 'Yes' : 'No',
-      ownerText: field.owner || 'Custom',
-      scopeText: field.category ? field.categoryName : 'Every item',
-      optionsText: field.options.join(', '),
-      cropText: field.type === 'media' ? [field.imageRatio ? field.imageRatio.replace(' / ', ':') : '', field.imageMax ? `max ${field.imageMax}px` : ''].filter(Boolean).join(', ') : '',
-    });
-
-    /* The types that can be created right now; "media" is absent when kempo-media is not installed. */
-    let creatableTypes = Object.keys(TYPE_LABELS);
-    /* Which type changes are safe, from the server: { select: ['text'], text: ['longtext'] }. */
-    let conversions = {};
-
-    /* '' = every field, '*' = the default fields only, otherwise a category key. */
-    const $scope = document.getElementById('scopeFilter');
-    let categories = [];
-    let allFields = [];
-    const wanted = new URLSearchParams(location.search).get('category');
-    let scope = wanted ? wanted.trim().replace(/\s+/g, ' ').toLowerCase() : '';
-
-    const renderScopeOptions = () => {
-      $scope.replaceChildren(...[['', 'All fields'], ['*', 'Every item (default fields)'], ...categories.map(c => [c.key, c.name])].map(([value, label]) => {
-        const $option = document.createElement('option');
-        $option.value = value;
-        $option.textContent = label;
-        $option.selected = value === scope;
-        return $option;
-      }));
-    };
-    const renderTable = () => {
-      const visible = allFields.filter(f => scope === '' || (scope === '*' ? !f.category : f.category === scope));
-      $table.setData({
-        records: visible.map(decorate),
-        fields: [
-          { name: 'label', label: 'Label', size: 200, editable: false },
-          { name: 'key', label: 'Key', size: 150, editable: false },
-          { name: 'scopeText', label: 'Applies to', size: 170, editable: false },
-          { name: 'typeText', label: 'Type', size: 170, editable: false },
-          { name: 'requiredText', label: 'Required', size: 90, editable: false },
-          { name: 'listedText', label: 'In list', size: 80, editable: false },
-          { name: 'optionsText', label: 'Choices', size: 200, editable: false },
-          { name: 'cropText', label: 'Photo crop', size: 150, editable: false },
-          { name: 'ownerText', label: 'Managed by', size: 170, editable: false },
-        ],
-      });
-    };
-    $scope.addEventListener('change', () => { scope = $scope.value; renderTable(); });
-
-    const load = async () => {
-      const [categoriesError, categoryData] = await getCategories({ includeEmpty: true });
-      if(!categoriesError) categories = categoryData.categories;
-      const [error, data] = await getFields();
-      if(!error){
-        creatableTypes = data.types;
-        conversions = data.conversions ?? {};
-      }
-      if(error){
-        Toast.error(error.msg || 'Failed to load fields');
-        return;
-      }
-      allFields = data.fields;
-      renderScopeOptions();
-      renderTable();
-    };
-
-    $table.addEventListener('requestDelete', ({ detail: { records, approve, reject } }) => {
-      const [record] = records;
-      if(record.owner){
-        reject();
-        Toast.error(`"${record.label}" is managed by the ${record.owner} extension and cannot be deleted here`);
-        return;
-      }
-      Dialog.confirm(`Delete the field "${record.label}"? Its value is removed from ${record.category ? 'every item in that category' : 'every item'}. This action cannot be undone.`, async confirmed => {
-        if(!confirmed){ reject(); return; }
-        const [error] = await deleteField(record.key, { category: record.category });
-        if(error){
-          reject();
-          Toast.error(error.msg || 'Failed to delete field');
-          return;
-        }
-        approve();
-        Toast.success('Field deleted');
-        load();
-      });
-    });
-
-    const openFieldDialog = field => {
-      const editing = Boolean(field);
-      const managed = editing && Boolean(field.owner);
-      let keyTouched = editing;
-
-      const $dialog = Dialog.create(html`
-        <div class="p" style="max-height: calc(100vh - 14rem); overflow-y: auto;">
-          ${managed ? html`<p class="mb tc-muted">Managed by the ${field.owner} extension. You can rename it, change its description and choose whether it shows in the list.</p>` : ''}
-          <div class="mb">
-            <label class="d-b mb-sm" for="fld-label">Label *</label>
-            <input type="text" id="fld-label" class="full" .value=${field?.label ?? ''}
-              @input=${e => {
-                if(keyTouched) return;
-                $dialog.querySelector('#fld-key').value = keyFromLabel(e.target.value);
-              }}>
-          </div>
-          <div class="mb">
-            <label class="d-b mb-sm" for="fld-scope">Applies to</label>
-            <select id="fld-scope" class="full" ?disabled=${editing}>
-              <option value="" ?selected=${editing ? !field.category : scope === '' || scope === '*'}>Every item</option>
-              ${categories.map(c => html`<option value=${c.name} ?selected=${editing ? c.key === field.category : c.key === scope}>Only ${c.name}</option>`)}
-            </select>
-          </div>
-          <div class="d-f mb" style="gap: var(--spacer);">
-            <div class="flex">
-              <label class="d-b mb-sm" for="fld-key">Key *</label>
-              <input type="text" id="fld-key" class="full" ?disabled=${editing} .value=${field?.key ?? ''}
-                @input=${() => { keyTouched = true; }}>
-            </div>
-            <div class="flex">
-              <label class="d-b mb-sm" for="fld-type">Type *</label>
-              <select id="fld-type" class="full" ?disabled=${editing && (managed || !conversions[field.type]?.length)}>
-                ${Object.entries(TYPE_LABELS).filter(([value]) => editing
-                  ? value === field.type || (!managed && conversions[field.type]?.includes(value))
-                  : creatableTypes.includes(value)).map(([value, label]) => html`<option value=${value} ?selected=${value === (field?.type ?? 'text')}>${label}</option>`)}
-              </select>
-            </div>
-          </div>
-          <div id="fld-options-row" class="mb" style="display: none;">
-            <label class="d-b mb-sm" for="fld-options">Choices (one per line)</label>
-            <textarea id="fld-options" class="full" rows="4" ?disabled=${managed} .value=${field?.options.join('\n') ?? ''}></textarea>
-          </div>
-          <div id="fld-crop-row" class="mb" style="display: none;">
-            <div class="d-f" style="gap: var(--spacer);">
-              <div class="flex">
-                <label class="d-b mb-sm" for="fld-ratio">Force photo shape</label>
-                <input type="text" id="fld-ratio" class="full" placeholder="e.g. 1:1, 4:3, 16:9" autocomplete="off" .value=${field?.imageRatio ? field.imageRatio.replace(' / ', ':') : ''}>
-              </div>
-              <div style="width: 9rem;">
-                <label class="d-b mb-sm" for="fld-max">Max size (px)</label>
-                <input type="number" id="fld-max" class="full" min="0" max="8000" step="1" placeholder="no limit" .value=${field?.imageMax || ''}>
-              </div>
-            </div>
-            <small class="d-b tc-muted">Photos are cropped to this shape as they are added (a cropper opens, locked to it) and kept within the maximum size. Leave the shape empty to allow any shape; with only a maximum, photos are just scaled down.</small>
-          </div>
-          <div id="fld-suggest-row" class="mb" style="display: none;">
-            <k-toggle id="fld-suggest" .value=${Boolean(field?.suggest)}>Suggest values already used</k-toggle>
-            <small class="d-b tc-muted">Offers values from other items as you type, so repeated entries such as a brand stay consistent. Anything new can still be typed.</small>
-          </div>
-          <div class="mb">
-            <label class="d-b mb-sm" for="fld-description">Description</label>
-            <input type="text" id="fld-description" class="full" .value=${field?.description ?? ''}>
-          </div>
-          <div class="d-f mb" style="gap: var(--spacer); align-items: center;">
-            ${managed ? '' : html`<k-toggle id="fld-required" .value=${Boolean(field?.required)}>Required</k-toggle>`}
-            <k-toggle id="fld-listed" .value=${field ? Boolean(field.listed) : true}>Show in list</k-toggle>
-            <div class="flex"></div>
-            <div style="width: 7rem;">
-              <label class="d-b mb-sm" for="fld-position">Order</label>
-              <input type="number" id="fld-position" class="full" step="1" .value=${field?.position ?? 0}>
-            </div>
-          </div>
-        </div>
-      `, {
-        title: editing ? `Edit ${field.label}` : 'New Field',
-        confirmText: editing ? 'Save' : 'Create',
-        cancelText: 'Cancel',
-        confirmAction: async event => {
-          event.keepDialogOpen = true;
-          const value = id => $dialog.querySelector(id).value;
-          const data = {
-            label: value('#fld-label').trim(),
-            description: value('#fld-description'),
-            listed: $dialog.querySelector('#fld-listed').value === true,
-            suggest: $dialog.querySelector('#fld-suggest').value === true,
-            position: Number(value('#fld-position') || 0),
-          };
-          if($type.value === 'media'){
-            data.imageRatio = value('#fld-ratio').trim();
-            data.imageMax = Number(value('#fld-max') || 0);
-          }
-          if(!managed){
-            data.required = $dialog.querySelector('#fld-required').value === true;
-            data.options = value('#fld-options').split('\n').map(o => o.trim()).filter(Boolean);
-          }
-          if(!data.label){
-            Toast.error('A label is required');
-            return;
-          }
-          let error;
-          if(editing){
-            if(value('#fld-type') !== field.type) data.type = value('#fld-type');
-            [error] = await updateField(field.key, data, { category: field.category });
-          } else {
-            [error] = await createField({ ...data, key: value('#fld-key').trim(), type: value('#fld-type'), category: value('#fld-scope') });
-          }
-          if(error){
-            Toast.error(error.msg || 'Failed to save field');
-            return;
-          }
-          $dialog.close();
-          Toast.success(editing ? 'Field saved' : 'Field created');
-          load();
-        },
-      });
-
-      const $type = $dialog.querySelector('#fld-type');
-      const syncOptions = () => {
-        $dialog.querySelector('#fld-options-row').style.display = $type.value === 'select' ? '' : 'none';
-        $dialog.querySelector('#fld-suggest-row').style.display = $type.value === 'text' ? '' : 'none';
-        $dialog.querySelector('#fld-crop-row').style.display = $type.value === 'media' ? '' : 'none';
-      };
-      $type.addEventListener('change', syncOptions);
-      syncOptions();
-    };
-
-    $table.addEventListener('itemAction', ({ detail: { action, record } }) => {
-      if(action === 'edit') openFieldDialog(record);
-    });
-    document.getElementById('newFieldBtn')?.addEventListener('click', () => openFieldDialog(null));
-
-    await load();
-  </script>
-</content>
-</page>