@salla.sa/ui-ai-kit-core 1.0.0

package/dist/collection/components/ai-link/ai-link.css

@@ -0,0 +1,62 @@
+/* ─── Custom Properties ──────────────────────────────────────────────────── */
+:host {
+  --ai-link-color: var(--ai-accent-dark);
+  --ai-link-color-hover: var(--ai-accent-dark);
+  --ai-link-font-size: 14px;
+  --ai-link-font-weight: 700;
+  --ai-link-line-height: 20px;
+  --ai-link-gap: 4px;
+  --ai-link-icon-size: 16px;
+
+  display: flex;
+  align-items: center;
+  gap: var(--ai-link-gap);
+  direction: rtl;
+  font-family: var(--ai-font-family, 'PingARLT', sans-serif);
+}
+
+/* ─── Anchor ─────────────────────────────────────────────────────────────── */
+.link {
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--ai-link-gap);
+  color: var(--ai-link-color);
+  font-size: var(--ai-link-font-size);
+  font-weight: var(--ai-link-font-weight);
+  font-family: inherit;
+  line-height: var(--ai-link-line-height);
+  text-decoration: none;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: color 0.15s ease;
+  outline: none;
+}
+
+.link:hover {
+  color: var(--ai-link-color-hover);
+  text-decoration: underline;
+}
+
+.link:focus-visible {
+  outline: 2px solid var(--ai-accent);
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+
+/* ─── Icon ───────────────────────────────────────────────────────────────── */
+.link__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--ai-link-icon-size);
+  height: var(--ai-link-icon-size);
+  flex-shrink: 0;
+  line-height: 0;
+}
+
+/* ─── Label ──────────────────────────────────────────────────────────────── */
+.link__label {
+  color: var(--ai-link-color);
+  font-weight: bold;
+}

package/dist/collection/components/ai-link/ai-link.js

@@ -0,0 +1,119 @@
+import { Host, h } from "@stencil/core";
+import { iconRegistry } from "../../utils/icon-registry";
+export class AiLink {
+    /** Link display label */
+    label = '';
+    /** Href URL */
+    href = '#';
+    /** Link target */
+    target = '_blank';
+    /** Rel attribute — defaults to noopener noreferrer for _blank */
+    rel = '';
+    renderShareIcon() {
+        const icon = iconRegistry['share'];
+        if (!icon)
+            return null;
+        const svg = `<svg width="16" height="16" viewBox="${icon.viewBox}" fill="none" xmlns="http://www.w3.org/2000/svg">${icon.content}</svg>`;
+        return h("span", { class: "link__icon", innerHTML: svg });
+    }
+    render() {
+        const rel = this.rel || (this.target === '_blank' ? 'noopener noreferrer' : undefined);
+        return (h(Host, { key: '58a742b11ef7dcc1094031e804be6032311cea9d' }, h("span", { key: 'bf45468deb328c2d8ed70ac299d36968c16ababe', class: "link__label" }, this.label, h("slot", { key: 'bd43bc12d120ab806c895922ede0a08d4ec2f882' })), h("a", { key: 'b7c75a59bf18b1f1dc2e713b9e78c045afaa82e2', class: "link", href: this.href, target: this.target, rel: rel }, this.renderShareIcon())));
+    }
+    static get is() { return "ai-link"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ai-link.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ai-link.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Link display label"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "''"
+            },
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Href URL"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "href",
+                "defaultValue": "'#'"
+            },
+            "target": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'_blank' | '_self' | '_parent' | '_top'",
+                    "resolved": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Link target"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "target",
+                "defaultValue": "'_blank'"
+            },
+            "rel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Rel attribute \u2014 defaults to noopener noreferrer for _blank"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "rel",
+                "defaultValue": "''"
+            }
+        };
+    }
+}

package/dist/collection/components/ai-link/ai-link.stories.js

@@ -0,0 +1,79 @@
+import { html } from "lit";
+const meta = {
+    title: 'UI/Link',
+    component: 'ai-link',
+    tags: ['autodocs'],
+    argTypes: {
+        label: { control: 'text' },
+        href: { control: 'text' },
+        target: {
+            control: { type: 'select' },
+            options: ['_blank', '_self'],
+        },
+    },
+};
+export default meta;
+const wrapStyle = 'padding: 24px; background: #f3f4f6; direction: rtl;';
+/* ─── Playground ─────────────────────────────────────────────────────────── */
+export const Playground = {
+    render: args => html `
+    <div style="${wrapStyle}">
+      <ai-link
+        label="${args.label}"
+        href="${args.href}"
+        target="${args.target}"
+      ></ai-link>
+    </div>
+  `,
+    args: {
+        label: 'صفحة الباقات',
+        href: '#',
+        target: '_blank',
+    },
+};
+/* ─── Multiple links ─────────────────────────────────────────────────────── */
+export const MultipleLinks = {
+    render: () => html `
+    <div style="${wrapStyle} display: flex; flex-direction: column; gap: 12px; align-items: flex-end;">
+      <ai-link label="صفحة الباقات" href="#"></ai-link>
+      <ai-link label="لوحة التحكم" href="#"></ai-link>
+      <ai-link label="إعدادات المتجر" href="#"></ai-link>
+    </div>
+  `,
+};
+/* ─── Inside a card (realistic usage) ───────────────────────────────────── */
+export const InsideCard = {
+    render: () => html `
+    <div style="padding: 24px; background: #f3f4f6; direction: rtl; max-width: 420px;">
+      <ai-card>
+        <p style="margin:0; font-size:14px; font-weight:500; color:#333;">
+          يمكنك الاطلاع على تفاصيل الباقات المتاحة
+        </p>
+        <p style="margin:0; font-size:14px; color:#737373;">
+          باقة بلس توفر ميزات متقدمة للتسويق وإدارة العملاء.
+        </p>
+        <ai-link label="صفحة الباقات" href="#"></ai-link>
+      </ai-card>
+    </div>
+  `,
+};
+/* ─── In message context (card + link + suggestions) ────────────────────── */
+export const FullMessageContext = {
+    render: () => html `
+    <div style="padding: 24px; background: #f3f4f6; direction: rtl; max-width: 480px; display: flex; flex-direction: column; gap: 12px;">
+      <ai-card>
+        <p style="margin:0; font-size:14px; font-weight:500; color:#333;">
+          الفرق بين باقة بلس وبرو
+        </p>
+        <p style="margin:0; font-size:14px; color:#737373;">
+          باقة بلس مناسبة للمتاجر الناشئة، بينما باقة برو توفر أدوات تسويق متقدمة وتقارير تفصيلية.
+        </p>
+        <ai-link label="صفحة الباقات" href="#"></ai-link>
+      </ai-card>
+      <div style="display: flex; gap: 8px; flex-wrap: wrap;">
+        <ai-suggestion label="قارن الأسعار"></ai-suggestion>
+        <ai-suggestion label="كيف أرقي باقتي؟"></ai-suggestion>
+      </div>
+    </div>
+  `,
+};

