@threadlabs/looma 0.28.8 → 0.28.10

package/editor/link-editing.d.ts

@@ -0,0 +1,85 @@
+import type { Editor } from "@tiptap/core";
+/** A destination supplied by the host application, such as a page or record. */
+export interface LoomaLinkTarget {
+    id: string;
+    label: string;
+    detail?: string;
+    href: string;
+}
+/**
+ * Finds host records for a link without teaching the editor how they are stored.
+ * @ownership The host checks access and returns durable, openable href values.
+ * @failure A rejection leaves the existing document untouched and shows a retryable search error.
+ */
+export type LoomaLinkSearch = (query: string) => Promise<LoomaLinkTarget[]>;
+/**
+ * Describes a saved host link so a renamed record can show its current label.
+ * @ownership The host resolves identity and access; Looma keeps the saved href as is.
+ * @failure A rejection leaves the original href visible and editable.
+ */
+export type LoomaLinkResolve = (href: string) => Promise<LoomaLinkTarget | null>;
+/** The link form's state and the resolved target of the link at the caret. */
+export interface LoomaLinkEditingState {
+    /** Where the form shows: nowhere, in the toolbar's popover, or in place of the link card. */
+    readonly surface: "none" | "popover" | "context";
+    /** The range the form links, and whether it was already a link when the form opened. */
+    readonly range: {
+        readonly from: number;
+        readonly to: number;
+        readonly existing: boolean;
+    } | null;
+    readonly mode: "target" | "url";
+    readonly query: string;
+    readonly href: string;
+    readonly text: string;
+    readonly textEditable: boolean;
+    readonly newTab: boolean;
+    readonly error: string;
+    readonly results: readonly LoomaLinkTarget[];
+    readonly searching: boolean;
+    readonly selected: LoomaLinkTarget | null;
+    /** What the link at the caret resolves to, for the link card. */
+    readonly current: LoomaLinkTarget | null;
+}
+export interface LoomaLinkEditingOptions {
+    editor: Editor;
+    /** Read on each use, so a host can change them while the editor runs. */
+    search: () => LoomaLinkSearch | null | undefined;
+    resolve: () => LoomaLinkResolve | null | undefined;
+    baseUrl: () => string;
+}
+/**
+ * The editor's link form as a state machine: what the form holds, how it applies to the
+ * document as the reader types, and the host's search and resolve calls.
+ *
+ * @ownership The host owns presentation: where the form shows, focus, and which selection it
+ * opens on. This owns the form's state and the link mark it writes.
+ * @lifecycle Listens to the editor's transactions until `destroy()`; results of a search or lookup
+ * that finish after a newer one, or after `destroy()`, are dropped.
+ */
+export interface LoomaLinkEditing {
+    readonly state: LoomaLinkEditingState;
+    /** Calls `listener` after every state change; returns the unsubscribe function. */
+    subscribe(listener: () => void): () => void;
+    /** Opens the form on `from`–`to`, filled from the link there if there is one. */
+    open(from: number, to: number, surface: "popover" | "context"): void;
+    setDestination(value: string): void;
+    clear(): void;
+    choose(target: LoomaLinkTarget): void;
+    setNewTab(newTab: boolean): void;
+    setText(text: string): void;
+    /**
+     * Writes the form's link to its range without moving focus.
+     * @failure Returns false and leaves the document unchanged when the destination or text is
+     * missing or invalid; `reportError` also sets the form's error.
+     */
+    apply(reportError?: boolean): boolean;
+    close(): void;
+    /** Removes the link at the caret. */
+    remove(): void;
+    destroy(): void;
+}
+/** The status line above search results: progress, a hint, or an empty result. */
+export declare function linkFormStatus(state: LoomaLinkEditingState): string;
+export declare const LOOMA_LINK_EDITING_IDLE: LoomaLinkEditingState;
+export declare function createLinkEditing(options: LoomaLinkEditingOptions): LoomaLinkEditing;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.28.8",
+  "version": "0.28.10",
   "type": "module",
   "description": "Looma components as HTML, Vue, and plain DOM, with design tokens.",
   "license": "MIT",

