Command

package command import (	"context" 	"github.com/axadrn/shadcn-templ/v2/components/dialog"	"github.com/axadrn/shadcn-templ/v2/components/icon"	"github.com/axadrn/shadcn-templ/v2/components/inputgroup"	"github.com/axadrn/shadcn-templ/v2/utils") type ctxKey string const stateKey ctxKey = "commandState" type ctxState struct {	id string} func state(ctx context.Context) ctxState {	if s, ok := ctx.Value(stateKey).(ctxState); ok {		return s	}	return ctxState{}} type Props struct {	ID         string	Class      string	Attributes templ.Attributes	// Label is the accessible label for the command menu. Not shown visibly.	Label string} type DialogProps struct {	ID string	// Title is the dialog's screen-reader title. Defaults to "Command Palette".	Title string	// Description is the dialog's screen-reader description. Defaults to	// "Search for a command to run...".	Description string	// ShowCloseButton shows the dialog close button. Defaults to false.	ShowCloseButton bool	Class           string} type InputProps struct {	ID          string	Class       string	Attributes  templ.Attributes	Placeholder string	Disabled    bool} type ListProps struct {	Class      string	Attributes templ.Attributes	// Label is the accessible label for the list. Defaults to "Suggestions".	Label string} type EmptyProps struct {	Class      string	Attributes templ.Attributes} type GroupProps struct {	ID         string	Class      string	Attributes templ.Attributes	// Heading renders a heading above the group's items.	Heading string} type ItemProps struct {	ID         string	Class      string	Attributes templ.Attributes	// Value identifies the item for filtering and selection. Defaults to the	// item's text content.	Value    string	Disabled bool} type ShortcutProps struct {	Class      string	Attributes templ.Attributes} type SeparatorProps struct {	Class      string	Attributes templ.Attributes	// AlwaysRender keeps the separator visible while searching.	AlwaysRender bool} // Command is the root of the command menu, a port of shadcn's base/ui// command.tsx on top of cmdk v1.1.1 (its CommandPrimitive): fuzzy// command-score filtering with result sorting, a roving selection moved by// the arrow keys, Enter activation and aria-activedescendant wiring live in// command.js.templ Command(props ...Props) {	{{ var p Props }}	if len(props) > 0 {		{{ p = props[0] }}	}	if p.ID == "" {		{{ p.ID = utils.RandomID() }}	}	{{ ctx = context.WithValue(ctx, stateKey, ctxState{id: p.ID}) }}	<div		id={ p.ID }		data-slot="command"		data-tui-command		tabindex="-1"		class={ utils.CN("cn-command flex size-full flex-col overflow-hidden", p.Class) }		{ p.Attributes... }	>		// cmdk renders a screen-reader-only label tied to the input.		<label data-tui-command-label id={ p.ID + "-label" } for={ p.ID + "-input" } class="sr-only">{ p.Label }</label>		{ children... }	</div>} // Dialog renders the command menu in a dialog, like shadcn's CommandDialog.// Open it from any element via dialog.TriggerFor(id).templ Dialog(props ...DialogProps) {	{{ var p DialogProps }}	if len(props) > 0 {		{{ p = props[0] }}	}	if p.Title == "" {		{{ p.Title = "Command Palette" }}	}	if p.Description == "" {		{{ p.Description = "Search for a command to run..." }}	}	@dialog.Dialog(dialog.Props{ID: p.ID}) {		@dialog.Header(dialog.HeaderProps{Class: "sr-only"}) {			@dialog.Title() {				{ p.Title }			}			@dialog.Description() {				{ p.Description }			}		}		@dialog.Content(dialog.ContentProps{			Class:           utils.CN("cn-command-dialog top-1/3 translate-y-0 overflow-hidden p-0", p.Class),			HideCloseButton: !p.ShowCloseButton,		}) {			{ children... }		}	}} templ Input(props ...InputProps) {	{{ var p InputProps }}	if len(props) > 0 {		{{ p = props[0] }}	}	{{ s := state(ctx) }}	if p.ID == "" {		{{ p.ID = s.id + "-input" }}	}	<div data-slot="command-input-wrapper" class="cn-command-input-wrapper">		@inputgroup.InputGroup(inputgroup.Props{Class: "cn-command-input-group"}) {			// A bare input like cmdk's, not inputgroup.Input: shadcn renders			// CommandPrimitive.Input directly inside the InputGroup. The			// combobox-like aria comes from cmdk (the list is always			// "expanded").			<input				id={ p.ID }				data-slot="command-input"				data-tui-command-input				type="text"				autocomplete="off"				autocorrect="off"				spellcheck="false"				role="combobox"				aria-autocomplete="list"				aria-expanded="true"				aria-controls={ s.id + "-list" }				aria-labelledby={ s.id + "-label" }				if p.Placeholder != "" {					placeholder={ p.Placeholder }				}				disabled?={ p.Disabled }				class={ utils.CN("cn-command-input outline-hidden disabled:cursor-not-allowed disabled:opacity-50", p.Class) }				{ p.Attributes... }			/>			@inputgroup.Addon() {				@icon.Search(icon.Props{Class: "cn-command-input-icon"})			}		}	</div>} templ List(props ...ListProps) {	{{ var p ListProps }}	if len(props) > 0 {		{{ p = props[0] }}	}	if p.Label == "" {		{{ p.Label = "Suggestions" }}	}	{{ s := state(ctx) }}	<div		id={ s.id + "-list" }		data-slot="command-list"		data-tui-command-list		role="listbox"		tabindex="-1"		aria-label={ p.Label }		class={ utils.CN("cn-command-list overflow-x-hidden overflow-y-auto", p.Class) }		{ p.Attributes... }	>		// cmdk's list sizer: filtering hides and sorting reorders the		// groups and items inside it.		<div data-tui-command-list-sizer>			{ children... }		</div>	</div>} // Empty shows only while no item matches the search; hidden until the script// reveals it, exactly like cmdk mounts it only at zero results.templ Empty(props ...EmptyProps) {	{{ var p EmptyProps }}	if len(props) > 0 {		{{ p = props[0] }}	}	<div		data-slot="command-empty"		data-tui-command-empty		role="presentation"		hidden		class={ utils.CN("cn-command-empty", p.Class) }		{ p.Attributes... }	>		{ children... }	</div>} templ Group(props ...GroupProps) {	{{ var p GroupProps }}	if len(props) > 0 {		{{ p = props[0] }}	}	if p.ID == "" {		{{ p.ID = utils.RandomID() }}	}	<div		id={ p.ID }		data-slot="command-group"		data-tui-command-group		role="presentation"		if p.Heading != "" {			data-value={ p.Heading }		}		class={ utils.CN("cn-command-group", p.Class) }		{ p.Attributes... }	>		if p.Heading != "" {			// The bare cmdk-group-heading attribute is what the vendored			// cn-command-group styles key on.			<div cmdk-group-heading aria-hidden="true" id={ p.ID + "-heading" }>{ p.Heading }</div>		}		<div			data-tui-command-group-items			role="group"			if p.Heading != "" {				aria-labelledby={ p.ID + "-heading" }			}		>			{ children... }		</div>	</div>} templ Item(props ...ItemProps) {	{{ var p ItemProps }}	if len(props) > 0 {		{{ p = props[0] }}	}	<div		if p.ID != "" {			id={ p.ID }		}		data-slot="command-item"		data-tui-command-item		role="option"		if p.Value != "" {			data-value={ p.Value }		}		aria-disabled={ utils.IfElse(p.Disabled, "true", "false") }		data-disabled={ utils.IfElse(p.Disabled, "true", "false") }		aria-selected="false"		data-selected="false"		class={ utils.CN("cn-command-item group/command-item data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0", p.Class) }		{ p.Attributes... }	>		{ children... }		@icon.Check(icon.Props{Class: "cn-command-item-indicator ml-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100"})	</div>} templ Shortcut(props ...ShortcutProps) {	{{ var p ShortcutProps }}	if len(props) > 0 {		{{ p = props[0] }}	}	<span		data-slot="command-shortcut"		class={ utils.CN("cn-command-shortcut", p.Class) }		{ p.Attributes... }	>		{ children... }	</span>} // Separator is visible while the search is empty, exactly like cmdk hides// separators between sorted results.templ Separator(props ...SeparatorProps) {	{{ var p SeparatorProps }}	if len(props) > 0 {		{{ p = props[0] }}	}	<div		data-slot="command-separator"		data-tui-command-separator		role="separator"		if p.AlwaysRender {			data-tui-command-always-render		}		class={ utils.CN("cn-command-separator", p.Class) }		{ p.Attributes... }	></div>}

(function () {  // 1:1 port of cmdk v1.1.1 (pacocoursey/cmdk), the primitive behind shadcn's  // base/ui/command.tsx: command-score fuzzy filtering with result sorting,  // a roving selection, vim bindings and aria-activedescendant wiring.   const ITEM_SELECTOR = "[data-tui-command-item]";  const VALID_ITEM_SELECTOR = ITEM_SELECTOR + ':not([aria-disabled="true"]):not([hidden])';  const GROUP_SELECTOR = "[data-tui-command-group]";  const GROUP_ITEMS_SELECTOR = "[data-tui-command-group-items]";  const GROUP_HEADING_SELECTOR = "[cmdk-group-heading]";   // ----- command-score ------------------------------------------------------  // 1:1 port of cmdk's command-score.ts (the default filter).   const SCORE_CONTINUE_MATCH = 1,    SCORE_SPACE_WORD_JUMP = 0.9,    SCORE_NON_SPACE_WORD_JUMP = 0.8,    SCORE_CHARACTER_JUMP = 0.17,    SCORE_TRANSPOSITION = 0.1,    PENALTY_SKIPPED = 0.999,    PENALTY_CASE_MISMATCH = 0.9999,    PENALTY_NOT_COMPLETE = 0.99;   const IS_GAP_REGEXP = /[\\\/_+.#"@\[\(\{&]/,    COUNT_GAPS_REGEXP = /[\\\/_+.#"@\[\(\{&]/g,    IS_SPACE_REGEXP = /[\s-]/,    COUNT_SPACE_REGEXP = /[\s-]/g;   function commandScoreInner(    string,    abbreviation,    lowerString,    lowerAbbreviation,    stringIndex,    abbreviationIndex,    memoizedResults,  ) {    if (abbreviationIndex === abbreviation.length) {      if (stringIndex === string.length) {        return SCORE_CONTINUE_MATCH;      }      return PENALTY_NOT_COMPLETE;    }     const memoizeKey = stringIndex + "," + abbreviationIndex;    if (memoizedResults[memoizeKey] !== undefined) {      return memoizedResults[memoizeKey];    }     const abbreviationChar = lowerAbbreviation.charAt(abbreviationIndex);    let index = lowerString.indexOf(abbreviationChar, stringIndex);    let highScore = 0;     let score, transposedScore, wordBreaks, spaceBreaks;     while (index >= 0) {      score = commandScoreInner(        string,        abbreviation,        lowerString,        lowerAbbreviation,        index + 1,        abbreviationIndex + 1,        memoizedResults,      );      if (score > highScore) {        if (index === stringIndex) {          score *= SCORE_CONTINUE_MATCH;        } else if (IS_GAP_REGEXP.test(string.charAt(index - 1))) {          score *= SCORE_NON_SPACE_WORD_JUMP;          wordBreaks = string.slice(stringIndex, index - 1).match(COUNT_GAPS_REGEXP);          if (wordBreaks && stringIndex > 0) {            score *= Math.pow(PENALTY_SKIPPED, wordBreaks.length);          }        } else if (IS_SPACE_REGEXP.test(string.charAt(index - 1))) {          score *= SCORE_SPACE_WORD_JUMP;          spaceBreaks = string.slice(stringIndex, index - 1).match(COUNT_SPACE_REGEXP);          if (spaceBreaks && stringIndex > 0) {            score *= Math.pow(PENALTY_SKIPPED, spaceBreaks.length);          }        } else {          score *= SCORE_CHARACTER_JUMP;          if (stringIndex > 0) {            score *= Math.pow(PENALTY_SKIPPED, index - stringIndex);          }        }         if (string.charAt(index) !== abbreviation.charAt(abbreviationIndex)) {          score *= PENALTY_CASE_MISMATCH;        }      }       if (        (score < SCORE_TRANSPOSITION &&          lowerString.charAt(index - 1) === lowerAbbreviation.charAt(abbreviationIndex + 1)) ||        (lowerAbbreviation.charAt(abbreviationIndex + 1) === lowerAbbreviation.charAt(abbreviationIndex) &&          lowerString.charAt(index - 1) !== lowerAbbreviation.charAt(abbreviationIndex))      ) {        transposedScore = commandScoreInner(          string,          abbreviation,          lowerString,          lowerAbbreviation,          index + 1,          abbreviationIndex + 2,          memoizedResults,        );         if (transposedScore * SCORE_TRANSPOSITION > score) {          score = transposedScore * SCORE_TRANSPOSITION;        }      }       if (score > highScore) {        highScore = score;      }       index = lowerString.indexOf(abbreviationChar, index + 1);    }     memoizedResults[memoizeKey] = highScore;    return highScore;  }   function formatInput(string) {    return string.toLowerCase().replace(COUNT_SPACE_REGEXP, " ");  }   function commandScore(string, abbreviation) {    return commandScoreInner(string, abbreviation, formatInput(string), formatInput(abbreviation), 0, 0, {});  }   // ----- helpers ------------------------------------------------------------   function rootFor(el) {    return el.closest("[data-tui-command]");  }   function inputOf(root) {    return root.querySelector("[data-tui-command-input]");  }   function listOf(root) {    return root.querySelector("[data-tui-command-list]");  }   function sizerOf(root) {    return root.querySelector("[data-tui-command-list-sizer]");  }   function searchOf(root) {    return root._tuiCommandSearch || "";  }   function valueOf(item) {    return item.getAttribute("data-value") || "";  }   function getValidItems(root) {    return [...root.querySelectorAll(VALID_ITEM_SELECTOR)];  }   function getSelectedItem(root) {    return root.querySelector(ITEM_SELECTOR + '[aria-selected="true"]');  }   function score(root, value) {    return value ? commandScore(value, searchOf(root)) : 0;  }   function findNextSibling(el, selector) {    let sibling = el.nextElementSibling;    while (sibling) {      if (sibling.matches(selector)) return sibling;      sibling = sibling.nextElementSibling;    }  }   function findPreviousSibling(el, selector) {    let sibling = el.previousElementSibling;    while (sibling) {      if (sibling.matches(selector)) return sibling;      sibling = sibling.previousElementSibling;    }  }   // ----- selection ----------------------------------------------------------   function scrollSelectedIntoView(root) {    const item = getSelectedItem(root);    if (!item) return;    if (item.parentElement?.firstElementChild === item) {      // First item in a group: ensure the heading is in view.      item.closest(GROUP_SELECTOR)?.querySelector(GROUP_HEADING_SELECTOR)?.scrollIntoView({ block: "nearest" });    }    item.scrollIntoView({ block: "nearest" });  }   // opts.scroll false mirrors cmdk's pointer selection, which skips the  // scroll-into-view that keyboard selection performs.  function setSelected(root, item, opts) {    root.querySelectorAll(ITEM_SELECTOR).forEach((i) => {      const selected = i === item;      i.setAttribute("data-selected", selected ? "true" : "false");      i.setAttribute("aria-selected", selected ? "true" : "false");    });     // cmdk re-focuses the input so accessibility works when focus sits on    // the root or the input itself.    const input = inputOf(root);    if (document.activeElement === root || document.activeElement === input) {      if (input) input.focus();      else listOf(root)?.focus();    }     const id = item ? item.id : null;    [input, listOf(root)].forEach((el) => {      if (!el) return;      if (id) el.setAttribute("aria-activedescendant", id);      else el.removeAttribute("aria-activedescendant");    });     if (item && !(opts && opts.scroll === false)) scrollSelectedIntoView(root);  }   function selectFirstItem(root) {    setSelected(root, getValidItems(root)[0] || null);  }   function updateSelectedToIndex(root, index) {    const item = getValidItems(root)[index];    if (item) setSelected(root, item);  }   // Roving selection without wrapping: cmdk only loops with the loop prop,  // which shadcn's command.tsx does not set.  function updateSelectedByItem(root, change) {    const selected = getSelectedItem(root);    const items = getValidItems(root);    const index = items.indexOf(selected);    const newSelected = items[index + change];    if (newSelected) setSelected(root, newSelected);  }   function updateSelectedByGroup(root, change) {    const selected = getSelectedItem(root);    let group = selected?.closest(GROUP_SELECTOR);    let item;     while (group && !item) {      group = change > 0 ? findNextSibling(group, GROUP_SELECTOR) : findPreviousSibling(group, GROUP_SELECTOR);      item = group?.querySelector(VALID_ITEM_SELECTOR);    }     if (item) {      setSelected(root, item);    } else {      updateSelectedByItem(root, change);    }  }   // Activation = cmdk's SELECT_EVENT on Enter or click: the item stays  // selected and a bubbling command-select event carries its value.  function activateItem(root, item) {    setSelected(root, item, { scroll: false });    item.dispatchEvent(      new CustomEvent("command-select", { bubbles: true, detail: { value: valueOf(item) } }),    );  }   // ----- filtering ----------------------------------------------------------   function filterItems(root) {    const search = searchOf(root);    const scores = (root._tuiCommandScores = new Map());    const items = [...root.querySelectorAll(ITEM_SELECTOR)];    let count = items.length;     if (search) {      count = 0;      items.forEach((item) => {        const rank = score(root, valueOf(item));        scores.set(item, rank);        item.hidden = !(rank > 0);        if (rank > 0) count++;      });    } else {      items.forEach((item) => {        item.hidden = false;      });    }     // A group is shown while at least one of its items is.    root.querySelectorAll(GROUP_SELECTOR).forEach((group) => {      group.hidden = !group.querySelector(ITEM_SELECTOR + ":not([hidden])");    });     // cmdk renders separators only while the search is empty.    root.querySelectorAll("[data-tui-command-separator]").forEach((sep) => {      sep.hidden = !!search && !sep.hasAttribute("data-tui-command-always-render");    });     // Empty renders only at zero results.    root.querySelectorAll("[data-tui-command-empty]").forEach((empty) => {      empty.hidden = count !== 0;    });  }   /** Sorts items by score, and groups by their highest item score (cmdk sort()). */  function sort(root) {    const sizer = sizerOf(root);    if (!sizer) return;     if (!searchOf(root)) {      // cmdk unmounts filtered items and remounts them in source order once      // the search clears; restoring the recorded order is our equivalent.      [sizer, ...root.querySelectorAll(GROUP_ITEMS_SELECTOR)].forEach((container) => {        (container._tuiCommandOrder || []).forEach((child) => container.appendChild(child));      });      return;    }     const scores = root._tuiCommandScores || new Map();     // Sort the items within their group (or the list) by score.    getValidItems(root)      .sort((a, b) => (scores.get(b) ?? 0) - (scores.get(a) ?? 0))      .forEach((item) => {        const group = item.closest(GROUP_ITEMS_SELECTOR);        if (group) {          group.appendChild(item.parentElement === group ? item : item.closest(GROUP_ITEMS_SELECTOR + " > *"));        } else {          sizer.appendChild(item.parentElement === sizer ? item : item.closest("[data-tui-command-list-sizer] > *"));        }      });     // Sort the groups by the maximum score of their items.    [...root.querySelectorAll(GROUP_SELECTOR)]      .filter((group) => !group.hidden)      .map((group) => {        let max = 0;        group.querySelectorAll(ITEM_SELECTOR).forEach((item) => {          max = Math.max(scores.get(item) ?? 0, max);        });        return [group, max];      })      .sort((a, b) => b[1] - a[1])      .forEach(([group]) => {        group.parentElement.appendChild(group);      });  }   function onSearchChange(root, search) {    root._tuiCommandSearch = search;    // cmdk: filter synchronously, sort, then select the first item.    filterItems(root);    sort(root);    selectFirstItem(root);  }   // ----- init ---------------------------------------------------------------   function init(root) {    if (root._tuiCommandInit) return;    root._tuiCommandInit = true;    root._tuiCommandSearch = "";     // cmdk infers a missing value from the rendered textContent, and every    // item needs an id for aria-activedescendant.    let n = 0;    root.querySelectorAll(ITEM_SELECTOR).forEach((item) => {      n++;      if (!item.id) item.id = root.id + "-item-" + n;      if (!item.hasAttribute("data-value")) {        item.setAttribute("data-value", (item.textContent || "").trim());      }    });     // Record source order so clearing the search can undo result sorting.    const sizer = sizerOf(root);    [sizer, ...root.querySelectorAll(GROUP_ITEMS_SELECTOR)].forEach((container) => {      if (container) container._tuiCommandOrder = [...container.children];    });     // cmdk selects the first item on mount and scrolls it into view.    selectFirstItem(root);  }   function initAll() {    document.querySelectorAll("[data-tui-command]").forEach(init);  }   if (document.readyState === "loading") {    document.addEventListener("DOMContentLoaded", initAll);  } else {    initAll();  }  new MutationObserver((mutations) => {    for (const m of mutations) {      if (m.addedNodes.length) {        initAll();        break;      }    }  }).observe(document.documentElement, { childList: true, subtree: true });   // ----- events -------------------------------------------------------------   document.addEventListener("input", (e) => {    if (!(e.target instanceof Element) || !e.target.hasAttribute("data-tui-command-input")) return;    const root = rootFor(e.target);    if (root) onSearchChange(root, e.target.value);  });   document.addEventListener("keydown", (e) => {    if (!(e.target instanceof Element)) return;    const root = rootFor(e.target);    if (!root) return;     // Ignore keystrokes while an IME composition is in progress.    if (e.defaultPrevented || e.isComposing || e.keyCode === 229) return;     const next = () => {      e.preventDefault();      if (e.metaKey) {        updateSelectedToIndex(root, getValidItems(root).length - 1);      } else if (e.altKey) {        updateSelectedByGroup(root, 1);      } else {        updateSelectedByItem(root, 1);      }    };    const prev = () => {      e.preventDefault();      if (e.metaKey) {        updateSelectedToIndex(root, 0);      } else if (e.altKey) {        updateSelectedByGroup(root, -1);      } else {        updateSelectedByItem(root, -1);      }    };     switch (e.key) {      case "n":      case "j": {        // vim keybind down        if (e.ctrlKey) next();        break;      }      case "ArrowDown": {        next();        break;      }      case "p":      case "k": {        // vim keybind up        if (e.ctrlKey) prev();        break;      }      case "ArrowUp": {        prev();        break;      }      case "Home": {        e.preventDefault();        updateSelectedToIndex(root, 0);        break;      }      case "End": {        e.preventDefault();        updateSelectedToIndex(root, getValidItems(root).length - 1);        break;      }      case "Enter": {        e.preventDefault();        const item = getSelectedItem(root);        if (item && item.getAttribute("aria-disabled") !== "true") activateItem(root, item);        break;      }    }  });   document.addEventListener("click", (e) => {    if (!(e.target instanceof Element)) return;    const item = e.target.closest(ITEM_SELECTOR);    if (!item || item.getAttribute("aria-disabled") === "true") return;    const root = rootFor(item);    if (root) activateItem(root, item);  });   // Moving the pointer over an item selects it, exactly like cmdk.  document.addEventListener("pointermove", (e) => {    if (!(e.target instanceof Element)) return;    const item = e.target.closest(ITEM_SELECTOR);    if (!item || item.getAttribute("aria-disabled") === "true" || item.getAttribute("aria-selected") === "true")      return;    const root = rootFor(item);    if (root) setSelected(root, item, { scroll: false });  });   // A closing dialog unmounts cmdk's state in shadcn's CommandDialog; reset  // the palette so the next open starts fresh. dialog.js dispatches the  // bubbling dialog-close event once the dialog finished closing.  document.addEventListener("dialog-close", (e) => {    if (!(e.target instanceof Element)) return;    e.target.querySelectorAll("[data-tui-command]").forEach((root) => {      const input = inputOf(root);      if (input) input.value = "";      onSearchChange(root, "");    });  });})();