kempo 4.2.4 → 4.2.5

package/dist/admin/content/globals/index.page.html

@@ -0,0 +1,152 @@
+<!--
+	locked: true
+-->
+<page title="Global Content - Admin"><content><script type="module" src="/kempo-ui/components/Table.js"></script><script type="module" src="/kempo-ui/components/tableControls/FirstPage.js"></script><script type="module" src="/kempo-ui/components/tableControls/PrevPage.js"></script><script type="module" src="/kempo-ui/components/tableControls/NextPage.js"></script><script type="module" src="/kempo-ui/components/tableControls/LastPage.js"></script><script type="module" src="/kempo-ui/components/tableControls/PageSelect.js"></script><script type="module" src="/kempo-ui/components/tableControls/PageSize.js"></script><script type="module" src="/kempo-ui/components/tableControls/DeleteRecord.js"></script><script type="module" src="/kempo-ui/components/tableControls/DeleteSelected.js"></script><script type="module" src="/kempo-ui/components/Icon.js"></script><script type="module" src="/admin/components/TableRowLink.js"></script><script type="module" src="/kempo/components/Permission.js"></script><div class="d-f mb" style="align-items: center; gap: var(--spacer);"><h1 class="flex mb0">Global Content</h1><k-permission has="system:globals:create"><button id="createGlobalBtn" class="primary">Create Global Content</button></k-permission></div><h2>Custom</h2><k-table id="customTable" enable-pages page-size="25" page-size-options="[10,25,50,100]" placeholder="No custom global content has been created yet."><admin-table-row-link slot="before" url-pattern="/admin/content/globals/edit?id={id}" field-name="id"></admin-table-row-link><div slot="top" class="d-f full" style="align-items: center;"><div><k-permission has="system:globals:delete"><k-tc-delete-selected></k-tc-delete-selected></k-permission></div></div><div class="d-f full" style="align-items: center;"><div><k-tc-first-page></k-tc-first-page><k-tc-prev-page></k-tc-prev-page><k-tc-next-page></k-tc-next-page><k-tc-last-page></k-tc-last-page></div><div class="flex"></div><div><k-tc-page-select></k-tc-page-select></div><div class="flex"></div><div><k-tc-page-size></k-tc-page-size></div></div></k-table><h2>Extensions</h2><k-table id="extensionTable" enable-pages page-size="25" page-size-options="[10,25,50,100]" placeholder="No extension global content installed."><admin-table-row-link slot="before" url-pattern="/admin/content/globals/edit?id={id}" field-name="id"></admin-table-row-link><div class="d-f full" style="align-items: center;"><div><k-tc-first-page></k-tc-first-page><k-tc-prev-page></k-tc-prev-page><k-tc-next-page></k-tc-next-page><k-tc-last-page></k-tc-last-page></div><div class="flex"></div><div><k-tc-page-select></k-tc-page-select></div><div class="flex"></div><div><k-tc-page-size></k-tc-page-size></div></div></k-table><h2>System</h2><k-table id="systemTable" enable-pages page-size="25" page-size-options="[10,25,50,100]" placeholder="No system global content found."><admin-table-row-link slot="before" url-pattern="/admin/content/globals/edit?id={id}" field-name="id"></admin-table-row-link><div class="d-f full" style="align-items: center;"><div><k-tc-first-page></k-tc-first-page><k-tc-prev-page></k-tc-prev-page><k-tc-next-page></k-tc-next-page><k-tc-last-page></k-tc-last-page></div><div class="flex"></div><div><k-tc-page-select></k-tc-page-select></div><div class="flex"></div><div><k-tc-page-size></k-tc-page-size></div></div></k-table><script type="module">import { listGlobalContent, listTemplates, createGlobalContent, deleteGlobalContent, getAllCurrentUserPermissions } from '/kempo/sdk.js';
+			import { html } from '/kempo-ui/lit-all.min.js';
+			import Dialog from '/kempo-ui/components/Dialog.js';
+			import Toast from '/kempo-ui/components/Toast.js';
+
+			await window.customElements.whenDefined('k-table');
+
+			const [, permData] = await getAllCurrentUserPermissions();
+			const myPerms = new Set(permData?.permissions ?? []);
+
+			const fields = [
+				{ name: 'lockedBadge', label: '', size: 40, formatter: v => v },
+				{ name: 'name', label: 'Name', size: 200 },
+				{ name: 'location', label: 'Location', size: 150 },
+				{ name: 'priority', label: 'Priority', size: 80 },
+				{ name: 'author', label: 'Author', size: 150 },
+				{ name: 'updatedAt', label: 'Updated', size: 190, formatter: v => v ? new Date(v).toLocaleString() : '' },
+				{ name: 'createdAt', label: 'Created', size: 190, formatter: v => v ? new Date(v).toLocaleString() : '' }
+			];
+
+			const extensionFields = [
+				{ name: 'owner', label: 'Extension', size: 120 },
+				...fields
+			];
+
+			const $customTable = document.getElementById('customTable');
+			const $extensionTable = document.getElementById('extensionTable');
+			const $systemTable = document.getElementById('systemTable');
+
+			const addBadge = e => ({ ...e, lockedBadge: e.locked ? '<k-icon name="lock"></k-icon>' : '' });
+
+			const loadEntries = async () => {
+				const [error, data] = await listGlobalContent();
+				if(error){
+					Toast.error(error.msg || 'Failed to load global content');
+					return;
+				}
+				const custom = data.entries.filter(e => e.owner === 'custom').map(addBadge);
+				const extension = data.entries.filter(e => e.owner !== 'custom' && e.owner !== 'system').map(addBadge);
+				const system = data.entries.filter(e => e.owner === 'system').map(addBadge);
+				$customTable.setData({ records: custom, fields });
+				$extensionTable.setData({ records: extension, fields: extensionFields });
+				$systemTable.setData({ records: system, fields });
+			};
+
+			if(myPerms.has('system:globals:delete')){
+				$customTable.setAttribute('request-delete', '');
+				$customTable.setAttribute('enable-selection', '');
+				const del = document.createElement('k-tc-delete-record');
+				del.setAttribute('slot', 'after');
+				$customTable.appendChild(del);
+			}
+
+			await loadEntries();
+
+			$customTable.addEventListener('requestDelete', ({ detail: { records, approve, reject } }) => {
+				const locked = records.filter(r => r.locked);
+				if(locked.length){
+					Toast.error(locked.length === 1 ? `"${locked[0].name}" is locked and cannot be deleted.` : `${locked.length} selected items are locked and cannot be deleted.`);
+					reject();
+					return;
+				}
+				const count = records.length;
+				const msg = count === 1
+					? `Delete "${records[0].name}"? This action cannot be undone.`
+					: `Delete ${count} global content entries? This action cannot be undone.`;
+				Dialog.confirm(msg, async (confirmed) => {
+					if(!confirmed){ reject(); return; }
+					const ids = records.map(r => r.id);
+					const [error] = await deleteGlobalContent(ids);
+					if(error){
+						reject();
+						Toast.error(error.msg || 'Failed to delete');
+						return;
+					}
+					approve();
+					Toast.success(count === 1 ? 'Global content deleted' : `${count} entries deleted`);
+				});
+			});
+
+			/*
+				Create Global Content Dialog
+			*/
+
+			document.getElementById('createGlobalBtn')?.addEventListener('click', async () => {
+				const [tplError, tplData] = await listTemplates();
+				const locations = new Set();
+				if(!tplError && tplData?.templates){
+					for(const t of tplData.templates){
+						for(const loc of (t.locations || [])){
+							locations.add(typeof loc === 'string' ? loc : loc.name);
+						}
+					}
+				}
+				const locationOptions = [...locations].sort();
+
+				const $dialog = Dialog.create(html`
+					<div class="p">
+						<div class="mb">
+							<label class="d-b mb-sm">Name</label>
+							<input type="text" id="dlg-name" class="full" placeholder="Analytics Script" required>
+						</div>
+						<div class="mb">
+							<label class="d-b mb-sm">Location</label>
+							<input type="text" id="dlg-location" class="full" list="dlg-location-list" placeholder="scripts" required>
+							<datalist id="dlg-location-list">
+								${locationOptions.map(l => html`<option value="${l}">`)}
+							</datalist>
+							<p class="mt-sm muted"><small>The template location to inject this content into.</small></p>
+						</div>
+						<div>
+							<label class="d-b mb-sm">Priority</label>
+							<input type="number" id="dlg-priority" class="full" value="0">
+							<p class="mt-sm muted"><small>Higher priority content is rendered first. Default is 0.</small></p>
+						</div>
+					</div>
+				`, {
+					title: 'Create Global Content',
+					confirmText: 'Create',
+					confirmAction: async () => {
+						const name = $dialog.querySelector('#dlg-name').value.trim();
+						const location = $dialog.querySelector('#dlg-location').value.trim();
+						const priority = $dialog.querySelector('#dlg-priority').value.trim();
+
+						if(!name){
+							Toast.error('Name is required');
+							return;
+						}
+
+						if(!location){
+							Toast.error('Location is required');
+							return;
+						}
+
+						const [error, data] = await createGlobalContent({ name, location, priority });
+
+						if(error){
+							Toast.error(error.msg || 'Failed to create global content');
+							return;
+						}
+
+						Toast.success('Global content created — redirecting to editor...');
+						setTimeout(() => {
+							window.location.href = `/admin/content/globals/edit?id=${encodeURIComponent(data.id)}`;
+						}, 1500);
+					},
+					cancelText: 'Cancel'
+				});
+			});</script></content></page>

