@unabridged/midwest 0.22.1 → 0.23.1

package/dist/javascript/collection/app/assets/javascript/midwest/index.js

@@ -32,6 +32,10 @@ import PasswordRequirements from '../../../components/midwest/password_requireme
 import CodeBlock from '../../../components/midwest/code_block_component/code_block_component_controller.js';
 import DatePicker from '../../../components/midwest/form/date_picker_component/date_picker_component_controller.js';
 import TimePicker from '../../../components/midwest/form/time_picker_component/time_picker_component_controller.js';
+import ViewportObserver from '../../../components/midwest/intersection_observer_component/intersection_observer_component_controller.js';
+import FocusTrap from '../../../components/midwest/focus_trap_component/focus_trap_component_controller.js';
+import Onboarding from '../../../components/midwest/onboarding_component/onboarding_component_controller.js';
+import ThemeSwitch from '../../../components/midwest/form/switch_component/theme_switch_controller.js';
 
 function registerMidwestControllers(application) {
   application.register("midwest-card", Card);
@@ -68,6 +72,10 @@ function registerMidwestControllers(application) {
   application.register("midwest-code-block", CodeBlock);
   application.register("midwest-date-picker", DatePicker);
   application.register("midwest-time-picker", TimePicker);
+  application.register("midwest-intersection-observer", ViewportObserver);
+  application.register("midwest-focus-trap", FocusTrap);
+  application.register("midwest-onboarding", Onboarding);
+  application.register("midwest-theme-switch", ThemeSwitch);
 }
 
 export { Banner, Card, Chart, CountdownTimer, registerMidwestControllers };

package/dist/javascript/collection/app/assets/javascript/midwest/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../../../app/assets/javascript/midwest/index.ts"],"sourcesContent":["import Card from '../../../components/midwest/card_component/card_component_controller'\nimport Banner from '../../../components/midwest/banner_component/banner_component_controller'\nimport Input from '../../../components/midwest/form/input_component/input_component_controller'\nimport File from '../../../components/midwest/form/file_component/file_component_controller'\nimport Dropdown from '../../../components/midwest/dropdown_component/dropdown_component_controller'\nimport Prose from '../../../components/midwest/prose_component/prose_component_controller'\nimport Dialog from '../../../components/midwest/dialog_component/dialog_component_controller'\nimport Tabs from '../../../components/midwest/tabs_component/tabs_component_controller'\nimport Tooltip from '../../../components/midwest/tooltip_component/tooltip_component_controller'\nimport Carousel from '../../../components/midwest/carousel_component/carousel_component_controller'\nimport FormLiveSummary from '../../../components/midwest/form/live_summary_component/live_summary_component_controller'\nimport Form from '../../../components/midwest/form/form_controller'\nimport CountdownTimer from '../../../components/midwest/countdown_timer_component/countdown_timer_component_controller'\nimport Badge from '../../../components/midwest/badge_component/badge_component_controller'\nimport Confirmation from '../../../components/midwest/confirmation_component/confirmation_component_controller'\nimport Chart from '../../../components/midwest/chart_component/chart_component_controller'\nimport Range from '../../../components/midwest/form/range_component/range_component_controller'\nimport Rating from '../../../components/midwest/rating_component/rating_component_controller'\nimport Autocomplete from '../../../components/midwest/form/autocomplete_component/autocomplete_component_controller'\nimport Image from '../../../components/midwest/image_component/image_component_controller'\nimport ColorPicker from '../../../components/midwest/form/color_picker_component/color_picker_component_controller'\nimport Notification from '../../../components/midwest/notification_component/notification_component_controller'\nimport HorizontalScroll from '../../../components/midwest/horizontal_scroll_component/horizontal_scroll_component_controller'\nimport Table from '../../../components/midwest/table_component/table_component_controller'\nimport LoadMore from '../../../components/midwest/table_component/load_more_controller'\nimport Pagination from '../../../components/midwest/pagination_component/pagination_component_controller'\nimport ShowIf from '../../../components/midwest/show_if_component/show_if_component_controller'\nimport TreeView from '../../../components/midwest/tree_view_component/tree_view_component_controller'\nimport CommandPalette from '../../../components/midwest/command_palette_component/command_palette_component_controller'\nimport Repeatable from '../../../components/midwest/form/repeatable_component/repeatable_component_controller'\nimport PasswordRequirements from '../../../components/midwest/password_requirements_component/password_requirements_component_controller'\nimport CodeBlock from '../../../components/midwest/code_block_component/code_block_component_controller'\nimport DatePicker from '../../../components/midwest/form/date_picker_component/date_picker_component_controller'\nimport TimePicker from '../../../components/midwest/form/time_picker_component/time_picker_component_controller'\n/* IMPORTS */\n\nexport { Card, Banner, CountdownTimer, Chart }\n\nexport function registerMidwestControllers (application: any) {\n  application.register('midwest-card', Card)\n  application.register('midwest-banner', Banner)\n  application.register('midwest-countdown-timer', CountdownTimer)\n  application.register('midwest-input', Input)\n  application.register('midwest-file', File)\n  application.register('midwest-dropdown', Dropdown)\n  application.register('midwest-prose', Prose)\n  application.register('midwest-dialog', Dialog)\n  application.register('midwest-tabs', Tabs)\n  application.register('midwest-tooltip', Tooltip)\n  application.register('midwest-carousel', Carousel)\n  application.register('midwest-form-live-summary', FormLiveSummary)\n  application.register('midwest-form', Form)\n  application.register('midwest-badge', Badge)\n  application.register('midwest-confirmation', Confirmation)\n  application.register('midwest-chart', Chart)\n  application.register('midwest-range', Range)\n  application.register('midwest-rating', Rating)\n  application.register('midwest-autocomplete', Autocomplete)\n  application.register('midwest-image', Image)\n  application.register('midwest-color-picker', ColorPicker)\n  application.register('midwest-notification', Notification)\n  application.register('midwest-horizontal-scroll', HorizontalScroll)\n  application.register('midwest-table', Table)\n  application.register('midwest-load-more', LoadMore)\n  application.register('midwest-pagination', Pagination)\n  application.register('midwest-show-if', ShowIf)\n  application.register('midwest-tree-view', TreeView)\n  application.register('midwest-command-palette', CommandPalette)\n  application.register('midwest-repeatable', Repeatable)\n  application.register('midwest-password-requirements', PasswordRequirements)\n  application.register('midwest-code-block', CodeBlock)\n  application.register('midwest-date-picker', DatePicker)\n  application.register('midwest-time-picker', TimePicker)\n  /* EXPORTS */\n}\n"],"names":["Confirmation"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsCO,SAAS,2BAA4B,WAAkB,EAAA;AAC5D,EAAY,WAAA,CAAA,QAAA,CAAS,gBAAgB,IAAI,CAAA,CAAA;AACzC,EAAY,WAAA,CAAA,QAAA,CAAS,kBAAkB,MAAM,CAAA,CAAA;AAC7C,EAAY,WAAA,CAAA,QAAA,CAAS,2BAA2B,cAAc,CAAA,CAAA;AAC9D,EAAY,WAAA,CAAA,QAAA,CAAS,iBAAiB,KAAK,CAAA,CAAA;AAC3C,EAAY,WAAA,CAAA,QAAA,CAAS,gBAAgB,IAAI,CAAA,CAAA;AACzC,EAAY,WAAA,CAAA,QAAA,CAAS,oBAAoB,QAAQ,CAAA,CAAA;AACjD,EAAY,WAAA,CAAA,QAAA,CAAS,iBAAiB,KAAK,CAAA,CAAA;AAC3C,EAAY,WAAA,CAAA,QAAA,CAAS,kBAAkB,MAAM,CAAA,CAAA;AAC7C,EAAY,WAAA,CAAA,QAAA,CAAS,gBAAgB,IAAI,CAAA,CAAA;AACzC,EAAY,WAAA,CAAA,QAAA,CAAS,mBAAmB,OAAO,CAAA,CAAA;AAC/C,EAAY,WAAA,CAAA,QAAA,CAAS,oBAAoB,QAAQ,CAAA,CAAA;AACjD,EAAY,WAAA,CAAA,QAAA,CAAS,6BAA6B,eAAe,CAAA,CAAA;AACjE,EAAY,WAAA,CAAA,QAAA,CAAS,gBAAgB,IAAI,CAAA,CAAA;AACzC,EAAY,WAAA,CAAA,QAAA,CAAS,iBAAiB,KAAK,CAAA,CAAA;AAC3C,EAAY,WAAA,CAAA,QAAA,CAAS,wBAAwBA,sBAAY,CAAA,CAAA;AACzD,EAAY,WAAA,CAAA,QAAA,CAAS,iBAAiB,KAAK,CAAA,CAAA;AAC3C,EAAY,WAAA,CAAA,QAAA,CAAS,iBAAiB,KAAK,CAAA,CAAA;AAC3C,EAAY,WAAA,CAAA,QAAA,CAAS,kBAAkB,MAAM,CAAA,CAAA;AAC7C,EAAY,WAAA,CAAA,QAAA,CAAS,wBAAwB,YAAY,CAAA,CAAA;AACzD,EAAY,WAAA,CAAA,QAAA,CAAS,iBAAiB,KAAK,CAAA,CAAA;AAC3C,EAAY,WAAA,CAAA,QAAA,CAAS,wBAAwB,WAAW,CAAA,CAAA;AACxD,EAAY,WAAA,CAAA,QAAA,CAAS,wBAAwB,YAAY,CAAA,CAAA;AACzD,EAAY,WAAA,CAAA,QAAA,CAAS,6BAA6B,gBAAgB,CAAA,CAAA;AAClE,EAAY,WAAA,CAAA,QAAA,CAAS,iBAAiB,KAAK,CAAA,CAAA;AAC3C,EAAY,WAAA,CAAA,QAAA,CAAS,qBAAqB,QAAQ,CAAA,CAAA;AAClD,EAAY,WAAA,CAAA,QAAA,CAAS,sBAAsB,UAAU,CAAA,CAAA;AACrD,EAAY,WAAA,CAAA,QAAA,CAAS,mBAAmB,MAAM,CAAA,CAAA;AAC9C,EAAY,WAAA,CAAA,QAAA,CAAS,qBAAqB,QAAQ,CAAA,CAAA;AAClD,EAAY,WAAA,CAAA,QAAA,CAAS,2BAA2B,cAAc,CAAA,CAAA;AAC9D,EAAY,WAAA,CAAA,QAAA,CAAS,sBAAsB,UAAU,CAAA,CAAA;AACrD,EAAY,WAAA,CAAA,QAAA,CAAS,iCAAiC,oBAAoB,CAAA,CAAA;AAC1E,EAAY,WAAA,CAAA,QAAA,CAAS,sBAAsB,SAAS,CAAA,CAAA;AACpD,EAAY,WAAA,CAAA,QAAA,CAAS,uBAAuB,UAAU,CAAA,CAAA;AACtD,EAAY,WAAA,CAAA,QAAA,CAAS,uBAAuB,UAAU,CAAA,CAAA;AAExD;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../../../../app/assets/javascript/midwest/index.ts"],"sourcesContent":["import Card from '../../../components/midwest/card_component/card_component_controller'\nimport Banner from '../../../components/midwest/banner_component/banner_component_controller'\nimport Input from '../../../components/midwest/form/input_component/input_component_controller'\nimport File from '../../../components/midwest/form/file_component/file_component_controller'\nimport Dropdown from '../../../components/midwest/dropdown_component/dropdown_component_controller'\nimport Prose from '../../../components/midwest/prose_component/prose_component_controller'\nimport Dialog from '../../../components/midwest/dialog_component/dialog_component_controller'\nimport Tabs from '../../../components/midwest/tabs_component/tabs_component_controller'\nimport Tooltip from '../../../components/midwest/tooltip_component/tooltip_component_controller'\nimport Carousel from '../../../components/midwest/carousel_component/carousel_component_controller'\nimport FormLiveSummary from '../../../components/midwest/form/live_summary_component/live_summary_component_controller'\nimport Form from '../../../components/midwest/form/form_controller'\nimport CountdownTimer from '../../../components/midwest/countdown_timer_component/countdown_timer_component_controller'\nimport Badge from '../../../components/midwest/badge_component/badge_component_controller'\nimport Confirmation from '../../../components/midwest/confirmation_component/confirmation_component_controller'\nimport Chart from '../../../components/midwest/chart_component/chart_component_controller'\nimport Range from '../../../components/midwest/form/range_component/range_component_controller'\nimport Rating from '../../../components/midwest/rating_component/rating_component_controller'\nimport Autocomplete from '../../../components/midwest/form/autocomplete_component/autocomplete_component_controller'\nimport Image from '../../../components/midwest/image_component/image_component_controller'\nimport ColorPicker from '../../../components/midwest/form/color_picker_component/color_picker_component_controller'\nimport Notification from '../../../components/midwest/notification_component/notification_component_controller'\nimport HorizontalScroll from '../../../components/midwest/horizontal_scroll_component/horizontal_scroll_component_controller'\nimport Table from '../../../components/midwest/table_component/table_component_controller'\nimport LoadMore from '../../../components/midwest/table_component/load_more_controller'\nimport Pagination from '../../../components/midwest/pagination_component/pagination_component_controller'\nimport ShowIf from '../../../components/midwest/show_if_component/show_if_component_controller'\nimport TreeView from '../../../components/midwest/tree_view_component/tree_view_component_controller'\nimport CommandPalette from '../../../components/midwest/command_palette_component/command_palette_component_controller'\nimport Repeatable from '../../../components/midwest/form/repeatable_component/repeatable_component_controller'\nimport PasswordRequirements from '../../../components/midwest/password_requirements_component/password_requirements_component_controller'\nimport CodeBlock from '../../../components/midwest/code_block_component/code_block_component_controller'\nimport DatePicker from '../../../components/midwest/form/date_picker_component/date_picker_component_controller'\nimport TimePicker from '../../../components/midwest/form/time_picker_component/time_picker_component_controller'\nimport IntersectionObserver from '../../../components/midwest/intersection_observer_component/intersection_observer_component_controller'\nimport FocusTrap from '../../../components/midwest/focus_trap_component/focus_trap_component_controller'\nimport Onboarding from '../../../components/midwest/onboarding_component/onboarding_component_controller'\nimport ThemeSwitch from '../../../components/midwest/form/switch_component/theme_switch_controller'\n/* IMPORTS */\n\nexport { Card, Banner, CountdownTimer, Chart }\n\nexport function registerMidwestControllers (application: any) {\n  application.register('midwest-card', Card)\n  application.register('midwest-banner', Banner)\n  application.register('midwest-countdown-timer', CountdownTimer)\n  application.register('midwest-input', Input)\n  application.register('midwest-file', File)\n  application.register('midwest-dropdown', Dropdown)\n  application.register('midwest-prose', Prose)\n  application.register('midwest-dialog', Dialog)\n  application.register('midwest-tabs', Tabs)\n  application.register('midwest-tooltip', Tooltip)\n  application.register('midwest-carousel', Carousel)\n  application.register('midwest-form-live-summary', FormLiveSummary)\n  application.register('midwest-form', Form)\n  application.register('midwest-badge', Badge)\n  application.register('midwest-confirmation', Confirmation)\n  application.register('midwest-chart', Chart)\n  application.register('midwest-range', Range)\n  application.register('midwest-rating', Rating)\n  application.register('midwest-autocomplete', Autocomplete)\n  application.register('midwest-image', Image)\n  application.register('midwest-color-picker', ColorPicker)\n  application.register('midwest-notification', Notification)\n  application.register('midwest-horizontal-scroll', HorizontalScroll)\n  application.register('midwest-table', Table)\n  application.register('midwest-load-more', LoadMore)\n  application.register('midwest-pagination', Pagination)\n  application.register('midwest-show-if', ShowIf)\n  application.register('midwest-tree-view', TreeView)\n  application.register('midwest-command-palette', CommandPalette)\n  application.register('midwest-repeatable', Repeatable)\n  application.register('midwest-password-requirements', PasswordRequirements)\n  application.register('midwest-code-block', CodeBlock)\n  application.register('midwest-date-picker', DatePicker)\n  application.register('midwest-time-picker', TimePicker)\n  application.register('midwest-intersection-observer', IntersectionObserver)\n  application.register('midwest-focus-trap', FocusTrap)\n  application.register('midwest-onboarding', Onboarding)\n  application.register('midwest-theme-switch', ThemeSwitch)\n  /* EXPORTS */\n}\n"],"names":["Confirmation","IntersectionObserver"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CO,SAAS,2BAA4B,WAAkB,EAAA;AAC5D,EAAY,WAAA,CAAA,QAAA,CAAS,gBAAgB,IAAI,CAAA,CAAA;AACzC,EAAY,WAAA,CAAA,QAAA,CAAS,kBAAkB,MAAM,CAAA,CAAA;AAC7C,EAAY,WAAA,CAAA,QAAA,CAAS,2BAA2B,cAAc,CAAA,CAAA;AAC9D,EAAY,WAAA,CAAA,QAAA,CAAS,iBAAiB,KAAK,CAAA,CAAA;AAC3C,EAAY,WAAA,CAAA,QAAA,CAAS,gBAAgB,IAAI,CAAA,CAAA;AACzC,EAAY,WAAA,CAAA,QAAA,CAAS,oBAAoB,QAAQ,CAAA,CAAA;AACjD,EAAY,WAAA,CAAA,QAAA,CAAS,iBAAiB,KAAK,CAAA,CAAA;AAC3C,EAAY,WAAA,CAAA,QAAA,CAAS,kBAAkB,MAAM,CAAA,CAAA;AAC7C,EAAY,WAAA,CAAA,QAAA,CAAS,gBAAgB,IAAI,CAAA,CAAA;AACzC,EAAY,WAAA,CAAA,QAAA,CAAS,mBAAmB,OAAO,CAAA,CAAA;AAC/C,EAAY,WAAA,CAAA,QAAA,CAAS,oBAAoB,QAAQ,CAAA,CAAA;AACjD,EAAY,WAAA,CAAA,QAAA,CAAS,6BAA6B,eAAe,CAAA,CAAA;AACjE,EAAY,WAAA,CAAA,QAAA,CAAS,gBAAgB,IAAI,CAAA,CAAA;AACzC,EAAY,WAAA,CAAA,QAAA,CAAS,iBAAiB,KAAK,CAAA,CAAA;AAC3C,EAAY,WAAA,CAAA,QAAA,CAAS,wBAAwBA,sBAAY,CAAA,CAAA;AACzD,EAAY,WAAA,CAAA,QAAA,CAAS,iBAAiB,KAAK,CAAA,CAAA;AAC3C,EAAY,WAAA,CAAA,QAAA,CAAS,iBAAiB,KAAK,CAAA,CAAA;AAC3C,EAAY,WAAA,CAAA,QAAA,CAAS,kBAAkB,MAAM,CAAA,CAAA;AAC7C,EAAY,WAAA,CAAA,QAAA,CAAS,wBAAwB,YAAY,CAAA,CAAA;AACzD,EAAY,WAAA,CAAA,QAAA,CAAS,iBAAiB,KAAK,CAAA,CAAA;AAC3C,EAAY,WAAA,CAAA,QAAA,CAAS,wBAAwB,WAAW,CAAA,CAAA;AACxD,EAAY,WAAA,CAAA,QAAA,CAAS,wBAAwB,YAAY,CAAA,CAAA;AACzD,EAAY,WAAA,CAAA,QAAA,CAAS,6BAA6B,gBAAgB,CAAA,CAAA;AAClE,EAAY,WAAA,CAAA,QAAA,CAAS,iBAAiB,KAAK,CAAA,CAAA;AAC3C,EAAY,WAAA,CAAA,QAAA,CAAS,qBAAqB,QAAQ,CAAA,CAAA;AAClD,EAAY,WAAA,CAAA,QAAA,CAAS,sBAAsB,UAAU,CAAA,CAAA;AACrD,EAAY,WAAA,CAAA,QAAA,CAAS,mBAAmB,MAAM,CAAA,CAAA;AAC9C,EAAY,WAAA,CAAA,QAAA,CAAS,qBAAqB,QAAQ,CAAA,CAAA;AAClD,EAAY,WAAA,CAAA,QAAA,CAAS,2BAA2B,cAAc,CAAA,CAAA;AAC9D,EAAY,WAAA,CAAA,QAAA,CAAS,sBAAsB,UAAU,CAAA,CAAA;AACrD,EAAY,WAAA,CAAA,QAAA,CAAS,iCAAiC,oBAAoB,CAAA,CAAA;AAC1E,EAAY,WAAA,CAAA,QAAA,CAAS,sBAAsB,SAAS,CAAA,CAAA;AACpD,EAAY,WAAA,CAAA,QAAA,CAAS,uBAAuB,UAAU,CAAA,CAAA;AACtD,EAAY,WAAA,CAAA,QAAA,CAAS,uBAAuB,UAAU,CAAA,CAAA;AACtD,EAAY,WAAA,CAAA,QAAA,CAAS,iCAAiCC,gBAAoB,CAAA,CAAA;AAC1E,EAAY,WAAA,CAAA,QAAA,CAAS,sBAAsB,SAAS,CAAA,CAAA;AACpD,EAAY,WAAA,CAAA,QAAA,CAAS,sBAAsB,UAAU,CAAA,CAAA;AACrD,EAAY,WAAA,CAAA,QAAA,CAAS,wBAAwB,WAAW,CAAA,CAAA;AAE1D;;;;"}

package/dist/javascript/collection/app/assets/javascript/midwest/keyboard_navigation.js

@@ -0,0 +1,42 @@
+const NAVIGATION_KEYS = ["ArrowDown", "ArrowUp", "Home", "End", "Escape", "Tab"];
+function handleRovingFocusKeydown(event, items, options = {}) {
+  if (items.length === 0)
+    return false;
+  if (!NAVIGATION_KEYS.includes(event.key))
+    return false;
+  const { onEscape, onTab, loop = true } = options;
+  const current = items.findIndex((item) => item === document.activeElement);
+  switch (event.key) {
+    case "ArrowDown": {
+      event.preventDefault();
+      const next = current < items.length - 1 ? current + 1 : loop ? 0 : items.length - 1;
+      items[next].focus();
+      break;
+    }
+    case "ArrowUp": {
+      event.preventDefault();
+      const prev = current > 0 ? current - 1 : loop ? items.length - 1 : 0;
+      items[prev].focus();
+      break;
+    }
+    case "Home":
+      event.preventDefault();
+      items[0].focus();
+      break;
+    case "End":
+      event.preventDefault();
+      items[items.length - 1].focus();
+      break;
+    case "Escape":
+      event.preventDefault();
+      onEscape?.();
+      break;
+    case "Tab":
+      onTab?.();
+      break;
+  }
+  return true;
+}
+
+export { handleRovingFocusKeydown };
+//# sourceMappingURL=keyboard_navigation.js.map

package/dist/javascript/collection/app/assets/javascript/midwest/keyboard_navigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"keyboard_navigation.js","sources":["../../../../../../../app/assets/javascript/midwest/keyboard_navigation.ts"],"sourcesContent":["// Shared keyboard-navigation helpers for menu/list components.\n//\n// Implements the WAI-ARIA \"roving focus\" pattern: arrow keys move DOM focus\n// between a flat list of items, Home/End jump to the ends, and Escape/Tab hand\n// control back to the caller (typically to close a popover and restore focus).\n// Components own *which* elements are navigable and *what* closing means; this\n// module owns the key handling so the behavior stays consistent across the\n// library.\n\nconst NAVIGATION_KEYS = ['ArrowDown', 'ArrowUp', 'Home', 'End', 'Escape', 'Tab']\n\nexport interface RovingFocusOptions {\n  // Called on Escape. Typically closes the menu and returns focus to the trigger.\n  onEscape?: () => void\n  // Called on Tab. The default Tab behavior is left intact so focus still leaves\n  // the menu; use this to close the menu alongside it.\n  onTab?: () => void\n  // When true (default) arrow navigation wraps from the last item to the first\n  // and vice versa. When false it stops at the ends.\n  loop?: boolean\n}\n\n// Handles a keydown against a roving-focus list. Returns true when the event\n// was one this helper is responsible for, so callers can `stopPropagation()`\n// only for keys that were actually handled.\nexport function handleRovingFocusKeydown (\n  event: KeyboardEvent,\n  items: HTMLElement[],\n  options: RovingFocusOptions = {}\n): boolean {\n  if (items.length === 0) return false\n  if (!NAVIGATION_KEYS.includes(event.key)) return false\n\n  const { onEscape, onTab, loop = true } = options\n  const current = items.findIndex(item => item === document.activeElement)\n\n  switch (event.key) {\n    case 'ArrowDown': {\n      event.preventDefault()\n      const next = current < items.length - 1 ? current + 1 : (loop ? 0 : items.length - 1)\n      items[next].focus()\n      break\n    }\n    case 'ArrowUp': {\n      event.preventDefault()\n      const prev = current > 0 ? current - 1 : (loop ? items.length - 1 : 0)\n      items[prev].focus()\n      break\n    }\n    case 'Home':\n      event.preventDefault()\n      items[0].focus()\n      break\n    case 'End':\n      event.preventDefault()\n      items[items.length - 1].focus()\n      break\n    case 'Escape':\n      event.preventDefault()\n      onEscape?.()\n      break\n    case 'Tab':\n      onTab?.()\n      break\n  }\n\n  return true\n}\n"],"names":[],"mappings":"AASA,MAAM,kBAAkB,CAAC,WAAA,EAAa,WAAW,MAAQ,EAAA,KAAA,EAAO,UAAU,KAAK,CAAA,CAAA;AAgBxE,SAAS,wBACd,CAAA,KAAA,EACA,KACA,EAAA,OAAA,GAA8B,EACrB,EAAA;AACT,EAAA,IAAI,MAAM,MAAW,KAAA,CAAA;AAAG,IAAO,OAAA,KAAA,CAAA;AAC/B,EAAA,IAAI,CAAC,eAAA,CAAgB,QAAS,CAAA,KAAA,CAAM,GAAG,CAAA;AAAG,IAAO,OAAA,KAAA,CAAA;AAEjD,EAAA,MAAM,EAAE,QAAA,EAAU,KAAO,EAAA,IAAA,GAAO,MAAS,GAAA,OAAA,CAAA;AACzC,EAAA,MAAM,UAAU,KAAM,CAAA,SAAA,CAAU,CAAQ,IAAA,KAAA,IAAA,KAAS,SAAS,aAAa,CAAA,CAAA;AAEvE,EAAA,QAAQ,MAAM,GAAK;AAAA,IACjB,KAAK,WAAa,EAAA;AAChB,MAAA,KAAA,CAAM,cAAe,EAAA,CAAA;AACrB,MAAM,MAAA,IAAA,GAAO,OAAU,GAAA,KAAA,CAAM,MAAS,GAAA,CAAA,GAAI,UAAU,CAAK,GAAA,IAAA,GAAO,CAAI,GAAA,KAAA,CAAM,MAAS,GAAA,CAAA,CAAA;AACnF,MAAM,KAAA,CAAA,IAAI,EAAE,KAAM,EAAA,CAAA;AAClB,MAAA,MAAA;AAAA,KACF;AAAA,IACA,KAAK,SAAW,EAAA;AACd,MAAA,KAAA,CAAM,cAAe,EAAA,CAAA;AACrB,MAAM,MAAA,IAAA,GAAO,UAAU,CAAI,GAAA,OAAA,GAAU,IAAK,IAAO,GAAA,KAAA,CAAM,SAAS,CAAI,GAAA,CAAA,CAAA;AACpE,MAAM,KAAA,CAAA,IAAI,EAAE,KAAM,EAAA,CAAA;AAClB,MAAA,MAAA;AAAA,KACF;AAAA,IACA,KAAK,MAAA;AACH,MAAA,KAAA,CAAM,cAAe,EAAA,CAAA;AACrB,MAAM,KAAA,CAAA,CAAC,EAAE,KAAM,EAAA,CAAA;AACf,MAAA,MAAA;AAAA,IACF,KAAK,KAAA;AACH,MAAA,KAAA,CAAM,cAAe,EAAA,CAAA;AACrB,MAAA,KAAA,CAAM,KAAM,CAAA,MAAA,GAAS,CAAC,CAAA,CAAE,KAAM,EAAA,CAAA;AAC9B,MAAA,MAAA;AAAA,IACF,KAAK,QAAA;AACH,MAAA,KAAA,CAAM,cAAe,EAAA,CAAA;AACrB,MAAW,QAAA,IAAA,CAAA;AACX,MAAA,MAAA;AAAA,IACF,KAAK,KAAA;AACH,MAAQ,KAAA,IAAA,CAAA;AACR,MAAA,MAAA;AAAA,GACJ;AAEA,EAAO,OAAA,IAAA,CAAA;AACT;;;;"}

