npm - @atelier-ui/react - Versions diffs - 0.1.12 → 0.2.1 - Mend

@atelier-ui/react 0.1.12 → 0.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (160) hide show

package/src/lib/combobox/{llm-combobox.js → atl-combobox.js} RENAMED Viewed

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useId, useMemo, useRef, useState } from 'react';
-import './llm-combobox.css';
+import './atl-combobox.css';
 /**
  * Filterable autocomplete combobox. Accepts an `options` array and emits the
  * selected option's `value`. The user types to narrow the list; selecting an
@@ -8,7 +8,7 @@ import './llm-combobox.css';
  *
  * Usage:
  * ```tsx
- * <LlmCombobox
+ * <AtlCombobox
  *   value={country}
  *   onValueChange={setCountry}
  *   options={countryOptions}
@@ -16,7 +16,7 @@ import './llm-combobox.css';
  * />
  * ```
  */
-export function LlmCombobox({ value = '', onValueChange, options = [], placeholder = '', disabled = false, readonly = false, invalid = false, required = false, name, errors = [], }) {
+export function AtlCombobox({ value = '', onValueChange, options = [], placeholder = '', disabled = false, readonly = false, invalid = false, required = false, name, errors = [], }) {
     const [query, setQuery] = useState('');
     const [isOpen, setIsOpen] = useState(false);
     const [activeIndex, setActiveIndex] = useState(-1);
@@ -119,7 +119,7 @@ export function LlmCombobox({ value = '', onValueChange, options = [], placehold
         }
     }
     const classes = [
-        'llm-combobox',
+        'atl-combobox',
         isOpen && 'is-open',
         disabled && 'is-disabled',
         invalid && 'is-invalid',
@@ -127,13 +127,13 @@ export function LlmCombobox({ value = '', onValueChange, options = [], placehold
         .filter(Boolean)
         .join(' ');
     const activeOptionId = activeIndex >= 0 ? `${panelId}-option-${activeIndex}` : undefined;
-    return (_jsxs("div", { className: classes, ref: containerRef, children: [_jsxs("div", { className: "llm-combobox-wrapper", children: [_jsx("input", { ref: inputRef, className: "llm-combobox-input", type: "text", autoComplete: "off", role: "combobox", id: inputId, "aria-expanded": isOpen, "aria-controls": panelId, "aria-autocomplete": "list", "aria-activedescendant": activeOptionId, "aria-invalid": invalid || undefined, disabled: disabled, readOnly: readonly, required: required, name: name, placeholder: placeholder, value: displayValue, onChange: handleInput, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: handleKeydown }), _jsx("span", { className: "llm-combobox-icon", "aria-hidden": "true", children: _jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", children: _jsx("path", { d: "M2 4l4 4 4-4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) })] }), isOpen && (_jsx("ul", { id: panelId, className: "llm-combobox-panel", role: "listbox", "aria-labelledby": inputId, children: filteredOptions.length > 0 ? (filteredOptions.map((option, i) => (_jsxs("li", { id: `${panelId}-option-${i}`, role: "option", className: [
-                        'llm-combobox-option',
+    return (_jsxs("div", { className: classes, ref: containerRef, children: [_jsxs("div", { className: "atl-combobox-wrapper", children: [_jsx("input", { ref: inputRef, className: "atl-combobox-input", type: "text", autoComplete: "off", role: "combobox", id: inputId, "aria-expanded": isOpen, "aria-controls": panelId, "aria-autocomplete": "list", "aria-activedescendant": activeOptionId, "aria-invalid": invalid || undefined, disabled: disabled, readOnly: readonly, required: required, name: name, placeholder: placeholder, value: displayValue, onChange: handleInput, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: handleKeydown }), _jsx("span", { className: "atl-combobox-icon", "aria-hidden": "true", children: _jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", children: _jsx("path", { d: "M2 4l4 4 4-4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) })] }), isOpen && (_jsx("ul", { id: panelId, className: "atl-combobox-panel", role: "listbox", "aria-labelledby": inputId, children: filteredOptions.length > 0 ? (filteredOptions.map((option, i) => (_jsxs("li", { id: `${panelId}-option-${i}`, role: "option", className: [
+                        'atl-combobox-option',
                         activeIndex === i && 'is-active',
                         option.value === value && 'is-selected',
                         option.disabled && 'is-disabled',
                     ]
                         .filter(Boolean)
-                        .join(' '), "aria-selected": option.value === value, "aria-disabled": option.disabled || undefined, onMouseDown: () => selectOption(option), onMouseEnter: () => setActiveIndex(i), children: [_jsx("span", { children: option.label }), option.value === value && (_jsx("svg", { className: "llm-combobox-check", width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M2 7l4 4 6-7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }))] }, option.value)))) : (_jsx("li", { className: "llm-combobox-no-results", role: "option", "aria-selected": false, "aria-disabled": "true", children: "No results found." })) })), invalid && errors.length > 0 && (_jsx("div", { className: "llm-combobox-errors", role: "alert", "aria-live": "polite", children: errors.map((e, i) => (_jsx("p", { className: "llm-combobox-error-message", children: e }, i))) }))] }));
+                        .join(' '), "aria-selected": option.value === value, "aria-disabled": option.disabled || undefined, onMouseDown: () => selectOption(option), onMouseEnter: () => setActiveIndex(i), children: [_jsx("span", { children: option.label }), option.value === value && (_jsx("svg", { className: "atl-combobox-check", width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M2 7l4 4 6-7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }))] }, option.value)))) : (_jsx("li", { className: "atl-combobox-no-results", role: "option", "aria-selected": false, "aria-disabled": "true", children: "No results found." })) })), invalid && errors.length > 0 && (_jsx("div", { className: "atl-combobox-errors", role: "alert", "aria-live": "polite", children: errors.map((e, i) => (_jsx("p", { className: "atl-combobox-error-message", children: e }, i))) }))] }));
 }
-//# sourceMappingURL=llm-combobox.js.map
+//# sourceMappingURL=atl-combobox.js.map

package/src/lib/combobox/{llm-combobox.js.map → atl-combobox.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"llm-combobox.js","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/combobox/llm-combobox.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useId, useMemo, useRef, useState } from 'react';\nimport type { LlmComboboxOption, LlmComboboxSpec } from '../spec';\nimport './llm-combobox.css';\n\nexport type { LlmComboboxOption };\n\nexport interface LlmComboboxProps extends LlmComboboxSpec {\n value?: string;\n onValueChange?: (value: string) => void;\n errors?: string[];\n}\n\n/*\n Filterable autocomplete combobox. Accepts an `options` array and emits the\n * selected option's `value`. The user types to narrow the list; selecting an\n * option commits the value and displays its label.\n \n Usage:\n * ```tsx\n * <LlmCombobox\n * value={country}\n * onValueChange={setCountry}\n * options={countryOptions}\n * placeholder=\"Search country…\"\n * />\n * ```\n */\nexport function LlmCombobox({\n value = '',\n onValueChange,\n options = [],\n placeholder = '',\n disabled = false,\n readonly = false,\n invalid = false,\n required = false,\n name,\n errors = [],\n}: LlmComboboxProps) {\n const [query, setQuery] = useState('');\n const [isOpen, setIsOpen] = useState(false);\n const [activeIndex, setActiveIndex] = useState(-1);\n\n const inputRef = useRef<HTMLInputElement>(null);\n const containerRef = useRef<HTMLDivElement>(null);\n\n const inputId = useId();\n const panelId = useId();\n\n const selectedLabel = useMemo(\n () => options.find((o) => o.value === value)?.label ?? '',\n [options, value],\n );\n\n const filteredOptions = useMemo(() => {\n if (!query) return options;\n const q = query.toLowerCase();\n return options.filter((o) => o.label.toLowerCase().includes(q));\n }, [options, query]);\n\n const displayValue = isOpen ? query : selectedLabel;\n\n // Outside-click closes panel\n useEffect(() => {\n if (!isOpen) return;\n function handleClick(e: MouseEvent) {\n if (!containerRef.current?.contains(e.target as Node)) {\n setIsOpen(false);\n setQuery(selectedLabel);\n }\n }\n document.addEventListener('click', handleClick);\n return () => document.removeEventListener('click', handleClick);\n }, [isOpen, selectedLabel]);\n\n function open() {\n if (disabled \|\| readonly) return;\n setQuery(selectedLabel);\n setIsOpen(true);\n setActiveIndex(-1);\n }\n\n function close() {\n setIsOpen(false);\n setActiveIndex(-1);\n }\n\n function selectOption(option: LlmComboboxOption) {\n if (option.disabled \|\| disabled \|\| readonly) return;\n onValueChange?.(option.value);\n setQuery(option.label);\n close();\n inputRef.current?.focus();\n }\n\n function handleInput(e: React.ChangeEvent<HTMLInputElement>) {\n const q = e.target.value;\n setQuery(q);\n setActiveIndex(-1);\n if (q === '') onValueChange?.('');\n if (!isOpen) open();\n }\n\n function handleFocus() {\n open();\n }\n\n function handleBlur() {\n setQuery(selectedLabel);\n }\n\n function handleKeydown(e: React.KeyboardEvent) {\n switch (e.key) {\n case 'ArrowDown': {\n e.preventDefault();\n if (!isOpen) { open(); return; }\n setActiveIndex((i) => (i + 1 >= filteredOptions.length ? 0 : i + 1));\n break;\n }\n case 'ArrowUp': {\n e.preventDefault();\n if (!isOpen) { open(); return; }\n setActiveIndex((i) => (i - 1 < 0 ? filteredOptions.length - 1 : i - 1));\n break;\n }\n case 'Enter': {\n e.preventDefault();\n if (isOpen && activeIndex >= 0 && activeIndex < filteredOptions.length) {\n selectOption(filteredOptions[activeIndex]);\n }\n break;\n }\n case 'Escape': {\n e.preventDefault();\n setQuery(selectedLabel);\n close();\n break;\n }\n case 'Tab': {\n close();\n break;\n }\n }\n }\n\n const classes = [\n 'llm-combobox',\n isOpen && 'is-open',\n disabled && 'is-disabled',\n invalid && 'is-invalid',\n ]\n .filter(Boolean)\n .join(' ');\n\n const activeOptionId =\n activeIndex >= 0 ? `${panelId}-option-${activeIndex}` : undefined;\n\n return (\n <div className={classes} ref={containerRef}>\n <div className=\"llm-combobox-wrapper\">\n <input\n ref={inputRef}\n className=\"llm-combobox-input\"\n type=\"text\"\n autoComplete=\"off\"\n role=\"combobox\"\n id={inputId}\n aria-expanded={isOpen}\n aria-controls={panelId}\n aria-autocomplete=\"list\"\n aria-activedescendant={activeOptionId}\n aria-invalid={invalid \|\| undefined}\n disabled={disabled}\n readOnly={readonly}\n required={required}\n name={name}\n placeholder={placeholder}\n value={displayValue}\n onChange={handleInput}\n onFocus={handleFocus}\n onBlur={handleBlur}\n onKeyDown={handleKeydown}\n />\n <span className=\"llm-combobox-icon\" aria-hidden=\"true\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\n <path d=\"M2 4l4 4 4-4\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n </span>\n </div>\n\n {isOpen && (\n <ul\n id={panelId}\n className=\"llm-combobox-panel\"\n role=\"listbox\"\n aria-labelledby={inputId}\n >\n {filteredOptions.length > 0 ? (\n filteredOptions.map((option, i) => (\n <li\n key={option.value}\n id={`${panelId}-option-${i}`}\n role=\"option\"\n className={[\n 'llm-combobox-option',\n activeIndex === i && 'is-active',\n option.value === value && 'is-selected',\n option.disabled && 'is-disabled',\n ]\n .filter(Boolean)\n .join(' ')}\n aria-selected={option.value === value}\n aria-disabled={option.disabled \|\| undefined}\n onMouseDown={() => selectOption(option)}\n onMouseEnter={() => setActiveIndex(i)}\n >\n <span>{option.label}</span>\n {option.value === value && (\n <svg className=\"llm-combobox-check\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" aria-hidden=\"true\">\n <path d=\"M2 7l4 4 6-7\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n )}\n </li>\n ))\n ) : (\n <li className=\"llm-combobox-no-results\" role=\"option\" aria-selected={false} aria-disabled=\"true\">\n No results found.\n </li>\n )}\n </ul>\n )}\n\n {invalid && errors.length > 0 && (\n <div className=\"llm-combobox-errors\" role=\"alert\" aria-live=\"polite\">\n {errors.map((e, i) => (\n <p key={i} className=\"llm-combobox-error-message\">{e}</p>\n ))}\n </div>\n )}\n </div>\n );\n}\n"]}
1	+ {"version":3,"file":"atl-combobox.js","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/combobox/atl-combobox.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useId, useMemo, useRef, useState } from 'react';\nimport type { AtlComboboxOption, AtlComboboxSpec } from '../spec';\nimport './atl-combobox.css';\n\nexport type { AtlComboboxOption };\n\nexport interface AtlComboboxProps extends AtlComboboxSpec {\n value?: string;\n onValueChange?: (value: string) => void;\n errors?: string[];\n}\n\n/*\n Filterable autocomplete combobox. Accepts an `options` array and emits the\n * selected option's `value`. The user types to narrow the list; selecting an\n * option commits the value and displays its label.\n \n Usage:\n * ```tsx\n * <AtlCombobox\n * value={country}\n * onValueChange={setCountry}\n * options={countryOptions}\n * placeholder=\"Search country…\"\n * />\n * ```\n */\nexport function AtlCombobox({\n value = '',\n onValueChange,\n options = [],\n placeholder = '',\n disabled = false,\n readonly = false,\n invalid = false,\n required = false,\n name,\n errors = [],\n}: AtlComboboxProps) {\n const [query, setQuery] = useState('');\n const [isOpen, setIsOpen] = useState(false);\n const [activeIndex, setActiveIndex] = useState(-1);\n\n const inputRef = useRef<HTMLInputElement>(null);\n const containerRef = useRef<HTMLDivElement>(null);\n\n const inputId = useId();\n const panelId = useId();\n\n const selectedLabel = useMemo(\n () => options.find((o) => o.value === value)?.label ?? '',\n [options, value],\n );\n\n const filteredOptions = useMemo(() => {\n if (!query) return options;\n const q = query.toLowerCase();\n return options.filter((o) => o.label.toLowerCase().includes(q));\n }, [options, query]);\n\n const displayValue = isOpen ? query : selectedLabel;\n\n // Outside-click closes panel\n useEffect(() => {\n if (!isOpen) return;\n function handleClick(e: MouseEvent) {\n if (!containerRef.current?.contains(e.target as Node)) {\n setIsOpen(false);\n setQuery(selectedLabel);\n }\n }\n document.addEventListener('click', handleClick);\n return () => document.removeEventListener('click', handleClick);\n }, [isOpen, selectedLabel]);\n\n function open() {\n if (disabled \|\| readonly) return;\n setQuery(selectedLabel);\n setIsOpen(true);\n setActiveIndex(-1);\n }\n\n function close() {\n setIsOpen(false);\n setActiveIndex(-1);\n }\n\n function selectOption(option: AtlComboboxOption) {\n if (option.disabled \|\| disabled \|\| readonly) return;\n onValueChange?.(option.value);\n setQuery(option.label);\n close();\n inputRef.current?.focus();\n }\n\n function handleInput(e: React.ChangeEvent<HTMLInputElement>) {\n const q = e.target.value;\n setQuery(q);\n setActiveIndex(-1);\n if (q === '') onValueChange?.('');\n if (!isOpen) open();\n }\n\n function handleFocus() {\n open();\n }\n\n function handleBlur() {\n setQuery(selectedLabel);\n }\n\n function handleKeydown(e: React.KeyboardEvent) {\n switch (e.key) {\n case 'ArrowDown': {\n e.preventDefault();\n if (!isOpen) { open(); return; }\n setActiveIndex((i) => (i + 1 >= filteredOptions.length ? 0 : i + 1));\n break;\n }\n case 'ArrowUp': {\n e.preventDefault();\n if (!isOpen) { open(); return; }\n setActiveIndex((i) => (i - 1 < 0 ? filteredOptions.length - 1 : i - 1));\n break;\n }\n case 'Enter': {\n e.preventDefault();\n if (isOpen && activeIndex >= 0 && activeIndex < filteredOptions.length) {\n selectOption(filteredOptions[activeIndex]);\n }\n break;\n }\n case 'Escape': {\n e.preventDefault();\n setQuery(selectedLabel);\n close();\n break;\n }\n case 'Tab': {\n close();\n break;\n }\n }\n }\n\n const classes = [\n 'atl-combobox',\n isOpen && 'is-open',\n disabled && 'is-disabled',\n invalid && 'is-invalid',\n ]\n .filter(Boolean)\n .join(' ');\n\n const activeOptionId =\n activeIndex >= 0 ? `${panelId}-option-${activeIndex}` : undefined;\n\n return (\n <div className={classes} ref={containerRef}>\n <div className=\"atl-combobox-wrapper\">\n <input\n ref={inputRef}\n className=\"atl-combobox-input\"\n type=\"text\"\n autoComplete=\"off\"\n role=\"combobox\"\n id={inputId}\n aria-expanded={isOpen}\n aria-controls={panelId}\n aria-autocomplete=\"list\"\n aria-activedescendant={activeOptionId}\n aria-invalid={invalid \|\| undefined}\n disabled={disabled}\n readOnly={readonly}\n required={required}\n name={name}\n placeholder={placeholder}\n value={displayValue}\n onChange={handleInput}\n onFocus={handleFocus}\n onBlur={handleBlur}\n onKeyDown={handleKeydown}\n />\n <span className=\"atl-combobox-icon\" aria-hidden=\"true\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\n <path d=\"M2 4l4 4 4-4\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n </span>\n </div>\n\n {isOpen && (\n <ul\n id={panelId}\n className=\"atl-combobox-panel\"\n role=\"listbox\"\n aria-labelledby={inputId}\n >\n {filteredOptions.length > 0 ? (\n filteredOptions.map((option, i) => (\n <li\n key={option.value}\n id={`${panelId}-option-${i}`}\n role=\"option\"\n className={[\n 'atl-combobox-option',\n activeIndex === i && 'is-active',\n option.value === value && 'is-selected',\n option.disabled && 'is-disabled',\n ]\n .filter(Boolean)\n .join(' ')}\n aria-selected={option.value === value}\n aria-disabled={option.disabled \|\| undefined}\n onMouseDown={() => selectOption(option)}\n onMouseEnter={() => setActiveIndex(i)}\n >\n <span>{option.label}</span>\n {option.value === value && (\n <svg className=\"atl-combobox-check\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" aria-hidden=\"true\">\n <path d=\"M2 7l4 4 6-7\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n )}\n </li>\n ))\n ) : (\n <li className=\"atl-combobox-no-results\" role=\"option\" aria-selected={false} aria-disabled=\"true\">\n No results found.\n </li>\n )}\n </ul>\n )}\n\n {invalid && errors.length > 0 && (\n <div className=\"atl-combobox-errors\" role=\"alert\" aria-live=\"polite\">\n {errors.map((e, i) => (\n <p key={i} className=\"atl-combobox-error-message\">{e}</p>\n ))}\n </div>\n )}\n </div>\n );\n}\n"]}

package/src/lib/dialog/{llm-dialog.css → atl-dialog.css} RENAMED Viewed

@@ -1,5 +1,5 @@
 /* ── Native <dialog> reset + base ──────────────────────────────────────────── */
-.llm-dialog {
+.atl-dialog {
   all: unset;
   position: fixed;
   inset: 0;
@@ -26,21 +26,21 @@
     overlay var(--ui-duration-slow) allow-discrete;
 }
-.llm-dialog[open] {
+.atl-dialog[open] {
   display: flex;
   opacity: 1;
   transform: scale(1);
 }
 @starting-style {
-  .llm-dialog[open] {
+  .atl-dialog[open] {
     opacity: 0;
     transform: scale(0.95);
   }
 }
 /* ── Backdrop ────────────────────────────────────────────────────────────── */
-.llm-dialog::backdrop {
+.atl-dialog::backdrop {
   background: var(--ui-color-overlay);
   backdrop-filter: blur(2px);
   transition:
@@ -50,18 +50,18 @@
 }
 @starting-style {
-  .llm-dialog[open]::backdrop {
+  .atl-dialog[open]::backdrop {
     opacity: 0;
   }
 }
 @media (prefers-color-scheme: dark) {
-  .llm-dialog::backdrop {
+  .atl-dialog::backdrop {
     background: var(--ui-color-overlay);
   }
 }
-[data-theme='dark'] .llm-dialog::backdrop {
+[data-theme='dark'] .atl-dialog::backdrop {
   background: var(--ui-color-overlay);
 }
@@ -75,32 +75,32 @@
 }
 /* ── Size variants ───────────────────────────────────────────────────────────
- * Scoped to the dialog. React applies size-* on the <dialog class="llm-dialog">
+ * Scoped to the dialog. React applies size-* on the <dialog class="atl-dialog">
  * itself; Angular/Vue apply it on the inner .panel — hence the selector pair
  * (`dialog > .panel` covers both, including Angular's emulated-scoped template,
- * which never carries the `llm-dialog` class). Bare `.size-*` selectors leaked
- * globally and resized unrelated elements (e.g. `llm-button size-md`). */
-.llm-dialog.size-sm,
+ * which never carries the `atl-dialog` class). Bare `.size-*` selectors leaked
+ * globally and resized unrelated elements (e.g. `atl-button size-md`). */
+.atl-dialog.size-sm,
 dialog > .panel.size-sm {
   width: min(24rem, 90vw);
 }
-.llm-dialog.size-md,
+.atl-dialog.size-md,
 dialog > .panel.size-md {
   width: min(36rem, 90vw);
 }
-.llm-dialog.size-lg,
+.atl-dialog.size-lg,
 dialog > .panel.size-lg {
   width: min(48rem, 90vw);
 }
-.llm-dialog.size-xl,
+.atl-dialog.size-xl,
 dialog > .panel.size-xl {
   width: min(64rem, 90vw);
 }
-.llm-dialog.size-full,
+.atl-dialog.size-full,
 dialog > .panel.size-full {
   width: 100vw;
   height: 100dvh;
@@ -111,7 +111,7 @@ dialog > .panel.size-full {
 }
 /* ── Sub-components ──────────────────────────────────────────────────────── */
-.llm-dialog-header {
+.atl-dialog-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -124,7 +124,7 @@ dialog > .panel.size-full {
   flex-shrink: 0;
 }
-.llm-dialog-content {
+.atl-dialog-content {
   display: block;
   padding: var(--ui-spacing-6);
   overflow-y: auto;
@@ -132,7 +132,7 @@ dialog > .panel.size-full {
   color: var(--ui-color-text);
 }
-.llm-dialog-footer {
+.atl-dialog-footer {
   display: flex;
   align-items: center;
   justify-content: flex-end;

package/src/lib/dialog/{llm-dialog.d.ts → atl-dialog.d.ts} RENAMED Viewed

@@ -1,10 +1,10 @@
 import { ReactNode, HTMLAttributes } from 'react';
-import type { LlmDialogSpec } from '../spec';
-import './llm-dialog.css';
+import type { AtlDialogSpec } from '../spec';
+import './atl-dialog.css';
 /**
- * Properties for the LlmDialog component.
+ * Properties for the AtlDialog component.
  */
-export interface LlmDialogProps extends LlmDialogSpec {
+export interface AtlDialogProps extends AtlDialogSpec {
     /**
      * Whether the dialog is open.
      */
@@ -37,32 +37,32 @@ export interface LlmDialogProps extends LlmDialogSpec {
 /**
  * A dialog (modal) component for displaying content on top of the main UI.
  */
-export declare function LlmDialog({ open, onOpenChange, closeOnBackdrop, size, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, children, }: LlmDialogProps): import("react").JSX.Element;
+export declare function AtlDialog({ open, onOpenChange, closeOnBackdrop, size, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, children, }: AtlDialogProps): import("react").JSX.Element;
 /**
- * The header component for an LlmDialog.
+ * The header component for an AtlDialog.
  */
-export declare function LlmDialogHeader({ children, className, ...rest }: HTMLAttributes<HTMLDivElement> & {
+export declare function AtlDialogHeader({ children, className, ...rest }: HTMLAttributes<HTMLDivElement> & {
     /**
      * The content of the dialog header.
      */
     children?: ReactNode;
 }): import("react").JSX.Element;
 /**
- * The main content component for an LlmDialog.
+ * The main content component for an AtlDialog.
  */
-export declare function LlmDialogContent({ children, className, ...rest }: HTMLAttributes<HTMLDivElement> & {
+export declare function AtlDialogContent({ children, className, ...rest }: HTMLAttributes<HTMLDivElement> & {
     /**
      * The main content of the dialog.
      */
     children?: ReactNode;
 }): import("react").JSX.Element;
 /**
- * The footer component for an LlmDialog.
+ * The footer component for an AtlDialog.
  */
-export declare function LlmDialogFooter({ children, className, ...rest }: HTMLAttributes<HTMLDivElement> & {
+export declare function AtlDialogFooter({ children, className, ...rest }: HTMLAttributes<HTMLDivElement> & {
     /**
      * The content of the dialog footer.
      */
     children?: ReactNode;
 }): import("react").JSX.Element;
-//# sourceMappingURL=llm-dialog.d.ts.map
+//# sourceMappingURL=atl-dialog.d.ts.map

package/src/lib/dialog/{llm-dialog.d.ts.map → atl-dialog.d.ts.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"~~llm~~-dialog.d.ts","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/dialog/~~llm~~-dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,SAAS,EACT,cAAc,EAEf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,kBAAkB,CAAC;AAY1B;;GAEG;AACH,MAAM,WAAW,cAAe,SAAQ,aAAa;IACnD;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;OAEG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;IAC1C;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,EACxB,IAAY,EACZ,YAAY,EACZ,eAAsB,EACtB,IAAW,EACX,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,EACjC,QAAQ,GACT,EAAE,cAAc,+BA2DhB;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,cAAc,CAAC,cAAc,CAAC,GAAG;IAClC;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,+BAiCA;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,cAAc,CAAC,cAAc,CAAC,GAAG;IAClC;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,+BASA;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,cAAc,CAAC,cAAc,CAAC,GAAG;IAClC;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,+BASA"}
1	+ {"version":3,"file":"atl-dialog.d.ts","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/dialog/atl-dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,SAAS,EACT,cAAc,EAEf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,kBAAkB,CAAC;AAY1B;;GAEG;AACH,MAAM,WAAW,cAAe,SAAQ,aAAa;IACnD;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;OAEG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;IAC1C;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,EACxB,IAAY,EACZ,YAAY,EACZ,eAAsB,EACtB,IAAW,EACX,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,EACjC,QAAQ,GACT,EAAE,cAAc,+BA2DhB;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,cAAc,CAAC,cAAc,CAAC,GAAG;IAClC;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,+BAiCA;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,cAAc,CAAC,cAAc,CAAC,GAAG;IAClC;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,+BASA;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,cAAc,CAAC,cAAc,CAAC,GAAG;IAClC;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,+BASA"}

package/src/lib/dialog/{llm-dialog.js → atl-dialog.js} RENAMED Viewed

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useId, createContext, useContext, } from 'react';
-import './llm-dialog.css';
+import './atl-dialog.css';
 const DialogContext = createContext({
     headerId: '',
     close: () => undefined,
@@ -8,7 +8,7 @@ const DialogContext = createContext({
 /**
  * A dialog (modal) component for displaying content on top of the main UI.
  */
-export function LlmDialog({ open = false, onOpenChange, closeOnBackdrop = true, size = 'md', 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, children, }) {
+export function AtlDialog({ open = false, onOpenChange, closeOnBackdrop = true, size = 'md', 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, children, }) {
     const dialogRef = useRef(null);
     const headerId = useId();
     const triggerElRef = useRef(null);
@@ -52,25 +52,25 @@ export function LlmDialog({ open = false, onOpenChange, closeOnBackdrop = true,
         }
     };
     const effectiveAriaLabelledby = ariaLabel ? undefined : (ariaLabelledby ?? headerId);
-    return (_jsx(DialogContext.Provider, { value: { headerId, close: () => onOpenChange?.(false) }, children: _jsx("dialog", { ref: dialogRef, className: `llm-dialog size-${size}${open ? ' is-open' : ''}`, "aria-label": ariaLabel || undefined, "aria-labelledby": effectiveAriaLabelledby, "aria-modal": "true", onClick: handleBackdropClick, children: _jsx("div", { className: "panel", onClick: (e) => e.stopPropagation(), children: children }) }) }));
+    return (_jsx(DialogContext.Provider, { value: { headerId, close: () => onOpenChange?.(false) }, children: _jsx("dialog", { ref: dialogRef, className: `atl-dialog size-${size}${open ? ' is-open' : ''}`, "aria-label": ariaLabel || undefined, "aria-labelledby": effectiveAriaLabelledby, "aria-modal": "true", onClick: handleBackdropClick, children: _jsx("div", { className: "panel", onClick: (e) => e.stopPropagation(), children: children }) }) }));
 }
 /**
- * The header component for an LlmDialog.
+ * The header component for an AtlDialog.
  */
-export function LlmDialogHeader({ children, className, ...rest }) {
+export function AtlDialogHeader({ children, className, ...rest }) {
     const ctx = useContext(DialogContext);
-    return (_jsxs("div", { id: ctx.headerId, className: ['llm-dialog-header', className].filter(Boolean).join(' '), ...rest, children: [children, _jsx("button", { className: "close-btn", type: "button", "aria-label": "Close dialog", onClick: ctx.close, children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), _jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }) })] }));
+    return (_jsxs("div", { id: ctx.headerId, className: ['atl-dialog-header', className].filter(Boolean).join(' '), ...rest, children: [children, _jsx("button", { className: "close-btn", type: "button", "aria-label": "Close dialog", onClick: ctx.close, children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), _jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }) })] }));
 }
 /**
- * The main content component for an LlmDialog.
+ * The main content component for an AtlDialog.
  */
-export function LlmDialogContent({ children, className, ...rest }) {
-    return (_jsx("div", { className: ['llm-dialog-content', className].filter(Boolean).join(' '), ...rest, children: children }));
+export function AtlDialogContent({ children, className, ...rest }) {
+    return (_jsx("div", { className: ['atl-dialog-content', className].filter(Boolean).join(' '), ...rest, children: children }));
 }
 /**
- * The footer component for an LlmDialog.
+ * The footer component for an AtlDialog.
  */
-export function LlmDialogFooter({ children, className, ...rest }) {
-    return (_jsx("div", { className: ['llm-dialog-footer', className].filter(Boolean).join(' '), ...rest, children: children }));
+export function AtlDialogFooter({ children, className, ...rest }) {
+    return (_jsx("div", { className: ['atl-dialog-footer', className].filter(Boolean).join(' '), ...rest, children: children }));
 }
-//# sourceMappingURL=llm-dialog.js.map
+//# sourceMappingURL=atl-dialog.js.map

package/src/lib/dialog/{llm-dialog.js.map → atl-dialog.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"~~llm~~-dialog.js","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/dialog/~~llm~~-dialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n useEffect,\n useRef,\n useId,\n createContext,\n useContext,\n ReactNode,\n HTMLAttributes,\n MouseEvent,\n} from 'react';\nimport type { ~~LlmDialogSpec~~ } from '../spec';\nimport './~~llm~~-dialog.css';\n\ninterface DialogContextValue {\n headerId: string;\n close: () => void;\n}\n\nconst DialogContext = createContext<DialogContextValue>({\n headerId: '',\n close: () => undefined,\n});\n\n/*\n Properties for the ~~LlmDialog~~ component.\n /\nexport interface ~~LlmDialogProps~~ extends ~~LlmDialogSpec~~ {\n /\n Whether the dialog is open.\n /\n open?: boolean;\n /\n Callback triggered when the open state changes.\n /\n onOpenChange?: (open: boolean) => void;\n /\n Whether to close the dialog when clicking on the backdrop.\n /\n closeOnBackdrop?: boolean;\n /\n The size of the dialog.\n /\n size?: 'sm' \| 'md' \| 'lg' \| 'xl' \| 'full';\n /\n Accessible label for the dialog.\n /\n 'aria-label'?: string;\n /\n Accessible label provided by another element.\n /\n 'aria-labelledby'?: string;\n /\n The content of the dialog.\n /\n children?: ReactNode;\n}\n\n/\n A dialog (modal) component for displaying content on top of the main UI.\n /\nexport function ~~LlmDialog~~({\n open = false,\n onOpenChange,\n closeOnBackdrop = true,\n size = 'md',\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledby,\n children,\n}: ~~LlmDialogProps~~) {\n const dialogRef = useRef<HTMLDialogElement>(null);\n const headerId = useId();\n const triggerElRef = useRef<Element \| null>(null);\n\n useEffect(() => {\n const dialog = dialogRef.current;\n if (!dialog) return;\n if (open) {\n triggerElRef.current = document.activeElement;\n if (!dialog.open) dialog.showModal();\n } else {\n if (dialog.open) dialog.close();\n (triggerElRef.current as HTMLElement \| null)?.focus();\n triggerElRef.current = null;\n }\n }, [open]);\n\n useEffect(() => {\n const dialog = dialogRef.current;\n if (!dialog) return;\n const onClose = () => onOpenChange?.(false);\n const onCancel = (e: Event) => {\n e.preventDefault();\n onOpenChange?.(false);\n };\n dialog.addEventListener('close', onClose);\n dialog.addEventListener('cancel', onCancel);\n return () => {\n dialog.removeEventListener('close', onClose);\n dialog.removeEventListener('cancel', onCancel);\n };\n }, [onOpenChange]);\n\n const handleBackdropClick = (e: MouseEvent<HTMLDialogElement>) => {\n if (!closeOnBackdrop) return;\n if (e.target === dialogRef.current) {\n onOpenChange?.(false);\n }\n };\n\n const effectiveAriaLabelledby = ariaLabel ? undefined : (ariaLabelledby ?? headerId);\n\n return (\n <DialogContext.Provider value={{ headerId, close: () => onOpenChange?.(false) }}>\n <dialog\n ref={dialogRef}\n className={`~~llm~~-dialog size-${size}${open ? ' is-open' : ''}`}\n aria-label={ariaLabel \|\| undefined}\n aria-labelledby={effectiveAriaLabelledby}\n aria-modal=\"true\"\n onClick={handleBackdropClick}\n >\n <div className=\"panel\" onClick={(e) => e.stopPropagation()}>\n {children}\n </div>\n </dialog>\n </DialogContext.Provider>\n );\n}\n\n/\n The header component for an ~~LlmDialog~~.\n /\nexport function ~~LlmDialogHeader~~({\n children,\n className,\n ...rest\n}: HTMLAttributes<HTMLDivElement> & {\n /\n The content of the dialog header.\n /\n children?: ReactNode;\n}) {\n const ctx = useContext(DialogContext);\n return (\n <div\n id={ctx.headerId}\n className={['~~llm~~-dialog-header', className].filter(Boolean).join(' ')}\n {...rest}\n >\n {children}\n <button\n className=\"close-btn\"\n type=\"button\"\n aria-label=\"Close dialog\"\n onClick={ctx.close}\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"14\"\n height=\"14\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n aria-hidden=\"true\"\n >\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n </svg>\n </button>\n </div>\n );\n}\n\n/\n The main content component for an ~~LlmDialog~~.\n /\nexport function ~~LlmDialogContent~~({\n children,\n className,\n ...rest\n}: HTMLAttributes<HTMLDivElement> & {\n /\n The main content of the dialog.\n /\n children?: ReactNode;\n}) {\n return (\n <div\n className={['~~llm~~-dialog-content', className].filter(Boolean).join(' ')}\n {...rest}\n >\n {children}\n </div>\n );\n}\n\n/\n The footer component for an ~~LlmDialog~~.\n /\nexport function ~~LlmDialogFooter~~({\n children,\n className,\n ...rest\n}: HTMLAttributes<HTMLDivElement> & {\n /\n The content of the dialog footer.\n */\n children?: ReactNode;\n}) {\n return (\n <div\n className={['~~llm~~-dialog-footer', className].filter(Boolean).join(' ')}\n {...rest}\n >\n {children}\n </div>\n );\n}\n"]}
1	+ {"version":3,"file":"atl-dialog.js","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/dialog/atl-dialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n useEffect,\n useRef,\n useId,\n createContext,\n useContext,\n ReactNode,\n HTMLAttributes,\n MouseEvent,\n} from 'react';\nimport type { AtlDialogSpec } from '../spec';\nimport './atl-dialog.css';\n\ninterface DialogContextValue {\n headerId: string;\n close: () => void;\n}\n\nconst DialogContext = createContext<DialogContextValue>({\n headerId: '',\n close: () => undefined,\n});\n\n/*\n Properties for the AtlDialog component.\n /\nexport interface AtlDialogProps extends AtlDialogSpec {\n /\n Whether the dialog is open.\n /\n open?: boolean;\n /\n Callback triggered when the open state changes.\n /\n onOpenChange?: (open: boolean) => void;\n /\n Whether to close the dialog when clicking on the backdrop.\n /\n closeOnBackdrop?: boolean;\n /\n The size of the dialog.\n /\n size?: 'sm' \| 'md' \| 'lg' \| 'xl' \| 'full';\n /\n Accessible label for the dialog.\n /\n 'aria-label'?: string;\n /\n Accessible label provided by another element.\n /\n 'aria-labelledby'?: string;\n /\n The content of the dialog.\n /\n children?: ReactNode;\n}\n\n/\n A dialog (modal) component for displaying content on top of the main UI.\n /\nexport function AtlDialog({\n open = false,\n onOpenChange,\n closeOnBackdrop = true,\n size = 'md',\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledby,\n children,\n}: AtlDialogProps) {\n const dialogRef = useRef<HTMLDialogElement>(null);\n const headerId = useId();\n const triggerElRef = useRef<Element \| null>(null);\n\n useEffect(() => {\n const dialog = dialogRef.current;\n if (!dialog) return;\n if (open) {\n triggerElRef.current = document.activeElement;\n if (!dialog.open) dialog.showModal();\n } else {\n if (dialog.open) dialog.close();\n (triggerElRef.current as HTMLElement \| null)?.focus();\n triggerElRef.current = null;\n }\n }, [open]);\n\n useEffect(() => {\n const dialog = dialogRef.current;\n if (!dialog) return;\n const onClose = () => onOpenChange?.(false);\n const onCancel = (e: Event) => {\n e.preventDefault();\n onOpenChange?.(false);\n };\n dialog.addEventListener('close', onClose);\n dialog.addEventListener('cancel', onCancel);\n return () => {\n dialog.removeEventListener('close', onClose);\n dialog.removeEventListener('cancel', onCancel);\n };\n }, [onOpenChange]);\n\n const handleBackdropClick = (e: MouseEvent<HTMLDialogElement>) => {\n if (!closeOnBackdrop) return;\n if (e.target === dialogRef.current) {\n onOpenChange?.(false);\n }\n };\n\n const effectiveAriaLabelledby = ariaLabel ? undefined : (ariaLabelledby ?? headerId);\n\n return (\n <DialogContext.Provider value={{ headerId, close: () => onOpenChange?.(false) }}>\n <dialog\n ref={dialogRef}\n className={`atl-dialog size-${size}${open ? ' is-open' : ''}`}\n aria-label={ariaLabel \|\| undefined}\n aria-labelledby={effectiveAriaLabelledby}\n aria-modal=\"true\"\n onClick={handleBackdropClick}\n >\n <div className=\"panel\" onClick={(e) => e.stopPropagation()}>\n {children}\n </div>\n </dialog>\n </DialogContext.Provider>\n );\n}\n\n/\n The header component for an AtlDialog.\n /\nexport function AtlDialogHeader({\n children,\n className,\n ...rest\n}: HTMLAttributes<HTMLDivElement> & {\n /\n The content of the dialog header.\n /\n children?: ReactNode;\n}) {\n const ctx = useContext(DialogContext);\n return (\n <div\n id={ctx.headerId}\n className={['atl-dialog-header', className].filter(Boolean).join(' ')}\n {...rest}\n >\n {children}\n <button\n className=\"close-btn\"\n type=\"button\"\n aria-label=\"Close dialog\"\n onClick={ctx.close}\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"14\"\n height=\"14\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n aria-hidden=\"true\"\n >\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n </svg>\n </button>\n </div>\n );\n}\n\n/\n The main content component for an AtlDialog.\n /\nexport function AtlDialogContent({\n children,\n className,\n ...rest\n}: HTMLAttributes<HTMLDivElement> & {\n /\n The main content of the dialog.\n /\n children?: ReactNode;\n}) {\n return (\n <div\n className={['atl-dialog-content', className].filter(Boolean).join(' ')}\n {...rest}\n >\n {children}\n </div>\n );\n}\n\n/\n The footer component for an AtlDialog.\n /\nexport function AtlDialogFooter({\n children,\n className,\n ...rest\n}: HTMLAttributes<HTMLDivElement> & {\n /\n The content of the dialog footer.\n */\n children?: ReactNode;\n}) {\n return (\n <div\n className={['atl-dialog-footer', className].filter(Boolean).join(' ')}\n {...rest}\n >\n {children}\n </div>\n );\n}\n"]}

package/src/lib/drawer/{llm-drawer.css → atl-drawer.css} RENAMED Viewed

@@ -1,10 +1,10 @@
 /* ── Host wrapper ──────────────────────────────────────────────────────────── */
-.llm-drawer-host {
+.atl-drawer-host {
   display: contents;
 }
 /* ── Native <dialog> base ──────────────────────────────────────────────────── */
-.llm-drawer-host dialog {
+.atl-drawer-host dialog {
   all: unset;
   position: fixed;
   display: none;
@@ -19,13 +19,13 @@
     overlay var(--ui-duration-slow) allow-discrete;
 }
-.llm-drawer-host dialog[open] {
+.atl-drawer-host dialog[open] {
   display: flex;
   transform: translate(0, 0) !important;
 }
 /* ── Backdrop ──────────────────────────────────────────────────────────────── */
-.llm-drawer-host dialog::backdrop {
+.atl-drawer-host dialog::backdrop {
   background: var(--ui-color-overlay);
   backdrop-filter: blur(2px);
   transition:
@@ -35,23 +35,23 @@
 }
 @starting-style {
-  .llm-drawer-host dialog[open]::backdrop {
+  .atl-drawer-host dialog[open]::backdrop {
     opacity: 0;
   }
 }
 @media (prefers-color-scheme: dark) {
-  .llm-drawer-host dialog::backdrop {
+  .atl-drawer-host dialog::backdrop {
     background: var(--ui-color-overlay);
   }
 }
-[data-theme='dark'] .llm-drawer-host dialog::backdrop {
+[data-theme='dark'] .atl-drawer-host dialog::backdrop {
   background: var(--ui-color-overlay);
 }
 /* ── Panel (inner wrapper) ─────────────────────────────────────────────────── */
-.llm-drawer-host .panel {
+.atl-drawer-host .panel {
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -64,53 +64,53 @@
 /* ═══════════════════════════════════════════════════════════════════════════ */
 /* ── Right ─────────────────────────────────────────────────────────────────── */
-.llm-drawer-host.position-right dialog {
+.atl-drawer-host.position-right dialog {
   inset: 0 0 0 auto;
   height: 100dvh;
   transform: translateX(100%);
 }
 @starting-style {
-  .llm-drawer-host.position-right dialog[open] {
+  .atl-drawer-host.position-right dialog[open] {
     transform: translateX(100%);
   }
 }
 /* ── Left ──────────────────────────────────────────────────────────────────── */
-.llm-drawer-host.position-left dialog {
+.atl-drawer-host.position-left dialog {
   inset: 0 auto 0 0;
   height: 100dvh;
   transform: translateX(-100%);
 }
 @starting-style {
-  .llm-drawer-host.position-left dialog[open] {
+  .atl-drawer-host.position-left dialog[open] {
     transform: translateX(-100%);
   }
 }
 /* ── Top ───────────────────────────────────────────────────────────────────── */
-.llm-drawer-host.position-top dialog {
+.atl-drawer-host.position-top dialog {
   inset: 0 0 auto 0;
   width: 100vw;
   transform: translateY(-100%);
 }
 @starting-style {
-  .llm-drawer-host.position-top dialog[open] {
+  .atl-drawer-host.position-top dialog[open] {
     transform: translateY(-100%);
   }
 }
 /* ── Bottom ────────────────────────────────────────────────────────────────── */
-.llm-drawer-host.position-bottom dialog {
+.atl-drawer-host.position-bottom dialog {
   inset: auto 0 0 0;
   width: 100vw;
   transform: translateY(100%);
 }
 @starting-style {
-  .llm-drawer-host.position-bottom dialog[open] {
+  .atl-drawer-host.position-bottom dialog[open] {
     transform: translateY(100%);
   }
 }
@@ -120,44 +120,44 @@
 /* ═══════════════════════════════════════════════════════════════════════════ */
 /* Left / Right widths */
-.llm-drawer-host.position-right.size-sm dialog,
-.llm-drawer-host.position-left.size-sm dialog {
+.atl-drawer-host.position-right.size-sm dialog,
+.atl-drawer-host.position-left.size-sm dialog {
   width: 20rem;
 }
-.llm-drawer-host.position-right.size-md dialog,
-.llm-drawer-host.position-left.size-md dialog {
+.atl-drawer-host.position-right.size-md dialog,
+.atl-drawer-host.position-left.size-md dialog {
   width: 28rem;
 }
-.llm-drawer-host.position-right.size-lg dialog,
-.llm-drawer-host.position-left.size-lg dialog {
+.atl-drawer-host.position-right.size-lg dialog,
+.atl-drawer-host.position-left.size-lg dialog {
   width: 40rem;
 }
-.llm-drawer-host.position-right.size-full dialog,
-.llm-drawer-host.position-left.size-full dialog {
+.atl-drawer-host.position-right.size-full dialog,
+.atl-drawer-host.position-left.size-full dialog {
   width: 100vw;
 }
 /* Top / Bottom heights */
-.llm-drawer-host.position-top.size-sm dialog,
-.llm-drawer-host.position-bottom.size-sm dialog {
+.atl-drawer-host.position-top.size-sm dialog,
+.atl-drawer-host.position-bottom.size-sm dialog {
   height: 12rem;
 }
-.llm-drawer-host.position-top.size-md dialog,
-.llm-drawer-host.position-bottom.size-md dialog {
+.atl-drawer-host.position-top.size-md dialog,
+.atl-drawer-host.position-bottom.size-md dialog {
   height: 20rem;
 }
-.llm-drawer-host.position-top.size-lg dialog,
-.llm-drawer-host.position-bottom.size-lg dialog {
+.atl-drawer-host.position-top.size-lg dialog,
+.atl-drawer-host.position-bottom.size-lg dialog {
   height: 32rem;
 }
-.llm-drawer-host.position-top.size-full dialog,
-.llm-drawer-host.position-bottom.size-full dialog {
+.atl-drawer-host.position-top.size-full dialog,
+.atl-drawer-host.position-bottom.size-full dialog {
   height: 100dvh;
 }
@@ -165,7 +165,7 @@
 /* SUB-COMPONENTS                                                              */
 /* ═══════════════════════════════════════════════════════════════════════════ */
-.llm-drawer-header {
+.atl-drawer-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -178,7 +178,7 @@
   flex-shrink: 0;
 }
-.llm-drawer-content {
+.atl-drawer-content {
   display: block;
   padding: var(--ui-spacing-6);
   overflow-y: auto;
@@ -186,7 +186,7 @@
   color: var(--ui-color-text);
 }
-.llm-drawer-footer {
+.atl-drawer-footer {
   display: flex;
   align-items: center;
   justify-content: flex-end;