pgkiln 0.41.0 → 0.42.0

package/src/runtime/devbar.ts

@@ -22,6 +22,7 @@ import { html, raw, type Raw } from '../html.ts';
 import { hashToken, newToken } from '../security.ts';
 import { saveState, sessionLimits, type Session } from '../session.ts';
 import { documentShell } from '../layout.ts';
+import { icon } from '../icons.ts';
 import type { PageContext } from './context.ts';
 
 export const DEVBAR_COOKIE = 'pgkiln_devbar';
@@ -73,30 +74,50 @@ export const sessionDebugLevel = (s: Session) => {
   return DEBUG_LEVELS.some(([level]) => level === n) ? n : 0;
 };
 
-/** The toolbar at the bottom of a page (not in dialogs). */
+/**
+ * The toolbar (not in dialogs): (sprint 72) a compact bar of icons with tooltips,
+ * centred at the bottom like APEX's. Debug, Info and Settings open small panels
+ * (<details>, so they work without JavaScript). With JavaScript (app.js) the bar
+ * shrinks to a slim tab after a few seconds without use and can be docked at the
+ * top, left or right (Settings; kept in the browser).
+ */
 export function devbarHtml(ctx: PageContext): Raw | '' {
   if (!ctx.devbar || ctx.dialog) return '';
   const level = sessionDebugLevel(ctx.session);
   const appLevel = Number(ctx.app.debug_level ?? 0);
   const page = ctx.page.page_no;
-  return html`<details class="devbar" open>
-    <summary><span>Developer</span></summary>
-    <nav aria-label="Developer toolbar"><ul>
-      <li><a href="${BUILDER}">App Builder</a></li>
-      <li><a href="${BUILDER}/apps/${ctx.app.id}">Application ${ctx.app.id}</a></li>
-      <li><a href="${BUILDER}/pages/${ctx.page.id}">Edit page ${page}</a></li>
-      <li><button type="button" class="devbar-quick" data-quick-edit="${BUILDER}/pages/${ctx.page.id}" aria-pressed="false" hidden>Quick edit</button></li>
-      <li><a href="${ctx.base}/${page}/devbar/session">Session</a></li>
-      <li><form method="post" action="${ctx.base}/${page}/devbar/debug" class="devbar-debug">
+  const tool = (href: string, label: string, name: string) =>
+    html`<li><a class="devbar-tool" href="${href}" title="${label}" aria-label="${label}">${icon(name)}</a></li>`;
+  const menu = (label: string, name: string, cls: string, body: Raw, hidden = false) =>
+    html`<li${hidden ? raw(' hidden') : ''}><details class="devbar-menu ${cls}"><summary class="devbar-tool" title="${label}" aria-label="${label}">${icon(name)}</summary>
+      <div class="devbar-pop" role="group" aria-label="${label}">${body}</div></details></li>`;
+  return html`<div class="devbar" data-dock="bottom">
+    <nav aria-label="Developer toolbar"><ul class="devbar-tools">
+      ${tool(BUILDER, 'App Builder', 'home')}
+      ${tool(`${BUILDER}/apps/${ctx.app.id}`, `Application ${ctx.app.id}`, 'grid')}
+      ${tool(`${BUILDER}/pages/${ctx.page.id}`, `Edit page ${page}`, 'edit')}
+      ${tool(`${ctx.base}/${page}/devbar/session`, 'Session', 'database')}
+      ${menu('Debug', 'bolt', `devbar-debug-menu${level || appLevel ? ' is-on' : ''}`, html`<form method="post" action="${ctx.base}/${page}/devbar/debug" class="devbar-debug">
         <input type="hidden" name="__csrf" value="${ctx.session.csrf_token}">
-        <label for="devbar-debug">Debug</label>
+        <label for="devbar-debug">Debug messages</label>
         <select id="devbar-debug" name="level">${DEBUG_LEVELS.map(([n, label]) =>
           html`<option value="${n}"${n === level ? raw(' selected') : ''}>${n === 0 ? (appLevel ? `Application (${appLevel})` : 'Off') : label}</option>`)}</select>
         <button>Set</button>
-      </form></li>
-      ${level || appLevel ? html`<li><a href="${BUILDER}/apps/${ctx.app.id}/debug">View debug</a></li>` : ''}
+      </form>${level || appLevel ? html`<a href="${BUILDER}/apps/${ctx.app.id}/debug">View debug</a>` : ''}`)}
+      <li><button type="button" class="devbar-tool devbar-quick" data-quick-edit="${BUILDER}/pages/${ctx.page.id}" aria-pressed="false" title="Quick edit" aria-label="Quick edit" hidden>${icon('scan')}</button></li>
+      ${tool(`${BUILDER}/apps/${ctx.app.id}/theme`, 'Customize (Theme Roller)', 'sliders')}
+      ${menu('Info', 'info', 'devbar-info', html`<dl class="devbar-facts">
+        <dt>Application</dt><dd>${ctx.app.name} (${ctx.app.id})</dd>
+        <dt>Page</dt><dd>${page}: ${ctx.page.name}</dd>
+        <dt>User</dt><dd>${ctx.user ?? 'nobody'}</dd>
+        <dt>Developer</dt><dd>${ctx.devbar.username}</dd>
+      </dl>`)}
+      ${menu('Settings', 'settings', 'devbar-settings', html`<fieldset class="devbar-dock"><legend>Position</legend>
+        ${(['bottom', 'top', 'left', 'right'] as const).map((d) => html`<label><input type="radio" name="devbar-dock" value="${d}"${d === 'bottom' ? raw(' checked') : ''}> ${d[0].toUpperCase() + d.slice(1)}</label>`)}
+      </fieldset>
+      <label class="devbar-autohide"><input type="checkbox" name="devbar-autohide" checked> Hide when not used</label>`, true)}
     </ul></nav>
-  </details>`;
+  </div>`;
 }
 
 const INTERNAL = /^__/;

