@kitn.ai/ui 0.16.0 → 0.18.0

package/dist/register-ujhr1nBS.js

@@ -1 +0,0 @@
-const f={bash:()=>import("./bash-InADTalH.js"),javascript:()=>import("./javascript-C25yR2R2.js"),typescript:()=>import("./typescript-RycA9KXf.js"),tsx:()=>import("./tsx-B8rCNbgL.js"),html:()=>import("./html-CPZ3oZQ7.js"),css:()=>import("./css-M7EaDHN_.js"),json:()=>import("./json-DxJze_jm.js"),vue:()=>import("./vue-BmIZj4XD.js"),svelte:()=>import("./svelte--5p79yCD.js")},w={"github-dark-dimmed":()=>import("./github-dark-dimmed-DUshB20C.js"),"github-light":()=>import("./github-light-JYsPkUQd.js")},b={js:"javascript",ts:"typescript",jsx:"tsx",sh:"bash",shell:"bash"},l="github-dark-dimmed";let i=!0,s={...f},o={...w},c={...b},u=null;const m=new Set,g=new Set;function y(){return u||(u=(async()=>{const[{createHighlighterCore:t},{createJavaScriptRegexEngine:n}]=await Promise.all([import("./core-AYMC6_lb.js"),import("./engine-javascript-vq0WuIJl.js")]);return t({themes:[],langs:[],engine:n()})})()),u}function h(t){return c[t]??t}async function v(t,n){const a=h(n);if(m.has(a))return!0;const e=s[a];return e?(await t.loadLanguage(e()),m.add(a),!0):!1}async function d(t,n){if(g.has(n))return!0;const a=o[n];return a?(await t.loadTheme(a()),g.add(n),!0):!1}function j(t){return t.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}function r(t){return`<pre><code>${j(t)}</code></pre>`}async function x(t,n,a){if(!i||!t)return r(t);try{const e=await y();if(!await v(e,n))return r(t);const p=await d(e,a)?a:await d(e,l)?l:null;return p?e.codeToHtml(t,{lang:h(n),theme:p}):r(t)}catch{return r(t)}}function E(t){t.enabled!==void 0&&(i=t.enabled),t.languages&&(s={...s,...t.languages}),t.themes&&(o={...o,...t.themes}),t.aliases&&(c={...c,...t.aliases})}function H(){return i}typeof window<"u"&&typeof customElements<"u"&&import("./register-impl-wCsFPoh9.js");export{E as c,x as h,H as i};

package/src/components/slash-command.tsx

