@clusterenvision/ui-framework 1.0.0

package/dist/chunk-6BYWFGQY.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/runtime/components/ai-assistant.ts"],"names":["defineComponent","signal"],"mappings":"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","file":"chunk-6BYWFGQY.cjs","sourcesContent":["import { defineComponent } from '../component.js';\nimport { signal } from '../signals.js';\nimport type { AiMessage, AiRole, AiSessionStatus } from '../ai.js';\n\nexport interface AiAssistantPanelProps extends Record<string, unknown> {\n  title?: string;\n  description?: string;\n  messages: AiMessage[];\n  suggestions?: string[];\n  status?: AiSessionStatus;\n  error?: string | null;\n  placeholder?: string;\n  sendLabel?: string;\n  resetLabel?: string;\n  busyLabel?: string;\n  disabled?: boolean;\n}\n\nconst PANEL_STYLES = `\n  .ai-panel {\n    display: flex;\n    flex-direction: column;\n    gap: 1.5rem;\n  }\n  .ai-panel__body {\n    max-height: 420px;\n    overflow-y: auto;\n    display: flex;\n    flex-direction: column;\n    gap: 1rem;\n  }\n  .ai-panel__messages {\n    list-style: none;\n    display: flex;\n    flex-direction: column;\n    gap: 0.75rem;\n    margin: 0;\n    padding: 0;\n  }\n  .ai-panel__message {\n    display: flex;\n    flex-direction: column;\n    gap: 0.35rem;\n  }\n  .ai-panel__bubble {\n    background: var(--ce-surface-muted, #f8fafc);\n    border-radius: 1rem;\n    padding: 0.75rem 1rem;\n    border: 1px solid var(--ce-border, rgba(15, 23, 42, 0.08));\n  }\n  .ai-panel__message[data-role=\"assistant\"] .ai-panel__bubble {\n    background: var(--ce-surface, #ffffff);\n    border-color: rgba(56, 189, 248, 0.35);\n  }\n  .ai-panel__author {\n    font-size: 0.75rem;\n    text-transform: uppercase;\n    letter-spacing: 0.08em;\n    color: var(--ce-text-subtle, #475569);\n  }\n  .ai-panel__bubble p {\n    margin: 0.25rem 0;\n    white-space: pre-wrap;\n  }\n  .ai-panel__bubble small {\n    color: var(--ce-text-subtle, #94a3b8);\n    font-size: 0.7rem;\n  }\n  .ai-panel__empty {\n    font-size: 0.9rem;\n    color: var(--ce-text-subtle, #94a3b8);\n  }\n  .ai-panel__error {\n    border-radius: 0.75rem;\n    border: 1px solid rgba(248, 113, 113, 0.5);\n    background: rgba(248, 113, 113, 0.08);\n    padding: 0.75rem 1rem;\n    color: var(--ce-danger, #b91c1c);\n  }\n  .ai-panel__form {\n    display: flex;\n    flex-direction: column;\n    gap: 0.5rem;\n  }\n  .ai-panel__input {\n    width: 100%;\n    min-height: 120px;\n    border-radius: 0.75rem;\n    border: 1px solid var(--ce-border, rgba(15, 23, 42, 0.1));\n    padding: 0.75rem 1rem;\n    font: inherit;\n    resize: vertical;\n    background: var(--ce-surface, #ffffff);\n  }\n  .ai-panel__actions {\n    display: flex;\n    gap: 0.75rem;\n    flex-wrap: wrap;\n  }\n  .ai-panel__suggestions {\n    margin-top: 1rem;\n  }\n  .ai-panel__chip-row {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 0.5rem;\n  }\n  .ai-panel__chip {\n    border: 1px dashed var(--ce-border, rgba(15, 23, 42, 0.25));\n    border-radius: 999px;\n    padding: 0.35rem 0.85rem;\n    font-size: 0.85rem;\n  }\n`;\n\nexport const AiAssistantPanel = defineComponent<AiAssistantPanelProps>({\n  name: 'ce-ai-assistant-panel',\n  template: `\n    <section class=\"card card--shadow ai-panel\" role=\"region\" aria-live=\"polite\">\n      <header class=\"card__header\">\n        <div>\n          <p class=\"badge badge--primary\">AI Assistant</p>\n          <h3>{{ props.title ?? 'Strategy copilot' }}</h3>\n          <p>{{ props.description ?? 'Ask the model to summarize milestones, risks, and delivery plans.' }}</p>\n        </div>\n        <span class=\"badge badge--warning\" ce:if=\"isBusy()\">{{ props.busyLabel ?? 'Working' }}</span>\n      </header>\n      <div class=\"card__body ai-panel__body\">\n        <ul class=\"ai-panel__messages\" aria-live=\"polite\">\n          <li ce:for=\"message in props.messages\" track=\"message.id\" class=\"ai-panel__message\" data-role=\"{{ message.role }}\">\n            <div class=\"ai-panel__bubble\">\n              <span class=\"ai-panel__author\">{{ formatRole(message.role) }}</span>\n              <p>{{ message.content }}</p>\n              <small>{{ formatTimestamp(message) }}</small>\n            </div>\n          </li>\n          <li ce:if=\"!props.messages.length\" class=\"ai-panel__empty\">No prompts yet — start with one of the suggestions below.</li>\n        </ul>\n        <div class=\"ai-panel__error\" ce:if=\"hasError()\">\n          <p>{{ props.error ?? 'The assistant could not finish this request.' }}</p>\n        </div>\n      </div>\n      <footer class=\"card__footer ai-panel__footer\">\n        <form class=\"ai-panel__form\" on:submit=\"submit\" novalidate>\n          <label class=\"ai-panel__label\" for=\"ce-ai-assistant-input\">Prompt</label>\n          <textarea\n            id=\"ce-ai-assistant-input\"\n            class=\"ai-panel__input\"\n            rows=\"3\"\n            placeholder=\"{{ props.placeholder ?? 'Ask anything about your CE UI adoption plan…' }}\"\n            value=\"{{ prompt() }}\"\n            on:input=\"handleInput\"\n            required\n            aria-label=\"AI prompt input\"\n          ></textarea>\n          <div class=\"ai-panel__actions\">\n            <button type=\"submit\" class=\"button button--primary\" disabled=\"{{ props.disabled || isBusy() ? 'true' : 'false' }}\">{{ sendLabel() }}</button>\n            <button type=\"button\" class=\"button button--secondary\" on:click=\"reset\">{{ props.resetLabel ?? 'Reset' }}</button>\n          </div>\n        </form>\n        <section class=\"ai-panel__suggestions\" ce:if=\"props.suggestions?.length\">\n          <p>Suggestions</p>\n          <div class=\"ai-panel__chip-row\">\n            <button\n              ce:for=\"suggestion in props.suggestions\"\n              track=\"suggestion\"\n              type=\"button\"\n              class=\"button button--ghost ai-panel__chip\"\n              on:click=\"useSuggestion(suggestion)\"\n            >\n              {{ suggestion }}\n            </button>\n          </div>\n        </section>\n      </footer>\n    </section>\n  `,\n  styles: [PANEL_STYLES],\n  setup({ emit, props }) {\n    const prompt = signal('');\n    const formatter = new Intl.DateTimeFormat('en-US', { hour: '2-digit', minute: '2-digit' });\n\n    const handleInput = (event: Event) => {\n      const value = (event.target as HTMLTextAreaElement | null)?.value ?? '';\n      prompt.set(value);\n    };\n\n    const submit = (event: Event) => {\n      event.preventDefault();\n      if (props.disabled || props.status === 'processing') {\n        return;\n      }\n      const value = prompt().trim();\n      if (!value) {\n        return;\n      }\n      emit('send', { prompt: value });\n      prompt.set('');\n    };\n\n    const reset = () => {\n      prompt.set('');\n      emit('reset');\n    };\n\n    const useSuggestion = (suggestion: string) => {\n      prompt.set(suggestion);\n      emit('prefill', { prompt: suggestion });\n    };\n\n    const hasError = () => Boolean(props.error);\n    const isBusy = () => props.status === 'processing';\n    const sendLabel = () => (isBusy() ? props.busyLabel ?? 'Thinking…' : props.sendLabel ?? 'Send');\n\n    const formatTimestamp = (message: AiMessage) => formatter.format(new Date(message.createdAt));\n    const formatRole = (role: AiRole) => {\n      switch (role) {\n        case 'assistant':\n          return 'Assistant';\n        case 'system':\n          return 'System';\n        case 'tool':\n          return 'Tool';\n        default:\n          return 'You';\n      }\n    };\n\n    return {\n      prompt,\n      handleInput,\n      submit,\n      reset,\n      useSuggestion,\n      hasError,\n      isBusy,\n      sendLabel,\n      formatTimestamp,\n      formatRole,\n    };\n  },\n});\n"]}

