@arcote.tech/arc-ds 0.5.5 → 0.5.7

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@arcote.tech/arc-ds",
   "type": "module",
-  "version": "0.5.5",
+  "version": "0.5.7",
   "private": false,
   "author": "Przemysław Krasiński [arcote.tech]",
   "description": "Design System for Arc framework — CVA-based components with display modes and variant overrides",
@@ -25,10 +25,12 @@
   "dependencies": {
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "react-markdown": "^10.1.0",
+    "remark-gfm": "^4.0.1",
     "tailwind-merge": "^3.5.0"
   },
   "peerDependencies": {
-    "@arcote.tech/arc": "^0.5.5",
+    "@arcote.tech/arc": "^0.5.7",
     "framer-motion": "^12.0.0",
     "lucide-react": ">=0.400.0",
     "radix-ui": "^1.0.0",

package/src/ds/button/button.tsx

@@ -21,6 +21,8 @@ export const buttonVariants = cva(
           "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
         outline:
           "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground",
+        "outline-dashed":
+          "border border-dashed border-border/60 bg-transparent text-muted-foreground hover:border-border hover:text-foreground",
         destructive: "bg-destructive text-white hover:bg-destructive/90",
         link: "text-primary underline-offset-4 hover:underline",
       },

package/src/ds/chat/chat-message.tsx

@@ -1,3 +1,5 @@
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
 import { Button } from "../button/button";
 import { Bot, User, MessageSquare } from "lucide-react";
 import type { ChatMessageData } from "./types";
@@ -46,18 +48,11 @@ export function ChatMessage({
               : "bg-card border border-border rounded-tl-sm"
           }`}
         >
-          {message.content.split("\n").map((line, i) => (
-            <p key={i} className={i > 0 ? "mt-1.5" : ""}>
-              {line.startsWith("• ") ? (
-                <span className="flex items-start gap-1.5 text-left">
-                  <span className="text-primary mt-px">•</span>
-                  <span>{line.slice(2)}</span>
-                </span>
-              ) : (
-                line
-              )}
-            </p>
-          ))}
+          <div className="chat-markdown space-y-2 text-left [&_p]:m-0 [&_ul]:my-1 [&_ul]:pl-5 [&_ol]:my-1 [&_ol]:pl-5 [&_li]:my-0.5 [&_a]:text-primary [&_a]:underline [&_code]:bg-muted [&_code]:px-1 [&_code]:py-0.5 [&_code]:rounded [&_code]:text-xs [&_pre]:bg-muted [&_pre]:p-2 [&_pre]:rounded [&_pre]:text-xs [&_pre]:overflow-x-auto [&_strong]:font-semibold [&_em]:italic [&_h1]:text-base [&_h1]:font-semibold [&_h2]:text-sm [&_h2]:font-semibold [&_h3]:text-sm [&_h3]:font-medium [&_blockquote]:border-l-2 [&_blockquote]:border-primary/30 [&_blockquote]:pl-3 [&_blockquote]:italic">
+            <ReactMarkdown remarkPlugins={[remarkGfm]}>
+              {message.content}
+            </ReactMarkdown>
+          </div>
           {message.isStreaming && (
             <span className="inline-block w-1.5 h-4 bg-foreground/60 animate-pulse ml-0.5 -mb-0.5" />
           )}

package/src/ds/chat/chat-tool-log.tsx

@@ -1,5 +1,5 @@
 import type { ReactNode } from "react";
-import { CheckCircle2, Loader2, AlertCircle } from "lucide-react";
+import { CheckCircle2, Loader2, AlertCircle, ArrowUpRight } from "lucide-react";
 
 export interface ChatToolLogProps {
   /** Tool label displayed in the header */
@@ -12,6 +12,13 @@ export interface ChatToolLogProps {
   icon?: string;
   /** Additional details rendered below the label */
   children?: ReactNode;
+  /**
+   * Optional click handler. When provided, the log becomes interactive
+   * (button) and shows a navigation indicator. Useful for jumping to
+   * the underlying domain object (e.g. the strategy page that the tool
+   * just mutated).
+   */
+  onClick?: () => void;
 }
 
 export function ChatToolLog({
@@ -19,6 +26,7 @@ export function ChatToolLog({
   calling,
   error,
   children,
+  onClick,
 }: ChatToolLogProps) {
   const hasError = !!error;
 
@@ -40,9 +48,17 @@ export function ChatToolLog({
       ? "text-blue-700 dark:text-blue-400"
       : "text-green-700 dark:text-green-400";
 
+  const isClickable = !!onClick && !calling && !hasError;
+  const Component = isClickable ? "button" : "div";
+  const interactiveCls = isClickable
+    ? "cursor-pointer hover:bg-green-500/10 text-left"
+    : "";
+
   return (
-    <div
-      className={`flex items-start gap-3 w-full rounded-xl border p-3 transition-colors ${borderColor}`}
+    <Component
+      type={isClickable ? "button" : undefined}
+      onClick={isClickable ? onClick : undefined}
+      className={`flex items-start gap-3 w-full rounded-xl border p-3 transition-colors ${borderColor} ${interactiveCls}`}
     >
       <div className={`mt-0.5 shrink-0 ${iconColor}`}>
         {hasError ? (
@@ -66,6 +82,9 @@ export function ChatToolLog({
           </div>
         )}
       </div>
-    </div>
+      {isClickable && (
+        <ArrowUpRight className="h-3.5 w-3.5 mt-0.5 shrink-0 text-muted-foreground" />
+      )}
+    </Component>
   );
 }

package/src/ds/container/container.tsx

@@ -0,0 +1,33 @@
+import { cva } from "class-variance-authority";
+import { forwardRef, type HTMLAttributes } from "react";
+import { cn } from "../../lib/utils";
+import { useDsVariantOverrides } from "../ds-provider";
+
+export const containerVariants = cva("mx-auto w-full max-w-screen-2xl");
+
+export interface ContainerProps extends HTMLAttributes<HTMLDivElement> {}
+
+/**
+ * Container — szerokościowy wrapper dla głównego contentu Layoutu.
+ *
+ * Domyślnie `max-w-screen-2xl` (1536px). Aplikacje, które chcą węziej,
+ * nadpisują przez `arc.variants({ Container: { className: { default: "max-w-5xl" } } })`.
+ */
+export const Container = forwardRef<HTMLDivElement, ContainerProps>(
+  ({ className, children, ...rest }, ref) => {
+    const overrides = useDsVariantOverrides("Container");
+    const extraClass = overrides?.className?.default;
+
+    return (
+      <div
+        ref={ref}
+        className={cn(containerVariants(), extraClass, className)}
+        {...rest}
+      >
+        {children}
+      </div>
+    );
+  },
+);
+
+Container.displayName = "Container";

package/src/ds/editable-text/editable-text.tsx

@@ -0,0 +1,107 @@
+import { useRef, useEffect, useCallback } from "react";
+import { cn } from "../../lib/utils";
+
+export interface EditableTextProps {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  /** When true, Enter inserts a newline. When false (default), Enter saves and blurs. */
+  multiline?: boolean;
+  className?: string;
+}
+
+/**
+ * A contenteditable div that looks like plain text — no border, no background.
+ * Emits `onChange` on blur or Enter (single-line mode).
+ *
+ * Placeholder is shown via CSS `:empty:before` using a data attribute.
+ */
+export function EditableText({
+  value,
+  onChange,
+  placeholder,
+  multiline = false,
+  className,
+}: EditableTextProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const isEditingRef = useRef(false);
+  const lastValueRef = useRef(value);
+
+  // Sync external value → DOM only when not actively editing
+  useEffect(() => {
+    if (isEditingRef.current) return;
+    if (!ref.current) return;
+    const currentText = ref.current.innerText;
+    if (currentText !== value) {
+      ref.current.innerText = value;
+    }
+    lastValueRef.current = value;
+  }, [value]);
+
+  const save = useCallback(() => {
+    if (!ref.current) return;
+    const text = ref.current.innerText.trim();
+    isEditingRef.current = false;
+    if (text !== lastValueRef.current) {
+      lastValueRef.current = text;
+      onChange(text);
+    }
+  }, [onChange]);
+
+  const handleBlur = useCallback(() => {
+    save();
+  }, [save]);
+
+  const handleFocus = useCallback(() => {
+    isEditingRef.current = true;
+  }, []);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLDivElement>) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        // Revert to last saved value
+        if (ref.current) {
+          ref.current.innerText = lastValueRef.current;
+        }
+        isEditingRef.current = false;
+        ref.current?.blur();
+        return;
+      }
+      if (e.key === "Enter" && !multiline) {
+        e.preventDefault();
+        save();
+        ref.current?.blur();
+      }
+    },
+    [multiline, save],
+  );
+
+  // Prevent pasting rich text — strip to plain text
+  const handlePaste = useCallback(
+    (e: React.ClipboardEvent<HTMLDivElement>) => {
+      e.preventDefault();
+      const text = e.clipboardData.getData("text/plain");
+      document.execCommand("insertText", false, text);
+    },
+    [],
+  );
+
+  return (
+    <div
+      ref={ref}
+      contentEditable
+      suppressContentEditableWarning
+      data-placeholder={placeholder}
+      onBlur={handleBlur}
+      onFocus={handleFocus}
+      onKeyDown={handleKeyDown}
+      onPaste={handlePaste}
+      className={cn(
+        "min-h-[1.5em] cursor-text outline-none",
+        "empty:before:content-[attr(data-placeholder)] empty:before:text-muted-foreground empty:before:pointer-events-none",
+        className,
+      )}
+    />
+  );
+}

package/src/ds/form/fields/search-select-field.tsx

@@ -1,15 +1,23 @@
 import { useContext } from "react";
 import type { ReactNode } from "react";
 import { SearchSelect } from "../../search-select/search-select";
-import type { SearchSelectProps } from "../../search-select/search-select";
+import type { SearchSelectOption } from "../../search-select/search-select";
 import { FormFieldContext } from "../field";
 
-export type SearchSelectFieldProps = Omit<SearchSelectProps, "value" | "onChange"> & {
+export interface SearchSelectFieldProps {
+  options: SearchSelectOption[];
+  placeholder?: string;
+  searchPlaceholder?: string;
+  position?: "relative" | "absolute";
+  direction?: "down" | "up";
+  size?: "default" | "sm";
+  renderOption?: (option: SearchSelectOption, isActive: boolean, isSelected: boolean) => ReactNode;
+  allowClear?: boolean;
   label?: ReactNode;
   value?: string;
   onChange?: (value: string) => void;
   className?: string;
-};
+}
 
 export function SearchSelectField({
   label,
@@ -29,9 +37,9 @@ export function SearchSelectField({
         </label>
       )}
       <SearchSelect
-        value={value}
-        onChange={(val) => onChange?.(val)}
         {...rest}
+        value={value}
+        onChange={(val: string) => onChange?.(val)}
       />
       {hasError && (
         <p className="mt-1 text-xs text-destructive">{fieldCtx.messages[0]}</p>

package/src/ds/search-select/search-select.tsx

@@ -10,33 +10,67 @@ export interface SearchSelectOption {
   icon?: ReactNode;
 }
 
-export interface SearchSelectProps {
-  value?: string;
-  onChange?: (value: string) => void;
+export interface SearchSelectTriggerProps {
+  selectedOption: SearchSelectOption | undefined;
+  placeholder: string;
+  open: () => void;
+}
+
+export interface SearchSelectMultiTriggerProps {
+  selectedOptions: SearchSelectOption[];
+  placeholder: string;
+  open: () => void;
+}
+
+// ─── Props union ───────────────────────────────────────────────
+
+interface SearchSelectBaseProps {
   options: SearchSelectOption[];
   placeholder?: string;
   searchPlaceholder?: string;
   position?: "relative" | "absolute";
-  /** Direction the dropdown opens. Default: "down". */
   direction?: "down" | "up";
-  /** Trigger button size. Default: "default". */
   size?: "default" | "sm";
-  renderOption?: (option: SearchSelectOption, isActive: boolean, isSelected: boolean) => ReactNode;
+  renderOption?: (
+    option: SearchSelectOption,
+    isActive: boolean,
+    isSelected: boolean,
+  ) => ReactNode;
   allowClear?: boolean;
 }
 
-export function SearchSelect({
-  value,
-  onChange,
-  options,
-  placeholder = "Wybierz...",
-  searchPlaceholder = "Szukaj...",
-  position = "relative",
-  direction = "down",
-  size = "default",
-  renderOption,
-  allowClear = true,
-}: SearchSelectProps) {
+interface SearchSelectSingleProps extends SearchSelectBaseProps {
+  multiple?: false;
+  value?: string;
+  onChange?: (value: string) => void;
+  renderTrigger?: (props: SearchSelectTriggerProps) => ReactNode;
+}
+
+interface SearchSelectMultiProps extends SearchSelectBaseProps {
+  multiple: true;
+  value?: string[];
+  onChange?: (value: string[]) => void;
+  renderTrigger?: (props: SearchSelectMultiTriggerProps) => ReactNode;
+}
+
+export type SearchSelectProps = SearchSelectSingleProps | SearchSelectMultiProps;
+
+// ─── Component ─────────────────────────────────────────────────
+
+export function SearchSelect(props: SearchSelectProps) {
+  const {
+    options,
+    placeholder = "Wybierz...",
+    searchPlaceholder = "Szukaj...",
+    position = "relative",
+    direction = "down",
+    size = "default",
+    renderOption,
+    allowClear = true,
+  } = props;
+
+  const isMulti = props.multiple === true;
+
   const [isOpen, setIsOpen] = useState(false);
   const [query, setQuery] = useState("");
   const [activeIndex, setActiveIndex] = useState(0);
@@ -44,11 +78,29 @@ export function SearchSelect({
   const containerRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
 
+  // ─── Value helpers ──────────────────────────────────────────
+
+  const singleValue = !isMulti ? (props.value ?? "") : "";
+  const multiValue = isMulti ? (props.value ?? []) : [];
+
   const selectedOption = useMemo(
-    () => options.find((o) => o.value === value),
-    [options, value],
+    () => (!isMulti ? options.find((o) => o.value === singleValue) : undefined),
+    [options, singleValue, isMulti],
+  );
+
+  const selectedOptions = useMemo(
+    () => (isMulti ? options.filter((o) => multiValue.includes(o.value)) : []),
+    [options, multiValue, isMulti],
+  );
+
+  const isSelected = useCallback(
+    (val: string) =>
+      isMulti ? multiValue.includes(val) : singleValue === val,
+    [isMulti, singleValue, multiValue],
   );
 
+  // ─── Filtering ──────────────────────────────────────────────
+
   const filtered = useMemo(() => {
     if (!query.trim()) return options;
     const q = query.toLowerCase().trim();
@@ -56,14 +108,19 @@ export function SearchSelect({
   }, [options, query]);
 
   useEffect(() => {
-    setActiveIndex((prev) => (filtered.length === 0 ? 0 : Math.min(prev, filtered.length - 1)));
+    setActiveIndex((prev) =>
+      filtered.length === 0 ? 0 : Math.min(prev, filtered.length - 1),
+    );
   }, [filtered.length]);
 
   // Click outside
   useEffect(() => {
     if (!isOpen) return;
     const handler = (e: MouseEvent) => {
-      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
+      if (
+        containerRef.current &&
+        !containerRef.current.contains(e.target as Node)
+      ) {
         setIsOpen(false);
         setQuery("");
       }
@@ -79,42 +136,81 @@ export function SearchSelect({
     if (el) el.scrollIntoView({ block: "nearest" });
   }, [activeIndex, isOpen]);
 
-  const select = useCallback(
+  // ─── Actions ────────────────────────────────────────────────
+
+  const selectSingle = useCallback(
+    (val: string) => {
+      if (!isMulti) {
+        (props as SearchSelectSingleProps).onChange?.(val);
+        setIsOpen(false);
+        setQuery("");
+      }
+    },
+    [isMulti, props],
+  );
+
+  const toggleMulti = useCallback(
+    (val: string) => {
+      if (isMulti) {
+        const current = (props as SearchSelectMultiProps).value ?? [];
+        const next = current.includes(val)
+          ? current.filter((v) => v !== val)
+          : [...current, val];
+        (props as SearchSelectMultiProps).onChange?.(next);
+        // Keep dropdown open in multi mode
+      }
+    },
+    [isMulti, props],
+  );
+
+  const handleOptionClick = useCallback(
     (val: string) => {
-      onChange?.(val);
-      setIsOpen(false);
-      setQuery("");
+      if (isMulti) {
+        toggleMulti(val);
+      } else {
+        selectSingle(val);
+      }
     },
-    [onChange],
+    [isMulti, selectSingle, toggleMulti],
   );
 
   const clear = useCallback(() => {
-    onChange?.("");
+    if (isMulti) {
+      (props as SearchSelectMultiProps).onChange?.([]);
+    } else {
+      (props as SearchSelectSingleProps).onChange?.("");
+    }
     setIsOpen(false);
     setQuery("");
-  }, [onChange]);
+  }, [isMulti, props]);
 
-  const open = () => {
+  const open = useCallback(() => {
     setIsOpen(true);
     setActiveIndex(0);
     setQuery("");
     requestAnimationFrame(() => inputRef.current?.focus());
-  };
+  }, []);
 
   const handleKeyDown = (e: React.KeyboardEvent) => {
     switch (e.key) {
       case "ArrowDown":
         e.preventDefault();
-        setActiveIndex((prev) => (filtered.length === 0 ? 0 : (prev + 1) % filtered.length));
+        setActiveIndex((prev) =>
+          filtered.length === 0 ? 0 : (prev + 1) % filtered.length,
+        );
         break;
       case "ArrowUp":
         e.preventDefault();
-        setActiveIndex((prev) => (filtered.length === 0 ? 0 : (prev - 1 + filtered.length) % filtered.length));
+        setActiveIndex((prev) =>
+          filtered.length === 0
+            ? 0
+            : (prev - 1 + filtered.length) % filtered.length,
+        );
         break;
       case "Enter":
         e.preventDefault();
         if (filtered.length > 0 && activeIndex < filtered.length) {
-          select(filtered[activeIndex].value);
+          handleOptionClick(filtered[activeIndex].value);
         }
         break;
       case "Escape":
@@ -125,13 +221,23 @@ export function SearchSelect({
     }
   };
 
-  const defaultRenderOption = (opt: SearchSelectOption, isActive: boolean, isSelected: boolean) => (
+  // ─── Render helpers ─────────────────────────────────────────
+
+  const defaultRenderOption = (
+    opt: SearchSelectOption,
+    isActive: boolean,
+    isSel: boolean,
+  ) => (
     <div className="flex items-center gap-2.5">
-      {opt.icon && <span className="shrink-0 text-muted-foreground">{opt.icon}</span>}
-      <span className={`flex-1 truncate text-sm ${isActive ? "text-primary font-medium" : ""}`}>
+      {opt.icon && (
+        <span className="shrink-0 text-muted-foreground">{opt.icon}</span>
+      )}
+      <span
+        className={`flex-1 truncate text-sm ${isActive ? "font-medium text-primary" : ""}`}
+      >
         {opt.label}
       </span>
-      {isSelected && <Check className="h-3.5 w-3.5 text-primary shrink-0" />}
+      {isSel && <Check className="h-3.5 w-3.5 shrink-0 text-primary" />}
     </div>
   );
 
@@ -139,100 +245,174 @@ export function SearchSelect({
 
   const isAbsolute = position === "absolute";
   const isUp = direction === "up";
-  const triggerHeight = size === "sm" ? "h-8 text-xs px-2.5" : "h-10 md:h-9 text-base md:text-sm px-3";
+  const triggerHeight =
+    size === "sm" ? "h-8 text-xs px-2.5" : "h-10 md:h-9 text-base md:text-sm px-3";
+
+  const hasValue = isMulti ? multiValue.length > 0 : !!singleValue;
+
+  // ─── Trigger ────────────────────────────────────────────────
+
+  const renderDefaultTrigger = () => (
+    <button
+      type="button"
+      onClick={open}
+      className={`flex w-full items-center justify-between rounded-md border border-input bg-transparent ${triggerHeight} shadow-xs transition-colors hover:bg-muted/50`}
+    >
+      {isMulti ? (
+        selectedOptions.length > 0 ? (
+          <span className="truncate">
+            {selectedOptions.map((o) => o.label).join(", ")}
+          </span>
+        ) : (
+          <span className="text-muted-foreground">{placeholder}</span>
+        )
+      ) : selectedOption ? (
+        <div className="flex min-w-0 items-center gap-2">
+          {selectedOption.icon && (
+            <span className="shrink-0">{selectedOption.icon}</span>
+          )}
+          <span className="truncate">{selectedOption.label}</span>
+        </div>
+      ) : (
+        <span className="text-muted-foreground">{placeholder}</span>
+      )}
+      <div className="flex shrink-0 items-center gap-1">
+        {allowClear && hasValue && (
+          <span
+            role="button"
+            onClick={(e) => {
+              e.stopPropagation();
+              clear();
+            }}
+            className="rounded-full p-0.5 text-muted-foreground/50 transition-colors hover:bg-muted hover:text-foreground"
+          >
+            <X className="h-3 w-3" />
+          </span>
+        )}
+        <ChevronDown className="h-3.5 w-3.5 text-muted-foreground" />
+      </div>
+    </button>
+  );
+
+  const renderCustomTrigger = () => {
+    if (isMulti && (props as SearchSelectMultiProps).renderTrigger) {
+      return (props as SearchSelectMultiProps).renderTrigger!({
+        selectedOptions,
+        placeholder,
+        open,
+      });
+    }
+    if (!isMulti && (props as SearchSelectSingleProps).renderTrigger) {
+      return (props as SearchSelectSingleProps).renderTrigger!({
+        selectedOption,
+        placeholder,
+        open,
+      });
+    }
+    return null;
+  };
+
+  const hasCustomTrigger = isMulti
+    ? !!(props as SearchSelectMultiProps).renderTrigger
+    : !!(props as SearchSelectSingleProps).renderTrigger;
+
+  // ─── Option list (shared between relative and absolute) ─────
+
+  const renderOptionList = () => (
+    <>
+      {filtered.length > 0 && (
+        <div className="max-h-[192px] overflow-y-auto border-t border-border">
+          {filtered.map((opt, i) => (
+            <button
+              key={opt.value}
+              type="button"
+              data-active={i === activeIndex}
+              onClick={() => handleOptionClick(opt.value)}
+              onMouseEnter={() => setActiveIndex(i)}
+              className={`flex w-full items-center px-3 py-2 text-left transition-colors ${
+                i === activeIndex ? "bg-primary/10" : "hover:bg-muted"
+              }`}
+            >
+              {optionRenderer(opt, i === activeIndex, isSelected(opt.value))}
+            </button>
+          ))}
+        </div>
+      )}
+      {filtered.length === 0 && query && (
+        <div className="border-t border-border px-3 py-3 text-center text-xs text-muted-foreground">
+          Brak wyników
+        </div>
+      )}
+    </>
+  );
+
+  const renderSearchInput = () => (
+    <div className="p-1.5">
+      <Input
+        ref={inputRef}
+        icon={Search}
+        size="sm"
+        value={query}
+        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+          setQuery(e.target.value);
+          setActiveIndex(0);
+        }}
+        onKeyDown={handleKeyDown}
+        placeholder={searchPlaceholder}
+        className="border-0 shadow-none focus-visible:border-transparent focus-visible:ring-0"
+      />
+    </div>
+  );
 
   return (
     <div ref={containerRef} className={isAbsolute ? "relative" : ""}>
       {/* Trigger */}
       {!isOpen ? (
-        <button
-          type="button"
-          onClick={open}
-          className={`flex w-full items-center justify-between rounded-md border border-input bg-transparent ${triggerHeight} shadow-xs transition-colors hover:bg-muted/50`}
-        >
-          {selectedOption ? (
-            <div className="flex items-center gap-2 min-w-0">
-              {selectedOption.icon && <span className="shrink-0">{selectedOption.icon}</span>}
-              <span className="truncate">{selectedOption.label}</span>
-            </div>
-          ) : (
-            <span className="text-muted-foreground">{placeholder}</span>
-          )}
-          <div className="flex items-center gap-1 shrink-0">
-            {allowClear && value && (
-              <span
-                role="button"
-                onClick={(e) => {
-                  e.stopPropagation();
-                  clear();
-                }}
-                className="rounded-full p-0.5 text-muted-foreground/50 hover:bg-muted hover:text-foreground transition-colors"
-              >
-                <X className="h-3 w-3" />
-              </span>
-            )}
-            <ChevronDown className="h-3.5 w-3.5 text-muted-foreground" />
-          </div>
-        </button>
+        hasCustomTrigger ? (
+          renderCustomTrigger()
+        ) : (
+          renderDefaultTrigger()
+        )
       ) : !isAbsolute ? (
         /* Inline search — relative mode */
-        <div className="rounded-md border border-input overflow-hidden">
-          <div className="p-1.5">
-            <Input
-              ref={inputRef}
-              icon={Search}
-              size="sm"
-              value={query}
-              onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                setQuery(e.target.value);
-                setActiveIndex(0);
-              }}
-              onKeyDown={handleKeyDown}
-              placeholder={searchPlaceholder}
-              className="border-0 shadow-none focus-visible:ring-0 focus-visible:border-transparent"
-            />
-          </div>
-          {filtered.length > 0 && (
-            <div className="border-t border-border max-h-[192px] overflow-y-auto">
-              {filtered.map((opt, i) => (
-                <button
-                  key={opt.value}
-                  type="button"
-                  data-active={i === activeIndex}
-                  onClick={() => select(opt.value)}
-                  onMouseEnter={() => setActiveIndex(i)}
-                  className={`flex w-full items-center px-3 py-2 text-left transition-colors ${
-                    i === activeIndex ? "bg-primary/10" : "hover:bg-muted"
-                  }`}
-                >
-                  {optionRenderer(opt, i === activeIndex, opt.value === value)}
-                </button>
-              ))}
-            </div>
-          )}
-          {filtered.length === 0 && query && (
-            <div className="border-t border-border px-3 py-3 text-center text-xs text-muted-foreground">
-              Brak wyników
-            </div>
-          )}
+        <div className="overflow-hidden rounded-md border border-input">
+          {renderSearchInput()}
+          {renderOptionList()}
         </div>
       ) : (
         /* Trigger stays visible in absolute mode */
-        <button
-          type="button"
-          onClick={() => { setIsOpen(false); setQuery(""); }}
-          className={`flex w-full items-center justify-between rounded-md border border-ring bg-transparent ${triggerHeight} shadow-xs ring-[3px] ring-ring/50`}
-        >
-          {selectedOption ? (
-            <div className="flex items-center gap-2 min-w-0">
-              {selectedOption.icon && <span className="shrink-0">{selectedOption.icon}</span>}
-              <span className="truncate">{selectedOption.label}</span>
-            </div>
-          ) : (
-            <span className="text-muted-foreground">{placeholder}</span>
-          )}
-          <ChevronDown className="h-3.5 w-3.5 text-muted-foreground rotate-180 transition-transform" />
-        </button>
+        hasCustomTrigger ? (
+          renderCustomTrigger()
+        ) : (
+          <button
+            type="button"
+            onClick={() => {
+              setIsOpen(false);
+              setQuery("");
+            }}
+            className={`flex w-full items-center justify-between rounded-md border border-ring bg-transparent ${triggerHeight} shadow-xs ring-[3px] ring-ring/50`}
+          >
+            {isMulti ? (
+              selectedOptions.length > 0 ? (
+                <span className="truncate">
+                  {selectedOptions.map((o) => o.label).join(", ")}
+                </span>
+              ) : (
+                <span className="text-muted-foreground">{placeholder}</span>
+              )
+            ) : selectedOption ? (
+              <div className="flex min-w-0 items-center gap-2">
+                {selectedOption.icon && (
+                  <span className="shrink-0">{selectedOption.icon}</span>
+                )}
+                <span className="truncate">{selectedOption.label}</span>
+              </div>
+            ) : (
+              <span className="text-muted-foreground">{placeholder}</span>
+            )}
+            <ChevronDown className="h-3.5 w-3.5 rotate-180 text-muted-foreground transition-transform" />
+          </button>
+        )
       )}
 
       {/* Absolute dropdown */}
@@ -243,46 +423,10 @@ export function SearchSelect({
             animate={{ opacity: 1, y: 0 }}
             exit={{ opacity: 0, y: isUp ? 4 : -4 }}
             transition={{ duration: 0.12 }}
-            className={`absolute left-0 right-0 z-50 rounded-md border border-input bg-card shadow-lg overflow-hidden ${isUp ? "bottom-full mb-1" : "mt-1"}`}
+            className={`absolute left-0 right-0 z-50 overflow-hidden rounded-md border border-input bg-card shadow-lg ${isUp ? "bottom-full mb-1" : "mt-1"}`}
           >
-            <div className="p-1.5">
-              <Input
-                ref={inputRef}
-                icon={Search}
-                size="sm"
-                value={query}
-                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                  setQuery(e.target.value);
-                  setActiveIndex(0);
-                }}
-                onKeyDown={handleKeyDown}
-                placeholder={searchPlaceholder}
-                className="border-0 shadow-none focus-visible:ring-0 focus-visible:border-transparent"
-              />
-            </div>
-            {filtered.length > 0 && (
-              <div className="border-t border-border max-h-[192px] overflow-y-auto">
-                {filtered.map((opt, i) => (
-                  <button
-                    key={opt.value}
-                    type="button"
-                    data-active={i === activeIndex}
-                    onClick={() => select(opt.value)}
-                    onMouseEnter={() => setActiveIndex(i)}
-                    className={`flex w-full items-center px-3 py-2 text-left transition-colors ${
-                      i === activeIndex ? "bg-primary/10" : "hover:bg-muted"
-                    }`}
-                  >
-                    {optionRenderer(opt, i === activeIndex, opt.value === value)}
-                  </button>
-                ))}
-              </div>
-            )}
-            {filtered.length === 0 && query && (
-              <div className="border-t border-border px-3 py-3 text-center text-xs text-muted-foreground">
-                Brak wyników
-              </div>
-            )}
+            {renderSearchInput()}
+            {renderOptionList()}
           </motion.div>
         )}
       </AnimatePresence>

package/src/ds/types.ts

@@ -19,6 +19,7 @@ export interface DSComponentMap {
   Separator: ComponentType<SeparatorProps>;
   Avatar: ComponentType<AvatarProps>;
   Input: ComponentType<InputProps>;
+  Container: ComponentType<ContainerProps>;
 }
 
 /** Partial override — moduł nadpisuje tylko wybrane komponenty. */
@@ -50,6 +51,7 @@ export interface ButtonProps {
     | "secondary"
     | "ghost"
     | "outline"
+    | "outline-dashed"
     | "destructive"
     | "link";
   size?: "default" | "sm" | "xs" | "lg" | "icon" | "icon-sm" | "icon-xs";
@@ -129,3 +131,12 @@ export interface BoxProps {
   className?: string;
   children?: ReactNode;
 }
+
+// ---------------------------------------------------------------------------
+// Container
+// ---------------------------------------------------------------------------
+
+export interface ContainerProps {
+  className?: string;
+  children?: ReactNode;
+}

package/src/index.ts

@@ -63,10 +63,14 @@ export type { TagListProps } from "./ds/tag-list/tag-list";
 export { SuggestionList } from "./ds/suggestion-list/suggestion-list";
 export type { SuggestionListProps, InitialCloudConfig } from "./ds/suggestion-list/suggestion-list";
 export { SearchSelect } from "./ds/search-select/search-select";
-export type { SearchSelectProps, SearchSelectOption } from "./ds/search-select/search-select";
+export type { SearchSelectProps, SearchSelectOption, SearchSelectTriggerProps, SearchSelectMultiTriggerProps } from "./ds/search-select/search-select";
+export { EditableText } from "./ds/editable-text/editable-text";
+export type { EditableTextProps } from "./ds/editable-text/editable-text";
 export { Badge, badgeVariants } from "./ds/badge/badge";
 export { Box, boxVariants } from "./ds/box/box";
 export type { BoxProps } from "./ds/box/box";
+export { Container, containerVariants } from "./ds/container/container";
+export type { ContainerProps } from "./ds/container/container";
 export { Sidebar, sidebarVariants } from "./ds/sidebar/sidebar";
 export type { SidebarProps } from "./ds/sidebar/sidebar";
 export {

package/src/layout/layout.tsx

@@ -2,6 +2,7 @@ import { createContext, useContext, useEffect, useRef, useState } from "react";
 import type { ReactNode } from "react";
 import { Box } from "../ds/box/box";
 import { Button } from "../ds/button/button";
+import { Container } from "../ds/container/container";
 import { DragHandle } from "./drag-handle";
 import { useDynamicSlotContent } from "./dynamic-slot";
 import { ExpandablePanel } from "./expandable-panel";
@@ -124,18 +125,20 @@ function DesktopLayout({ children }: { children?: ReactNode }) {
       <SubNavSlot />
       <div className="flex w-full flex-1">
         <div className="flex min-w-0 flex-1 justify-center">
-          <div className="flex w-full max-w-5xl gap-4 p-4">
+          <Container className="flex gap-4 p-4">
             {renderSlot("sidebar-left", { className: "flex w-64 shrink-0 flex-col gap-4" })}
             <div className="min-w-0 flex-1">
               {children}
               {renderSlot("main-content", { className: "flex flex-col gap-4" })}
             </div>
             {renderSlot("sidebar-right", { className: "flex w-64 shrink-0 flex-col gap-4" })}
-          </div>
+          </Container>
         </div>
         {renderSlot("preview-pane", {
           className:
-            "flex w-[480px] shrink-0 flex-col gap-4 overflow-y-auto border-l p-4",
+            "flex w-[480px] shrink-0 flex-col gap-4 overflow-y-auto border-l p-4 " +
+            "sticky top-[var(--arc-toolbar-height,5rem)] " +
+            "max-h-[calc(100vh-var(--arc-toolbar-height,5rem))]",
         })}
       </div>
     </>