package/src/runtime/engine.ts

@@ -271,7 +271,7 @@ async function formDml(ctx: PageContext, p: Process): Promise<string | null> {
       if (op === 'update' || v !== null) assignments.push([ident(i.source_column!), literal(v)]);
       continue;
     }
-    const conf = (i.config ?? {}) as { filename_column?: string; mime_column?: string; size_column?: string };
+    const conf = (i.config ?? {}) as { filename_column?: string; mime_column?: string; size_column?: string; updated_column?: string };
     const store = storeOf(i);
     if (store && (isTempId(v) || (v === REMOVE && op === 'update'))) {
       if (op === 'update') replaced.push([store, (await storedKey(i))!]);
@@ -282,8 +282,9 @@ async function formDml(ctx: PageContext, p: Process): Promise<string | null> {
         if (conf.filename_column) assignments.push([ident(conf.filename_column), literal(f.filename)]);
         if (conf.mime_column) assignments.push([ident(conf.mime_column), literal(f.mime)]);
         if (conf.size_column) assignments.push([ident(conf.size_column), literal(String(f.size))]);
+        if (conf.updated_column) assignments.push([ident(conf.updated_column), 'now()']);
       } else {
-        for (const col of [i.source_column!, conf.filename_column, conf.mime_column, conf.size_column]) if (col) assignments.push([ident(col), 'null']);
+        for (const col of [i.source_column!, conf.filename_column, conf.mime_column, conf.size_column, conf.updated_column]) if (col) assignments.push([ident(col), 'null']);
       }
       continue;
     }
@@ -293,10 +294,12 @@ async function formDml(ctx: PageContext, p: Process): Promise<string | null> {
       assignments.push([ident(i.source_column!), file('content')]);
       if (conf.filename_column) assignments.push([ident(conf.filename_column), file('filename')]);
       if (conf.mime_column) assignments.push([ident(conf.mime_column), file('mime_type')]);
+      // (097) the size and the time of the change, when the table keeps them
+      if (conf.size_column) assignments.push([ident(conf.size_column), file('size')]);
+      if (conf.updated_column) assignments.push([ident(conf.updated_column), 'now()']);
     } else if (v === REMOVE && op === 'update') {
       assignments.push([ident(i.source_column!), 'null']);
-      if (conf.filename_column) assignments.push([ident(conf.filename_column), 'null']);
-      if (conf.mime_column) assignments.push([ident(conf.mime_column), 'null']);
+      for (const col of [conf.filename_column, conf.mime_column, conf.size_column, conf.updated_column]) if (col) assignments.push([ident(col), 'null']);
     }
   }
   // saved into the row: the temporary files are no longer needed, replaced objects go after the commit

package/src/runtime/locale.ts

