kempo-inventory 0.2.0

package/admin/categories/index.page.html

@@ -0,0 +1,229 @@
+<!--
+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('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('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>
+            <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 } : {}}></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/edit/index.page.html

@@ -0,0 +1,51 @@
+<!--
+locked: true
+-->
+<page title="Edit Item - Admin">
+<content>
+  <script type="module" src="/kempo-ui/components/Icon.js"></script>
+
+  <div class="d-f mb" style="align-items: center; gap: var(--spacer);">
+    <a href="/admin/extension/kempo-inventory/" class="btn" id="backLink"><k-icon name="arrow" direction="left"></k-icon> Inventory</a>
+    <h1 class="flex mb0" id="title">Edit Item</h1>
+  </div>
+
+  <div id="editItem" style="max-width: 44rem;"></div>
+
+  <script type="module">
+    import { getItem, getFields } from '/inventory/sdk.js';
+    import { getAllCurrentUserPermissions } from '/kempo/sdk.js';
+    import Toast from '/kempo-ui/components/Toast.js';
+    import { mountEditItemPage, safeNext } from '/inventory/components/NewItemPage.js';
+    import { showFlash } from '/inventory/components/flash.js';
+
+    /* ?id= is the item; ?next= (a path on this site) is where to go after saving or cancelling. */
+    const params = new URLSearchParams(location.search);
+    const next = safeNext(params.get('next'), '/admin/extension/kempo-inventory/');
+    document.getElementById('backLink').href = next;
+    const $container = document.getElementById('editItem');
+
+    const [, permData] = await getAllCurrentUserPermissions();
+    if(!new Set(permData?.permissions ?? []).has('kempo-inventory:items:update')){
+      $container.innerHTML = '<p class="tc-danger">Your account is not allowed to edit items.</p>';
+    } else {
+      const [[itemError, data], [fieldsError, fieldData]] = await Promise.all([getItem(params.get('id')), getFields()]);
+      if(itemError || fieldsError){
+        const error = itemError || fieldsError;
+        $container.innerHTML = `<p class="tc-danger">${error.code === 404 ? 'Item not found.' : 'Something went wrong loading the item.'}</p>`;
+        Toast.error(error.msg || 'Failed to load the item');
+      } else {
+        document.getElementById('title').textContent = `Edit ${data.item.name}`;
+        mountEditItemPage({
+          $container,
+          item: data.item,
+          fields: fieldData.fields,
+          context: { linked: data.linked, media: data.media, ownId: data.item.id },
+          next,
+        });
+      }
+    }
+    showFlash();
+  </script>
+</content>
+</page>

package/admin/fields/index.page.html

@@ -0,0 +1,300 @@
+<!--
+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('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>