package/styles/ui-editor-code-language.css

@@ -0,0 +1 @@
+/* Generated by HTML Next 1.0.0-alpha.51. Do not edit. */

package/vanilla/UiEditorCodeLanguage.d.ts

@@ -0,0 +1,16 @@
+// Generated by HTML Next 1.0.0-alpha.51 for Vanilla DOM. Do not edit.
+export interface UiEditorCodeLanguageEventMap {
+  language: CustomEvent<{ readonly value: string }>;
+}
+export interface UiEditorCodeLanguageElement extends HTMLDivElement {
+  addEventListener<K extends keyof UiEditorCodeLanguageEventMap>(type: K, listener: (this: UiEditorCodeLanguageElement, event: UiEditorCodeLanguageEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof UiEditorCodeLanguageEventMap>(type: K, listener: (this: UiEditorCodeLanguageElement, event: UiEditorCodeLanguageEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+}
+export interface UiEditorCodeLanguageProps {
+  languages?: readonly ({ readonly value: string; readonly label: string })[] | null;
+  value?: string | null;
+  attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
+  children?: readonly (string | Node)[];
+  slots?: Readonly<Record<string, readonly (string | Node)[]>>;
+}
+export declare function createUiEditorCodeLanguage(props?: UiEditorCodeLanguageProps): UiEditorCodeLanguageElement;

package/vanilla/UiEditorCodeLanguage.js

@@ -0,0 +1,64 @@
+// Generated by HTML Next 1.0.0-alpha.51 for Vanilla DOM. Do not edit.
+import { attachGeneratedController, buildTemplate, KeyedList, readMember, toAttribute, toText, trackContainer, writeAttribute, dispatchDeclared, detailCheck, acceptProps, manageProps, checkList, checkObject, checkString } from "@nextwebwg/html-next/generated-runtime";
+import * as controller from "../components/ui-editor-code-language/ui-editor-code-language.js";
+import "../styles/ui-editor-code-language.css";
+
+const T0 = ["",[],["ui-combobox",["label","Code language","label-visibility","sr-only","size","sm","filter","label"],2]];
+const T1 = ["option",[],0];
+let P0, P1;
+const E = new Map();
+const S = { n: [], t: [], f: import.meta.url, g: "ui-editor-code-language", d: { "language": [detailCheck(checkObject([["value", checkString, false]], false)), true, true, false] }, x: dispatchDeclared };
+const D = { props: { "languages": { "required":false,"default":[], c: checkList(checkObject([["value", checkString, false], ["label", checkString, false]], false)), j: 1, m: ["l",["o",["value","s","label","s"]]] }, "value": { "required":false,"default":"auto", c: checkString, t: "string", j: 0, m: "s" } } };
+const C = (host) => controller.default(host);
+
+export function createUiEditorCodeLanguage(options = {}, html) {
+  const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
+  const element = document.createElement("div");
+  for (const [name, value] of Object.entries(attributes)) {
+    if (value === null || value === undefined || value === false) continue;
+    element.setAttribute(name, value === true ? "" : String(value));
+  }
+  element.setAttribute("data-component", "ui-editor-code-language");
+  element.append((P0 ??= buildTemplate(T0)).cloneNode(true));
+  const v = [null, null];
+  const B = acceptProps(element, D, S.n, v, componentProps, [], html);
+  const m1 = (o, j, l) => {
+    const n = (P1 ??= buildTemplate(T1)).cloneNode(true);
+    const t0 = n.firstChild;
+    const r = { k: undefined, i: o, n, x: 0, y: 0, a1: t0, w: 0, v0: null, v1: "" };
+    p1(r, -1, E);
+    return r;
+  };
+  const p1 = (r, c, d) => {
+    const o = r.i;
+    if (c & 1073741824) {
+      r.w = 0;
+      const x0 = trackContainer(r, readMember(o, "value"));
+      const s0 = toAttribute(x0, "value");
+      if (s0 !== r.v0) writeAttribute(r.n, "value", r.v0 = s0);
+      const x1 = trackContainer(r, readMember(o, "label"));
+      const s1 = toText(x1);
+      if (s1 !== r.v1) r.a1.data = r.v1 = s1;
+    }
+  };
+  const p0 = (r, c, d) => {
+    if (c === -1) {
+      const x0 = true;
+      const s0 = toAttribute(x0, "disclosure");
+      if (s0 !== r.v0) writeAttribute(r.a0, "disclosure", r.v0 = s0);
+    }
+    if (c & 2) {
+      const x1 = v[1];
+      const s1 = toAttribute(x1, "value");
+      if (s1 !== r.v1) writeAttribute(r.a0, "value", r.v1 = s1);
+    }
+    if (c & 1073741825) r.L0.update(v[0], d, c);
+  };
+  const t0 = element.firstChild;
+  const t1 = t0.firstChild;
+  const R = { a0: t0, v0: null, v1: null, L0: new KeyedList(t1, t1.nextSibling, m1, p1, (o) => readMember(o, "value"), "language") };
+  const I = { B };
+  attachGeneratedController(element, S, v, ((c, d) => p0(R, c, d)), C, undefined, I);
+  manageProps(I);
+  return element;
+}

package/vanilla/index.js

@@ -20,6 +20,7 @@ export * from "./UiDialog.js";
 export * from "./UiDisclosure.js";
 export * from "./UiEditable.js";
 export * from "./UiEditorBlockActions.js";
+export * from "./UiEditorCodeLanguage.js";
 export * from "./UiEditorImageToolbar.js";
 export * from "./UiEditorInsertTableGrid.js";
 export * from "./UiEditorLinkCard.js";

package/vue/UiEditorCodeLanguage.d.ts

@@ -0,0 +1,44 @@
+import type { PropType } from 'vue';
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    languages: {
+        type: PropType<readonly ({
+            readonly value: string;
+            readonly label: string;
+        })[] | null>;
+        default: () => never[];
+    };
+    value: {
+        type: PropType<string | null>;
+        default: string;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:value": (value: string) => any;
+    language: (event: CustomEvent<{
+        readonly value: string;
+    }>) => any;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    languages: {
+        type: PropType<readonly ({
+            readonly value: string;
+            readonly label: string;
+        })[] | null>;
+        default: () => never[];
+    };
+    value: {
+        type: PropType<string | null>;
+        default: string;
+    };
+}>> & Readonly<{
+    "onUpdate:value"?: ((value: string) => any) | undefined;
+    onLanguage?: ((event: CustomEvent<{
+        readonly value: string;
+    }>) => any) | undefined;
+}>, {
+    value: string | null;
+    languages: readonly {
+        readonly value: string;
+        readonly label: string;
+    }[] | null;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/vue/UiEditorCodeLanguage.js

@@ -0,0 +1,2 @@
+import { t as UiEditorCodeLanguage_default } from "./chunks/UiEditorCodeLanguage.js";
+export { UiEditorCodeLanguage_default as default };

package/vue/UiEditorCodeLanguage.vue

@@ -0,0 +1,156 @@
+<!-- Generated by HTML Next 1.0.0-alpha.51 for Vue 3.5. Do not edit. -->
+<script setup lang="ts">
+import { computed, getCurrentInstance, ref, watchSyncEffect } from 'vue'
+import type { PropType } from 'vue'
+import {
+  checkHydratedRoot,
+  createDispatch,
+  KeyedBoundary,
+  nativeAttrs,
+  uniqueKeys,
+  useComponentHost,
+  useReflectedProp,
+} from './host'
+import { checkedProp, propValidityState, vPropValidity } from './props'
+import UiCombobox from './UiCombobox.vue'
+
+defineOptions({ inheritAttrs: false })
+
+const propValidityContract = {
+  props: {
+    languages: {
+      type: {
+        kind: 'list',
+        item: {
+          kind: 'object',
+          fields: [{ name: 'value', type: { kind: 'terminal', name: 'string' }, optional: false }, {
+            name: 'label',
+            type: { kind: 'terminal', name: 'string' },
+            optional: false,
+          }],
+          open: false,
+        },
+      },
+      required: false,
+      target: { attribute: 'languages' },
+      description:
+        'The languages to offer, in order, each with its label; the editor lists Auto first and marks a saved language it cannot highlight.',
+      default: [],
+    },
+    value: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'value' },
+      description: 'The code block\'s language, or auto to detect it.',
+      default: 'auto',
+    },
+  },
+} as const
+const props = defineProps({
+  languages: {
+    type: null as unknown as PropType<
+      readonly ({ readonly value: string; readonly label: string })[] | null
+    >,
+    default: () => [],
+  },
+  value: { type: null as unknown as PropType<string | null>, default: 'auto' },
+})
+const acceptedProps: Record<string, unknown> = { languages: () => [], value: 'auto' }
+const checkedProps = computed(() => ({
+  languages: checkedProp<readonly ({ readonly value: string; readonly label: string })[]>(
+    props['languages'],
+    {
+      kind: 'list',
+      item: {
+        kind: 'object',
+        fields: [{ name: 'value', type: { kind: 'terminal', name: 'string' }, optional: false }, {
+          name: 'label',
+          type: { kind: 'terminal', name: 'string' },
+          optional: false,
+        }],
+        open: false,
+      },
+    },
+    false,
+    'languages',
+    acceptedProps,
+  ) as readonly ({ readonly value: string; readonly label: string })[],
+  value: checkedProp<string>(
+    props['value'],
+    { kind: 'terminal', name: 'string' },
+    false,
+    'value',
+    acceptedProps,
+  ) as string,
+}))
+void checkedProps.value
+watchSyncEffect(() => {
+  void checkedProps.value
+})
+const reflectedProp = useReflectedProp()
+const hydrationInstance = getCurrentInstance()
+const emit = defineEmits<{
+  'update:value': [value: string]
+  language: [event: CustomEvent<{ readonly value: string }>]
+}>()
+
+const root = ref<HTMLElement | null>(null)
+checkHydratedRoot('div', 'ui-editor-code-language')
+
+const isLanguageDetail = (
+  detail: unknown,
+): boolean => (detail !== null && typeof detail === 'object' && !Array.isArray(detail)
+  && typeof (detail as Record<string, unknown>)['value'] === 'string'
+  && Object.keys(detail as object).every((key) => ['value'].includes(key)))
+const dispatch = createDispatch(root, emit as (name: string, detail: unknown) => void, {
+  checks: {
+    language: isLanguageDetail,
+  },
+  modeled: ['value'],
+})
+
+useComponentHost(() => import('../components/ui-editor-code-language/ui-editor-code-language.js'), {
+  root,
+  dispatch,
+  controllerSource: {
+    specifier: '../components/ui-editor-code-language/ui-editor-code-language.js',
+    definition: './components/ui-editor-code-language/ui-editor-code-language.html',
+  },
+  props: checkedProps,
+  propInputs: (name: string) => {
+    const incoming = hydrationInstance?.vnode.props
+    const kebab = name.replace(/[A-Z]/g, (letter) => '-' + letter.toLowerCase())
+    return incoming !== null && incoming !== undefined
+      ? (incoming[name] ?? incoming[kebab] ?? null)
+      : null
+  },
+  propNames: ['languages', 'value'],
+  propValidity: (name: string) =>
+    propValidityState({ contract: propValidityContract, values: { ...props } }, name),
+})
+</script>
+
+<template>
+  <div
+    v-bind="nativeAttrs($attrs)"
+    v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
+    :data-languages="reflectedProp('languages', 'languages', checkedProps.languages, undefined, false)"
+    :data-value="reflectedProp('value', 'value', checkedProps.value, undefined, false)"
+    ref="root"
+  >
+    <UiCombobox
+      label="Code language"
+      label-visibility="sr-only"
+      size="sm"
+      filter="label"
+      :disclosure="true"
+      :value="checkedProps.value"
+    ><KeyedBoundary><option
+          v-for="language in uniqueKeys(checkedProps.languages, (language, index, loop) => language.value)"
+          :key="language.value"
+          :value="language.value"
+        >
+          {{ language.label }}
+        </option></KeyedBoundary></UiCombobox>
+  </div>
+</template>

package/vue/chunks/UiEditorCodeLanguage.js

@@ -0,0 +1,163 @@
+import { _ as uniqueKeys, i as checkHydratedRoot, n as KeyedBoundary, o as createDispatch, p as nativeAttrs, v as useComponentHost, y as useReflectedProp } from "./_plugin-vue_export-helper.js";
+import { a as vPropValidity, n as checkedProp, r as propValidityState } from "./props.js";
+import { t as UiCombobox_default } from "./UiCombobox.js";
+import { Fragment, computed, createElementBlock, createVNode, defineComponent, getCurrentInstance, mergeProps, openBlock, ref, renderList, toDisplayString, unref, watchSyncEffect, withCtx, withDirectives } from "vue";
+//#region .build/vue/UiEditorCodeLanguage.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["data-languages", "data-value"];
+var _hoisted_2 = ["value"];
+//#endregion
+//#region .build/vue/UiEditorCodeLanguage.vue
+var UiEditorCodeLanguage_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "UiEditorCodeLanguage",
+	props: {
+		languages: {
+			type: null,
+			default: () => []
+		},
+		value: {
+			type: null,
+			default: "auto"
+		}
+	},
+	emits: ["update:value", "language"],
+	setup(__props, { emit: __emit }) {
+		const propValidityContract = { props: {
+			languages: {
+				type: {
+					kind: "list",
+					item: {
+						kind: "object",
+						fields: [{
+							name: "value",
+							type: {
+								kind: "terminal",
+								name: "string"
+							},
+							optional: false
+						}, {
+							name: "label",
+							type: {
+								kind: "terminal",
+								name: "string"
+							},
+							optional: false
+						}],
+						open: false
+					}
+				},
+				required: false,
+				target: { attribute: "languages" },
+				description: "The languages to offer, in order, each with its label; the editor lists Auto first and marks a saved language it cannot highlight.",
+				default: []
+			},
+			value: {
+				type: {
+					kind: "terminal",
+					name: "string"
+				},
+				required: false,
+				target: { attribute: "value" },
+				description: "The code block's language, or auto to detect it.",
+				default: "auto"
+			}
+		} };
+		const props = __props;
+		const acceptedProps = {
+			languages: () => [],
+			value: "auto"
+		};
+		const checkedProps = computed(() => ({
+			languages: checkedProp(props["languages"], {
+				kind: "list",
+				item: {
+					kind: "object",
+					fields: [{
+						name: "value",
+						type: {
+							kind: "terminal",
+							name: "string"
+						},
+						optional: false
+					}, {
+						name: "label",
+						type: {
+							kind: "terminal",
+							name: "string"
+						},
+						optional: false
+					}],
+					open: false
+				}
+			}, false, "languages", acceptedProps),
+			value: checkedProp(props["value"], {
+				kind: "terminal",
+				name: "string"
+			}, false, "value", acceptedProps)
+		}));
+		checkedProps.value;
+		watchSyncEffect(() => {
+			checkedProps.value;
+		});
+		const reflectedProp = useReflectedProp();
+		const hydrationInstance = getCurrentInstance();
+		const emit = __emit;
+		const root = ref(null);
+		checkHydratedRoot("div", "ui-editor-code-language");
+		const isLanguageDetail = (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && typeof detail["value"] === "string" && Object.keys(detail).every((key) => ["value"].includes(key));
+		const dispatch = createDispatch(root, emit, {
+			checks: { language: isLanguageDetail },
+			modeled: ["value"]
+		});
+		useComponentHost(() => import("@threadlabs/looma/components/ui-editor-code-language/ui-editor-code-language.js"), {
+			root,
+			dispatch,
+			controllerSource: {
+				specifier: "../components/ui-editor-code-language/ui-editor-code-language.js",
+				definition: "./components/ui-editor-code-language/ui-editor-code-language.html"
+			},
+			props: checkedProps,
+			propInputs: (name) => {
+				const incoming = hydrationInstance?.vnode.props;
+				const kebab = name.replace(/[A-Z]/g, (letter) => "-" + letter.toLowerCase());
+				return incoming !== null && incoming !== void 0 ? incoming[name] ?? incoming[kebab] ?? null : null;
+			},
+			propNames: ["languages", "value"],
+			propValidity: (name) => propValidityState({
+				contract: propValidityContract,
+				values: { ...props }
+			}, name)
+		});
+		return (_ctx, _cache) => {
+			return withDirectives((openBlock(), createElementBlock("div", mergeProps(unref(nativeAttrs)(_ctx.$attrs), {
+				"data-languages": unref(reflectedProp)("languages", "languages", checkedProps.value.languages, void 0, false),
+				"data-value": unref(reflectedProp)("value", "value", checkedProps.value.value, void 0, false),
+				ref_key: "root",
+				ref: root
+			}), [createVNode(UiCombobox_default, {
+				label: "Code language",
+				"label-visibility": "sr-only",
+				size: "sm",
+				filter: "label",
+				disclosure: true,
+				value: checkedProps.value.value
+			}, {
+				default: withCtx(() => [createVNode(unref(KeyedBoundary), null, {
+					default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(uniqueKeys)(checkedProps.value.languages, (language, index, loop) => language.value), (language) => {
+						return openBlock(), createElementBlock("option", {
+							key: language.value,
+							value: language.value
+						}, toDisplayString(language.label), 9, _hoisted_2);
+					}), 128))]),
+					_: 1
+				})]),
+				_: 1
+			}, 8, ["value"])], 16, _hoisted_1)), [[unref(vPropValidity), {
+				contract: propValidityContract,
+				values: { ...props }
+			}]]);
+		};
+	}
+});
+//#endregion
+export { UiEditorCodeLanguage_default as t };

