@swiftwc/ui 0.0.0-dev.94 → 0.0.0-dev.96

package/generated/components/table-view.js

@@ -3,10 +3,11 @@ import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { CSSStyleObserver } from '../internal/class/css-style-observer';
 import { MutationObserverSet } from '../internal/class/mutation-observer-set';
 import { $, devFlags, listActive, onoff } from '../internal/utils';
-import { html, queryMorph } from '../morphdom';
+import { queryMorph } from '../morphdom';
 import { Snapshot } from '../snapshot';
+import { html } from '../tpl';
 /**
- * @summary Display selectable, sortable data arranged in rows and columns.
+ * @summary A container view that arranges data in rows and columns, optionally letting the user select one or more of them.
  *
  * @attr {title:trailing:subtitle|trailing:title:subtitle|title:subtitle:trailing|*} preferred-compact-template — Sets the template areas when the table is in compact mode
  *
@@ -24,35 +25,34 @@ export class TableView extends HTMLElement {
     #compactToolbarItem;
     static #template;
     static get template() {
-        return (this.#template ??= $(String.raw `
-    <div part="root table-container">
-      <div part="root table-header-stack">
-        <div part="root table-header-leading-stack">
-          <slot name="header-leading"></slot>
+        return (this.#template ??= $(html `<div part="root table-container">
+        <div part="root table-header-stack">
+          <div part="root table-header-leading-stack">
+            <slot name="header-leading"></slot>
+          </div>
+          <div part="root table-header-principal-stack">
+            <slot name="header-principal"></slot>
+          </div>
+          <div part="root table-header-trailing-stack">
+            <slot name="header-trailing"></slot>
+          </div>
         </div>
-        <div part="root table-header-principal-stack">
-          <slot name="header-principal"></slot>
+        <div part="root table-column-stack">
+          <slot name="column"></slot>
         </div>
-        <div part="root table-header-trailing-stack">
-          <slot name="header-trailing"></slot>
+        <slot><p>empty</p></slot>
+        <div part="root table-footer-stack">
+          <div part="root table-footer-leading-stack">
+            <slot name="footer-leading"></slot>
+          </div>
+          <div part="root table-footer-principal-stack">
+            <slot name="footer-principal"></slot>
+          </div>
+          <div part="root table-footer-trailing-stack">
+            <slot name="footer-trailing"></slot>
+          </div>
         </div>
-      </div>
-      <div part="root table-column-stack">
-        <slot name="column"></slot>
-      </div>
-      <slot><p>empty</p></slot>
-      <div part="root table-footer-stack">
-        <div part="root table-footer-leading-stack">
-          <slot name="footer-leading"></slot>
-        </div>
-        <div part="root table-footer-principal-stack">
-          <slot name="footer-principal"></slot>
-        </div>
-        <div part="root table-footer-trailing-stack">
-          <slot name="footer-trailing"></slot>
-        </div>
-      </div>
-    </div>`));
+      </div>`));
     }
     #shadowRoot;
     #slots = new Map();
@@ -102,7 +102,7 @@ export class TableView extends HTMLElement {
         if (devFlags.debug)
             console.debug(`${_a.name} ⚡️ mutation`);
         if (!this.#compactToolbarItem) {
-            this.#compactToolbarItem = $(`<menu-view tabindex="0" slot="header-trailing"></menu-view>`, '>1');
+            this.#compactToolbarItem = $(html `<menu-view tabindex="0" slot="header-trailing"></menu-view>`, '>1');
             CleanupRegistry.unregister(this, 'compact_toolbar');
             CleanupRegistry.register(this, onoff('click', this.#handleMenuClick, this.#compactToolbarItem).on(), 'compact_toolbar');
         }
@@ -110,12 +110,12 @@ export class TableView extends HTMLElement {
         for (const node of this.#slots?.get('column')?.assignedElements({ flatten: true }) ?? []) {
             if (!node.matches('[is=table-column]'))
                 continue;
-            const btn = $(`<button type="button" tabindex="0">
-        <v-stack spacing="0" alignment="leading">
-          <label-view></label-view>
-          <label-view font="callout" foreground="secondary"></label-view>
-        </v-stack>
-      </button>`, '>1'), title = btn.querySelector('label-view:first-child') ?? undefined, subTitle = btn.querySelector('label-view:last-child') ?? undefined;
+            const btn = $(html `<button type="button" tabindex="0">
+            <v-stack spacing="0" alignment="leading">
+              <label-view></label-view>
+              <label-view font="callout" foreground="secondary"></label-view>
+            </v-stack>
+          </button>`, '>1'), title = btn.querySelector('label-view:first-child') ?? undefined, subTitle = btn.querySelector('label-view:last-child') ?? undefined;
             queryMorph(':not([slot])', html `<span>${node.textContent.trim()}</span>`, title, { removeIf: !node.textContent.trim() });
             queryMorph(':not([slot])', html `<span>${node.ariaSort ?? ''}</span>`, subTitle, { removeIf: !(node.ariaSort ?? '') });
             this.#compactToolbarItem.appendChild(btn);

package/generated/components/text-field.d.ts

@@ -4,6 +4,8 @@ export type KeyboardType = (typeof keyboardTypes)[number];
 /**
  * @summary A control that displays an editable text area.
  *
+ * @fires {{ detail: { text: string } }} commit — Triggered when user interacts with the input area
+ *
  * @slot label
  * @slot validity-options
  */

