@miso.ai/client-sdk-ui 1.14.0-beta.2 → 1.14.0-beta.3

package/dist/cjs/asset/svgs.js

@@ -28,7 +28,8 @@ const ICON_NAME = {
   PLUS: 'plus',
   PENCIL: 'pencil',
   BELL: 'bell',
-  BELL_FILL: 'bell-fill'
+  BELL_FILL: 'bell-fill',
+  TRASH: 'trash'
 };
 
 // CC0 SVGs
@@ -48,7 +49,8 @@ const ICON_PLUS = `<symbol id="${PREFIX}-${ICON_NAME.PLUS}" viewBox="0 0 16 16">
 const ICON_PENCIL = `<symbol id="${PREFIX}-${ICON_NAME.PENCIL}" viewBox="0 0 16 16"><path fill="currentColor" d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.325-.175"/></symbol>`;
 const ICON_BELL = `<symbol id="${PREFIX}-${ICON_NAME.BELL}" viewBox="0 0 16 16"><path fill="currentColor" d="M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2M8 1.918l-.797.161A4 4 0 0 0 4 6c0 .628-.134 2.197-.459 3.742-.16.767-.376 1.566-.663 2.258h10.244c-.287-.692-.502-1.49-.663-2.258C12.134 8.197 12 6.628 12 6a4 4 0 0 0-3.203-3.92zM14.22 12c.223.447.481.801.78 1H1c.299-.199.557-.553.78-1C2.68 10.2 3 6.88 3 6c0-2.42 1.72-4.44 4.005-4.901a1 1 0 1 1 1.99 0A5 5 0 0 1 13 6c0 .88.32 4.2 1.22 6"/></symbol>`;
 const ICON_BELL_FILL = `<symbol id="${PREFIX}-${ICON_NAME.BELL_FILL}" viewBox="0 0 16 16"><path fill="currentColor" d="M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2m.995-14.901a1 1 0 1 0-1.99 0A5 5 0 0 0 3 6c0 1.098-.5 6-2 7h14c-1.5-1-2-5.902-2-7 0-2.42-1.72-4.44-4.005-4.901"/></symbol>`;
