@sybilion/uilib 1.0.20

package/src/components/ui/Chat/chat-preset-utils.ts

@@ -0,0 +1,27 @@
+import type { ChatPreset, Message } from './Chat.types';
+import { MessageRole } from './Chat.types';
+
+/** Full chat text for dashboard / downstream tools (role-prefixed lines). */
+export function formatChatTranscript(messages: Message[]): string {
+  return messages.map(m => `${m.role}: ${m.text}`).join('\n');
+}
+
+/** Match button label (`preset.text`) to user message body; normalize to avoid trivial mismatches. */
+export function normalizePresetMatchText(s: string): string {
+  return s.trim().normalize('NFC');
+}
+
+export function usedPresetIdsFromMessages(
+  messages: Message[] | undefined,
+  presets: ChatPreset[] | undefined,
+): string[] {
+  if (!messages?.length || !presets?.length) return [];
+  const userTexts = new Set(
+    messages
+      .filter(m => m.role === MessageRole.USER)
+      .map(m => normalizePresetMatchText(m.text)),
+  );
+  return presets
+    .filter(p => userTexts.has(normalizePresetMatchText(p.text)))
+    .map(p => p.id);
+}

package/src/components/ui/Chat/index.ts

@@ -0,0 +1,24 @@
+export { Chat } from './Chat';
+export { usedPresetIdsFromMessages } from './chat-preset-utils';
+export { ChatChrome } from './ChatChrome';
+export type {
+  ChatChromeProps,
+  ChatChromeResizeHandleConfig,
+} from './ChatChrome';
+export { ChatSheet } from './ChatSheet/ChatSheet';
+export { useChatPanelChromeModel } from './ChatSheet/useChatPanelChromeModel';
+export type { ChatSheetActions, ChatSheetProps } from './ChatSheet/ChatSheet';
+export type {
+  UseChatPanelChromeModelInput,
+  UseChatPanelChromeModelResult,
+} from './ChatSheet/useChatPanelChromeModel';
+export { ChatMessage } from './ChatMessage';
+export { ChatPrompt } from './ChatPrompt';
+export { ChatPresets } from './ChatPresets';
+export type {
+  Chat as ChatType,
+  Message,
+  ChatProps,
+  ChatPreset as ChatPresetType,
+} from './Chat.types';
+export { MessageRole } from './Chat.types';

package/src/components/ui/Checkbox/Checkbox.styl

@@ -0,0 +1,42 @@
+.checkboxRoot
+  cursor pointer
+  width 16px
+  height 16px
+  flex-shrink 0
+  border-radius 4px
+  border 1px solid var(--input)
+  background transparent
+  box-shadow 0 1px 2px 0 rgba(0, 0, 0, 0.05)
+  outline none
+  transition box-shadow 0.15s ease-in-out
+  .dark &
+    background-color var(--input-30)
+
+  &[data-state=checked]
+    background-color var(--primary)
+    color var(--primary-foreground)
+    border-color var(--primary)
+    .dark &
+      background-color var(--primary)
+
+  &:focus-visible
+    border-color var(--ring)
+    box-shadow 0 0 0 3px var(--ring-50)
+
+  &[aria-invalid=true]
+    box-shadow 0 0 0 3px var(--destructive-200)
+    border-color var(--destructive)
+    .dark &
+      box-shadow 0 0 0 3px var(--destructive-400)
+
+  &:disabled
+    cursor not-allowed
+    opacity 0.5
+
+.checkboxIndicator
+  display flex
+  align-items center
+  justify-content center
+  color currentColor
+  transition none
+

package/src/components/ui/Checkbox/Checkbox.styl.d.ts

@@ -0,0 +1,9 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'checkboxIndicator': string;
+  'checkboxRoot': string;
+  'dark': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

package/src/components/ui/Checkbox/Checkbox.tsx

@@ -0,0 +1,26 @@
+import cn from 'classnames';
+
+import { CheckIcon } from '@phosphor-icons/react';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+
+import S from './Checkbox.styl';
+import type { CheckboxProps } from './Checkbox.types';
+
+function Checkbox({ className, ...props }: CheckboxProps) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(S.checkboxRoot, className)}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className={S.checkboxIndicator}
+      >
+        <CheckIcon className="size-3.5" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  );
+}
+
+export { Checkbox };

package/src/components/ui/Checkbox/Checkbox.types.ts

@@ -0,0 +1,5 @@
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+
+export interface CheckboxProps extends React.ComponentProps<
+  typeof CheckboxPrimitive.Root
+> {}

package/src/components/ui/Checkbox/index.ts