package/dist/chunk-7SCIB5HP.js

@@ -0,0 +1,57 @@
+// src/lib/icons.ts
+function icon(name, options = {}) {
+  const el = document.createElement("ce-icon");
+  el.setAttribute("name", name);
+  if (options.size) {
+    el.setAttribute("size", options.size);
+  }
+  if (options.title) {
+    el.setAttribute("title", options.title);
+  }
+  if (options.className) {
+    el.className = options.className;
+  }
+  return el;
+}
+function iconHtml(name, options = {}) {
+  const attrs = [`name="${name}"`];
+  if (options.size) {
+    attrs.push(`size="${options.size}"`);
+  }
+  if (options.title) {
+    attrs.push(`title="${options.title}"`);
+  }
+  if (options.className) {
+    attrs.push(`class="${options.className}"`);
+  }
+  return `<ce-icon ${attrs.join(" ")}></ce-icon>`;
+}
+var ICONS = {
+  // Navigation
+  menu: "menu-3",
+  close: "xmark",
+  // E-commerce
+  cart: "cart-2",
+  star: "star",
+  heart: "heart",
+  // User
+  user: "user",
+  settings: "settings",
+  logout: "logout",
+  // Actions
+  search: "search",
+  filter: "filter",
+  sort: "sort",
+  edit: "edit",
+  delete: "trash",
+  add: "plus",
+  // Status
+  check: "check",
+  warning: "triangle-warning",
+  error: "xmark",
+  info: "info-circle"
+};
+
+export { ICONS, icon, iconHtml };
+//# sourceMappingURL=chunk-7SCIB5HP.js.map
+//# sourceMappingURL=chunk-7SCIB5HP.js.map