-const ICONS = [ICON_SEND, ICON_SEARCH, ICON_TRIANGLE, ICON_TRIANGLE_EQ, ICON_CHEVRON, ICON_CHEVRON_NEGATIVE, ICON_BULB, ICON_DOTS_VERTICAL, ICON_PLUS, ICON_PENCIL, ICON_BELL, ICON_BELL_FILL];
+const ICON_TRASH = `<symbol id="${PREFIX}-${ICON_NAME.TRASH}" viewBox="0 0 16 16"><path fill="currentColor" d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0z"/><path fill="currentColor" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4zM2.5 3h11V2h-11z"/></symbol>`;
+const ICONS = [ICON_SEND, ICON_SEARCH, ICON_TRIANGLE, ICON_TRIANGLE_EQ, ICON_CHEVRON, ICON_CHEVRON_NEGATIVE, ICON_BULB, ICON_DOTS_VERTICAL, ICON_PLUS, ICON_PENCIL, ICON_BELL, ICON_BELL_FILL, ICON_TRASH];
 const SPRITES_SVG = `<svg id="${ID}" style="display:none;">${ICONS.join('')}</svg>`;
 let loaded = false;
 function loadSvgSprites() {

package/dist/cjs/constants.js

@@ -108,6 +108,7 @@ const ATTR_DATA_MISO_UNIT_ID = exports.ATTR_DATA_MISO_UNIT_ID = `data-miso-unit-
 const ATTR_DATA_MISO_PRODUCT_ID = exports.ATTR_DATA_MISO_PRODUCT_ID = `data-miso-product-id`;
 const LAYOUT_TYPE = exports.LAYOUT_TYPE = Object.freeze({
   CONTAINER: 'container',
+  ITEM_CONTAINER: 'item-container',
   ERROR: 'error',
   BANNER: 'banner',
   AFFILIATION: 'affiliation',
@@ -127,5 +128,6 @@ const LAYOUT_TYPE = exports.LAYOUT_TYPE = Object.freeze({
   CHECKBOX: 'checkbox',
   FEEDBACK: 'feedback',
   TEXT: 'text',
+  QUESTION: 'question',
   TYPEWRITER: 'typewriter'
 });

package/dist/cjs/defaults.js

@@ -4,8 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.defaultLayouts = void 0;
+var _commons = require("@miso.ai/commons");
 var _constants = require("./constants.js");
 var _templates = require("./layout/templates.js");
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 /**
  * Default layout options of each workflow, keyed by workflow name. The UI
  * plugin seeds the workflow plugin's defaults store with these values at
@@ -57,6 +61,29 @@ function totalContent(layout, {
   const label = value === 1 ? 'result' : 'results';
   return `${formatted} ${label}`;
 }
+const _ROLE$QUERY = _constants.ROLE.QUERY,
+  MESSAGE_LAYOUTS = _objectWithoutPropertiesLoose(ANSWER_BASED_LAYOUTS, [_ROLE$QUERY].map(_toPropertyKey));
+
+// the rename/delete button controls of a thread (the conversation header's,
+// and a thread list item's context menu's): mapped to the thread record —
+// the dialogs work with its title, and the buttons disable while the record
+// has no thread id yet (a thread being created is not addressable until
+// resolved; the workflows guard all the same)
+const THREAD_CONTROL_OPTIONS = Object.freeze({
+  value: thread => thread && thread.title,
+  disabled: thread => !(thread && thread.thread_id)
+});
+const THREAD_RENAME_PROMPT = Object.freeze({
+  title: 'Rename thread',
+  placeholder: 'Thread name',
+  confirmText: 'Rename'
+});
+const THREAD_DELETE_CONFIRM = Object.freeze({
+  title: 'Delete thread',
+  message: title => `Are you sure you want to delete "${title || 'this thread'}"? This cannot be undone.`,
+  confirmText: 'Delete',
+  danger: true
+});
 const SEARCH_BASED_LAYOUTS = Object.assign({}, BASE_LAYOUTS, {
   [_constants.ROLE.QUERY]: [_constants.LAYOUT_TYPE.SEARCH_BOX],
   [_constants.ROLE.PRODUCTS]: [_constants.LAYOUT_TYPE.LIST, {
@@ -124,20 +151,83 @@ const defaultLayouts = exports.defaultLayouts = Object.freeze({
       placeholder: 'Ask a question'
     }]
   })),
+  // the thread list's own roles plus its thread item subworkflows' — the
+  // items share the history workflow's options, so one bag serves both.
+  // The item roles: the item-container layout (the standard container
+  // duties plus the items' context menus, driven by the item-menu
+  // data-role contract — it only ever drives its own item's menu, so
+  // hosting it on the panel is inert, and the panel never triggers the
+  // auto logo either, having no main-role component), the title text
+  // (with a presentation fallback for untitled threads), the context
+  // menu's rename (ask-then-submit through the prompt dialog) and delete
+  // (confirm-then-submit) buttons, and its subscription toggle — a menu
+  // item like the other two, so text only, labeled by the action a click
+  // takes rather than by the state
   'history': Object.freeze(Object.assign({}, BASE_LAYOUTS, {
+    [_constants.ROLE.CONTAINER]: [_constants.LAYOUT_TYPE.ITEM_CONTAINER, {
+      logo: false
+    }],
     [_constants.ROLE.THREADS]: [_constants.LAYOUT_TYPE.THREADS, {
       itemType: 'thread',
-      incremental: true
+      incremental: true,
+      infiniteScroll: true
     }],
     [_constants.ROLE.NEW_THREAD]: [_constants.LAYOUT_TYPE.BUTTON, {
       icon: 'plus',
       text: 'New chat'
+    }],
+    [_constants.ROLE.TITLE]: [_constants.LAYOUT_TYPE.TEXT, {
+      tag: 'div',
+      templates: {
+        content: (layout, {
+          value
+        }) => (0, _commons.escapeHtml)(value || 'Untitled')
+      }
+    }],
+    [_constants.ROLE.RENAME]: [_constants.LAYOUT_TYPE.BUTTON, Object.assign({}, THREAD_CONTROL_OPTIONS, {
+      text: 'Rename',
+      prompt: THREAD_RENAME_PROMPT
+    })],
+    [_constants.ROLE.DELETE]: [_constants.LAYOUT_TYPE.BUTTON, Object.assign({}, THREAD_CONTROL_OPTIONS, {
+      text: 'Delete',
+      confirm: THREAD_DELETE_CONFIRM
+    })],
+    [_constants.ROLE.SUBSCRIPTION]: [_constants.LAYOUT_TYPE.CHECKBOX, {
+      text: 'Subscribe',
+      checkedText: 'Unsubscribe'
     }]
   })),
-  'conversation': Object.freeze(Object.assign({}, BASE_LAYOUTS, {
+  // the conversation panel's own roles plus its message item subworkflows'
+  // — the items share the conversation workflow's options, so one bag
+  // serves both. The message roles: the answer-based layouts minus the
+  // query role (a message has no query flow of its own; the query entry
+  // below is the panel's composer), with the question layout (text plus
+  // authorship attributes, off the whole record), the answer typewriter
+  // with `instant: true` (an already-finished answer renders in one shot),
+  // and the sources as the compact horizontal cards of the hybrid-search
+  // UI. logo: false turns the per-message banner off; the panel never
+  // triggers the auto logo anyway, having no main-role component
+  'conversation': Object.freeze(Object.assign({}, MESSAGE_LAYOUTS, {
+    [_constants.ROLE.CONTAINER]: [_constants.LAYOUT_TYPE.CONTAINER, {
+      logo: false
+    }],
+    [_constants.ROLE.QUESTION]: _constants.LAYOUT_TYPE.QUESTION,
+    [_constants.ROLE.ANSWER]: [_constants.LAYOUT_TYPE.TYPEWRITER, {
+      instant: true
+    }],
+    [_constants.ROLE.SOURCES]: [_constants.LAYOUT_TYPE.HORIZONTAL, {
+      incremental: true,
+      itemType: 'article',
+      templates: {
+        ordered: true,
+        article: _templates.compactArticle,
+        articleInfoBlock: _templates.compactArticleInfoBlock
+      }
+    }],
     [_constants.ROLE.MESSAGES]: [_constants.LAYOUT_TYPE.MESSAGES, {
       itemType: 'message',
-      incremental: true
+      incremental: true,
+      infiniteScroll: true
     }],
     [_constants.ROLE.QUERY]: [_constants.LAYOUT_TYPE.SEARCH_BOX, {
       placeholder: 'Ask a follow-up question',
@@ -151,14 +241,14 @@ const defaultLayouts = exports.defaultLayouts = Object.freeze({
     [_constants.ROLE.TITLE]: [_constants.LAYOUT_TYPE.TEXT, {
       tag: 'div'
     }],
-    [_constants.ROLE.RENAME]: [_constants.LAYOUT_TYPE.BUTTON, {
+    [_constants.ROLE.RENAME]: [_constants.LAYOUT_TYPE.BUTTON, Object.assign({}, THREAD_CONTROL_OPTIONS, {
       icon: 'pencil',
-      prompt: {
-        title: 'Rename thread',
-        placeholder: 'Thread name',
-        confirmText: 'Rename'
-      }
-    }],
+      prompt: THREAD_RENAME_PROMPT
+    })],
+    [_constants.ROLE.DELETE]: [_constants.LAYOUT_TYPE.BUTTON, Object.assign({}, THREAD_CONTROL_OPTIONS, {
+      icon: 'trash',
+      confirm: THREAD_DELETE_CONFIRM
+    })],
     [_constants.ROLE.SUBSCRIPTION]: [_constants.LAYOUT_TYPE.CHECKBOX, {
       icon: 'bell',
       text: 'Subscribe',

package/dist/cjs/element/container/index.js

@@ -33,6 +33,12 @@ Object.defineProperty(exports, "MisoHybridSearchElement", {
     return _misoHybridSearch.default;
   }
 });
+Object.defineProperty(exports, "MisoMessageItemElement", {
+  enumerable: true,
+  get: function () {
+    return _misoMessageItem.default;
+  }
+});
 Object.defineProperty(exports, "MisoRecommendationElement", {
   enumerable: true,
   get: function () {
@@ -45,10 +51,18 @@ Object.defineProperty(exports, "MisoSearchElement", {
     return _misoSearch.default;
   }
 });
+Object.defineProperty(exports, "MisoThreadItemElement", {
+  enumerable: true,
+  get: function () {
+    return _misoThreadItem.default;
+  }
+});
 var _misoAsk = _interopRequireDefault(require("./miso-ask.js"));
 var _misoExplore = _interopRequireDefault(require("./miso-explore.js"));
 var _misoHistory = _interopRequireDefault(require("./miso-history.js"));
 var _misoConversation = _interopRequireDefault(require("./miso-conversation.js"));
+var _misoMessageItem = _interopRequireDefault(require("./miso-message-item.js"));
+var _misoThreadItem = _interopRequireDefault(require("./miso-thread-item.js"));
 var _misoHybridSearch = _interopRequireDefault(require("./miso-hybrid-search.js"));
 var _misoSearch = _interopRequireDefault(require("./miso-search.js"));
 var _misoRecommendation = _interopRequireDefault(require("./miso-recommendation.js"));

package/dist/cjs/element/container/miso-message-item.js

@@ -0,0 +1,91 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _misoContainer = _interopRequireDefault(require("./miso-container.js"));
+var _utils = require("../utils.js");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const TAG_NAME = 'miso-message-item';
+const ATTR_QUESTION_ID = 'question-id';
+const OBSERVED_ATTRIBUTES = Object.freeze([..._misoContainer.default.observedAttributes, ATTR_QUESTION_ID]);
+
+/**
+ * A container element for one message (question-answer pair) of the
+ * conversation panel, placed inside <miso-conversation> — a container
+ * element inside another container element hosting an item subworkflow (the
+ * `message` workflow). Normally bound implicitly: the messages layout
+ * renders one <miso-message-item> per item and assigns the workflow off the item
+ * binding (element.workflow = parent workflow's _getMessageWorkflow(record)),
+ * which also covers a just-posted message that has no question id yet. A
+ * `question-id` attribute binds explicitly instead, through the parent
+ * container's workflow. Role elements inside (question, answer, sources,
+ * ...) bind to the message workflow as usual — getContainer() resolves to
+ * the closest container ancestor.
+ */
+class MisoMessageItemElement extends _misoContainer.default {
+  static get tagName() {
+    return TAG_NAME;
+  }
+  static get observedAttributes() {
+    return OBSERVED_ATTRIBUTES;
+  }
+
+  // properties //
+  get questionId() {
+    return this.getAttribute(ATTR_QUESTION_ID) || undefined;
+  }
+  set questionId(value) {
+    value = value !== undefined ? `${value}` : undefined;
+    if (value === this.questionId) {
+      return;
+    }
+    if (value) {
+      this.setAttribute(ATTR_QUESTION_ID, value);
+    } else {
+      this.removeAttribute(ATTR_QUESTION_ID);
+    }
+  }
+  _getWorkflow(client) {
+    const {
+      questionId
+    } = this;
+    if (!questionId) {
+      // implicitly bound: the messages layout assigns element.workflow off
+      // the item binding — keep whatever is (or will be) assigned
+      return this._workflow;
+    }
+    const container = this._getParentContainer();
+    const workflow = container && container.workflow;
+    // the parent workflow hands out the item subworkflow; the parent binds
+    // its own workflow first (its connectedCallback resolves earlier), so
+    // it is normally present by now
+    return workflow && typeof workflow._getMessageWorkflow === 'function' ? workflow._getMessageWorkflow(questionId) : undefined;
+  }
+  _getParentContainer() {
+    try {
+      return this.parentNode ? (0, _utils.getContainer)(this.parentNode) : undefined;
+    } catch (_) {
+      return undefined; // not inside a container element
+    }
+  }
+  attributeChangedCallback(attr, oldValue, newValue) {
+    switch (attr) {
+      case ATTR_QUESTION_ID:
+        this._handleQuestionIdUpdate(oldValue, newValue);
+        break;
+      default:
+        super.attributeChangedCallback(attr, oldValue, newValue);
+    }
+  }
+  _handleQuestionIdUpdate(oldValue, newValue) {
+    oldValue = oldValue || undefined; // null -> undefined
+    newValue = newValue || undefined;
+    if (oldValue === newValue || !this._client) {
+      return;
+    }
+    this._setWorkflow(this._getWorkflow(this._client));
+  }
+}
+exports.default = MisoMessageItemElement;

package/dist/cjs/element/container/miso-thread-item.js

@@ -0,0 +1,91 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _misoContainer = _interopRequireDefault(require("./miso-container.js"));
+var _utils = require("../utils.js");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const TAG_NAME = 'miso-thread-item';
+const ATTR_THREAD_ID = 'thread-id';
+const OBSERVED_ATTRIBUTES = Object.freeze([..._misoContainer.default.observedAttributes, ATTR_THREAD_ID]);
+
+/**
+ * A container element for one thread item of the thread list, placed inside
+ * <miso-history> — a container element inside another container element
+ * hosting an item subworkflow (the `thread` workflow). Normally bound
+ * implicitly: the threads layout renders one <miso-thread-item> per item and
+ * assigns the workflow off the item binding (element.workflow = parent
+ * workflow's _getThreadWorkflow(record)), which also covers a thread being
+ * created that has no thread id yet. A `thread-id` attribute binds
+ * explicitly instead, through the parent container's workflow. Role
+ * elements inside (title, rename, delete, subscription) bind to the thread
+ * workflow as usual — getContainer() resolves to the closest container
+ * ancestor.
+ */
+class MisoThreadItemElement extends _misoContainer.default {
+  static get tagName() {
+    return TAG_NAME;
+  }
+  static get observedAttributes() {
+    return OBSERVED_ATTRIBUTES;
+  }
+
+  // properties //
+  get threadId() {
+    return this.getAttribute(ATTR_THREAD_ID) || undefined;
+  }
+  set threadId(value) {
+    value = value !== undefined ? `${value}` : undefined;
+    if (value === this.threadId) {
+      return;
+    }
+    if (value) {
+      this.setAttribute(ATTR_THREAD_ID, value);
+    } else {
+      this.removeAttribute(ATTR_THREAD_ID);
+    }
+  }
+  _getWorkflow(client) {
+    const {
+      threadId
+    } = this;
+    if (!threadId) {
+      // implicitly bound: the threads layout assigns element.workflow off
+      // the item binding — keep whatever is (or will be) assigned
+      return this._workflow;
+    }
+    const container = this._getParentContainer();
+    const workflow = container && container.workflow;
+    // the parent workflow hands out the item subworkflow; the parent binds
+    // its own workflow first (its connectedCallback resolves earlier), so
+    // it is normally present by now
+    return workflow && typeof workflow._getThreadWorkflow === 'function' ? workflow._getThreadWorkflow(threadId) : undefined;
+  }
+  _getParentContainer() {
+    try {
+      return this.parentNode ? (0, _utils.getContainer)(this.parentNode) : undefined;
+    } catch (_) {
+      return undefined; // not inside a container element
+    }
+  }
+  attributeChangedCallback(attr, oldValue, newValue) {
+    switch (attr) {
+      case ATTR_THREAD_ID:
+        this._handleThreadIdUpdate(oldValue, newValue);
+        break;
+      default:
+        super.attributeChangedCallback(attr, oldValue, newValue);
+    }
+  }
+  _handleThreadIdUpdate(oldValue, newValue) {
+    oldValue = oldValue || undefined; // null -> undefined
+    newValue = newValue || undefined;
+    if (oldValue === newValue || !this._client) {
+      return;
+    }
+    this._setWorkflow(this._getWorkflow(this._client));
+  }
+}
+exports.default = MisoThreadItemElement;

package/dist/cjs/element/role/index.js

@@ -21,6 +21,12 @@ Object.defineProperty(exports, "MisoComponentElement", {
     return _misoComponent.default;
   }
 });
+Object.defineProperty(exports, "MisoDeleteElement", {
+  enumerable: true,
+  get: function () {
+    return _misoDelete.default;
+  }
+});
 Object.defineProperty(exports, "MisoErrorElement", {
   enumerable: true,
   get: function () {
@@ -189,6 +195,7 @@ var _misoThreads = _interopRequireDefault(require("./miso-threads.js"));
 var _misoNewThread = _interopRequireDefault(require("./miso-new-thread.js"));
 var _misoTitle = _interopRequireDefault(require("./miso-title.js"));
 var _misoRename = _interopRequireDefault(require("./miso-rename.js"));
+var _misoDelete = _interopRequireDefault(require("./miso-delete.js"));
 var _misoSubscription = _interopRequireDefault(require("./miso-subscription.js"));
 var _misoMessages = _interopRequireDefault(require("./miso-messages.js"));
 var _misoError = _interopRequireDefault(require("./miso-error.js"));

package/dist/cjs/element/role/miso-delete.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _misoComponent = _interopRequireDefault(require("./miso-component.js"));
+var _constants = require("../../constants.js");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+class MisoDeleteElement extends _misoComponent.default {
+  constructor() {
+    super({
+      role: _constants.ROLE.DELETE
+    });
+  }
+  static get tagName() {
+    return 'miso-delete';
+  }
+}
+exports.default = MisoDeleteElement;

package/dist/cjs/layout/button/button.js

@@ -9,7 +9,9 @@ var _constants = require("../../constants.js");
 var _template = _interopRequireDefault(require("../template.js"));
 var _svgs = require("../../asset/svgs.js");
 var _prompt = _interopRequireDefault(require("../../util/prompt.js"));
-const _excluded = ["className", "templates"];
+var _confirm = _interopRequireDefault(require("../../util/confirm.js"));
+const _excluded = ["className", "templates"],
+  _excluded2 = ["message"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 const TYPE = _constants.LAYOUT_TYPE.BUTTON;
@@ -21,7 +23,8 @@ function root(layout, state) {
     templates
   } = layout;
   const roleAttr = role ? ` data-role="${role}"` : '';
-  return `<button type="button" class="${className}"${roleAttr}>${templates.icon(layout, state)}${templates.text(layout, state)}</button>`;
+  const disabledAttr = layout._isDisabled(state) ? ' disabled' : '';
+  return `<button type="button" class="${className}"${roleAttr}${disabledAttr}>${templates.icon(layout, state)}${templates.text(layout, state)}</button>`;
 }
 function icon(layout) {
   const {
@@ -60,6 +63,19 @@ const DEFAULT_TEMPLATES = Object.freeze({
  * dialog submits nothing. Use it for actions that take a text input, such
  * as the rename button (role `rename`) of the conversation header, whose
  * role maps to `'thread.title'`.
+ *
+ * With a `confirm` option, the click asks through the shared confirm dialog
+ * first, and submits only when confirmed; the option's `message` may be a
+ * function of the control's current value. Use it for destructive actions,
+ * such as the delete button (role `delete`) of a thread item's context menu.
+ *
+ * The control's current value is the role's mapped data value, put through
+ * the `value` option when given — map the role to a record and let `value`
+ * pick the text the dialogs work with. A `disabled` option (a boolean, or a
+ * function of the mapped value) renders the button's disabled state from
+ * the data, re-evaluated on every commit — e.g. rename/delete disable while
+ * their thread record has no thread id yet (a thread being created is not
+ * addressable), enabling in place when the resolution patches the record.
  */
 class ButtonLayout extends _template.default {
   static get type() {
@@ -94,7 +110,7 @@ class ButtonLayout extends _template.default {
     if (!button || button.disabled) {
       return;
     }
-    this.options.prompt ? this._submitViaPrompt(event) : this._submit(event);
+    this.options.prompt ? this._submitViaPrompt(event) : this.options.confirm ? this._submitViaConfirm(event) : this._submit(event);
   }
   _submit(event, payload) {
     const {
@@ -117,14 +133,38 @@ class ButtonLayout extends _template.default {
       value
     });
   }
+  async _submitViaConfirm(event) {
+    const _this$options$confirm = this.options.confirm,
+      {
+        message
+      } = _this$options$confirm,
+      options = _objectWithoutPropertiesLoose(_this$options$confirm, _excluded2);
+    const confirmed = await (0, _confirm.default)(Object.assign({}, options, {
+      message: typeof message === 'function' ? message(this._currentValue()) : message
+    }));
+    if (!confirmed) {
+      return;
+    }
+    this._submit(event);
+  }
 
   /**
    * The current value of the control: the role's mapped data value, as of
-   * the latest render.
+   * the latest render, put through the `value` option when given.
    */
   _currentValue() {
     const state = this._element && this._rendered.get(this._element);
-    return state && state.value;
+    const raw = state && state.value;
+    const {
+      value
+    } = this.options;
+    return typeof value === 'function' ? value(raw) : raw;
+  }
+  _isDisabled(state) {
+    const {
+      disabled
+    } = this.options;
+    return typeof disabled === 'function' ? !!disabled(state && state.value) : !!disabled;
   }
 }
 exports.default = ButtonLayout;

package/dist/cjs/layout/button/checkbox.js

@@ -22,7 +22,8 @@ function root(layout, state) {
   const checked = isChecked(state);
   const roleAttr = role ? ` data-role="${role}"` : '';
   const checkedAttr = checked ? ' data-checked' : '';
-  return `<button type="button" class="${className}" role="switch" aria-checked="${checked}"${roleAttr}${checkedAttr}>${templates.icon(layout, state)}${templates.text(layout, state)}</button>`;
+  const disabledAttr = layout._isDisabled(state) ? ' disabled' : '';
+  return `<button type="button" class="${className}" role="switch" aria-checked="${checked}"${roleAttr}${checkedAttr}${disabledAttr}>${templates.icon(layout, state)}${templates.text(layout, state)}</button>`;
 }
 function icon(layout, state) {
   const {

package/dist/cjs/layout/container/item-container.js

@@ -0,0 +1,99 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _constants = require("../../constants.js");
+var _container = _interopRequireDefault(require("./container.js"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const TYPE = _constants.LAYOUT_TYPE.ITEM_CONTAINER;
+
+/**
+ * The container layout of a collection's item subworkflow (a thread of the
+ * thread list, a message of the conversation panel): the standard container
+ * duties (status attributes, banner, trackings), plus the item-level
+ * behaviors — currently the context menu (vertical dots + popup).
+ *
+ * The menu is handled by contract, not rendered here: the item template
+ * supplies the markup (e.g. the threads layout's threadMenuBlock), marking
+ * the toggle button `data-role="item-menu-button"` and the popup
+ * `data-role="item-menu"`, and this layout drives their open/close behavior
+ * — toggle on the button; any other click on the item (a menu action
+ * included) closes it, and so does a click outside the item, which is also
+ * how opening one item's menu closes another's. The menu contents are
+ * typically role elements binding to the item workflow (e.g. the thread
+ * item's `<miso-rename>`/`<miso-delete>` buttons), so the actions stay the
+ * workflow's own controls. Collection shells treat clicks carrying the
+ * menu data-roles as item-internal (e.g. the threads layout does not
+ * select); an item template without menu markup simply has nothing to
+ * drive. Ownership is guarded: the layout only ever drives its own item's
+ * menu — a menu or click inside a nested container element is that
+ * container's own layout's — so the layout is inert on the list panel
+ * itself, whose options bag it shares with the items.
+ */
+class ItemContainerLayout extends _container.default {
+  static get type() {
+    return TYPE;
+  }
+  initialize(view) {
+    this._unsubscribes.push(view.proxyElement.on('click', event => this._handleClick(event)));
+    if (typeof document !== 'undefined') {
+      const onDocumentClick = event => {
+        const element = this._element;
+        if (element && !element.contains(event.target)) {
+          this._closeMenu();
+        }
+      };
+      document.addEventListener('click', onDocumentClick);
+      this._unsubscribes.push(() => document.removeEventListener('click', onDocumentClick));
+    }
+  }
+
+  // menu //
+  _handleClick(event) {
+    // only left click
+    if (event.button !== 0) {
+      return;
+    }
+    // a click inside a nested container element belongs to that
+    // container's own layout (this layout may also host the list panel,
+    // whose subtree holds the items)
+    if (!this._owns(event.target)) {
+      return;
+    }
+    if (event.target.closest(`[data-role="item-menu-button"]`)) {
+      this._toggleMenu();
+      return;
+    }
+    // any other click on the item — a menu action included — closes the menu
+    this._closeMenu();
+  }
+  _getMenu() {
+    const menu = this._element && this._element.querySelector(`[data-role="item-menu"]`);
+    // only its own item's menu: one found inside a nested container
+    // element is that container's own layout's to drive
+    return menu && this._owns(menu) ? menu : undefined;
+  }
+  _owns(node) {
+    for (let el = node; el && el !== this._element; el = el.parentElement) {
+      if (el.isContainer) {
+        return false;
+      }
+    }
+    return true;
+  }
+  _toggleMenu() {
+    const menu = this._getMenu();
+    if (menu) {
+      menu.hidden = !menu.hidden;
+    }
+  }
+  _closeMenu() {
+    const menu = this._getMenu();
+    if (menu && !menu.hidden) {
+      menu.hidden = true;
+    }
+  }
+}
+exports.default = ItemContainerLayout;