@@ -0,0 +1,2 @@
+export { Checkbox } from './Checkbox';
+export type { CheckboxProps } from './Checkbox.types';

package/src/components/ui/Dialog/Dialog.styl

@@ -0,0 +1,145 @@
+@import 'lib/theme.styl'
+
+// Dialog overlay styles
+.dialogOverlay
+  position fixed
+  inset 0
+  z-index 50
+  background-color var(--background-alpha-700)
+  backdrop-filter blur(4px)
+  opacity 0
+  transition opacity 200ms ease-out
+
+  &.isOpen
+    opacity 1
+    animation-name fadeIn
+    animation-duration 200ms
+    animation-timing-function ease-out
+    animation-fill-mode forwards
+
+// Dialog content base styles
+.dialogContent
+  position fixed
+  left 50%
+  top 50%
+  z-index 50
+  display flex
+
+  width fit-content
+  max-height calc(100% - var(--p-4))
+
+  transform translateX(-50%) translateY(-50%)
+  border-radius 20px
+  box-shadow 0 0 0 1px var(--border), 0 10px 15px -3px var(--border), 0 4px 6px -2px var(--border)
+  transition all 200ms ease-out
+
+  :global(.dark) &
+    box-shadow 0 0 0 1px var(--border), 0 10px 15px -3px oklch(0 0 0 / 1), 0 4px 6px -2px oklch(0 0 0 / 0.5)
+
+  opacity 0
+  transform translateX(-50%) translateY(-50%) scale(0.95)
+
+  &.isOpen
+    opacity 1
+    transform translateX(-50%) translateY(-50%) scale(1)
+    animation-name dialogIn
+    animation-duration 200ms
+    animation-timing-function ease-out
+    animation-fill-mode forwards
+
+  &.isClosed
+    opacity 0
+    transform translateX(-50%) translateY(-50%) scale(0.95)
+    animation-name dialogOut
+    animation-duration 200ms
+    animation-timing-function ease-in
+    animation-fill-mode forwards
+    pointer-events none
+
+  // Mobile default: 80% width
+  @media (max-width: unit(MOBILE, 'px'))
+    width calc(100% - var(--p-4))
+    max-width @width
+
+// Wide size variant
+.size-wide
+  max-width calc(100% - var(--p-4))
+  @media (min-width: unit(MOBILE, 'px'))
+    max-width 80rem
+  // @media (max-width: unit(MOBILE, 'px'))
+  //   width 90vw
+  //   max-width 90vw
+
+// Dialog description styles
+.dialogDescription
+  font-size 0.875rem
+  color var(--muted-foreground)
+
+// Dialog close button styles
+.dialogClose
+  position absolute
+  right var(--p-2)
+  top var(--p-2)
+  z-index 10
+  display flex
+  align-items center
+  justify-content center
+  height 2rem
+  width 2rem
+  border-radius 0.125rem
+  opacity 0.7
+  outline none
+  transition opacity 200ms ease, transform 200ms ease
+  transform-origin center
+  cursor pointer
+  background-color transparent
+  border none
+  &:hover
+    opacity 1
+    transform scale(1.1)
+  &:focus-visible
+    box-shadow 0 0 0 2px var(--ring)
+  &:disabled
+    pointer-events none
+
+// Animations
+@keyframes fadeIn
+  from
+    opacity 0
+  to
+    opacity 1
+
+@keyframes fadeOut
+  from
+    opacity 1
+  to
+    opacity 0
+
+@keyframes dialogIn
+  from
+    opacity 0
+    transform translateX(-50%) translateY(-50%) scale(0.95)
+  to
+    opacity 1
+    transform translateX(-50%) translateY(-50%) scale(1)
+
+@keyframes dialogOut
+  from
+    opacity 1
+    transform translateX(-50%) translateY(-50%) scale(1)
+  to
+    opacity 0
+    transform translateX(-50%) translateY(-50%) scale(0.95)
+
+// Footer alignment (overrides Card .footer justify-content)
+.dialogContent [data-slot="card-footer"]
+  width 100%
+
+  &.align-left
+    justify-content flex-start
+  &.align-center
+    justify-content center
+  &.align-right
+    justify-content flex-end
+  &.align-between
+    justify-content space-between

package/src/components/ui/Dialog/Dialog.styl.d.ts

@@ -0,0 +1,21 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'align-between': string;
+  'align-center': string;
+  'align-left': string;
+  'align-right': string;
+  'dialogClose': string;
+  'dialogContent': string;
+  'dialogDescription': string;
+  'dialogIn': string;
+  'dialogOut': string;
+  'dialogOverlay': string;
+  'fadeIn': string;
+  'fadeOut': string;
+  'isClosed': string;
+  'isOpen': string;
+  'size-wide': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