@@ -26,7 +26,7 @@ export interface Locale {
   languages: string[];
   theme: ThemeMode;
   /** the app's base style when not Standard (html data-style) */
-  style?: 'iris';
+  style?: 'iris' | 'lavender';
   /** whether users may pick light/dark themselves */
   themeChoice: boolean;
   /** dates and timestamps for display (undefined: not a date) */
@@ -199,7 +199,7 @@ export async function resolveLocale(req: FastifyRequest, app: App, session?: Ses
     messages,
     languages,
     theme: themeFor(app, session, req),
-    style: baseStyleOf(app.theme) === 'iris' ? 'iris' : undefined,
+    style: baseStyleOf(app.theme) === 'standard' ? undefined : (baseStyleOf(app.theme) as 'iris' | 'lavender'),
     themeChoice: app.theme?.user_choice !== false,
     format,
     number,

package/src/runtime/regions.ts

@@ -140,8 +140,15 @@ async function renderChart(ctx: PageContext, r: Region) {
   }
   if (!res.rows.length) return html`<p class="empty">${r.config.empty ?? ctx.locale.t('report.no_data')}</p>`;
   const kind = CHART_KINDS.includes(r.config.kind) ? r.config.kind : 'bar';
-  return html`${renderChartBody(kind, r.title ?? '', res.rows, res.fields, ctx.css, ctx.locale.lang, ctx.locale.t, {
-    ...(await chartLink(ctx, r, res.rows, res.fields)),
+  const rows = topRows(r, kind, res.rows, ctx.locale.t('chart.other'));
+  const drill: { hidden?: string[]; link?: (i: number, si: number | null) => Raw | null } = await chartLink(ctx, r, rows, res.fields);
+  // the "Other" row of a top-N chart has no drill-down
+  if (drill.link && rows !== res.rows) {
+    const inner = drill.link;
+    drill.link = (i, si) => (i === rows.length - 1 ? null : inner(i, si));
+  }
+  return html`${renderChartBody(kind, r.title ?? '', rows, res.fields, ctx.css, ctx.locale.lang, ctx.locale.t, {
+    ...drill,
     gauge: gaugeConfig(r.config.gauge),
     ...chartFormat(ctx, r),
     // the query's timestamps are in the session's time zone: so is "today"
@@ -151,6 +158,22 @@ async function renderChart(ctx: PageContext, r: Region) {
   })}${firstRows(ctx, res)}`;
 }
 
+/** Charts that may show the top rows and an "Other" row (bar, pie, donut, funnel, column). */
+const TOP_KINDS = new Set(['bar', 'column', 'donut', 'pie', 'funnel']);
+
+/**
+ * (097) {"top": 10}: the first top-1 rows and one "Other" row with the sums of
+ * the rest (the query orders the rows, largest first). Other charts, and
+ * charts with no more rows than that, keep their rows.
+ */
+export function topRows(r: Region, kind: string, rows: unknown[][], other: string): unknown[][] {
+  const top = Number(r.config.top);
+  if (!Number.isInteger(top) || top < 2 || top > 100 || !TOP_KINDS.has(kind) || rows.length <= top) return rows;
+  const rest = rows.slice(top - 1);
+  const sums = (rows[0] ?? []).map((_, ci) => (ci === 0 ? other : rest.reduce((n: number, row) => n + (Number(row[ci]) || 0), 0)));
+  return [...rows.slice(0, top - 1), sums];
+}
+
 /** {"format_mask": "FML999G990"}: the chart's values (labels, tips, data table) with a number format mask. */
 function chartFormat(ctx: PageContext, r: Region): { format?: (v: number) => string } {
   const mask = typeof r.config.format_mask === 'string' ? r.config.format_mask.trim() : '';

package/src/runtime/render.ts

@@ -14,7 +14,7 @@ import type { NavEntry } from '../metadata.ts';
 import { isAuthorized, pageAllowed } from './authz.ts';
 import { stripSemicolon, dbg, bindValues, substitute, type PageContext } from './context.ts';
 import { applyBinds } from '../binds.ts';
-import { savepoint } from '../db.ts';
+import { runtime, savepoint } from '../db.ts';
 import { renderItems } from './items.ts';
 import { buttonsFor, renderRegion } from './regions.ts';
 import { listTree, navbarMarkup, navMarkup } from './lists.ts';
@@ -112,7 +112,8 @@ async function navTree(ctx: PageContext, topNav = false) {
       out.push(
         children.length
           ? html`<li><details${inTrail && !topNav ? raw(' open') : ''}><summary class="${inTrail ? 'in-trail' : null}">${label}</summary><ul>${children}</ul></details></li>`
-          : html`<li><a href="${ctx.base}/${e.target_page}"${active ? raw(' aria-current="page"') : inTrail ? raw(' class="in-trail"') : ''}>${label}</a></li>`,
+          : // (097) every page sits below Home: the home entry is only marked when it is the current page
+            html`<li><a href="${ctx.base}/${e.target_page}"${active ? raw(' aria-current="page"') : inTrail && e.target_page !== ctx.app.home_page ? raw(' class="in-trail"') : ''}>${label}</a></li>`,
       );
     }
     return out;
@@ -265,6 +266,8 @@ export async function chrome(ctx: PageContext, main: Raw, title: string) {
   const feedback = feedbackNode(ctx);
   const navbarNodes = listNodes || feedback ? [...(listNodes ?? []), ...(feedback ? [feedback] : [])] : null;
   const navbar = navbarNodes ? navbarMarkup(navbarNodes, t('list.navbar')) : '';
+  // (sprint 72) the account's display name in the user menu
+  const shown = signedIn ? ((await displayName(ctx.user)) ?? ctx.user) : ctx.user;
   return documentShell(
     `${title} · ${ctx.app.name}`,
     html`<a class="skip-link" href="#main">${t('common.skip')}</a>
@@ -272,13 +275,14 @@ export async function chrome(ctx: PageContext, main: Raw, title: string) {
       <a href="#t-nav" class="t-nav-toggle icon-button" role="button" aria-label="${t('common.toggle_nav')}" aria-controls="t-nav">${icon('menu')}</a>
       <a class="t-logo" href="${ctx.base}/${ctx.app.home_page}">${ctx.app.name}</a>
       <span class="t-spacer"></span>
+      ${ctx.app.pwa ? html`<button type="button" class="icon-button t-install" data-pwa-install hidden title="${t('pwa.install')}" aria-label="${t('pwa.install')}">${icon('download')}</button>` : ''}
       ${navbar}
       ${ctx.app.authentication !== 'none'
         ? signedIn
           ? html`<details class="menu t-user">
-              <summary>${icon('user')}<span>${ctx.user}</span></summary>
+              <summary>${icon('user')}<span>${shown}</span></summary>
               <div class="menu-panel align-right">
-                <div class="menu-section"><strong>${ctx.user}</strong>${ctx.roles.length ? html`<div class="muted">${t('account.roles')}: ${ctx.roles.join(', ')}</div>` : ''}</div>
+                <div class="menu-section"><strong>${shown}</strong>${shown !== ctx.user ? html`<div class="muted">${ctx.user}</div>` : ''}${ctx.roles.length ? html`<div class="muted">${t('account.roles')}: ${ctx.roles.join(', ')}</div>` : ''}</div>
                 <div class="menu-section"><a href="${ctx.base}/account">${icon('user')} ${t('account.menu')}</a></div>
                 ${themeSwitch(ctx, here(ctx))}
                 ${styleSwitch(ctx, here(ctx))}
@@ -410,3 +414,13 @@ export function dialogClosePage(ctx: PageContext) {
     { lang: ctx.locale.lang, dir: ctx.locale.dir, theme: ctx.locale.theme, style: ctx.locale.style },
   );
 }
+
+/** (sprint 72) An account's display name (null when it has none, or for users outside the user directory). */
+async function displayName(username: string): Promise<string | null> {
+  try {
+    const r = await runtime.query<{ display_name: string | null }>('select display_name from meta.account where lower(username) = lower($1)', [username]);
+    return r.rows[0]?.display_name?.trim() || null;
+  } catch {
+    return null;
+  }
+}

package/src/runtime/report.ts

@@ -794,7 +794,7 @@ export async function renderReport(ctx: PageContext, r: Region, filterItems: Raw
     } catch (e) {
       failure = await publicError(ctx, e, `report "${r.title ?? r.id}" aggregates`);
     }
-  const link = r.config.link as { column: string; page: number; items?: Record<string, string> } | undefined;
+  const link = r.config.link as { column: string; page: number; items?: Record<string, string>; icon?: boolean } | undefined;
   const linkIdx = link && (await pageAllowed(ctx, link.page)) ? fields.findIndex((f) => f.name.toLowerCase() === link.column.toLowerCase()) : -1;
   const pre = new Set<string>((r.config.preformatted ?? []).map((x: string) => x.toLowerCase()));
   let computeErrors: { c: Computation; message: string }[] = [];
@@ -803,7 +803,9 @@ export async function renderReport(ctx: PageContext, r: Region, filterItems: Raw
   const selection = st.view === 'report' ? selectionOf(ctx.page, r) : null;
   const selIdx = selection ? fields.findIndex((f) => f.name.toLowerCase() === selection.column.toLowerCase()) : -1;
   const selected = new Set(selIdx >= 0 ? splitValues(ctx.session.state[selection!.item] ?? '') : []);
-  const lead = selIdx >= 0 ? 1 : 0;
+  // (097) {"link": {"icon": true}}: a pencil link in a column of its own; the key column is plain text
+  const editIcon = linkIdx >= 0 && link!.icon === true && st.view === 'report';
+  const lead = (selIdx >= 0 ? 1 : 0) + (editIcon ? 1 : 0);
   // columns rendered through a template component (config.column_templates)
   const fmtOf = columnFormats(ctx, r);
   const templated = st.view === 'report' ? await columnTemplates(ctx, r, fields, (v, oid) => cell(v, oid, ctx.locale.format), (v) => cell(v)) : new Map();
@@ -840,12 +842,13 @@ export async function renderReport(ctx: PageContext, r: Region, filterItems: Raw
     });
     return html`<th scope="col" class="${cls}" aria-sort="${active ? (st.desc ? 'descending' : 'ascending') : 'none'}"><a href="${href}">${label}<span class="sort-ind" aria-hidden="true">${active ? (st.desc ? '▼' : '▲') : ''}</span></a></th>`;
   });
-  if (lead) header.unshift(html`<th scope="col" class="row-select"><label><input type="checkbox" data-select-all="${selection!.item}" aria-label="${t('report.select_all')}"><span class="row-select-label" aria-hidden="true">${t('report.select_all')}</span></label></th>`);
+  if (editIcon) header.unshift(html`<th scope="col" class="row-edit" aria-label="${t('report.edit')}"></th>`);
+  if (selIdx >= 0) header.unshift(html`<th scope="col" class="row-select"><label><input type="checkbox" data-select-all="${selection!.item}" aria-label="${t('report.select_all')}"><span class="row-select-label" aria-hidden="true">${t('report.select_all')}</span></label></th>`);
 
   // an aggregate row (totals, or a control break's subtotals): the values
   // under their columns, the label in the first cell
   const aggRow = (values: unknown[], label: string, cls: string) =>
-    html`<tr class="${cls}">${lead ? html`<td class="row-select"></td>` : ''}${cols.map(({ f }, ci) => {
+    html`<tr class="${cls}">${selIdx >= 0 ? html`<td class="row-select"></td>` : ''}${editIcon ? html`<td class="row-edit"></td>` : ''}${cols.map(({ f }, ci) => {
       const parts = agg!.aggs.flatMap((a, ai) => (a.column === f.name ? [`${t(`agg.${a.fn}`)}: ${cell(values[ai], agg!.types[ai], aggregateFormat(a.fn, f.name, fmtOf, ctx.locale.format))}`] : []));
       const text = [ci === 0 ? label : '', ...parts].filter(Boolean).join(' · ');
       return html`<td class="${parts.length && NUMERIC_OIDS.has(f.dataTypeID) ? 'num' : null}" data-label="${parts.length ? headingOf(r, f.name, ctx.locale.tr) : ''}">${text}</td>`;
@@ -867,17 +870,20 @@ export async function renderReport(ctx: PageContext, r: Region, filterItems: Raw
       }
     }
     const hl = st.highlights.find((_, hi) => hlIdx[hi] >= 0 && row[hlIdx[hi]] === true);
-    const pick = lead
+    const pick = selIdx >= 0
       ? html`<td class="row-select" data-label="${t('report.select_row')}"><input type="checkbox" name="${selection!.item}" value="${cell(row[selIdx])}"${selected.has(cell(row[selIdx])) ? raw(' checked') : ''} aria-label="${t('report.select_row')} ${cell(row[selIdx])}"></td>`
       : '';
     rowNum++;
-    body.push(html`<tr class="${hl ? `hl-${hl.color}` : null}">${pick}${cols.map(({ f, i }) => {
+    const edit = editIcon
+      ? html`<td class="row-edit"><a ${linkAttrs(ctx, link!.page, rowItems(row))} aria-label="${t('report.edit')} ${cell(row[linkIdx])}" title="${t('report.edit')}">${icon('edit')}</a></td>`
+      : '';
+    body.push(html`<tr class="${hl ? `hl-${hl.color}` : null}">${pick}${edit}${cols.map(({ f, i }) => {
       const text = cell(row[i], f.dataTypeID, fmtOf(f.name));
       const cls = [NUMERIC_OIDS.has(f.dataTypeID) ? 'num' : '', pre.has(f.name.toLowerCase()) ? 'pre' : '', colOpts(f.name)].filter(Boolean).join(' ') || null;
       const label = headingOf(r, f.name, ctx.locale.tr);
       const tpl = templated.get(i);
       if (tpl) return html`<td class="${cls ? `${cls} tc-cell` : 'tc-cell'}" data-label="${label}">${tpl(row, rowNum)}</td>`;
-      return i === linkIdx
+      return i === linkIdx && !editIcon
         ? html`<td class="${cls}" data-label="${label}"><a ${linkAttrs(ctx, link!.page, rowItems(row))}>${text || t('report.edit')}</a></td>`
         : html`<td class="${cls}" data-label="${label}">${text}</td>`;
     })}</tr>`);
@@ -1098,12 +1104,12 @@ export async function renderReport(ctx: PageContext, r: Region, filterItems: Raw
   // app.js records each change (POST …/report/<id>/select), so paging keeps them
   const onPage = new Set(selIdx >= 0 ? info.rows.map((row) => cell(row[selIdx])) : []);
   const elsewhere = [...selected].filter((v) => !onPage.has(v));
-  const selectionNote = lead
+  const selectionNote = selIdx >= 0
     ? html`<p class="sel-count muted" data-sel-count="${r.id}" aria-live="polite">${selected.size ? t('report.selected_count', { n: selected.size }) : ''}</p>
       ${elsewhere.map((v) => html`<input type="hidden" name="${selection!.item}" value="${v}" data-sel-other>`)}`
     : '';
   return html`${toolbar}${switcher}${errors}${selectionNote}
-    <div class="table-wrap"><table class="report${r.config.mobile === 'scroll' ? '' : ' report-reflow'}"${lead ? raw(` data-sel-region="${r.id}"`) : ''}>
+    <div class="table-wrap"><table class="report${r.config.mobile === 'scroll' ? '' : ' report-reflow'}"${selIdx >= 0 ? raw(` data-sel-region="${r.id}"`) : ''}>
       <thead><tr>${header}</tr></thead>
       <tbody>${body.length ? body : html`<tr><td colspan="${cols.length + lead || 1}" class="empty">${empty}</td></tr>`}</tbody>
       ${info.rows.length ? foot : ''}

package/src/runtime/styles.ts

@@ -32,13 +32,16 @@ const MAX_CONDITION = 2000;
  */
 export const BASE_STYLES = {
   standard: { label: 'Standard', accent: '#0b63c5', header: '#13294b' },
-  iris: { label: 'Iris', accent: '#5146d8', header: '#1e1a4d' },
+  iris: { label: 'Iris', accent: '#2b62c4', header: '#3a3632' },
+  /** (sprint 72) pgkiln's Iris until 0.41: lavender, rounded */
+  lavender: { label: 'Lavender', accent: '#5146d8', header: '#1e1a4d' },
 } as const;
 export type BaseStyle = keyof typeof BASE_STYLES;
 /** New applications start with this base style. */
 export const NEW_APP_BASE: BaseStyle = 'iris';
 /** The application's base style (anything else than a known key: Standard). */
-export const baseStyleOf = (theme: { base?: unknown } | undefined): BaseStyle => (theme?.base === 'iris' ? 'iris' : 'standard');
+export const baseStyleOf = (theme: { base?: unknown } | undefined): BaseStyle =>
+  theme?.base === 'iris' || theme?.base === 'lavender' ? theme.base : 'standard';
 export const STYLE_NAME = /^[A-Za-z0-9][A-Za-z0-9 _-]{0,29}$/;
 export const MAX_STYLES = 10;