@brandsync/wc 0.0.1

package/dist/collection/components/bs-composer/bs-composer.js

@@ -0,0 +1,353 @@
+import { h } from "@stencil/core";
+const DEFAULT_PLACEHOLDERS = {
+    ai: 'Ask Genie something...',
+    human: 'Message your support agent...',
+};
+// Static (non-animated) placeholder audio-level bar heights in px, sampled from the Figma
+// "Audio Waveform" reference (60 bars, 2.5px wide, 3px gap) -- a real analyzer would drive these
+// from actual audio input, this just reproduces the designed look.
+const WAVEFORM_BAR_HEIGHTS = [
+    6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 18, 14, 34, 22, 22, 10, 28, 18, 12, 24, 6, 20, 30, 14, 8, 26, 16,
+    32, 10, 22, 18, 12, 28, 8, 20, 14, 24, 10, 16, 30, 12, 22, 6, 18, 26, 8, 14, 32, 20, 10, 24, 6,
+];
+/**
+ * A chat composer input for Genie AI-style conversational interfaces: a text field
+ * plus an attach button, a mic/voice-recording toggle, and a single primary action button whose
+ * icon and behavior change with `state` (send, stop generating, or confirm a voice recording).
+ *
+ * ## When to use
+ * - The message-entry bar for an AI chat/assistant or human support conversation.
+ *
+ * ## When not to use
+ * - A general-purpose text field — use `bs-input` instead; this component's layout and states are
+ *   purpose-built for a chat composer, not a generic form field.
+ *
+ * @part attach - The "+" attach button.
+ * @part input - The native text `<input>`.
+ * @part mic - The secondary icon button (microphone, or the stop-recording square while `state="recording"`).
+ * @part action - The primary circular action button (send, stop, or confirm depending on `state`).
+ * @prop --bs-composer-radius - Corner radius of the container. Aliased to `--bs-border-radius-150`.
+ * @prop --bs-composer-button-radius - Corner radius of the attach/mic/action buttons. Aliased to `--bs-border-radius-100`.
+ * @prop --bs-composer-button-size - Width/height of the attach/mic/action buttons. Aliased to `--bs-spacing-600`.
+ * @prop --bs-composer-bg - Background of the pill container. Aliased to `--bs-input-bg-default`.
+ * @prop --bs-composer-border - Border color of the pill container. Aliased to `--bs-input-border-default`.
+ * @prop --bs-composer-border-focus - Border color when the text field has focus. Aliased to `--bs-input-border-focus`.
+ * @prop --bs-composer-action-bg - Background of the primary action button. Aliased to `--bs-color-primary-default`.
+ * @prop --bs-composer-action-bg-hover - Aliased to `--bs-color-primary-hover`.
+ * @prop --bs-composer-action-bg-pressed - Aliased to `--bs-color-primary-pressed`.
+ * @prop --bs-composer-action-bg-disabled - Aliased to `--bs-surface-action-disabled`.
+ * @prop --bs-composer-action-icon - Icon color on the primary action button. Aliased to `--bs-text-on-action`.
+ * @prop --bs-composer-action-icon-disabled - Aliased to `--bs-text-on-disabled`.
+ * @prop --bs-composer-attach-icon - Icon color of the attach button. Aliased to `--bs-icon-default`.
+ * @prop --bs-composer-mic-icon - Icon color of the mic/stop-recording button. Aliased to `--bs-icon-default`.
+ * @prop --bs-composer-mic-icon-disabled - Aliased to `--bs-icon-disabled`.
+ * @prop --bs-composer-subtle-hover - Background of the attach/mic buttons on hover (subtle-button treatment, same as `bs-button`'s `subtle` variant). Aliased to `--bs-color-neutral-container`.
+ * @prop --bs-composer-subtle-pressed - Background of the attach/mic buttons when pressed. Aliased to `--bs-color-neutral-container-pressed`.
+ */
+export class BsComposer {
+    /**
+     * Which flavor of composer this is: changes the *default* placeholder text (set `placeholder`
+     * directly to override it) and, per the Figma design, renders the container border dashed
+     * instead of solid for `'human'` -- a deliberate visual cue distinguishing a human-support
+     * composer from the AI one, not a layout/token difference.
+     */
+    variant = 'ai';
+    /** Overrides the variant's default placeholder. */
+    placeholder;
+    /** Current text value. Native `input` events don't cross the Shadow DOM boundary, so this
+     * component re-dispatches them as a `bsInput` custom event instead. */
+    value = '';
+    /**
+     * Which of the four mutually-exclusive composer states to render: `idle` (send, enabled),
+     * `generating` (stop, while the AI is responding), `disabled` (send, but not interactive), or
+     * `recording` (voice input in progress -- shows a waveform and a confirm action).
+     */
+    state = 'idle';
+    /**
+     * Accessible name for the text field. This component has no visible `<label>` (chat composers
+     * don't show one in the design), so `ariaLabel` is the only way a consumer gives the textbox an
+     * accessible name -- set it in every real usage.
+     */
+    ariaLabel = null;
+    /** Fires on every keystroke in the text field, with the current value. */
+    bsInput;
+    /** Fires when the primary action button is clicked while `state="idle"`. */
+    bsSubmit;
+    /** Fires when the primary action button is clicked while `state="generating"`. */
+    bsStop;
+    /** Fires when the primary action button is clicked while `state="recording"`. */
+    bsVoiceConfirm;
+    /** Fires when the "+" attach button is clicked. */
+    bsAttach;
+    /** Fires when the mic/stop-recording button is clicked. The consumer decides what that means
+     * (e.g. start recording when idle/generating, or stop recording when `state="recording"`). */
+    bsMicToggle;
+    onInput = (ev) => {
+        const value = ev.target.value;
+        this.bsInput.emit(value);
+    };
+    onAttachClick = () => {
+        this.bsAttach.emit();
+    };
+    onMicClick = () => {
+        this.bsMicToggle.emit();
+    };
+    onActionClick = () => {
+        if (this.state === 'idle') {
+            this.bsSubmit.emit();
+        }
+        else if (this.state === 'generating') {
+            this.bsStop.emit();
+        }
+        else if (this.state === 'recording') {
+            this.bsVoiceConfirm.emit();
+        }
+    };
+    actionLabel() {
+        if (this.state === 'generating')
+            return 'Stop';
+        if (this.state === 'recording')
+            return 'Confirm';
+        return 'Send';
+    }
+    renderActionIcon() {
+        if (this.state === 'generating')
+            return h(StopIcon, null);
+        if (this.state === 'recording')
+            return h(CheckIcon, null);
+        return h(SendIcon, null);
+    }
+    render() {
+        const placeholder = this.placeholder ?? DEFAULT_PLACEHOLDERS[this.variant];
+        const disabled = this.state === 'disabled';
+        const recording = this.state === 'recording';
+        return (h("div", { key: '785b4da8ddb23f4762ac7ea379b3ecdaa9584f40', class: `bs-composer bs-composer--${this.state} bs-composer--${this.variant}` }, h("div", { key: '5b470cc47221f93ce9852ebaeaf9a35d740d5df1', class: "bs-composer__text-row" }, h("input", { key: '3f4093d98bc0a0ba8440da9fec1d5cb2e302b746', part: "input", class: "bs-composer__input", type: "text", value: this.value, placeholder: placeholder, disabled: disabled, "aria-label": this.ariaLabel, onInput: this.onInput })), h("div", { key: '21103c8d6ac108e705487f670aeb4aaf89d45981', class: "bs-composer__controls-row" }, h("button", { key: '570ef86150f5b0072008fb0215ed1f0affac7af4', type: "button", part: "attach", class: "bs-composer__attach", "aria-label": "Attach", onClick: this.onAttachClick }, h(PlusIcon, { key: 'ea030569c8b5d2bafaae3ecfe29b956a54921f34' })), recording ? (h("span", { class: "bs-composer__waveform", "aria-hidden": "true" }, WAVEFORM_BAR_HEIGHTS.map(height => (h("span", { class: "bs-composer__waveform-bar", style: { '--bs-composer-bar-height': `${height}px` } }))))) : (h("span", { class: "bs-composer__spacer" })), h("button", { key: '1906485b13395c9c730f7091176dab4e81ecbcb9', type: "button", part: "mic", class: `bs-composer__mic ${recording ? 'bs-composer__mic--recording' : ''}`, "aria-label": recording ? 'Stop recording' : 'Start voice input', disabled: disabled, onClick: this.onMicClick }, recording ? h(StopIcon, null) : h(MicIcon, null)), h("button", { key: '3486957673a3bbf7c3dbac41fd5c19e8dbb6258a', type: "button", part: "action", class: `bs-composer__action bs-composer__action--${this.state}`, "aria-label": this.actionLabel(), disabled: disabled, onClick: this.onActionClick }, this.renderActionIcon()))));
+    }
+    static get is() { return "bs-composer"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-composer.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-composer.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsComposerVariant",
+                    "resolved": "\"ai\" | \"human\"",
+                    "references": {
+                        "BsComposerVariant": {
+                            "location": "local",
+                            "path": "/Users/vivka/brandsync-web-components/src/components/bs-composer/bs-composer.tsx",
+                            "id": "src/components/bs-composer/bs-composer.tsx::BsComposerVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Which flavor of composer this is: changes the *default* placeholder text (set `placeholder`\ndirectly to override it) and, per the Figma design, renders the container border dashed\ninstead of solid for `'human'` -- a deliberate visual cue distinguishing a human-support\ncomposer from the AI one, not a layout/token difference."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'ai'"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Overrides the variant's default placeholder."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current text value. Native `input` events don't cross the Shadow DOM boundary, so this\ncomponent re-dispatches them as a `bsInput` custom event instead."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "''"
+            },
+            "state": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsComposerState",
+                    "resolved": "\"disabled\" | \"generating\" | \"idle\" | \"recording\"",
+                    "references": {
+                        "BsComposerState": {
+                            "location": "local",
+                            "path": "/Users/vivka/brandsync-web-components/src/components/bs-composer/bs-composer.tsx",
+                            "id": "src/components/bs-composer/bs-composer.tsx::BsComposerState"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Which of the four mutually-exclusive composer states to render: `idle` (send, enabled),\n`generating` (stop, while the AI is responding), `disabled` (send, but not interactive), or\n`recording` (voice input in progress -- shows a waveform and a confirm action)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "state",
+                "defaultValue": "'idle'"
+            },
+            "ariaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name for the text field. This component has no visible `<label>` (chat composers\ndon't show one in the design), so `ariaLabel` is the only way a consumer gives the textbox an\naccessible name -- set it in every real usage."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label",
+                "defaultValue": "null"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bsInput",
+                "name": "bsInput",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires on every keystroke in the text field, with the current value."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "bsSubmit",
+                "name": "bsSubmit",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when the primary action button is clicked while `state=\"idle\"`."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "bsStop",
+                "name": "bsStop",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when the primary action button is clicked while `state=\"generating\"`."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "bsVoiceConfirm",
+                "name": "bsVoiceConfirm",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when the primary action button is clicked while `state=\"recording\"`."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "bsAttach",
+                "name": "bsAttach",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when the \"+\" attach button is clicked."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "bsMicToggle",
+                "name": "bsMicToggle",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when the mic/stop-recording button is clicked. The consumer decides what that means\n(e.g. start recording when idle/generating, or stop recording when `state=\"recording\"`)."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}
+const PlusIcon = () => (h("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M8 2.5V13.5M2.5 8H13.5", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round" })));
+const MicIcon = () => (h("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M8 9.5C9.10457 9.5 10 8.60457 10 7.5V3.5C10 2.39543 9.10457 1.5 8 1.5C6.89543 1.5 6 2.39543 6 3.5V7.5C6 8.60457 6.89543 9.5 8 9.5Z", stroke: "currentColor", "stroke-width": "1.4" }), h("path", { d: "M3.5 7V7.5C3.5 9.98528 5.51472 12 8 12C10.4853 12 12.5 9.98528 12.5 7.5V7", stroke: "currentColor", "stroke-width": "1.4", "stroke-linecap": "round" }), h("path", { d: "M8 12V14.5", stroke: "currentColor", "stroke-width": "1.4", "stroke-linecap": "round" })));
+// Exact "PaperPlaneRight" path from the Figma design (node 45:95), not a hand-drawn approximation.
+const SendIcon = () => (h("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M13.5 12H7.5", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M4.54594 20.745C4.4932 20.889 4.48589 21.0457 4.52499 21.1941C4.56409 21.3424 4.64771 21.4751 4.76459 21.5744C4.88147 21.6737 5.02599 21.7348 5.17866 21.7494C5.33133 21.7641 5.48482 21.7315 5.61844 21.6562L21.3684 12.6478C21.4857 12.583 21.5834 12.4879 21.6514 12.3725C21.7195 12.2571 21.7553 12.1255 21.7553 11.9916C21.7553 11.8576 21.7195 11.7261 21.6514 11.6107C21.5834 11.4952 21.4857 11.4002 21.3684 11.3353L5.61844 2.34937C5.48523 2.27487 5.33245 2.24278 5.18052 2.2574C5.02859 2.27201 4.88474 2.33264 4.76817 2.43117C4.65161 2.5297 4.56788 2.66145 4.52817 2.80882C4.48846 2.9562 4.49466 3.11218 4.54594 3.25594L7.5 12L4.54594 20.745Z", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })));
+const StopIcon = () => (h("svg", { viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("rect", { x: "6", y: "6", width: "8", height: "8", rx: "1.5", fill: "currentColor" })));
+const CheckIcon = () => (h("svg", { viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M4.5 10.5L8 14L15.5 6", stroke: "currentColor", "stroke-width": "1.75", "stroke-linecap": "round", "stroke-linejoin": "round" })));

package/dist/collection/components/bs-composer/bs-composer.stories.js

@@ -0,0 +1,66 @@
+import { html } from "lit";
+import { componentDescription, propDescription } from "../../stories-utils";
+const variants = ['ai', 'human'];
+const states = ['idle', 'generating', 'disabled', 'recording'];
+const meta = {
+    title: 'Genie AI Components/bs-composer',
+    parameters: { docs: { description: { component: componentDescription('bs-composer') } } },
+    render: args => html `
+    <bs-composer
+      variant=${args.variant}
+      state=${args.state}
+      value=${args.value}
+      placeholder=${args.placeholder}
+      aria-label="Message"
+    ></bs-composer>
+  `,
+    argTypes: {
+        variant: { control: 'select', options: variants, description: propDescription('bs-composer', 'variant') },
+        state: { control: 'select', options: states, description: propDescription('bs-composer', 'state') },
+        value: { control: 'text', description: propDescription('bs-composer', 'value') },
+        placeholder: { control: 'text', description: propDescription('bs-composer', 'placeholder') },
+    },
+    args: {
+        variant: 'ai',
+        state: 'idle',
+        value: '',
+        placeholder: '',
+    },
+};
+export default meta;
+export const Default = {};
+export const Human = {
+    args: { variant: 'human' },
+};
+export const Generating = {
+    args: { state: 'generating', value: 'Summarize this thread for me' },
+};
+export const Disabled = {
+    args: { state: 'disabled' },
+};
+export const Recording = {
+    args: { state: 'recording', value: 'Here is what I have so far' },
+};
+export const AllStates = {
+    name: 'All variants × states',
+    render: () => html `
+    <div style="display:flex; flex-direction:column; gap:24px; max-width: 420px;">
+      ${variants.map(variant => html `
+          <div style="display:flex; flex-direction:column; gap:12px;">
+            <h4 style="margin:0; font-family: sans-serif; text-transform: capitalize;">${variant}</h4>
+            ${states.map(state => html `
+                <div>
+                  <div style="font-size: 12px; font-family: monospace; color: #888; margin-bottom: 4px;">${state}</div>
+                  <bs-composer
+                    variant=${variant}
+                    state=${state}
+                    value=${state === 'recording' ? 'Here is what I have so far' : ''}
+                    aria-label="Message"
+                  ></bs-composer>
+                </div>
+              `)}
+          </div>
+        `)}
+    </div>
+  `,
+};

package/dist/collection/components/bs-data-table/bs-data-table.css

@@ -0,0 +1,56 @@
+:host {
+  display: block;
+}
+
+.bs-data-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-family: inherit;
+  font-size: var(--bs-font-size-sm);
+  color: var(--bs-text-default);
+}
+
+.bs-data-table__header-cell {
+  text-align: left;
+  padding: var(--bs-spacing-200) var(--bs-spacing-300);
+  border-bottom: 1px solid var(--bs-border-default);
+  font-weight: var(--bs-font-weight-semibold);
+  color: var(--bs-text-secondary);
+  white-space: nowrap;
+}
+
+.bs-data-table__sort-button {
+  display: inline-flex;
+  align-items: center;
+  border: none;
+  background: none;
+  padding: 0;
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+  user-select: none;
+}
+
+.bs-data-table__sort-button:focus-visible {
+  outline: 2px solid var(--bs-border-neutral-focus);
+  outline-offset: 2px;
+}
+
+.bs-data-table__sort-indicator {
+  color: var(--bs-text-action);
+}
+
+.bs-data-table__row:hover {
+  background: var(--bs-surface-hover);
+}
+
+.bs-data-table__cell {
+  padding: var(--bs-spacing-200) var(--bs-spacing-300);
+  border-bottom: 1px solid var(--bs-border-default);
+}
+
+.bs-data-table__select-col {
+  width: var(--bs-spacing-500);
+  padding: var(--bs-spacing-200) var(--bs-spacing-300);
+  border-bottom: 1px solid var(--bs-border-default);
+}