package/generated/components/text-field.js

@@ -4,11 +4,14 @@ import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { FormAssociatedBase, getInternals } from '../internal/class/form-associated-base';
 import { MutationObserverSet } from '../internal/class/mutation-observer-set';
 import { $, compareBigDecimals, devFlags, kebabCase, onoff, set } from '../internal/utils';
-import { html, queryMorph } from '../morphdom';
+import { queryMorph } from '../morphdom';
+import { html } from '../tpl';
 const keyboardTypes = ['decimal-pad', 'number-pad', 'default'];
 /**
  * @summary A control that displays an editable text area.
  *
+ * @fires {{ detail: { text: string } }} commit — Triggered when user interacts with the input area
+ *
  * @slot label
  * @slot validity-options
  */
@@ -25,7 +28,7 @@ export class TextField extends FormAssociatedBase {
             'text',
             'text-input-autocapitalization',
             /**
-             * @type {""}
+             * @type {boolean}
              */
             'disable-autocorrection',
             /**
@@ -33,27 +36,26 @@ export class TextField extends FormAssociatedBase {
              */
             'keyboard-type',
             /**
-             * @type {required}
+             * @type {boolean}
              */
             'required',
             /**
-             * @type {disabled}
+             * @type {boolean}
              */
             'disabled',
         ];
     }
     static #template;
     static get template() {
-        return (this.#template ??= $(String.raw `
-    <label part="root text-field-stack">
-    <div part="root text-field-label-stack">
-      <slot name="label"></slot>
-    </div>
-    <div part="root text-field-input-stack">
-      <input type="text" part="root input text-field-form-input">
-    </div>
-    <slot name="validity-options" hidden></slot>
-  </label>`));
+        return (this.#template ??= $(html `<label part="root text-field-stack">
+        <div part="root text-field-label-stack">
+          <slot name="label"></slot>
+        </div>
+        <div part="root text-field-input-stack">
+          <input type="text" part="root input text-field-form-input" />
+        </div>
+        <slot name="validity-options" hidden></slot>
+      </label>`));
     }
     #renderValidityMsgs = (entries) => {
         if (devFlags.debug)

package/generated/components/toggle-view.js

@@ -3,7 +3,8 @@ import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { FormAssociatedBase, getInternals } from '../internal/class/form-associated-base';
 import { MutationObserverSet } from '../internal/class/mutation-observer-set';
 import { $, devFlags, kebabCase, onoff } from '../internal/utils';
-import { html, queryMorph } from '../morphdom';
+import { queryMorph } from '../morphdom';
+import { html } from '../tpl';
 const toggleStyles = ['switch', 'button'];
 /**
  * @summary A control that switches between on and off states.
@@ -15,21 +16,37 @@ const toggleStyles = ['switch', 'button'];
  */
 export class ToggleView extends FormAssociatedBase {
     static get observedAttributes() {
-        return ['label', 'name', 'value', 'is-on', 'keyboard-type', 'required', 'disabled'];
+        return [
+            'label',
+            'name',
+            'value',
+            /**
+             * @type {boolean}
+             */
+            'is-on',
+            'keyboard-type',
+            /**
+             * @type {boolean}
+             */
+            'required',
+            /**
+             * @type {boolean}
+             */
+            'disabled',
+        ];
     }
     static #template;
     static get template() {
-        return (this.#template ??= $(String.raw `
-    <label part="root toggle-stack">
-    <div part="root toggle-label-stack">
-      <slot name="label"></slot>
-    </div>
-    <div part="root toggle-input-stack">
-      <!--<input type="checkbox" part="root input toggle-form-input">-->
-      <div part="root toggle-form-input" tabindex="0"></div>
-    </div>
-    <slot name="validity-options" hidden></slot>
-  </label>`));
+        return (this.#template ??= $(html `<label part="root toggle-stack">
+        <div part="root toggle-label-stack">
+          <slot name="label"></slot>
+        </div>
+        <div part="root toggle-input-stack">
+          <!--<input type="checkbox" part="root input toggle-form-input">-->
+          <div part="root toggle-form-input" tabindex="0"></div>
+        </div>
+        <slot name="validity-options" hidden></slot>
+      </label>`));
     }
     #renderValidityMsgs = (entries) => {
         if (devFlags.debug)

package/generated/components/tool-bar-item-group.d.ts

@@ -1,5 +1,5 @@
 /**
- * A model that represents a group of `ToolbarItems` which can be placed in the toolbar or navigation bar.
+ * @summary A container view that groups items together in the toolbar or navigation bar.
  */
 export declare class ToolBarItemGroup extends HTMLElement {
     constructor();

package/generated/components/tool-bar-item-group.js

@@ -9,7 +9,7 @@ import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { adaptiveSlot } from '../internal/decorators';
 import { devFlags } from '../internal/utils';
 /**
- * A model that represents a group of `ToolbarItems` which can be placed in the toolbar or navigation bar.
+ * @summary A container view that groups items together in the toolbar or navigation bar.
  */
 let ToolBarItemGroup = ToolBarItemGroup_1 = class ToolBarItemGroup extends HTMLElement {
     constructor() {

package/generated/components/tool-bar-item.d.ts

@@ -1,5 +1,5 @@
 /**
- * @summary A model that represents an item which can be placed in the toolbar or navigation bar.
+ * @summary A view placed in the toolbar or navigation bar.
  */
 export declare class ToolBarItem extends HTMLElement {
     #private;

package/generated/components/tool-bar-item.js

@@ -10,7 +10,7 @@ import { adaptiveSlot } from '../internal/decorators';
 import { devFlags, ensurePlaceholder, onoff, touchGlass } from '../internal/utils';
 import { Snapshot } from '../snapshot';
 /**
- * @summary A model that represents an item which can be placed in the toolbar or navigation bar.
+ * @summary A view placed in the toolbar or navigation bar.
  */
 let ToolBarItem = ToolBarItem_1 = class ToolBarItem extends HTMLElement {
     static get observedAttributes() {

package/generated/components/tool-bar.d.ts

@@ -1,5 +1,5 @@
 /**
- * @summary Populates the toolbar or navigation bar with the specified items.
+ * @summary A list of items placed into the toolbar or navigation bar around your content.
  *
  * @slot cancellation-action — The item represents a cancellation action for a modal interface. Places the item in the leading edge of the top bar and on the trailing edge of the bottom bar when fine modal
  * @slot primary-action — The item represents a primary action. Places the item in the trailing edge of the top bar and on the trailing edge of the bottom bar when fine modal

package/generated/components/tool-bar.js

@@ -1,9 +1,10 @@
 var _a;
 import { ResizeObserverSingleton } from '../internal/class/resize-observer-singleton';
 import { $, devFlags } from '../internal/utils';
+import { html } from '../tpl';
 const observers = new ResizeObserverSingleton();
 /**
- * @summary Populates the toolbar or navigation bar with the specified items.
+ * @summary A list of items placed into the toolbar or navigation bar around your content.
  *
  * @slot cancellation-action — The item represents a cancellation action for a modal interface. Places the item in the leading edge of the top bar and on the trailing edge of the bottom bar when fine modal
  * @slot primary-action — The item represents a primary action. Places the item in the trailing edge of the top bar and on the trailing edge of the bottom bar when fine modal
@@ -20,33 +21,32 @@ export class ToolBar extends HTMLElement {
     static #template;
     static get template() {
         // <!--exportparts="toolbar-leading-stack,toolbar-principal-stack,toolbar-trailing-stack"-->
-        return (this.#template ??= $(String.raw `
-    <div part="root top-bar">
-    <div part="root toolbar-leading-stack">
-      <slot name="cancellation-action"></slot>
-      <slot name="destructive-action"></slot>
-      <slot name="top-bar-leading"></slot>
-    </div>
-    <div part="root toolbar-principal-stack">
-      <slot name="top-bar-principal"></slot>
-    </div>
-    <div part="root toolbar-trailing-stack">
-      <slot name="top-bar-trailing"></slot>
-      <slot name="primary-action"></slot>
-      <slot name="confirmation-action"></slot>
-    </div>
-  </div>
-  <div part="root bottom-bar">
-    <div part="root toolbar-leading-stack">
-      <slot name="bottom-bar-leading"></slot>
-    </div>
-    <div part="root toolbar-principal-stack">
-      <slot name="bottom-bar-principal"></slot>
-    </div>
-    <div part="root toolbar-trailing-stack">
-      <slot name="bottom-bar-trailing"></slot>
-    </div>
-  </div>`));
+        return (this.#template ??= $(html `<div part="root top-bar">
+          <div part="root toolbar-leading-stack">
+            <slot name="cancellation-action"></slot>
+            <slot name="destructive-action"></slot>
+            <slot name="top-bar-leading"></slot>
+          </div>
+          <div part="root toolbar-principal-stack">
+            <slot name="top-bar-principal"></slot>
+          </div>
+          <div part="root toolbar-trailing-stack">
+            <slot name="top-bar-trailing"></slot>
+            <slot name="primary-action"></slot>
+            <slot name="confirmation-action"></slot>
+          </div>
+        </div>
+        <div part="root bottom-bar">
+          <div part="root toolbar-leading-stack">
+            <slot name="bottom-bar-leading"></slot>
+          </div>
+          <div part="root toolbar-principal-stack">
+            <slot name="bottom-bar-principal"></slot>
+          </div>
+          <div part="root toolbar-trailing-stack">
+            <slot name="bottom-bar-trailing"></slot>
+          </div>
+        </div>`));
     }
     #shadowRoot;
     get #scrollView() {

package/generated/components/v-stack.d.ts

@@ -3,9 +3,9 @@
  *
  * @attr {leading|"leading fill"|center|trailing|fill|space-between} distribution — The distribution of cols
  *
- * @attr {@templateSet} template — The main-axis grid template
+ * @attr {@Template} template — The main-axis grid template
  *
- * @attr {@spacingSet} spacing — The gap between the primary axis
+ * @attr {@Spacing} spacing — The gap between the primary axis
  *
  * @attr {@inlineSet} alignment — The cross-axis alignment
  * @attr {@blockSet} distribution — The main-axis alignment

package/generated/components/v-stack.js

@@ -4,9 +4,9 @@ import { devFlags } from '../internal/utils';
  *
  * @attr {leading|"leading fill"|center|trailing|fill|space-between} distribution — The distribution of cols
  *
- * @attr {@templateSet} template — The main-axis grid template
+ * @attr {@Template} template — The main-axis grid template
  *
- * @attr {@spacingSet} spacing — The gap between the primary axis
+ * @attr {@Spacing} spacing — The gap between the primary axis
  *
  * @attr {@inlineSet} alignment — The cross-axis alignment
  * @attr {@blockSet} distribution — The main-axis alignment

package/generated/internal/utils/cash/index.d.ts

@@ -1,3 +1,4 @@
+import { type TemplateResult } from '../../../tpl';
 import ancestors from './ancestors';
 import next from './next';
 import nextAll from './next-all';
@@ -7,9 +8,9 @@ import prop from './prop';
 import siblings from './siblings';
 declare const DEFAULT: ">1";
 interface CashFn {
-    (innerHTML: string): DocumentFragment;
-    <T extends Element = Element>(innerHTML: string, selector: typeof DEFAULT): T;
-    <T extends Element = Element>(innerHTML: string, selector: string): T;
+    (markup: TemplateResult): DocumentFragment;
+    <T extends Element = Element>(markup: TemplateResult, selector: typeof DEFAULT): T;
+    <T extends Element = Element>(markup: TemplateResult, selector: string): T;
     prop: typeof prop;
     nextAll: typeof nextAll;
     prevAll: typeof prevAll;

package/generated/internal/utils/cash/index.js

@@ -1,3 +1,4 @@
+import { renderToString } from '../../../morphdom';
 import ancestors from './ancestors';
 import next from './next';
 import nextAll from './next-all';
@@ -6,8 +7,9 @@ import prevAll from './prev-all';
 import prop from './prop';
 import siblings from './siblings';
 const DEFAULT = '>1';
-const cash = ((innerHTML, selector) => {
-    const template = Object.assign(document.createElement('template'), { innerHTML });
+const cash = ((markup, selector) => {
+    // NOTE: Use also runtime check isTemplateResult()??
+    const template = Object.assign(document.createElement('template'), { innerHTML: renderToString(markup).toString() });
     if (!selector)
         return template.content;
     if (selector === DEFAULT)

package/generated/internal/utils/ensure-placeholder.js

@@ -1,5 +1,6 @@
 import { I18n } from '../../i18n';
-import { html, queryMorph } from '../../morphdom';
+import { queryMorph } from '../../morphdom';
+import { html } from '../../tpl';
 export default function (target, role, titleKey, config) {
     if (!target)
         return;

package/generated/morphdom/index.d.ts

@@ -1,6 +1,8 @@
-export { default as html } from './html';
-export * from './html';
 export { default as morph } from './morph';
 export * from './morph';
 export { default as queryMorph } from './query-morph';
 export * from './query-morph';
+export { default as renderToString } from './render-to-string';
+export * from './render-to-string';
+export { default as unsafeHtml } from './unsafe-html';
+export * from './unsafe-html';

package/generated/morphdom/index.js

@@ -1,6 +1,8 @@
-export { default as html } from './html';
-export * from './html';
 export { default as morph } from './morph';
 export * from './morph';
 export { default as queryMorph } from './query-morph';
 export * from './query-morph';
+export { default as renderToString } from './render-to-string';
+export * from './render-to-string';
+export { default as unsafeHtml } from './unsafe-html';
+export * from './unsafe-html';

package/generated/morphdom/morph.d.ts

@@ -1,4 +1,4 @@
-import type { TrustedMarkup } from './html';
-export default function (template: TrustedMarkup, fromEl?: Element, options?: {
+import type { TemplateResult } from '../tpl';
+export default function (markup: TemplateResult, fromEl?: Element, options?: {
     cb: () => void;
 }): void;

package/generated/morphdom/morph.js

@@ -1,8 +1,9 @@
 import morphdom from '../internal/vendor/morphdom';
-export default function (template, fromEl, options) {
+import renderToString from './render-to-string';
+export default function (markup, fromEl, options) {
     if (!fromEl)
         return;
-    morphdom(fromEl, template.toString(), {
+    morphdom(fromEl, renderToString(markup).toString(), {
         onBeforeElUpdated: (fromEl, toEl) => !fromEl.isEqualNode(toEl),
         onBeforeElChildrenUpdated: (fromEl, toEl) => !toEl.matches('image-view,navigation-title'), // NOTE: image-view will alter it's contents! This is required to not empty it up again!
     });

package/generated/morphdom/query-morph.d.ts

@@ -1,5 +1,5 @@
-import type { TrustedMarkup } from './html';
-export default function (scopedSelector: string, template: TrustedMarkup, container?: Element, options?: {
+import type { TemplateResult } from '../tpl';
+export default function (scopedSelector: string, template: TemplateResult, container?: Element, options?: {
     cb?: () => boolean;
     removeIf?: boolean;
 }): void;

package/generated/morphdom/query-morph.js

@@ -5,7 +5,7 @@ export default function (scopedSelector, template, container, options) {
         return;
     if ('boolean' === typeof options?.removeIf && options?.removeIf)
         return container?.querySelector(`:scope>${scopedSelector}`)?.remove();
-    const fromEl = container?.querySelector(`:scope>${scopedSelector}`) ?? container?.appendChild($(template.toString(), '>1'));
+    const fromEl = container?.querySelector(`:scope>${scopedSelector}`) ?? container?.appendChild($(template, '>1'));
     if (!fromEl)
         return;
     morph(template, fromEl);

package/generated/morphdom/render-to-string.d.ts

@@ -0,0 +1,12 @@
+import { type TemplateResult } from '../tpl';
+export declare class TrustedMarkup {
+    readonly value: string;
+    constructor(value: string);
+    toString(): string;
+}
+/**
+ * Flatten a TemplateResult (from `html`) into an escaped TrustedMarkup
+ * string. Use this only at morph/queryMorph call sites — anywhere feeding
+ * `render()` should keep passing the raw TemplateResult straight through.
+ */
+export default function renderToString(template: TemplateResult): TrustedMarkup;

package/generated/morphdom/render-to-string.js

@@ -0,0 +1,48 @@
+import { isTemplateResult } from '../tpl';
+// morph.ts and queryMorph.ts only need something with `.toString()` that
+// yields a safe, escaped HTML string — this is that, built on top of the
+// same TemplateResult instead of a separate tag function.
+// values built via `raw` itself are trusted markup; wrap them so `stringify`
+// knows to skip escaping — same idea as lit-html's `unsafeHTML`
+export class TrustedMarkup {
+    value;
+    constructor(value) {
+        this.value = value;
+    }
+    toString() {
+        return this.value;
+    }
+}
+const ESCAPE_MAP = {
+    '&': '&',
+    '<': '&lt;',
+    '>': '&gt;',
+    '"': '&quot;',
+    "'": '&#39;',
+};
+function escapeHtml(str) {
+    return str.replace(/[&<>"']/g, (ch) => ESCAPE_MAP[ch]);
+}
+function stringifyValue(value) {
+    if (value === null || value === undefined || value === false)
+        return '';
+    if (value instanceof TrustedMarkup)
+        return value.value;
+    if (isTemplateResult(value))
+        return renderToString(value).value;
+    if (Array.isArray(value))
+        return value.map(stringifyValue).join('');
+    return escapeHtml(String(value));
+}
+/**
+ * Flatten a TemplateResult (from `html`) into an escaped TrustedMarkup
+ * string. Use this only at morph/queryMorph call sites — anywhere feeding
+ * `render()` should keep passing the raw TemplateResult straight through.
+ */
+export default function renderToString(template) {
+    let out = template.strings[0];
+    for (let i = 0; i < template.values.length; i++) {
+        out += stringifyValue(template.values[i]) + template.strings[i + 1];
+    }
+    return new TrustedMarkup(out.replace(/>\s+</g, '><').trim());
+}

package/generated/morphdom/unsafe-html.d.ts

@@ -0,0 +1,2 @@
+import { TrustedMarkup } from './render-to-string';
+export default function (value: string): TrustedMarkup;

package/generated/morphdom/unsafe-html.js

@@ -0,0 +1,4 @@
+import { TrustedMarkup } from './render-to-string';
+export default function (value) {
+    return new TrustedMarkup(value);
+}

package/generated/tpl/html.js

@@ -1,3 +1,7 @@
+// Purely structural — captures strings/values as-is. render.ts relies on
+// `strings` identity (TemplateStringsArray) for its template cache, so this
+// must stay exactly this shape: no wrapping, no cloning, no new object
+// allocation beyond the literal { strings, values }.
 export default function (strings, ...values) {
     return { strings, values };
 }

package/generated/tpl/index.d.ts

@@ -1,4 +1,6 @@
 export { default as html } from './html';
 export * from './html';
+export { default as isTemplateResult } from './is-template-result';
+export * from './is-template-result';
 export { default as render } from './render';
 export * from './render';

package/generated/tpl/index.js

@@ -1,4 +1,6 @@
 export { default as html } from './html';
 export * from './html';
+export { default as isTemplateResult } from './is-template-result';
+export * from './is-template-result';
 export { default as render } from './render';
 export * from './render';

package/generated/tpl/is-template-result.d.ts

@@ -0,0 +1,3 @@
+import type { TemplateResult } from './html';
+declare const _default: (v: unknown) => v is TemplateResult;
+export default _default;

package/generated/tpl/is-template-result.js

@@ -0,0 +1 @@
+export default (v) => !!v && typeof v === 'object' && 'strings' in v && 'values' in v;