package/dist/javascript/collection/app/assets/javascript/midwest/markdown.js

@@ -0,0 +1,52 @@
+const PLACEHOLDER = "\uE000";
+function renderMarkdown(src) {
+  const blocks = [];
+  const withoutFences = src.replace(/```(\w*)\n?([\s\S]*?)```/g, (_match, _lang, code) => {
+    const body = escapeHtml(code.replace(/\n$/, ""));
+    blocks.push(`<pre class="command-palette-code"><code>${body}</code></pre>`);
+    return `${PLACEHOLDER}${blocks.length - 1}${PLACEHOLDER}`;
+  });
+  const lines = escapeHtml(withoutFences).split("\n");
+  const out = [];
+  let listOpen = false;
+  const closeList = () => {
+    if (listOpen) {
+      out.push("</ul>");
+      listOpen = false;
+    }
+  };
+  for (const line of lines) {
+    const placeholder = line.match(new RegExp(`^${PLACEHOLDER}(\\d+)${PLACEHOLDER}$`));
+    if (placeholder) {
+      closeList();
+      out.push(line);
+      continue;
+    }
+    const item = line.match(/^\s*[-*]\s+(.*)$/);
+    if (item) {
+      if (!listOpen) {
+        out.push("<ul>");
+        listOpen = true;
+      }
+      out.push(`<li>${inline(item[1])}</li>`);
+      continue;
+    }
+    closeList();
+    if (line.trim() !== "")
+      out.push(`<p>${inline(line)}</p>`);
+  }
+  closeList();
+  return out.join("\n").replace(new RegExp(`${PLACEHOLDER}(\\d+)${PLACEHOLDER}`, "g"), (_match, index) => blocks[Number(index)]);
+}
+function inline(text) {
+  return text.replace(/`([^`]+)`/g, "<code>$1</code>").replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>").replace(/\*([^*]+)\*/g, "<em>$1</em>").replace(
+    /\[([^\]]+)\]\((https?:\/\/[^\s)]+|mailto:[^\s)]+)\)/g,
+    '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>'
+  );
+}
+function escapeHtml(text) {
+  return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+
+export { renderMarkdown };
+//# sourceMappingURL=markdown.js.map

package/dist/javascript/collection/app/assets/javascript/midwest/markdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"markdown.js","sources":["../../../../../../../app/assets/javascript/midwest/markdown.ts"],"sourcesContent":["// Tiny, dependency-free Markdown renderer for streamed chat responses.\n//\n// It is intentionally a small subset (paragraphs, lists, fenced/inline code,\n// bold, italic, and safe links) rather than a full CommonMark implementation —\n// the command palette streams tokens and cannot afford a heavy parser.\n//\n// Security: model output is untrusted. Text is HTML-escaped BEFORE any markup is\n// applied, and links are restricted to http(s)/mailto, so the result is safe to\n// assign to innerHTML.\n\nconst PLACEHOLDER = '\\uE000' // private-use char, unlikely in real text\n\nexport function renderMarkdown (src: string): string {\n  const blocks: string[] = []\n\n  // Pull fenced code blocks out first so their contents are never treated as markup.\n  const withoutFences = src.replace(/```(\\w*)\\n?([\\s\\S]*?)```/g, (_match, _lang, code: string) => {\n    const body = escapeHtml(code.replace(/\\n$/, ''))\n    blocks.push(`<pre class=\"command-palette-code\"><code>${body}</code></pre>`)\n    return `${PLACEHOLDER}${blocks.length - 1}${PLACEHOLDER}`\n  })\n\n  const lines = escapeHtml(withoutFences).split('\\n')\n  const out: string[] = []\n  let listOpen = false\n\n  const closeList = () => {\n    if (listOpen) {\n      out.push('</ul>')\n      listOpen = false\n    }\n  }\n\n  for (const line of lines) {\n    const placeholder = line.match(new RegExp(`^${PLACEHOLDER}(\\\\d+)${PLACEHOLDER}$`))\n    if (placeholder) {\n      closeList()\n      out.push(line)\n      continue\n    }\n\n    const item = line.match(/^\\s*[-*]\\s+(.*)$/)\n    if (item) {\n      if (!listOpen) {\n        out.push('<ul>')\n        listOpen = true\n      }\n      out.push(`<li>${inline(item[1])}</li>`)\n      continue\n    }\n\n    closeList()\n    if (line.trim() !== '') out.push(`<p>${inline(line)}</p>`)\n  }\n\n  closeList()\n\n  return out\n    .join('\\n')\n    .replace(new RegExp(`${PLACEHOLDER}(\\\\d+)${PLACEHOLDER}`, 'g'), (_match, index: string) => blocks[Number(index)])\n}\n\nfunction inline (text: string): string {\n  return text\n    .replace(/`([^`]+)`/g, '<code>$1</code>')\n    .replace(/\\*\\*([^*]+)\\*\\*/g, '<strong>$1</strong>')\n    .replace(/\\*([^*]+)\\*/g, '<em>$1</em>')\n    .replace(\n      /\\[([^\\]]+)\\]\\((https?:\\/\\/[^\\s)]+|mailto:[^\\s)]+)\\)/g,\n      '<a href=\"$2\" target=\"_blank\" rel=\"noopener noreferrer\">$1</a>'\n    )\n}\n\nfunction escapeHtml (text: string): string {\n  return text\n    .replace(/&/g, '&amp;')\n    .replace(/</g, '&lt;')\n    .replace(/>/g, '&gt;')\n}\n"],"names":[],"mappings":"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"}