package/dist/admin/content/pages/edit/index.page.html

@@ -0,0 +1,4 @@
+<!--
+	locked: true
+-->
+<page title="Edit Page - Admin"><content><admin-page-editor></admin-page-editor></content><content location="head"><script type="module" src="/admin/components/PageEditor.js"></script></content></page>

package/dist/admin/content/pages/index.page.html

@@ -0,0 +1,218 @@
+<!--
+	locked: true
+-->
+<page title="Pages - Admin"><content><script type="module" src="/kempo-ui/components/Table.js"></script><script type="module" src="/kempo-ui/components/tableControls/FirstPage.js"></script><script type="module" src="/kempo-ui/components/tableControls/PrevPage.js"></script><script type="module" src="/kempo-ui/components/tableControls/NextPage.js"></script><script type="module" src="/kempo-ui/components/tableControls/LastPage.js"></script><script type="module" src="/kempo-ui/components/tableControls/PageSelect.js"></script><script type="module" src="/kempo-ui/components/tableControls/PageSize.js"></script><script type="module" src="/kempo-ui/components/tableControls/DeleteRecord.js"></script><script type="module" src="/kempo-ui/components/tableControls/DeleteSelected.js"></script><script type="module" src="/kempo-ui/components/Icon.js"></script><script type="module" src="/admin/components/TableRowLink.js"></script><script type="module" src="/kempo/components/Permission.js"></script><div class="d-f mb" style="align-items: center; gap: var(--spacer);"><h1 class="flex mb0">Pages</h1><k-permission has="system:pages:create"><button id="createPageBtn" class="primary">Create Page</button></k-permission></div><h2>Custom Pages</h2><k-table id="customTable" enable-pages page-size="25" page-size-options="[10,25,50,100]" placeholder="No custom pages have been created yet."><admin-table-row-link slot="before" url-pattern="/admin/content/pages/edit?path={editPath}" field-name="editPath"></admin-table-row-link><div slot="top" class="d-f full" style="align-items: center;"><div><k-permission has="system:pages:delete"><k-tc-delete-selected></k-tc-delete-selected></k-permission></div></div><div class="d-f full" style="align-items: center;"><div><k-tc-first-page></k-tc-first-page><k-tc-prev-page></k-tc-prev-page><k-tc-next-page></k-tc-next-page><k-tc-last-page></k-tc-last-page></div><div class="flex"></div><div><k-tc-page-select></k-tc-page-select></div><div class="flex"></div><div><k-tc-page-size></k-tc-page-size></div></div></k-table><h2>Extension Pages</h2><k-table id="extensionTable" enable-pages page-size="25" page-size-options="[10,25,50,100]" placeholder="No extension pages installed."><admin-table-row-link slot="before" url-pattern="/admin/pages/edit?path={editPath}" field-name="editPath"></admin-table-row-link><div class="d-f full" style="align-items: center;"><div><k-tc-first-page></k-tc-first-page><k-tc-prev-page></k-tc-prev-page><k-tc-next-page></k-tc-next-page><k-tc-last-page></k-tc-last-page></div><div class="flex"></div><div><k-tc-page-select></k-tc-page-select></div><div class="flex"></div><div><k-tc-page-size></k-tc-page-size></div></div></k-table><h2>System Pages</h2><k-table id="systemTable" enable-pages page-size="25" page-size-options="[10,25,50,100]" placeholder="No system pages found."><admin-table-row-link slot="before" url-pattern="/admin/pages/edit?path={editPath}" field-name="editPath"></admin-table-row-link><div class="d-f full" style="align-items: center;"><div><k-tc-first-page></k-tc-first-page><k-tc-prev-page></k-tc-prev-page><k-tc-next-page></k-tc-next-page><k-tc-last-page></k-tc-last-page></div><div class="flex"></div><div><k-tc-page-select></k-tc-page-select></div><div class="flex"></div><div><k-tc-page-size></k-tc-page-size></div></div></k-table><script type="module">import { listPages, listTemplates, listDirectories, createPage, deletePages, getAllCurrentUserPermissions } from '/kempo/sdk.js';
+			import { html } from '/kempo-ui/lit-all.min.js';
+			import Dialog from '/kempo-ui/components/Dialog.js';
+			import Toast from '/kempo-ui/components/Toast.js';
+
+			await window.customElements.whenDefined('k-table');
+
+			const [, permData] = await getAllCurrentUserPermissions();
+			const myPerms = new Set(permData?.permissions ?? []);
+
+			const fields = [
+				{ name: 'lockedBadge', label: '', size: 40, formatter: v => v },
+				{ name: 'name', label: 'Name', size: 200 },
+				{ name: 'url', label: 'URL', size: 250 },
+				{ name: 'author', label: 'Author', size: 150 },
+				{ name: 'description', label: 'Description', size: 300 },
+				{ name: 'updatedAt', label: 'Updated', size: 190, formatter: v => v ? new Date(v).toLocaleString() : '' },
+				{ name: 'createdAt', label: 'Created', size: 190, formatter: v => v ? new Date(v).toLocaleString() : '' }
+			];
+
+			const extensionFields = [
+				{ name: 'owner', label: 'Extension', size: 120 },
+				...fields
+			];
+
+			const $customTable = document.getElementById('customTable');
+			const $extensionTable = document.getElementById('extensionTable');
+			const $systemTable = document.getElementById('systemTable');
+
+			const loadPages = async () => {
+				const [error, data] = await listPages();
+				if(error){
+					Toast.error(error.msg || 'Failed to load pages');
+					return;
+				}
+				const toEditPath = p => ({ ...p, editPath: p.file.replace(/\.page\.html$/, ''), lockedBadge: p.locked ? '<k-icon name="lock"></k-icon>' : '' });
+				const sortPages = pages => pages.slice().sort((a, b) => {
+					const aPath = a.file.replace(/\.page\.html$/, '');
+					const bPath = b.file.replace(/\.page\.html$/, '');
+					const aDir = aPath.includes('/') ? aPath.split('/').slice(0, -1).join('/') : '';
+					const bDir = bPath.includes('/') ? bPath.split('/').slice(0, -1).join('/') : '';
+					if(aPath === 'index' || aPath === '') return -1;
+					if(bPath === 'index' || bPath === '') return 1;
+					if(aDir !== bDir){
+						if(!aDir) return -1;
+						if(!bDir) return 1;
+						return aDir.localeCompare(bDir);
+					}
+					return aPath.localeCompare(bPath);
+				});
+				const custom = sortPages(data.pages.filter(p => p.owner === 'custom').map(toEditPath));
+				const extension = sortPages(data.pages.filter(p => p.owner !== 'custom' && p.owner !== 'system').map(toEditPath));
+				const system = sortPages(data.pages.filter(p => p.owner === 'system').map(toEditPath));
+				$customTable.setData({ records: custom, fields });
+				$extensionTable.setData({ records: extension, fields: extensionFields });
+				$systemTable.setData({ records: system, fields });
+			};
+
+			if(myPerms.has('system:pages:delete')){
+				$customTable.setAttribute('request-delete', '');
+				$customTable.setAttribute('enable-selection', '');
+				const del = document.createElement('k-tc-delete-record');
+				del.setAttribute('slot', 'after');
+				$customTable.appendChild(del);
+			}
+
+			await loadPages();
+
+			$customTable.addEventListener('requestDelete', ({ detail: { records, approve, reject } }) => {
+				const locked = records.filter(r => r.locked);
+				if(locked.length){
+					Toast.error(locked.length === 1 ? `"${locked[0].title || locked[0].file}" is locked and cannot be deleted.` : `${locked.length} selected pages are locked and cannot be deleted.`);
+					reject();
+					return;
+				}
+				const count = records.length;
+				const msg = count === 1
+					? `Delete "${records[0].title || records[0].file}"? This action cannot be undone.`
+					: `Delete ${count} pages? This action cannot be undone.`;
+				Dialog.confirm(msg, async (confirmed) => {
+					if(!confirmed){ reject(); return; }
+					const files = records.map(r => r.file);
+					const [error] = await deletePages(files);
+					if(error){
+						reject();
+						Toast.error(error.msg || 'Failed to delete');
+						return;
+					}
+					approve();
+					Toast.success(count === 1 ? 'Page deleted' : `${count} pages deleted`);
+				});
+			});
+
+			/*
+				Create Page Dialog
+			*/
+
+			const slugify = name => name
+				.toLowerCase()
+				.trim()
+				.replace(/[^\w\s-]/g, '')
+				.replace(/[\s_]+/g, '-')
+				.replace(/-+/g, '-')
+				.replace(/^-|-$/g, '');
+
+			document.getElementById('createPageBtn')?.addEventListener('click', async () => {
+				const [[tplError, tplData], [dirError, dirData]] = await Promise.all([
+					listTemplates(),
+					listDirectories()
+				]);
+				if(tplError){
+					Toast.error(tplError.msg || 'Failed to load templates');
+					return;
+				}
+				if(dirError){
+					Toast.error(dirError.msg || 'Failed to load directories');
+					return;
+				}
+
+				const directories = dirData.directories;
+
+				const templateOptions = tplData.templates
+					.map(t => html`<option value="${t.name}" ?selected=${t.name === 'default'}>${t.name} (${t.directory || '/'})</option>`);
+
+				const isValidDir = p => /^\/[a-zA-Z0-9_\-\[\]\/]*$/.test(p) && !p.includes('..') && !p.includes('//');
+				const dirToInternal = p => { const t = (p || '/').replace(/^\//, '').replace(/\/$/, ''); return t || '.'; };
+
+				const openLearnMore = () => Dialog.alert(html`
+					<div class="p">
+						<p>Directory paths define where a page lives in the URL structure.</p>
+						<p><strong>Examples:</strong></p>
+						<ul>
+							<li><code>/</code> — root, e.g. <code>/about</code></li>
+							<li><code>/blog</code> — e.g. <code>/blog/my-post</code></li>
+							<li><code>/blog/[slug]</code> — dynamic segment; <code>[slug]</code> matches any value</li>
+						</ul>
+						<p>Dynamic segments like <code>[token]</code> allow a single page to handle many URLs. The segment name is available to the page as a URL parameter.</p>
+						<p>You can nest segments: <code>/store/[category]/[id]</code></p>
+					</div>
+				`, null, { title: 'About Directory Paths' });
+
+				const $dialog = Dialog.create(html`
+					<div class="p">
+						<div class="mb">
+							<label class="d-b mb-sm">Location</label>
+							<input type="text" id="dlg-directory" class="full" list="dlg-dir-list" value="/" placeholder="/">
+							<datalist id="dlg-dir-list">
+								${directories.map(d => html`<option value="${d === '.' ? '/' : '/' + d}">`)} 
+							</datalist>
+							<p id="dlg-dir-error" class="mt-sm tc-danger d-n"><small>Invalid path — use format: /path/to/directory</small></p>
+							<p class="mt-sm muted"><small>Supports dynamic segments e.g. <code>/blog/[slug]</code>. <button class="link" @click="${openLearnMore}">Learn more</button></small></p>
+						</div>
+						<div class="mb">
+							<label class="d-b mb-sm">Page Name</label>
+							<input type="text" id="dlg-name" class="full" placeholder="My New Page" required>
+							<p class="mt-sm muted"><small id="dlg-slug"></small></p>
+						</div>
+						<div>
+							<label class="d-b mb-sm">Template</label>
+							<select id="dlg-template" class="full">
+								${templateOptions}
+							</select>
+						</div>
+					</div>
+				`, {
+					title: 'Create Page',
+					confirmText: 'Create',
+					confirmAction: async () => {
+						const name = $dialog.querySelector('#dlg-name').value.trim();
+						const dirInput = $dialog.querySelector('#dlg-directory').value.trim() || '/';
+						const template = $dialog.querySelector('#dlg-template').value;
+
+						if(!name){
+							Toast.error('Page name is required');
+							return;
+						}
+
+						if(!isValidDir(dirInput)){
+							Toast.error('Invalid directory path');
+							return;
+						}
+
+						const directory = dirToInternal(dirInput);
+
+						const [error, data] = await createPage({
+							directory: directory === '.' ? '' : directory,
+							name,
+							template
+						});
+
+						if(error){
+							Toast.error(error.msg || 'Failed to create page');
+							return;
+						}
+
+						Toast.success('Page created — redirecting to editor...');
+						setTimeout(() => {
+						window.location.href = `/admin/pages/edit?path=${encodeURIComponent(data.file.replace(/\.page\.html$/, ''))}`;
+						}, 1500);
+					},
+					cancelText: 'Cancel'
+				});
+
+				const updateSlug = () => {
+					const slug = slugify($dialog.querySelector('#dlg-name').value);
+					const dir = dirToInternal($dialog.querySelector('#dlg-directory').value);
+					const prefix = dir === '.' ? '/' : '/' + dir + '/';
+					$dialog.querySelector('#dlg-slug').textContent = slug ? prefix + slug : '';
+				};
+				$dialog.querySelector('#dlg-directory').addEventListener('input', e => {
+					$dialog.querySelector('#dlg-dir-error').classList.toggle('d-n', isValidDir(e.target.value || '/'));
+					updateSlug();
+				});
+				$dialog.querySelector('#dlg-name').addEventListener('input', updateSlug);
+			});</script></content></page>

package/dist/admin/content/templates/edit/index.page.html

@@ -0,0 +1,4 @@
+<!--
+	locked: true
+-->
+<page title="Edit Template - Admin"><content><admin-template-editor></admin-template-editor></content><content location="head"><script type="module" src="/admin/components/TemplateEditor.js"></script></content></page>

package/dist/admin/content/templates/index.page.html

@@ -0,0 +1,193 @@
+<!--
+	locked: true
+-->
+<page title="Templates - Admin"><content><script type="module" src="/kempo-ui/components/Table.js"></script><script type="module" src="/kempo-ui/components/tableControls/FirstPage.js"></script><script type="module" src="/kempo-ui/components/tableControls/PrevPage.js"></script><script type="module" src="/kempo-ui/components/tableControls/NextPage.js"></script><script type="module" src="/kempo-ui/components/tableControls/LastPage.js"></script><script type="module" src="/kempo-ui/components/tableControls/PageSelect.js"></script><script type="module" src="/kempo-ui/components/tableControls/PageSize.js"></script><script type="module" src="/kempo-ui/components/tableControls/DeleteRecord.js"></script><script type="module" src="/kempo-ui/components/tableControls/DeleteSelected.js"></script><script type="module" src="/kempo-ui/components/Icon.js"></script><script type="module" src="/admin/components/TableRowLink.js"></script><script type="module" src="/kempo/components/Permission.js"></script><div class="d-f mb" style="align-items: center; gap: var(--spacer);"><h1 class="flex mb0">Templates</h1><k-permission has="system:pages:create"><button id="createTemplateBtn" class="primary">Create Template</button></k-permission></div><h2>Custom Templates</h2><k-table id="customTable" enable-pages page-size="25" page-size-options="[10,25,50,100]" placeholder="No custom templates have been created yet."><admin-table-row-link slot="before" url-pattern="/admin/content/templates/edit?template={editPath}" field-name="editPath"></admin-table-row-link><div slot="top" class="d-f full" style="align-items: center;"><div><k-permission has="system:pages:delete"><k-tc-delete-selected></k-tc-delete-selected></k-permission></div></div><div class="d-f full" style="align-items: center;"><div><k-tc-first-page></k-tc-first-page><k-tc-prev-page></k-tc-prev-page><k-tc-next-page></k-tc-next-page><k-tc-last-page></k-tc-last-page></div><div class="flex"></div><div><k-tc-page-select></k-tc-page-select></div><div class="flex"></div><div><k-tc-page-size></k-tc-page-size></div></div></k-table><h2>Extension Templates</h2><k-table id="extensionTable" enable-pages page-size="25" page-size-options="[10,25,50,100]" placeholder="No extension templates installed."><admin-table-row-link slot="before" url-pattern="/admin/content/templates/edit?template={editPath}" field-name="editPath"></admin-table-row-link><div class="d-f full" style="align-items: center;"><div><k-tc-first-page></k-tc-first-page><k-tc-prev-page></k-tc-prev-page><k-tc-next-page></k-tc-next-page><k-tc-last-page></k-tc-last-page></div><div class="flex"></div><div><k-tc-page-select></k-tc-page-select></div><div class="flex"></div><div><k-tc-page-size></k-tc-page-size></div></div></k-table><h2>System Templates</h2><k-table id="systemTable" enable-pages page-size="25" page-size-options="[10,25,50,100]" placeholder="No system templates found."><admin-table-row-link slot="before" url-pattern="/admin/content/templates/edit?template={editPath}" field-name="editPath"></admin-table-row-link><div class="d-f full" style="align-items: center;"><div><k-tc-first-page></k-tc-first-page><k-tc-prev-page></k-tc-prev-page><k-tc-next-page></k-tc-next-page><k-tc-last-page></k-tc-last-page></div><div class="flex"></div><div><k-tc-page-select></k-tc-page-select></div><div class="flex"></div><div><k-tc-page-size></k-tc-page-size></div></div></k-table><script type="module">import { listTemplates, listDirectories, createTemplate, deleteTemplates, getAllCurrentUserPermissions } from '/kempo/sdk.js';
+			import { html } from '/kempo-ui/lit-all.min.js';
+			import Dialog from '/kempo-ui/components/Dialog.js';
+			import Toast from '/kempo-ui/components/Toast.js';
+
+			await window.customElements.whenDefined('k-table');
+
+			const [, permData] = await getAllCurrentUserPermissions();
+			const myPerms = new Set(permData?.permissions ?? []);
+
+			const fields = [
+				{ name: 'lockedBadge', label: '', size: 40, formatter: v => v },
+				{ name: 'name', label: 'Name', size: 150 },
+				{ name: 'directory', label: 'Directory', size: 200 },
+				{ name: 'author', label: 'Author', size: 150 },
+				{ name: 'updatedAt', label: 'Updated', size: 190, formatter: v => v ? new Date(v).toLocaleString() : '' },
+				{ name: 'createdAt', label: 'Created', size: 190, formatter: v => v ? new Date(v).toLocaleString() : '' }
+			];
+
+			const extensionFields = [
+				{ name: 'owner', label: 'Extension', size: 120 },
+				...fields
+			];
+
+			const $customTable = document.getElementById('customTable');
+			const $extensionTable = document.getElementById('extensionTable');
+			const $systemTable = document.getElementById('systemTable');
+
+			const loadTemplates = async () => {
+				const [error, data] = await listTemplates();
+				if(error){
+					Toast.error(error.msg || 'Failed to load templates');
+					return;
+				}
+				const toEditPath = t => ({
+					...t,
+					directory: t.directory === '.' ? '/' : t.directory,
+					editPath: (t.directory === '.' ? t.name : `${t.directory}/${t.name}`),
+					lockedBadge: t.locked ? '<k-icon name="lock"></k-icon>' : ''
+				});
+				const custom = data.templates.filter(t => t.owner === 'custom').map(toEditPath);
+				const extension = data.templates.filter(t => t.owner !== 'custom' && t.owner !== 'system').map(toEditPath);
+				const system = data.templates.filter(t => t.owner === 'system').map(toEditPath);
+				$customTable.setData({ records: custom, fields });
+				$extensionTable.setData({ records: extension, fields: extensionFields });
+				$systemTable.setData({ records: system, fields });
+			};
+
+			if(myPerms.has('system:pages:delete')){
+				$customTable.setAttribute('request-delete', '');
+				$customTable.setAttribute('enable-selection', '');
+				const del = document.createElement('k-tc-delete-record');
+				del.setAttribute('slot', 'after');
+				$customTable.appendChild(del);
+			}
+
+			await loadTemplates();
+
+			$customTable.addEventListener('requestDelete', ({ detail: { records, approve, reject } }) => {
+				const locked = records.filter(r => r.locked);
+				if(locked.length){
+					Toast.error(locked.length === 1 ? `"${locked[0].name}" is locked and cannot be deleted.` : `${locked.length} selected templates are locked and cannot be deleted.`);
+					reject();
+					return;
+				}
+				const count = records.length;
+				const msg = count === 1
+					? `Delete "${records[0].name}"? This action cannot be undone.`
+					: `Delete ${count} templates? This action cannot be undone.`;
+				Dialog.confirm(msg, async (confirmed) => {
+					if(!confirmed){ reject(); return; }
+					const files = records.map(r => r.path);
+					const [error] = await deleteTemplates(files);
+					if(error){
+						reject();
+						Toast.error(error.msg || 'Failed to delete');
+						return;
+					}
+					approve();
+					Toast.success(count === 1 ? 'Template deleted' : `${count} templates deleted`);
+					await loadTemplates();
+				});
+			});
+
+			/*
+				Create Template Dialog
+			*/
+
+			const slugify = name => name
+				.toLowerCase()
+				.trim()
+				.replace(/[^\w\s-]/g, '')
+				.replace(/[\s_]+/g, '-')
+				.replace(/-+/g, '-')
+				.replace(/^-|-$/g, '');
+
+			document.getElementById('createTemplateBtn')?.addEventListener('click', async () => {
+				const [[dirError, dirData], [tplError, tplData]] = await Promise.all([
+					listDirectories(),
+					listTemplates()
+				]);
+				if(dirError){
+					Toast.error(dirError.msg || 'Failed to load directories');
+					return;
+				}
+
+				const directories = dirData.directories;
+				const allTemplates = tplError ? [] : (tplData.templates || []);
+				const templateOptions = allTemplates.map(t => {
+					const path = t.directory === '.' ? t.name : `${t.directory}/${t.name}`;
+					return { path: t.path, label: '/' + path.replace(/\.template\.html$/, '') };
+				});
+				const isValidDir = p => /^\/[a-zA-Z0-9_\-\[\]\/]*$/.test(p) && !p.includes('..') && !p.includes('//');
+				const dirToInternal = p => { const t = (p || '/').replace(/^\//, '').replace(/\/$/, ''); return t || '.'; };
+
+				const $dialog = Dialog.create(html`
+					<div class="p">
+						<div class="mb">
+							<label class="d-b mb-sm">Copy From</label>
+							<select id="dlg-copy-from" class="full">
+								<option value="">Blank template</option>
+								${templateOptions.map(t => html`<option value="${t.path}">${t.label}</option>`)}
+							</select>
+						</div>
+						<div class="mb">
+							<label class="d-b mb-sm">Location</label>
+							<input type="text" id="dlg-directory" class="full" list="dlg-dir-list" value="/" placeholder="/">
+							<datalist id="dlg-dir-list">
+								${directories.map(d => html`<option value="${d === '.' ? '/' : '/' + d}">`)}
+							</datalist>
+							<p id="dlg-dir-error" class="mt-sm tc-danger d-n"><small>Invalid path — use format: /path/to/directory</small></p>
+						</div>
+						<div>
+							<label class="d-b mb-sm">Template Name</label>
+							<input type="text" id="dlg-name" class="full" placeholder="My Template" required>
+							<p class="mt-sm muted"><small id="dlg-slug"></small></p>
+						</div>
+					</div>
+				`, {
+					title: 'Create Template',
+					confirmText: 'Create',
+					confirmAction: async () => {
+						const name = $dialog.querySelector('#dlg-name').value.trim();
+						const dirInput = $dialog.querySelector('#dlg-directory').value.trim() || '/';
+
+						if(!name){
+							Toast.error('Template name is required');
+							return;
+						}
+
+						if(!isValidDir(dirInput)){
+							Toast.error('Invalid directory path');
+							return;
+						}
+
+						const directory = dirToInternal(dirInput);
+						const copyFrom = $dialog.querySelector('#dlg-copy-from').value || undefined;
+
+						const [error, data] = await createTemplate({
+							directory: directory === '.' ? '' : directory,
+							name,
+							copyFrom
+						});
+
+						if(error){
+							Toast.error(error.msg || 'Failed to create template');
+							return;
+						}
+
+						Toast.success('Template created — redirecting to editor...');
+						setTimeout(() => {
+							const editPath = data.file.replace(/\.template\.html$/, '');
+							window.location.href = `/admin/content/templates/edit?template=${encodeURIComponent(editPath)}`;
+						}, 1500);
+					},
+					cancelText: 'Cancel'
+				});
+
+				const updateSlug = () => {
+					const slug = slugify($dialog.querySelector('#dlg-name').value);
+					const dir = dirToInternal($dialog.querySelector('#dlg-directory').value);
+					const prefix = dir === '.' ? '/' : '/' + dir + '/';
+					$dialog.querySelector('#dlg-slug').textContent = slug ? `${prefix}${slug}.template.html` : '';
+				};
+				$dialog.querySelector('#dlg-directory').addEventListener('input', e => {
+					$dialog.querySelector('#dlg-dir-error').classList.toggle('d-n', isValidDir(e.target.value || '/'));
+					updateSlug();
+				});
+				$dialog.querySelector('#dlg-name').addEventListener('input', updateSlug);
+			});</script></content></page>

package/dist/admin/default.template.html

@@ -0,0 +1,9 @@
+<!--
+	owner: system
+	locked: true
+	name: 
+	author: 
+	created: 
+	updated: 
+-->
+<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" type="image/png" sizes="48x48" href="/media/icon48.png"><link rel="manifest" href="/manifest.json"><title>{{title}}</title><link rel="stylesheet" href="/kempo-css/kempo.min.css"><script src="/admin/init.js"></script><location name="head"/></head><body><fragment name="nav"/><k-main><location/></k-main><location name="scripts"/></body></html>

package/dist/admin/extensions/index.page.html

@@ -0,0 +1,32 @@
+<!--
+	locked: true
+-->
+<page title="Extensions - Admin"><content><script type="module" src="/kempo-ui/components/Table.js"></script><script type="module" src="/kempo-ui/components/tableControls/FirstPage.js"></script><script type="module" src="/kempo-ui/components/tableControls/PrevPage.js"></script><script type="module" src="/kempo-ui/components/tableControls/NextPage.js"></script><script type="module" src="/kempo-ui/components/tableControls/LastPage.js"></script><script type="module" src="/kempo-ui/components/tableControls/PageSelect.js"></script><script type="module" src="/kempo-ui/components/tableControls/PageSize.js"></script><script type="module" src="/admin/components/tableControls/InstallExtension.js"></script><script type="module" src="/admin/components/tableControls/UninstallExtension.js"></script><script type="module" src="/kempo/components/Permission.js"></script><div class="d-f mb" style="align-items: center; gap: var(--spacer);"><h1 class="flex mb0">Extensions</h1></div><h2>Installed Extensions</h2><k-table id="installedTable" enable-pages page-size="25" placeholder="No extensions are currently installed."><div slot="top" class="d-f full" style="align-items: center;"><div><k-permission has="system:extensions:uninstall"><admin-uninstall-extension></admin-uninstall-extension></k-permission></div></div><div class="d-f full" style="align-items: center;"><div><k-tc-first-page></k-tc-first-page><k-tc-prev-page></k-tc-prev-page><k-tc-next-page></k-tc-next-page><k-tc-last-page></k-tc-last-page></div><div class="flex"></div><div><k-tc-page-select></k-tc-page-select></div><div class="flex"></div><div><k-tc-page-size></k-tc-page-size></div></div></k-table><h2>Available Extensions</h2><k-table id="availableTable" enable-pages page-size="25" placeholder="No extensions are available to install. Install a kempo extension package via npm first."><div slot="top" class="d-f full" style="align-items: center;"><div><k-permission has="system:extensions:install"><admin-install-extension></admin-install-extension></k-permission></div></div><div class="d-f full" style="align-items: center;"><div><k-tc-first-page></k-tc-first-page><k-tc-prev-page></k-tc-prev-page><k-tc-next-page></k-tc-next-page><k-tc-last-page></k-tc-last-page></div><div class="flex"></div><div><k-tc-page-select></k-tc-page-select></div><div class="flex"></div><div><k-tc-page-size></k-tc-page-size></div></div></k-table></content><content location="scripts"><script type="module">import sdk from '/kempo/sdk.js';
+
+	const installedTable = document.getElementById('installedTable');
+	const availableTable = document.getElementById('availableTable');
+
+	const [installedErr, installedData] = await sdk.listExtensions();
+	if(!installedErr){
+		installedTable.setData(installedData.items, {
+			columns: [
+				{ key: 'name', label: 'Name' },
+				{ key: 'version', label: 'Version' },
+				{ key: 'description', label: 'Description' },
+				{ key: 'enabled', label: 'Enabled' },
+			]
+		});
+	}
+
+	const [availableErr, availableData] = await sdk.listAvailableExtensions();
+	if(!availableErr){
+		const installedNames = new Set((installedData?.items || []).map(e => e.name));
+		const notInstalled = availableData.items.filter(e => !installedNames.has(e.name));
+		availableTable.setData(notInstalled, {
+			columns: [
+				{ key: 'name', label: 'Name' },
+				{ key: 'version', label: 'Version' },
+				{ key: 'description', label: 'Description' },
+			]
+		});
+	}</script></content></page>

package/dist/admin/icons/article.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M280-280h280v-80H280v80Zm0-160h400v-80H280v80Zm0-160h400v-80H280v80Zm-80 480q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm0-560v560-560Z"/></svg>