package/src/components/ui/Dialog/Dialog.tsx

@@ -0,0 +1,233 @@
+import cn from 'classnames';
+import React, { useEffect, useId, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+} from '#uilib/components/ui/Card/Card';
+import { XIcon } from '@phosphor-icons/react';
+
+import S from './Dialog.styl';
+import type { DialogProps } from './Dialog.types';
+
+export function Dialog({
+  open,
+  onOpenChange,
+  disabled,
+  trigger,
+  title,
+  subtitle,
+  disableCloseButton,
+  icon,
+  content,
+  contentClassName,
+  footer,
+  footerClassName,
+  footerAlignment = 'center',
+  size = 'default',
+  className,
+  noScroll,
+  maxHeight,
+  autoScrollBottom,
+  width,
+}: DialogProps) {
+  const [isMounted, setIsMounted] = useState(false);
+  const [isAnimating, setIsAnimating] = useState(false);
+  const dialogRef = useRef<HTMLDivElement>(null);
+  const triggerRef = useRef<HTMLElement | null>(null);
+  const previousActiveElementRef = useRef<HTMLElement | null>(null);
+  const titleId = useId();
+  const descriptionId = useId();
+
+  // Track mount state for portal
+  useEffect(() => {
+    setIsMounted(true);
+    return () => setIsMounted(false);
+  }, []);
+
+  // Handle open/close animations
+  useEffect(() => {
+    if (open) {
+      setIsAnimating(true);
+      // Trigger animation after mount
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          setIsAnimating(false);
+        });
+      });
+    } else {
+      setIsAnimating(true);
+    }
+  }, [open]);
+
+  // Focus trap and keyboard handling
+  useEffect(() => {
+    if (!open || !dialogRef.current) return;
+
+    // Store the element that had focus before dialog opened
+    previousActiveElementRef.current = document.activeElement as HTMLElement;
+
+    // Focus the dialog
+    const focusableElements = dialogRef.current.querySelectorAll(
+      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
+    );
+    const firstFocusable = focusableElements[0] as HTMLElement;
+    const lastFocusable = focusableElements[
+      focusableElements.length - 1
+    ] as HTMLElement;
+
+    // Focus first element or dialog itself
+    if (firstFocusable) {
+      firstFocusable.focus();
+    } else {
+      dialogRef.current.focus();
+    }
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        onOpenChange(false);
+        return;
+      }
+
+      // Trap focus with Tab key
+      if (e.key === 'Tab') {
+        if (e.shiftKey) {
+          // Shift + Tab
+          if (document.activeElement === firstFocusable) {
+            e.preventDefault();
+            lastFocusable?.focus();
+          }
+        } else {
+          // Tab
+          if (document.activeElement === lastFocusable) {
+            e.preventDefault();
+            firstFocusable?.focus();
+          }
+        }
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+      // Restore focus to previous element
+      if (previousActiveElementRef.current) {
+        previousActiveElementRef.current.focus();
+      }
+    };
+  }, [open, onOpenChange]);
+
+  // Prevent body scroll when dialog is open
+  useEffect(() => {
+    if (open) {
+      const originalStyle = window.getComputedStyle(document.body).overflow;
+      document.body.style.overflow = 'hidden';
+      return () => {
+        document.body.style.overflow = originalStyle;
+      };
+    }
+  }, [open]);
+
+  const handleOverlayClick = (e: React.MouseEvent) => {
+    if (e.target === e.currentTarget) {
+      onOpenChange(false);
+    }
+  };
+
+  const handleCloseClick = () => {
+    onOpenChange(false);
+  };
+
+  // Store trigger ref for focus restoration
+  useEffect(() => {
+    if (trigger && React.isValidElement(trigger)) {
+      // Try to get ref from trigger element
+      const triggerElement = document.activeElement as HTMLElement;
+      if (triggerElement && triggerElement !== document.body) {
+        triggerRef.current = triggerElement;
+      }
+    }
+  }, [trigger]);
+
+  if (!isMounted) return null;
+
+  const dialogContent = (
+    <>
+      <div
+        className={cn(S.dialogOverlay, open && !isAnimating && S.isOpen)}
+        onClick={handleOverlayClick}
+        aria-hidden="true"
+      />
+      <Card
+        ref={dialogRef}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby={title ? titleId : undefined}
+        aria-describedby={subtitle ? descriptionId : undefined}
+        className={cn(
+          S.dialogContent,
+          S[`size-${size}`],
+          open && !isAnimating && S.isOpen,
+          !open && isAnimating && S.isClosed,
+          className,
+        )}
+        tabIndex={-1}
+        style={{
+          width,
+          maxHeight: maxHeight
+            ? `min(${maxHeight}, calc(100% - var(--p-4)))`
+            : null,
+        }}
+      >
+        {(title || subtitle || icon) && (
+          <CardHeader icon={icon} title={title} description={subtitle} />
+        )}
+
+        {!disableCloseButton && (
+          <button
+            className={S.dialogClose}
+            onClick={handleCloseClick}
+            aria-label="Close dialog"
+            type="button"
+          >
+            <XIcon size={16} />
+          </button>
+        )}
+
+        {content && (
+          <CardContent
+            className={contentClassName}
+            noScroll={noScroll}
+            autoScrollBottom={autoScrollBottom}
+          >
+            {content}
+          </CardContent>
+        )}
+
+        {footer && (
+          <CardFooter
+            className={cn(S[`align-${footerAlignment}`], footerClassName)}
+          >
+            {footer}
+          </CardFooter>
+        )}
+      </Card>
+    </>
+  );
+
+  const onTriggerClick = !disabled ? () => onOpenChange(true) : undefined;
+
+  return (
+    <>
+      {trigger && <div onClick={onTriggerClick}>{trigger}</div>}
+      {open && !disabled && createPortal(dialogContent, document.body)}
+    </>
+  );
+}
+
+// Export Stylus classes for direct use if needed
+export { default as DialogStyles } from './Dialog.styl';