package/dist/collection/components/ai-loading/ai-loading.css

@@ -0,0 +1,202 @@
+:host {
+  display: block;
+  direction: rtl;
+}
+
+/* ── Icon wrapper ───────────────────────────────────────── */
+.icon-wrap {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 0;
+}
+
+/* ── Sparkle avatar ─────────────────────────────────────── */
+.sparkle-avatar {
+  width: 24px;
+  height: 24px;
+  border-radius: 9999px;
+  background: var(--ai-bg-card, #FCFCFC);
+  box-shadow: inset 0px 0px 3px 1px rgba(18, 18, 23, 0.06);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: var(--ai-amber);
+}
+
+/* ── Thinking mode ──────────────────────────────────────── */
+.thinking-row {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  flex-direction: row;
+}
+
+@keyframes shimmer {
+  0% {
+    background-position: 200% center;
+  }
+  100% {
+    background-position: -200% center;
+  }
+}
+
+.shimmer-text {
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.5;
+  background: var(--ai-glow-gradient, linear-gradient(90deg, #737373 0%, #c5c5c5 50%, #737373 100%));
+  background-size: 200% auto;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  animation: shimmer 2s linear infinite;
+}
+
+/* ── Steps card ─────────────────────────────────────────── */
+.steps-card {
+  background: var(--ai-bg-card, #ffffff);
+  border: 1px solid var(--ai-border-default, #eeeeee);
+  border-radius: 16px;
+  box-shadow: 0px 1px 2px 0px rgba(18, 18, 23, 0.05);
+  overflow: hidden;
+}
+
+/* ── Steps header ───────────────────────────────────────── */
+.steps-header {
+  padding: 16px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  border-bottom: 1px solid var(--ai-border-default, #eeeeee);
+}
+
+.steps-header.collapsible {
+  cursor: pointer;
+  user-select: none;
+}
+
+.steps-header-center {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.steps-title {
+  font-size: 16px;
+  font-weight: 500;
+  color: var(--ai-text-primary, #333333);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.progress-badge {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--ai-accent-dark);
+  background: var(--ai-accent-bg);
+  padding: 2px 8px;
+  border-radius: 9999px;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+/* ── Collapse button ────────────────────────────────────── */
+.collapse-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  color: var(--ai-text-secondary, #737373);
+  flex-shrink: 0;
+  transition: transform 0.2s ease;
+  transform: rotate(180deg);
+}
+
+.collapse-btn.expanded {
+  transform: rotate(0deg);
+}
+
+/* ── Steps body ─────────────────────────────────────────── */
+.steps-body {
+  padding: 12px 16px;
+  display: flex;
+  flex-direction: column;
+}
+
+.step-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  cursor: pointer;
+  padding: 4px 0;
+}
+
+.step-row:hover .step-text {
+  color: var(--ai-text-primary, #333333);
+}
+
+.step-text {
+  flex: 1;
+  font-size: 14px;
+  font-weight: 400;
+  color: var(--ai-text-secondary, #737373);
+  line-height: 1.5;
+  padding-top: 4px;
+}
+
+/* ── Step badge column (badge + separator) ──────────────── */
+.step-badge-col {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.step-separator {
+  width: 1px;
+  height: 16px;
+  background: var(--ai-border-default, #eeeeee);
+  margin: 2px 0;
+}
+
+/* ── Step badge ─────────────────────────────────────────── */
+.step-badge-outer {
+  padding: 2px;
+  border-radius: 9999px;
+  background: var(--ai-bg-surface, #f4f4f4);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.step-badge-inner {
+  width: 26px;
+  height: 26px;
+  border-radius: 9999px;
+  background: var(--ai-bg-card, #ffffff);
+  box-shadow: 0px 0px 2px 1px rgba(18, 18, 23, 0.08);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--ai-text-secondary, #737373);
+}
+
+.step-badge-inner.completed {
+  background: var(--ai-success-bg);
+  color: var(--ai-success-text);
+}
+
+.step-number {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--ai-text-secondary, #737373);
+  line-height: 1;
+}