package/vue/editor/LoomaEditor.d.ts

@@ -4,6 +4,7 @@ import { type AnyExtension, type Editor, type JSONContent } from "@tiptap/core";
 import { type PropType, type VNode } from "vue";
 import { type LoomaSlashCommand, type LoomaMentionItem, type LoomaMentionProvider, type LoomaCodeLanguages } from "@threadlabs/looma/editor";
 import { type LoomaImageActivationDetail, type LoomaImageAttributeResolver, type LoomaImageDescriptor, type LoomaImageRenditionErrorDetail } from "../../editor/image-delivery.js";
+import { type LoomaLinkResolve, type LoomaLinkSearch } from "../../editor/link-editing.js";
 /**
  * Host upload result normalized into the editor's durable image descriptor.
  * `url` becomes the stored `src`; optional dimensions preserve layout before
@@ -62,25 +63,7 @@ export interface LoomaEditorSelectionActionDetail {
  * fresh defaults and invokes this factory when the inventory prop changes.
  */
 export type LoomaEditorSlashCommands = LoomaSlashCommand[] | ((defaults: LoomaSlashCommand[]) => LoomaSlashCommand[]);
-/** A destination supplied by the host application, such as a page or record. */
-export interface LoomaLinkTarget {
-    id: string;
-    label: string;
-    detail?: string;
-    href: string;
-}
-/**
- * Finds host records for a link without teaching the editor how they are stored.
- * @ownership The host checks access and returns durable, openable href values.
- * @failure A rejection leaves the existing document untouched and shows a retryable search error.
- */
-export type LoomaLinkSearch = (query: string) => Promise<LoomaLinkTarget[]>;
-/**
- * Describes a saved host link so a renamed record can show its current label.
- * @ownership The host resolves identity and access; Looma keeps the saved href as is.
- * @failure A rejection leaves the original href visible and editable.
- */
-export type LoomaLinkResolve = (href: string) => Promise<LoomaLinkTarget | null>;
+export type { LoomaLinkResolve, LoomaLinkSearch, LoomaLinkTarget } from "../../editor/link-editing.js";
 /**
  * Turnkey Vue editor that composes Looma's framework-neutral Tiptap extensions
  * with declarative menus, image delivery, and table interaction chrome.