package/dist/javascript/collection/app/components/midwest/command_palette_component/command_palette_component_controller.js

@@ -1,20 +1,48 @@
 import { Controller } from '@hotwired/stimulus';
 import { cloneTemplate } from '../../../assets/javascript/midwest/template_helpers.js';
+import { renderMarkdown } from '../../../assets/javascript/midwest/markdown.js';
 
 class CommandPalette extends Controller {
-  static targets = ["input", "list", "empty", "body", "turboList", "itemTemplate", "groupTemplate"];
+  static targets = [
+    "input",
+    "list",
+    "empty",
+    "body",
+    "turboList",
+    "itemTemplate",
+    "groupTemplate",
+    "modes",
+    "chat",
+    "transcript",
+    "starters",
+    "messageTemplate",
+    "actionTemplate"
+  ];
   static values = {
     hotkey: { type: String, default: "k" },
     items: { type: Array, default: [] },
     src: { type: String, default: "" },
-    turboFrameUrl: { type: String, default: "" }
+    turboFrameUrl: { type: String, default: "" },
+    chatEnabled: { type: Boolean, default: false },
+    chatMode: { type: String, default: "proxy" },
+    chatTrigger: { type: String, default: "toggle" },
+    chatAgentic: { type: Boolean, default: true },
+    chatPlaceholder: { type: String, default: "Ask AI\u2026" },
+    chatEndpoint: { type: String, default: "" },
+    chatUrl: { type: String, default: "" },
+    chatModel: { type: String, default: "" }
   };
   highlightedIndex = -1;
   fetchAbort = null;
   searchTimer;
   allItems = [];
+  mode = "command";
+  commandPlaceholder = "";
+  messages = [];
+  streamAbort = null;
   connect() {
     this.allItems = this.itemsValue;
+    this.commandPlaceholder = this.inputTarget.placeholder;
     document.addEventListener("keydown", this.handleGlobalKeydown);
     this.element.addEventListener("click", this.handleBackdropClick);
     if (!this.turboFrameUrlValue) {
@@ -26,6 +54,8 @@ class CommandPalette extends Controller {
     this.element.removeEventListener("click", this.handleBackdropClick);
     if (this.fetchAbort)
       this.fetchAbort.abort();
+    if (this.streamAbort)
+      this.streamAbort.abort();
     if (this.searchTimer)
       clearTimeout(this.searchTimer);
   }
@@ -59,6 +89,8 @@ class CommandPalette extends Controller {
     this.element.showModal();
     this.inputTarget.value = "";
     this.highlightedIndex = -1;
+    if (this.chatEnabledValue)
+      this.resetChat();
     if (this.turboFrameUrlValue) {
       this.navigateFrame("");
     } else {
@@ -72,6 +104,8 @@ class CommandPalette extends Controller {
     this.element.close();
   }
   filter() {
+    if (this.mode === "chat")
+      return;
     const query = this.inputTarget.value.trim().toLowerCase();
     if (this.turboFrameUrlValue) {
       this.debouncedNavigateFrame(query);
@@ -92,6 +126,21 @@ class CommandPalette extends Controller {
     this.renderItems(filtered);
   }
   navigate(event) {
+    if (this.mode === "chat") {
+      if (event.key === "Enter" && !event.shiftKey) {
+        event.preventDefault();
+        this.send();
+      } else if (event.key === "Escape") {
+        event.preventDefault();
+        this.close();
+      }
+      return;
+    }
+    if (event.key === "Tab" && !event.shiftKey && this.chatEnabledValue && this.chatTriggerValue === "toggle" && this.inputTarget.value.trim() === "") {
+      event.preventDefault();
+      this.setMode("chat");
+      return;
+    }
     const items = this.visibleItems;
     switch (event.key) {
       case "ArrowDown":
@@ -126,6 +175,225 @@ class CommandPalette extends Controller {
       this.selectItem(items[index]);
     }
   }
+  // ── Chat mode ───────────────────────────────────────────────────────
+  switchMode(event) {
+    const mode = event.currentTarget.dataset.mode === "chat" ? "chat" : "command";
+    this.setMode(mode);
+    if (mode === "command")
+      this.filter();
+    this.inputTarget.focus();
+  }
+  useStarter(event) {
+    this.inputTarget.value = event.currentTarget.textContent?.trim() || "";
+    this.send();
+  }
+  resetChat() {
+    if (this.streamAbort)
+      this.streamAbort.abort();
+    this.messages = [];
+    if (this.hasTranscriptTarget)
+      this.transcriptTarget.innerHTML = "";
+    if (this.hasStartersTarget)
+      this.startersTarget.hidden = false;
+    this.setBusy(false);
+    this.setMode("command");
+  }
+  setMode(mode) {
+    if (!this.chatEnabledValue)
+      return;
+    this.mode = mode;
+    const chat = mode === "chat";
+    this.element.classList.toggle("chat-active", chat);
+    if (this.hasModesTarget) {
+      this.modesTarget.querySelectorAll(".command-palette-mode").forEach((el) => {
+        el.setAttribute("aria-pressed", String(el.dataset.mode === mode));
+      });
+    }
+    if (this.hasChatTarget)
+      this.chatTarget.hidden = !chat;
+    if (chat) {
+      this.emptyTarget.hidden = true;
+      if (this.hasListTarget)
+        this.listTarget.hidden = true;
+      if (this.hasTurboListTarget)
+        this.turboListTarget.hidden = true;
+      this.inputTarget.placeholder = this.chatPlaceholderValue;
+    } else {
+      this.inputTarget.placeholder = this.commandPlaceholder;
+      if (this.hasTurboListTarget)
+        this.turboListTarget.hidden = false;
+    }
+  }
+  stop() {
+    if (this.streamAbort)
+      this.streamAbort.abort();
+  }
+  send() {
+    if (this.streamAbort)
+      return;
+    const text = this.inputTarget.value.trim();
+    if (!text)
+      return;
+    this.appendMessage("user", text);
+    this.messages.push({ role: "user", content: text });
+    this.inputTarget.value = "";
+    if (this.hasStartersTarget)
+      this.startersTarget.hidden = true;
+    void this.streamReply();
+  }
+  async streamReply() {
+    const message = this.appendMessage("assistant", "");
+    const bubble = message.querySelector(".command-palette-message-bubble");
+    this.setBusy(true);
+    this.streamAbort = new AbortController();
+    let reply = "";
+    try {
+      const response = await fetch(this.chatRequestUrl(), {
+        method: "POST",
+        headers: { "Content-Type": "application/json", Accept: "text/event-stream" },
+        body: JSON.stringify(this.chatRequestBody()),
+        signal: this.streamAbort.signal
+      });
+      if (!response.ok || !response.body)
+        throw new Error(`Chat request failed (${response.status})`);
+      const reader = response.body.getReader();
+      const decoder = new TextDecoder();
+      let buffer = "";
+      for (; ; ) {
+        const { value, done } = await reader.read();
+        if (done)
+          break;
+        buffer += decoder.decode(value, { stream: true });
+        const events = buffer.split("\n\n");
+        buffer = events.pop() || "";
+        for (const event of events) {
+          const data = this.parseSseData(event);
+          if (!data)
+            continue;
+          const delta = data.choices?.[0]?.delta?.content;
+          if (delta) {
+            reply += delta;
+            bubble.innerHTML = renderMarkdown(reply);
+            this.scrollTranscript();
+          } else if (data.midwest) {
+            this.handleAgentEvent(data.midwest);
+          }
+        }
+      }
+      this.messages.push({ role: "assistant", content: reply });
+    } catch (error) {
+      if (error.name === "AbortError") {
+        if (reply)
+          this.messages.push({ role: "assistant", content: reply });
+      } else {
+        message.classList.add("is-error");
+        bubble.textContent = "Something went wrong. Please try again.";
+      }
+    } finally {
+      this.streamAbort = null;
+      this.setBusy(false);
+      this.scrollTranscript();
+    }
+  }
+  parseSseData(event) {
+    const data = event.split("\n").filter((line) => line.startsWith("data:")).map((line) => line.slice(5).trim()).join("");
+    if (!data || data === "[DONE]")
+      return null;
+    try {
+      return JSON.parse(data);
+    } catch {
+      return null;
+    }
+  }
+  // Agentic events: the server streams a tool "action row" and/or a client
+  // directive (navigate / run a palette command). Directives reuse the same
+  // execution path as manual selection.
+  handleAgentEvent(event) {
+    if (event.type === "tool") {
+      this.appendActionRow(event);
+    } else if (event.type === "directive" && event.directive) {
+      this.performDirective(event.directive);
+    }
+  }
+  // Action rows live in the current assistant message's card footer.
+  appendActionRow(event) {
+    if (!this.hasActionTemplateTarget)
+      return;
+    const footer = this.currentActionFooter();
+    if (!footer)
+      return;
+    const action = cloneTemplate(this.actionTemplateTarget);
+    const label = action.querySelector(".command-palette-action-label");
+    if (label)
+      label.textContent = event.label || "Action";
+    footer.hidden = false;
+    footer.appendChild(action);
+    this.scrollTranscript();
+  }
+  currentActionFooter() {
+    const messages = this.transcriptTarget.querySelectorAll(
+      ".command-palette-message.role-assistant"
+    );
+    const last = messages[messages.length - 1];
+    return last ? last.querySelector(".command-palette-action-footer") : null;
+  }
+  performDirective(directive) {
+    if (directive.url) {
+      this.visit(directive.url, directive.method);
+    } else if (directive.action) {
+      this.element.dispatchEvent(
+        new CustomEvent("midwest-command-palette:action", {
+          bubbles: true,
+          detail: { action: directive.action }
+        })
+      );
+    }
+  }
+  chatRequestUrl() {
+    return this.chatModeValue === "proxy" ? this.chatEndpointValue : this.chatUrlValue;
+  }
+  chatRequestBody() {
+    const body = { messages: this.messages, stream: true };
+    if (this.chatModeValue !== "proxy" && this.chatModelValue)
+      body.model = this.chatModelValue;
+    if (this.chatModeValue === "proxy" && this.chatAgenticValue) {
+      body.commands = this.allItems.map((item) => ({
+        label: item.label,
+        description: item.description,
+        url: item.url,
+        action: item.action,
+        method: item.method,
+        icon: item.icon
+      }));
+    }
+    return body;
+  }
+  setBusy(busy) {
+    this.element.classList.toggle("chat-busy", busy);
+    if (this.hasStopTarget)
+      this.stopTarget.hidden = !busy;
+    if (this.hasTranscriptTarget)
+      this.transcriptTarget.setAttribute("aria-busy", String(busy));
+  }
+  scrollTranscript() {
+    if (this.hasTranscriptTarget)
+      this.transcriptTarget.scrollTop = this.transcriptTarget.scrollHeight;
+  }
+  appendMessage(role, text) {
+    const li = cloneTemplate(this.messageTemplateTarget);
+    li.classList.add(`role-${role}`);
+    if (role === "user")
+      li.classList.add("is-end");
+    const roleEl = li.querySelector(".command-palette-message-role");
+    if (roleEl)
+      roleEl.textContent = role === "user" ? "You" : "Assistant";
+    const bubble = li.querySelector(".command-palette-message-bubble");
+    if (text)
+      bubble.textContent = text;
+    this.transcriptTarget.appendChild(li);
+    this.scrollTranscript();
+    return li;
+  }
   // ── Remote search ───────────────────────────────────────────────────
   fetchRemote(query) {
     if (this.fetchAbort)