@@ -1,232 +0,0 @@
-import { createSignal, createEffect, createMemo, Show, For, on, onCleanup } from "solid-js";
-import { cn } from "../utils/cn";
-import { usePromptInput } from "./prompt-input";
-
-// --- Types ---
-
-export interface SlashCommandItem {
-  id: string;
-  label: string;
-  description?: string;
-  category?: string;
-}
-
-export interface SlashCommandProps {
-  commands: SlashCommandItem[];
-  activeIds?: string[]; // currently active command IDs — selecting again removes
-  onSelect: (command: SlashCommandItem) => void;
-  compact?: boolean; // single line: label + description side by side (default: true)
-  class?: string;
-}
-
-// --- Component ---
-
-function SlashCommand(props: SlashCommandProps) {
-  const ctx = usePromptInput();
-  const [open, setOpen] = createSignal(false);
-  const [selectedIndex, setSelectedIndex] = createSignal(0);
-  const [query, setQuery] = createSignal("");
-  const isCompact = props.compact !== false; // default true
-  let listRef: HTMLDivElement | undefined;
-
-  // Detect slash at the start of input
-  const slashMatch = createMemo(() => {
-    const val = ctx.value();
-    const match = val.match(/^\/(\S*)$/);
-    return match ? match[1] : null;
-  });
-
-  // Filter and sort commands alphabetically
-  const filtered = createMemo(() => {
-    const q = slashMatch();
-    if (q === null) return [];
-    const items = q === ""
-      ? [...props.commands]
-      : props.commands.filter(
-          (cmd) =>
-            cmd.label.toLowerCase().includes(q.toLowerCase()) ||
-            (cmd.description?.toLowerCase().includes(q.toLowerCase()) ?? false),
-        );
-    return items.sort((a, b) => a.label.localeCompare(b.label));
-  });
-
-  // Group by category
-  const grouped = createMemo(() => {
-    const items = filtered();
-    const groups = new Map<string, SlashCommandItem[]>();
-    for (const item of items) {
-      const cat = item.category ?? "";
-      if (!groups.has(cat)) groups.set(cat, []);
-      groups.get(cat)!.push(item);
-    }
-    return groups;
-  });
-
-  // Flat list for keyboard navigation
-  const flatList = createMemo(() => {
-    const items: SlashCommandItem[] = [];
-    for (const group of grouped().values()) {
-      items.push(...group);
-    }
-    return items;
-  });
-
-  // Open/close based on slash detection
-  createEffect(
-    on(slashMatch, (match) => {
-      if (match !== null) {
-        setOpen(true);
-        setQuery(match);
-        setSelectedIndex(0);
-      } else {
-        setOpen(false);
-      }
-    }),
-  );
-
-  // Keep selected index in bounds
-  createEffect(() => {
-    const max = flatList().length;
-    if (selectedIndex() >= max) setSelectedIndex(Math.max(0, max - 1));
-  });
-
-  // Scroll selected item into view
-  createEffect(() => {
-    const idx = selectedIndex();
-    if (!listRef) return;
-    const el = listRef.querySelector(`[data-index="${idx}"]`) as HTMLElement;
-    el?.scrollIntoView({ block: "nearest" });
-  });
-
-  function selectItem(item: SlashCommandItem) {
-    // Insert the chosen command into the prompt (e.g. "/summarize ") so it
-    // appears in the input ready to send or edit. The trailing space ends the
-    // slash token, which closes the palette. Still fire onSelect so consumers
-    // can react to the selection.
-    ctx.setValue(item.label + " ");
-    setOpen(false);
-    props.onSelect(item);
-    // Refocus the textarea and place the caret at the end.
-    setTimeout(() => {
-      const ta = ctx.textareaRef;
-      if (!ta) return;
-      ta.focus();
-      ta.setSelectionRange(ta.value.length, ta.value.length);
-    }, 0);
-  }
-
-  function handleKeyDown(e: KeyboardEvent) {
-    if (!open()) return;
-
-    const list = flatList();
-    if (list.length === 0) return;
-
-    switch (e.key) {
-      case "ArrowDown":
-        e.preventDefault();
-        setSelectedIndex((i) => (i + 1) % list.length);
-        break;
-      case "ArrowUp":
-        e.preventDefault();
-        setSelectedIndex((i) => (i - 1 + list.length) % list.length);
-        break;
-      case "Tab":
-      case "Enter":
-        e.preventDefault();
-        e.stopPropagation();
-        selectItem(list[selectedIndex()]);
-        break;
-      case "Escape":
-        e.preventDefault();
-        ctx.setValue("");
-        setOpen(false);
-        break;
-    }
-  }
-
-  // Attach keyboard listener to textarea
-  createEffect(() => {
-    const textarea = ctx.textareaRef;
-    if (!textarea) return;
-
-    textarea.addEventListener("keydown", handleKeyDown, true);
-    onCleanup(() => textarea.removeEventListener("keydown", handleKeyDown, true));
-  });
-
-  let flatIndex = 0;
-
-  return (
-    <Show when={open() && flatList().length > 0}>
-      <div
-        class={cn(
-          "absolute bottom-full left-0 right-0 mb-1 z-50 bg-card rounded-lg shadow-lg overflow-hidden",
-          props.class,
-        )}
-      >
-        <div ref={listRef} class="max-h-56 overflow-y-auto py-1">
-          {(() => {
-            flatIndex = 0;
-            return null;
-          })()}
-          <For each={[...grouped().entries()]}>
-            {([category, items]) => (
-              <>
-                <Show when={category}>
-                  <div class="px-3 pt-2 pb-1 text-[10px] font-semibold text-muted-foreground uppercase tracking-wide">
-                    {category}
-                  </div>
-                </Show>
-                <For each={items}>
-                  {(item) => {
-                    const idx = flatIndex++;
-                    const isActive = () => props.activeIds?.includes(item.id) ?? false;
-                    return (
-                      <button
-                        data-index={idx}
-                        class={cn(
-                          "w-full flex items-center gap-2 px-3 text-left transition-colors",
-                          isCompact ? "py-1" : "py-1.5",
-                          selectedIndex() === idx
-                            ? "bg-muted text-foreground"
-                            : "text-foreground hover:bg-muted",
-                        )}
-                        onMouseEnter={() => setSelectedIndex(idx)}
-                        onClick={() => selectItem(item)}
-                      >
-                        <Show when={isCompact} fallback={
-                          <div class="flex-1 min-w-0">
-                            <div class="text-xs flex items-center gap-1.5">
-                              {item.label}
-                              <Show when={isActive()}>
-                                <span class="text-[10px] text-violet-600 dark:text-violet-400">active</span>
-                              </Show>
-                            </div>
-                            <Show when={item.description}>
-                              <div class="text-xs text-muted-foreground truncate">
-                                {item.description}
-                              </div>
-                            </Show>
-                          </div>
-                        }>
-                          <Show when={isActive()}>
-                            <span class="w-1 h-1 rounded-full bg-violet-400 flex-shrink-0" />
-                          </Show>
-                          <span class={cn("text-xs flex-shrink-0", isActive() && "text-violet-600 dark:text-violet-400")}>{item.label}</span>
-                          <Show when={item.description}>
-                            <span class="text-xs text-muted-foreground truncate">{item.description}</span>
-                          </Show>
-                        </Show>
-                      </button>
-                    );
-                  }}
-                </For>
-              </>
-            )}
-          </For>
-        </div>
-      </div>
-    </Show>
-  );
-}
-
-export { SlashCommand };