podo-ui 0.9.7 → 1.0.2

package/dist/react/atom/editor.js

@@ -368,12 +368,104 @@ const Editor = ({ value = '', width = '100%', height = '400px', minHeight, maxHe
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [onChange, addToHistory]);
+    // 이미지를 커서 위치에 삽입하는 함수
+    const insertImageAtCursor = useCallback((src, alt = '') => {
+        const selection = window.getSelection();
+        if (!selection || selection.rangeCount === 0)
+            return;
+        const range = selection.getRangeAt(0);
+        const img = document.createElement('img');
+        img.src = src;
+        img.alt = alt;
+        img.style.maxWidth = '100%';
+        range.deleteContents();
+        range.insertNode(img);
+        // 커서를 이미지 다음으로 이동
+        const newRange = document.createRange();
+        newRange.setStartAfter(img);
+        newRange.collapse(true);
+        selection.removeAllRanges();
+        selection.addRange(newRange);
+        handleInput();
+    }, []);
+    // 드래그 앤 드롭 이벤트 핸들러
+    const handleDragOver = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+    }, []);
+    const handleDrop = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        const files = e.dataTransfer?.files;
+        if (!files || files.length === 0)
+            return;
+        // 이미지 파일만 처리
+        for (let i = 0; i < files.length; i++) {
+            const file = files[i];
+            if (file.type.startsWith('image/')) {
+                const reader = new FileReader();
+                reader.onload = (event) => {
+                    const dataUrl = event.target?.result;
+                    if (dataUrl) {
+                        // 드롭 위치에 커서 설정
+                        if (editorRef.current) {
+                            editorRef.current.focus();
+                        }
+                        insertImageAtCursor(dataUrl, file.name || 'dropped-image');
+                    }
+                };
+                reader.readAsDataURL(file);
+            }
+        }
+    }, [insertImageAtCursor]);
     // 붙여넣기 이벤트 핸들러 - 지원하지 않는 스타일 제거
     const handlePaste = useCallback((e) => {
-        e.preventDefault();
         const clipboardData = e.clipboardData;
         if (!clipboardData)
             return;
+        // 클립보드에서 이미지 파일 확인
+        const items = clipboardData.items;
+        if (items) {
+            for (let i = 0; i < items.length; i++) {
+                const item = items[i];
+                if (item.type.startsWith('image/')) {
+                    e.preventDefault();
+                    const file = item.getAsFile();
+                    if (file) {
+                        const reader = new FileReader();
+                        reader.onload = (event) => {
+                            const dataUrl = event.target?.result;
+                            if (dataUrl) {
+                                insertImageAtCursor(dataUrl, file.name || 'pasted-image');
+                            }
+                        };
+                        reader.readAsDataURL(file);
+                    }
+                    return;
+                }
+            }
+        }
+        // 파일로 붙여넣은 경우 (드래그 앤 드롭 등)
+        const files = clipboardData.files;
+        if (files && files.length > 0) {
+            for (let i = 0; i < files.length; i++) {
+                const file = files[i];
+                if (file.type.startsWith('image/')) {
+                    e.preventDefault();
+                    const reader = new FileReader();
+                    reader.onload = (event) => {
+                        const dataUrl = event.target?.result;
+                        if (dataUrl) {
+                            insertImageAtCursor(dataUrl, file.name || 'pasted-image');
+                        }
+                    };
+                    reader.readAsDataURL(file);
+                    return;
+                }
+            }
+        }
+        // HTML/텍스트 붙여넣기 처리
+        e.preventDefault();
         // HTML 데이터 가져오기
         const html = clipboardData.getData('text/html');
         const text = clipboardData.getData('text/plain');
@@ -2963,7 +3055,7 @@ const Editor = ({ value = '', width = '100%', height = '400px', minHeight, maxHe
                         minHeight: height === 'contents' ? 'auto' : 0,
                         height: height === 'contents' && savedEditorHeight ? `${savedEditorHeight}px` : undefined,
                         resize: 'none'
-                    }, placeholder: placeholder })) : (_jsx("div", { ref: editorRef, id: editorID, className: styles.editorContent, contentEditable: true, onInput: handleInput, onCompositionStart: handleCompositionStart, onCompositionEnd: handleCompositionEnd, onPaste: handlePaste, onClick: handleEditorClick, onContextMenu: handleEditorContextMenu, onKeyUp: () => {
+                    }, placeholder: placeholder })) : (_jsx("div", { ref: editorRef, id: editorID, className: styles.editorContent, contentEditable: true, onInput: handleInput, onCompositionStart: handleCompositionStart, onCompositionEnd: handleCompositionEnd, onPaste: handlePaste, onDragOver: handleDragOver, onDrop: handleDrop, onClick: handleEditorClick, onContextMenu: handleEditorContextMenu, onKeyUp: () => {
                         detectCurrentParagraphStyle();
                         detectCurrentAlign();
                     }, onKeyDown: handleKeyDown, style: {

package/dist/svelte/actions/portal.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Svelte action to render element into a different part of the DOM
+ * Similar to React's createPortal
+ *
+ * @param node - The node to portal
+ * @param target - Target element or selector (default: 'body')
+ * @returns Svelte action object with update and destroy methods
+ *
+ * @example
+ * <div use:portal={'body'}>
+ *   This will be rendered in body
+ * </div>
+ */
+export declare function portal(node: HTMLElement, target?: HTMLElement | string): {
+    update: (newTarget: HTMLElement | string) => void;
+    destroy: () => void;
+};
+export default portal;

package/dist/svelte/actions/portal.js

@@ -0,0 +1,42 @@
+/**
+ * Svelte action to render element into a different part of the DOM
+ * Similar to React's createPortal
+ *
+ * @param node - The node to portal
+ * @param target - Target element or selector (default: 'body')
+ * @returns Svelte action object with update and destroy methods
+ *
+ * @example
+ * <div use:portal={'body'}>
+ *   This will be rendered in body
+ * </div>
+ */
+export function portal(node, target) {
+    if (target === void 0) { target = 'body'; }
+    var targetEl;
+    function update(newTarget) {
+        target = newTarget;
+        if (typeof target === 'string') {
+            targetEl = document.querySelector(target);
+            if (!targetEl) {
+                throw new Error("No element found matching \"".concat(target, "\""));
+            }
+        }
+        else {
+            targetEl = target;
+        }
+        targetEl.appendChild(node);
+        node.hidden = false;
+    }
+    function destroy() {
+        if (node.parentNode) {
+            node.parentNode.removeChild(node);
+        }
+    }
+    update(target);
+    return {
+        update: update,
+        destroy: destroy,
+    };
+}
+export default portal;

package/dist/svelte/atom/Avatar.svelte

@@ -0,0 +1,97 @@
+<script lang="ts">
+  import styles from './avatar.module.scss';
+
+  type AvatarType = 'image' | 'icon' | 'text';
+  type AvatarSize = 16 | 20 | 24 | 28 | 32 | 36 | 40 | 48 | 56;
+
+  interface Props {
+    /**
+     * Avatar type
+     * - image: Display user uploaded image
+     * - icon: Display system provided icon with background
+     * - text: Display user name or initials with background
+     */
+    type?: AvatarType;
+    /** Image source URL (for type='image') */
+    src?: string;
+    /** Icon class name (for type='icon') */
+    icon?: string;
+    /** Text content (for type='text') */
+    text?: string;
+    /** Avatar size in pixels */
+    size?: AvatarSize;
+    /** Show activity ring */
+    activityRing?: boolean;
+    /** Additional CSS class names */
+    class?: string;
+    /** Alt text for image */
+    alt?: string;
+    /** Click handler */
+    onclick?: () => void;
+  }
+
+  let {
+    type = 'icon',
+    src,
+    icon = 'icon-user',
+    text,
+    size = 56,
+    activityRing = false,
+    class: className = '',
+    alt = 'Avatar',
+    onclick,
+    ...rest
+  }: Props & Record<string, unknown> = $props();
+
+  let wrapperClasses = $derived(
+    [styles.wrapper, activityRing && styles.activityRing, className]
+      .filter(Boolean)
+      .join(' ')
+  );
+
+  let avatarClasses = $derived(
+    [styles.avatar, styles[`size-${size}`], styles[`type-${type}`]]
+      .filter(Boolean)
+      .join(' ')
+  );
+
+  let wrapperSize = $derived(activityRing ? size + 10 : size);
+  let displayText = $derived(text ? text.slice(0, 2) : '');
+
+  function getFontSize(contentType: 'icon' | 'text') {
+    if (contentType === 'icon') {
+      const iconRatio = 0.785;
+      return Math.round(size * iconRatio);
+    } else {
+      const textRatio = 0.43;
+      return Math.round(size * textRatio);
+    }
+  }
+</script>
+
+<div
+  class={wrapperClasses}
+  style="width: {wrapperSize}px; height: {wrapperSize}px;"
+  onclick={onclick}
+  onkeydown={onclick ? (e) => e.key === 'Enter' && onclick() : undefined}
+  role={onclick ? 'button' : undefined}
+  tabindex={onclick ? 0 : undefined}
+  {...rest}
+>
+  <div
+    class={avatarClasses}
+    style="width: {size}px; height: {size}px; font-size: {type === 'text'
+      ? getFontSize('text')
+      : getFontSize('icon')}px;"
+  >
+    {#if type === 'image' && src}
+      <img {src} {alt} class={styles.image} />
+    {:else if type === 'icon'}
+      <i class={icon} style="font-size: {getFontSize('icon')}px;"></i>
+    {:else if type === 'text' && displayText}
+      <span style="font-size: {getFontSize('text')}px;">{displayText}</span>
+    {:else}
+      <i class={icon} style="font-size: {getFontSize('icon')}px;"></i>
+    {/if}
+  </div>
+</div>

package/dist/svelte/atom/Avatar.svelte.d.ts

@@ -0,0 +1,31 @@
+type AvatarType = 'image' | 'icon' | 'text';
+type AvatarSize = 16 | 20 | 24 | 28 | 32 | 36 | 40 | 48 | 56;
+interface Props {
+    /**
+     * Avatar type
+     * - image: Display user uploaded image
+     * - icon: Display system provided icon with background
+     * - text: Display user name or initials with background
+     */
+    type?: AvatarType;
+    /** Image source URL (for type='image') */
+    src?: string;
+    /** Icon class name (for type='icon') */
+    icon?: string;
+    /** Text content (for type='text') */
+    text?: string;
+    /** Avatar size in pixels */
+    size?: AvatarSize;
+    /** Show activity ring */
+    activityRing?: boolean;
+    /** Additional CSS class names */
+    class?: string;
+    /** Alt text for image */
+    alt?: string;
+    /** Click handler */
+    onclick?: () => void;
+}
+type $$ComponentProps = Props & Record<string, unknown>;
+declare const Avatar: import("svelte").Component<$$ComponentProps, {}, "">;
+type Avatar = ReturnType<typeof Avatar>;
+export default Avatar;

package/dist/svelte/atom/Button.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { HTMLButtonAttributes } from 'svelte/elements';
+
+  type ButtonTheme =
+    | 'default'
+    | 'primary'
+    | 'default-deep'
+    | 'info'
+    | 'link'
+    | 'success'
+    | 'warning'
+    | 'danger';
+
+  type ButtonVariant = 'solid' | 'fill' | 'border' | 'text';
+
+  type ButtonSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg';
+
+  interface Props extends HTMLButtonAttributes {
+    /** Theme color */
+    theme?: ButtonTheme;
+    /** Style variant */
+    variant?: ButtonVariant;
+    /** Size */
+    size?: ButtonSize;
+    /** Left icon class name */
+    icon?: string;
+    /** Right icon class name */
+    rightIcon?: string;
+    /** Loading state */
+    loading?: boolean;
+    /** Text alignment */
+    textAlign?: 'left' | 'center' | 'right';
+    /** Children content */
+    children?: Snippet;
+  }
+
+  let {
+    theme = 'default',
+    variant = 'solid',
+    size = 'sm',
+    icon,
+    rightIcon,
+    loading = false,
+    disabled = false,
+    textAlign,
+    class: className = '',
+    children,
+    ...rest
+  }: Props = $props();
+
+  let buttonClass = $derived(
+    [
+      theme !== 'default' && theme,
+      variant !== 'solid' && variant,
+      size !== 'sm' && size,
+      textAlign === 'left' && 'text-left',
+      textAlign === 'right' && 'text-right',
+      className,
+    ]
+      .filter(Boolean)
+      .join(' ')
+  );
+</script>
+
+<button
+  class={buttonClass || undefined}
+  disabled={disabled || loading}
+  aria-busy={loading ? true : undefined}
+  aria-disabled={disabled ? true : undefined}
+  {...rest}
+>
+  {#if loading}
+    <i class="icon-loading"></i>
+  {:else if icon}
+    <i class={icon}></i>
+  {/if}
+
+  {#if children}
+    {@render children()}
+  {/if}
+
+  {#if rightIcon && !loading}
+    <i class={rightIcon}></i>
+  {/if}
+</button>

package/dist/svelte/atom/Button.svelte.d.ts

@@ -0,0 +1,26 @@
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+type ButtonTheme = 'default' | 'primary' | 'default-deep' | 'info' | 'link' | 'success' | 'warning' | 'danger';
+type ButtonVariant = 'solid' | 'fill' | 'border' | 'text';
+type ButtonSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg';
+interface Props extends HTMLButtonAttributes {
+    /** Theme color */
+    theme?: ButtonTheme;
+    /** Style variant */
+    variant?: ButtonVariant;
+    /** Size */
+    size?: ButtonSize;
+    /** Left icon class name */
+    icon?: string;
+    /** Right icon class name */
+    rightIcon?: string;
+    /** Loading state */
+    loading?: boolean;
+    /** Text alignment */
+    textAlign?: 'left' | 'center' | 'right';
+    /** Children content */
+    children?: Snippet;
+}
+declare const Button: import("svelte").Component<Props, {}, "">;
+type Button = ReturnType<typeof Button>;
+export default Button;

package/dist/svelte/atom/Checkbox.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+  import type { HTMLInputAttributes } from 'svelte/elements';
+
+  interface Props extends Omit<HTMLInputAttributes, 'type'> {
+    /** Checked state */
+    checked?: boolean;
+    /** Indeterminate state (for select all pattern) */
+    indeterminate?: boolean;
+    /** Label text */
+    label?: string;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Element reference for bind:this */
+    element?: HTMLInputElement;
+  }
+
+  let {
+    checked = $bindable(false),
+    indeterminate = false,
+    label,
+    disabled = false,
+    class: className,
+    element = $bindable(),
+    ...rest
+  }: Props = $props();
+
+  // Handle indeterminate state (DOM property only, not HTML attribute)
+  $effect(() => {
+    if (element) {
+      element.indeterminate = indeterminate;
+    }
+  });
+</script>
+
+{#if label}
+  <label>
+    <input
+      bind:this={element}
+      type="checkbox"
+      bind:checked
+      {disabled}
+      class={className}
+      {...rest}
+    />
+    <span>{label}</span>
+  </label>
+{:else}
+  <input
+    bind:this={element}
+    type="checkbox"
+    bind:checked
+    {disabled}
+    class={className}
+    {...rest}
+  />
+{/if}

package/dist/svelte/atom/Checkbox.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+interface Props extends Omit<HTMLInputAttributes, 'type'> {
+    /** Checked state */
+    checked?: boolean;
+    /** Indeterminate state (for select all pattern) */
+    indeterminate?: boolean;
+    /** Label text */
+    label?: string;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Element reference for bind:this */
+    element?: HTMLInputElement;
+}
+declare const Checkbox: import("svelte").Component<Props, {}, "element" | "checked">;
+type Checkbox = ReturnType<typeof Checkbox>;
+export default Checkbox;

package/dist/svelte/atom/Chip.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  type ChipTheme = 'default' | 'blue' | 'green' | 'orange' | 'yellow' | 'red';
+  type ChipType = 'default' | 'fill' | 'border';
+
+  interface Props {
+    /** Chip content */
+    children: Snippet;
+    /** Theme color */
+    theme?: ChipTheme;
+    /** Style type */
+    type?: ChipType;
+    /** Size */
+    size?: 'sm' | 'md';
+    /** Round corners */
+    round?: boolean;
+    /** Icon class name */
+    icon?: string;
+    /** Delete button handler */
+    ondelete?: () => void;
+    /** Additional class name */
+    class?: string;
+  }
+
+  let {
+    children,
+    theme = 'default',
+    type = 'default',
+    size = 'md',
+    round = false,
+    icon,
+    ondelete,
+    class: className = '',
+    ...rest
+  }: Props & Record<string, unknown> = $props();
+
+  let chipClasses = $derived(
+    [
+      'chip',
+      theme !== 'default' && theme,
+      type !== 'default' && type,
+      size !== 'md' && size,
+      round && 'round',
+      className,
+    ]
+      .filter(Boolean)
+      .join(' ')
+  );
+</script>
+
+<div class={chipClasses} {...rest}>
+  {#if icon}
+    <i class="icon {icon}"></i>
+  {/if}
+  {@render children()}
+  {#if ondelete}
+    <button aria-label="삭제" onclick={ondelete}></button>
+  {/if}
+</div>

package/dist/svelte/atom/Chip.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { Snippet } from 'svelte';
+type ChipTheme = 'default' | 'blue' | 'green' | 'orange' | 'yellow' | 'red';
+type ChipType = 'default' | 'fill' | 'border';
+interface Props {
+    /** Chip content */
+    children: Snippet;
+    /** Theme color */
+    theme?: ChipTheme;
+    /** Style type */
+    type?: ChipType;
+    /** Size */
+    size?: 'sm' | 'md';
+    /** Round corners */
+    round?: boolean;
+    /** Icon class name */
+    icon?: string;
+    /** Delete button handler */
+    ondelete?: () => void;
+    /** Additional class name */
+    class?: string;
+}
+type $$ComponentProps = Props & Record<string, unknown>;
+declare const Chip: import("svelte").Component<$$ComponentProps, {}, "">;
+type Chip = ReturnType<typeof Chip>;
+export default Chip;