package/src/components/ui/Dialog/Dialog.types.ts

@@ -0,0 +1,27 @@
+import { CSSProperties, ReactNode } from 'react';
+
+export interface DialogProps {
+  open: boolean;
+  disabled?: boolean;
+  /** When true, the header close control is hidden. */
+  disableCloseButton?: boolean;
+  onOpenChange: (isOpen: boolean) => void;
+  trigger?: ReactNode;
+  triggerClassName?: string;
+  title?: ReactNode;
+  titleClassName?: string;
+  subtitle?: ReactNode;
+  subtitleClassName?: string;
+  icon?: ReactNode;
+  content?: ReactNode;
+  contentClassName?: string;
+  footer?: ReactNode;
+  footerClassName?: string;
+  footerAlignment?: 'left' | 'center' | 'right' | 'between';
+  size?: 'login' | 'wide' | 'default';
+  className?: string;
+  noScroll?: boolean;
+  autoScrollBottom?: boolean;
+  maxHeight?: CSSProperties['maxHeight'];
+  width?: CSSProperties['width'];
+}

package/src/components/ui/Dialog/index.ts

@@ -0,0 +1,3 @@
+export { Dialog, DialogStyles } from './Dialog';
+
+export type { DialogProps } from './Dialog.types';

package/src/components/ui/DraggingButton/DraggingButton.styl

@@ -0,0 +1,74 @@
+@import '../../../lib/theme.styl'
+
+.root
+  z-index 10
+  position absolute
+  top 0
+  right 0
+
+  display flex
+  align-items center
+  justify-content center
+
+  background var(--background)
+  border 1px solid var(--input)
+  border-radius 9999px
+  cursor grab
+  pointer-events auto
+  touch-action none
+
+  transform translate(50%, -50%)
+  // transition all 0.2s
+
+  &::before
+    content ''
+    position absolute
+    top -50%
+    left -50%
+    width 200%
+    height 200%
+    border-radius inherit
+
+
+  @media (max-width: unit(MOBILE, 'px'))
+    transform translate(50%, -50%) scale(1.5)
+
+
+  &:hover
+    border-color var(--foreground)
+    background var(--accent)
+
+  &:active
+    cursor grabbing
+    border-color unset !important
+
+.size-md
+  width 36px
+  height 36px
+
+  svg
+    width 16px
+    height 16px
+    color var(--foreground)
+
+.size-sm
+  width 20px
+  height 20px
+
+  svg
+    width 10px
+    height 10px
+    color var(--foreground)
+
+.size-lg
+  width 44px
+  height 44px
+
+  svg
+    width 18px
+    height 18px
+    color var(--foreground)
+
+.dragging
+  cursor grabbing
+

package/src/components/ui/DraggingButton/DraggingButton.styl.d.ts

@@ -0,0 +1,11 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'dragging': string;
+  'root': string;
+  'size-lg': string;
+  'size-md': string;
+  'size-sm': string;
+}
+export const cssExports: CssExports;
+export default cssExports;