package/dist/chunk-7SCIB5HP.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/icons.ts"],"names":[],"mappings":";AAgCO,SAAS,IAAA,CAAK,IAAA,EAAc,OAAA,GAAuB,EAAC,EAAgB;AACzE,EAAA,MAAM,EAAA,GAAK,QAAA,CAAS,aAAA,CAAc,SAAS,CAAA;AAC3C,EAAA,EAAA,CAAG,YAAA,CAAa,QAAQ,IAAI,CAAA;AAE5B,EAAA,IAAI,QAAQ,IAAA,EAAM;AAChB,IAAA,EAAA,CAAG,YAAA,CAAa,MAAA,EAAQ,OAAA,CAAQ,IAAI,CAAA;AAAA,EACtC;AAEA,EAAA,IAAI,QAAQ,KAAA,EAAO;AACjB,IAAA,EAAA,CAAG,YAAA,CAAa,OAAA,EAAS,OAAA,CAAQ,KAAK,CAAA;AAAA,EACxC;AAEA,EAAA,IAAI,QAAQ,SAAA,EAAW;AACrB,IAAA,EAAA,CAAG,YAAY,OAAA,CAAQ,SAAA;AAAA,EACzB;AAEA,EAAA,OAAO,EAAA;AACT;AASO,SAAS,QAAA,CAAS,IAAA,EAAc,OAAA,GAAuB,EAAC,EAAW;AACxE,EAAA,MAAM,KAAA,GAAkB,CAAC,CAAA,MAAA,EAAS,IAAI,CAAA,CAAA,CAAG,CAAA;AAEzC,EAAA,IAAI,QAAQ,IAAA,EAAM;AAChB,IAAA,KAAA,CAAM,IAAA,CAAK,CAAA,MAAA,EAAS,OAAA,CAAQ,IAAI,CAAA,CAAA,CAAG,CAAA;AAAA,EACrC;AAEA,EAAA,IAAI,QAAQ,KAAA,EAAO;AACjB,IAAA,KAAA,CAAM,IAAA,CAAK,CAAA,OAAA,EAAU,OAAA,CAAQ,KAAK,CAAA,CAAA,CAAG,CAAA;AAAA,EACvC;AAEA,EAAA,IAAI,QAAQ,SAAA,EAAW;AACrB,IAAA,KAAA,CAAM,IAAA,CAAK,CAAA,OAAA,EAAU,OAAA,CAAQ,SAAS,CAAA,CAAA,CAAG,CAAA;AAAA,EAC3C;AAEA,EAAA,OAAO,CAAA,SAAA,EAAY,KAAA,CAAM,IAAA,CAAK,GAAG,CAAC,CAAA,WAAA,CAAA;AACpC;AAKO,IAAM,KAAA,GAAQ;AAAA;AAAA,EAEnB,IAAA,EAAM,QAAA;AAAA,EACN,KAAA,EAAO,OAAA;AAAA;AAAA,EAGP,IAAA,EAAM,QAAA;AAAA,EACN,IAAA,EAAM,MAAA;AAAA,EACN,KAAA,EAAO,OAAA;AAAA;AAAA,EAGP,IAAA,EAAM,MAAA;AAAA,EACN,QAAA,EAAU,UAAA;AAAA,EACV,MAAA,EAAQ,QAAA;AAAA;AAAA,EAGR,MAAA,EAAQ,QAAA;AAAA,EACR,MAAA,EAAQ,QAAA;AAAA,EACR,IAAA,EAAM,MAAA;AAAA,EACN,IAAA,EAAM,MAAA;AAAA,EACN,MAAA,EAAQ,OAAA;AAAA,EACR,GAAA,EAAK,MAAA;AAAA;AAAA,EAGL,KAAA,EAAO,OAAA;AAAA,EACP,OAAA,EAAS,kBAAA;AAAA,EACT,KAAA,EAAO,OAAA;AAAA,EACP,IAAA,EAAM;AACR","file":"chunk-7SCIB5HP.js","sourcesContent":["/**\n * Icon utilities for the CE E-Commerce application\n *\n * This module provides helper functions for working with icons using the <ce-icon> web component.\n *\n * @example\n * ```typescript\n * // Create an icon element\n * const cartIcon = icon('cart-2', { size: '24px', title: 'Shopping cart' });\n * element.appendChild(cartIcon);\n *\n * // Get icon HTML string for innerHTML\n * const menuHtml = iconHtml('menu-3', { size: '20px', title: 'Menu' });\n * ```\n */\n\nexport interface IconOptions {\n  /** Size of the icon (CSS length: px, rem, em, %) */\n  size?: string;\n  /** Accessible label for the icon */\n  title?: string;\n  /** CSS class names to add to the icon element */\n  className?: string;\n}\n\n/**\n * Create a <ce-icon> element programmatically\n *\n * @param name - Icon name from Nucleo set (e.g., 'cart-2', 'menu-3', 'user')\n * @param options - Icon configuration options\n * @returns HTMLElement - The ce-icon custom element\n */\nexport function icon(name: string, options: IconOptions = {}): HTMLElement {\n  const el = document.createElement('ce-icon');\n  el.setAttribute('name', name);\n\n  if (options.size) {\n    el.setAttribute('size', options.size);\n  }\n\n  if (options.title) {\n    el.setAttribute('title', options.title);\n  }\n\n  if (options.className) {\n    el.className = options.className;\n  }\n\n  return el;\n}\n\n/**\n * Get icon HTML string for use with innerHTML\n *\n * @param name - Icon name from Nucleo set\n * @param options - Icon configuration options\n * @returns string - HTML string of the ce-icon element\n */\nexport function iconHtml(name: string, options: IconOptions = {}): string {\n  const attrs: string[] = [`name=\"${name}\"`];\n\n  if (options.size) {\n    attrs.push(`size=\"${options.size}\"`);\n  }\n\n  if (options.title) {\n    attrs.push(`title=\"${options.title}\"`);\n  }\n\n  if (options.className) {\n    attrs.push(`class=\"${options.className}\"`);\n  }\n\n  return `<ce-icon ${attrs.join(' ')}></ce-icon>`;\n}\n\n/**\n * Common icon names used in the application\n */\nexport const ICONS = {\n  // Navigation\n  menu: 'menu-3',\n  close: 'xmark',\n\n  // E-commerce\n  cart: 'cart-2',\n  star: 'star',\n  heart: 'heart',\n\n  // User\n  user: 'user',\n  settings: 'settings',\n  logout: 'logout',\n\n  // Actions\n  search: 'search',\n  filter: 'filter',\n  sort: 'sort',\n  edit: 'edit',\n  delete: 'trash',\n  add: 'plus',\n\n  // Status\n  check: 'check',\n  warning: 'triangle-warning',\n  error: 'xmark',\n  info: 'info-circle',\n} as const;\n"]}