@karyl-chan/ui 0.1.0

package/src/components/AppToast.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { useToastStore } from '../stores/toastStore';
+
+const toast = useToastStore();
+</script>
+
+<template>
+    <Teleport to="body">
+        <TransitionGroup name="toast" tag="div" class="toast-container">
+            <div
+                v-for="item in toast.items"
+                :key="item.id"
+                class="toast-item"
+                :class="`toast-item--${item.type}`"
+                @click="toast.dismiss(item.id)"
+            >
+                {{ item.message }}
+            </div>
+        </TransitionGroup>
+    </Teleport>
+</template>
+
+<style scoped>
+.toast-container {
+    position: fixed;
+    bottom: 1rem;
+    right: 1rem;
+    z-index: 9999;
+    display: flex;
+    flex-direction: column-reverse;
+    gap: 0.5rem;
+    pointer-events: none;
+}
+.toast-item {
+    pointer-events: auto;
+    cursor: pointer;
+    max-width: 360px;
+    padding: 0.6rem 0.9rem;
+    border-radius: var(--radius-sm, 6px);
+    font-size: 0.82rem;
+    line-height: 1.4;
+    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
+}
+.toast-item--error {
+    background: var(--danger, #ef4444);
+    color: #fff;
+}
+.toast-item--info {
+    background: var(--bg-surface, #1e1e2e);
+    color: var(--text, #cdd6f4);
+    border: 1px solid var(--border, #45475a);
+}
+.toast-enter-active,
+.toast-leave-active {
+    transition: all 0.25s ease;
+}
+.toast-enter-from {
+    opacity: 0;
+    transform: translateY(0.5rem);
+}
+.toast-leave-to {
+    opacity: 0;
+    transform: translateX(1rem);
+}
+</style>

package/src/components/AppToggle.vue

@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+/**
+ * Standalone on/off switch. Replaces the per-page hand-rolled toggles
+ * that previously lived inside BehaviorCard / PluginCard / etc., all
+ * of which had byte-identical CSS for the 32×18 pill + 14px knob.
+ *
+ * Two sizes: `md` (32×18, the default — matches every existing call
+ * site) and `sm` (26×15) for denser rows.
+ *
+ * `ariaLabel` is required by convention: the toggle has no visible
+ * text, so a programmatic name is the only signal screen readers get.
+ * Pass an empty string if the toggle is paired with a `<label>` that
+ * already names it (rare — most call sites do not).
+ */
+
+const props = withDefaults(defineProps<{
+    modelValue: boolean;
+    disabled?: boolean;
+    size?: 'sm' | 'md';
+    ariaLabel?: string;
+    /** Tooltip text. Caller typically derives this from the current state. */
+    title?: string;
+}>(), {
+    disabled: false,
+    size: 'md',
+    ariaLabel: '',
+    title: ''
+});
+
+const emit = defineEmits<{
+    (e: 'update:modelValue', value: boolean): void;
+}>();
+
+const classes = computed(() => ({
+    'app-toggle': true,
+    [`app-toggle--${props.size}`]: true,
+    'app-toggle--on': props.modelValue
+}));
+
+function onClick(): void {
+    if (props.disabled) return;
+    emit('update:modelValue', !props.modelValue);
+}
+</script>
+
+<template>
+    <button
+        type="button"
+        role="switch"
+        :class="classes"
+        :aria-checked="modelValue ? 'true' : 'false'"
+        :aria-label="ariaLabel || undefined"
+        :title="title || undefined"
+        :disabled="disabled"
+        @click.stop="onClick"
+    >
+        <span class="app-toggle__slider" aria-hidden="true"></span>
+    </button>
+</template>
+
+<style scoped>
+.app-toggle {
+    position: relative;
+    flex-shrink: 0;
+    cursor: pointer;
+    border: none;
+    padding: 0;
+    background: none;
+}
+.app-toggle:disabled { cursor: not-allowed; opacity: 0.6; }
+
+.app-toggle--md { width: 32px; height: 18px; }
+.app-toggle--sm { width: 26px; height: 15px; }
+
+.app-toggle__slider {
+    position: absolute;
+    inset: 0;
+    background: var(--border-strong);
+    border-radius: 999px;
+    transition: background var(--transition-base, 0.15s);
+}
+.app-toggle__slider::before {
+    content: '';
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    background: var(--bg-surface);
+    border-radius: 50%;
+    transition: transform var(--transition-base, 0.15s);
+}
+.app-toggle--md .app-toggle__slider::before { width: 14px; height: 14px; }
+.app-toggle--sm .app-toggle__slider::before { width: 11px; height: 11px; }
+
+.app-toggle--on .app-toggle__slider { background: var(--accent); }
+.app-toggle--md.app-toggle--on .app-toggle__slider::before { transform: translateX(14px); }
+.app-toggle--sm.app-toggle--on .app-toggle__slider::before { transform: translateX(11px); }
+
+.app-toggle:focus-visible {
+    outline: 2px solid var(--accent);
+    outline-offset: 2px;
+    border-radius: 999px;
+}
+</style>

package/src/components/Draggable.vue

@@ -0,0 +1,178 @@
+<script setup lang="ts">
+import { onBeforeUnmount, ref } from 'vue'
+
+interface Props {
+    /** 邊界元素（預設為父元素） */
+    bounds?: HTMLElement | null
+    /** 距離邊界的最小 padding（px） */
+    boundaryPadding?: number
+    /** 判定拖曳起始的位移門檻（px），避免誤判點擊 */
+    dragThreshold?: number
+    /** 是否啟用拖曳 */
+    disabled?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    bounds: null,
+    boundaryPadding: 0,
+    dragThreshold: 5,
+    disabled: false,
+})
+
+const emit = defineEmits<{
+    (e: 'dragStart'): void
+    /** 拖曳放開的當下觸發（尚未完成 snap 回邊界） */
+    (e: 'dragEnd'): void
+    /** 位置穩定（含 snap 動畫結束）後觸發 */
+    (e: 'positionSettled'): void
+}>()
+
+const rootRef = ref<HTMLElement | null>(null)
+const dragX = ref(0)
+const dragY = ref(0)
+const isDragging = ref(false)
+const isSnapping = ref(false)
+
+let startPointerX = 0
+let startPointerY = 0
+let startDragX = 0
+let startDragY = 0
+let pointerId = -1
+let hasStartedDrag = false
+
+function resolveBoundsRect(): DOMRect | null {
+    const boundsEl = props.bounds ?? rootRef.value?.parentElement
+    return boundsEl ? boundsEl.getBoundingClientRect() : null
+}
+
+function onPointerDown(e: PointerEvent) {
+    if (props.disabled || e.button !== 0 || !rootRef.value)
+        return
+    startPointerX = e.clientX
+    startPointerY = e.clientY
+    startDragX = dragX.value
+    startDragY = dragY.value
+    hasStartedDrag = false
+    pointerId = e.pointerId
+    isSnapping.value = false
+    window.addEventListener('pointermove', onPointerMove)
+    window.addEventListener('pointerup', onPointerUp)
+    window.addEventListener('pointercancel', onPointerUp)
+}
+
+function onPointerMove(e: PointerEvent) {
+    if (e.pointerId !== pointerId)
+        return
+    const dx = e.clientX - startPointerX
+    const dy = e.clientY - startPointerY
+    if (!hasStartedDrag) {
+        if (Math.hypot(dx, dy) < props.dragThreshold)
+            return
+        hasStartedDrag = true
+        isDragging.value = true
+        emit('dragStart')
+    }
+    dragX.value = startDragX + dx
+    dragY.value = startDragY + dy
+}
+
+function onPointerUp(e: PointerEvent) {
+    if (e.pointerId !== pointerId)
+        return
+    window.removeEventListener('pointermove', onPointerMove)
+    window.removeEventListener('pointerup', onPointerUp)
+    window.removeEventListener('pointercancel', onPointerUp)
+    pointerId = -1
+
+    if (!hasStartedDrag) {
+        isDragging.value = false
+        return
+    }
+    isDragging.value = false
+    hasStartedDrag = false
+    emit('dragEnd')
+
+    // 攔截因拖曳結束觸發的 click，避免意外觸發按鈕動作
+    const suppressClick = (clickE: Event) => {
+        clickE.stopPropagation()
+        clickE.preventDefault()
+        window.removeEventListener('click', suppressClick, true)
+    }
+    window.addEventListener('click', suppressClick, true)
+    // 保險：若 click 未如預期觸發，下一輪 tick 移除
+    setTimeout(() => window.removeEventListener('click', suppressClick, true), 0)
+
+    // 超出邊界時以 transition 漸變移回
+    const el = rootRef.value
+    const boundsRect = resolveBoundsRect()
+    if (!el || !boundsRect)
+        return
+    const elRect = el.getBoundingClientRect()
+    const pad = props.boundaryPadding
+    let adjustX = 0
+    let adjustY = 0
+    if (elRect.left < boundsRect.left + pad)
+        adjustX = (boundsRect.left + pad) - elRect.left
+    else if (elRect.right > boundsRect.right - pad)
+        adjustX = (boundsRect.right - pad) - elRect.right
+    if (elRect.top < boundsRect.top + pad)
+        adjustY = (boundsRect.top + pad) - elRect.top
+    else if (elRect.bottom > boundsRect.bottom - pad)
+        adjustY = (boundsRect.bottom - pad) - elRect.bottom
+
+    if (adjustX || adjustY) {
+        isSnapping.value = true
+        dragX.value += adjustX
+        dragY.value += adjustY
+    }
+    else {
+        // 不需 snap：位置已穩定
+        emit('positionSettled')
+    }
+}
+
+function onTransitionEnd(e: TransitionEvent) {
+    // 只處理 root 自身的 transform 過渡；避免子元素（如 AiStyleButton 的 outline）
+    // 的 transform transition 冒泡後誤觸 positionSettled
+    if (e.target !== rootRef.value)
+        return
+    if (e.propertyName === 'transform') {
+        isSnapping.value = false
+        emit('positionSettled')
+    }
+}
+
+onBeforeUnmount(() => {
+    window.removeEventListener('pointermove', onPointerMove)
+    window.removeEventListener('pointerup', onPointerUp)
+    window.removeEventListener('pointercancel', onPointerUp)
+})
+</script>
+
+<template>
+    <div
+         ref="rootRef"
+         class="draggable"
+         :class="{ 'is-dragging': isDragging, 'is-snapping': isSnapping }"
+         :style="{ transform: `translate(${dragX}px, ${dragY}px)` }"
+         @pointerdown="onPointerDown"
+         @transitionend="onTransitionEnd">
+        <slot />
+    </div>
+</template>
+
+<style scoped>
+.draggable {
+    touch-action: none;
+    cursor: grab;
+}
+
+.draggable.is-dragging {
+    cursor: grabbing;
+    user-select: none;
+}
+
+.draggable.is-snapping {
+    transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
+}
+</style>

package/src/components/GlobalConfirmDialog.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useConfirm } from '../composables/use-confirm';
+import AppConfirmDialog from './AppConfirmDialog.vue';
+
+const { pending, handleConfirm, handleClose } = useConfirm();
+
+const visible = computed(() => pending.value !== null);
+const opts = computed(() => pending.value?.options ?? {
+    title: '', message: '', confirmLabel: ''
+});
+</script>
+
+<template>
+    <AppConfirmDialog
+        :visible="visible"
+        :title="opts.title"
+        :message="opts.message"
+        :confirm-label="opts.confirmLabel ?? 'OK'"
+        :confirm-variant="opts.confirmVariant ?? 'primary'"
+        :cancel-label="opts.cancelLabel"
+        @confirm="handleConfirm"
+        @close="handleClose"
+    />
+</template>

package/src/components/UnreadPill.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const props = defineProps<{ count: number }>();
+
+const display = computed(() => (props.count > 99 ? '99+' : String(props.count)));
+</script>
+
+<template>
+    <span v-if="count > 0" class="unread-pill">{{ display }}</span>
+</template>
+
+<style scoped>
+.unread-pill {
+    flex-shrink: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 18px;
+    height: 18px;
+    padding: 0 6px;
+    border-radius: 9px;
+    font-size: 12px;
+    font-weight: bold;
+    background: var(--unread-accent, #f23f43);
+    color: #fff;
+}
+</style>

package/src/components/UserAvatar.vue

@@ -0,0 +1,114 @@
+<script setup lang="ts">
+/**
+ * UserAvatar — circular avatar `<img>` with letter-initial fallback.
+ *
+ * Three animation modes:
+ * - `animate="never"` (default): always serve the still frame.
+ * - `animate="hover"`: still by default, animated while the cursor is
+ *   over the avatar — matches Discord's DM-list behaviour. The hover
+ *   state is owned internally; if the caller needs hover state for
+ *   other reasons, drive it via `animated` prop instead.
+ * - `animate="always"`: always animated (e.g. inside an open profile
+ *   card where the user is actively looking at the avatar).
+ *
+ * The "is this asset animated?" check is automatic — non-animated
+ * Discord URLs ignore the `&animated=true` param, so we don't need
+ * to special-case them in the consumer.
+ */
+import { computed, ref } from 'vue';
+import { animatedAvatarUrl, isAnimatedAvatar } from '../lib/avatar';
+
+const props = withDefaults(defineProps<{
+    /** Avatar URL (Discord CDN, or anything else). Null/undefined → fallback. */
+    src?: string | null;
+    /** Used to derive the fallback letter when there's no `src`. */
+    name?: string | null;
+    /** Pixel size of the circle. Default 40. */
+    size?: number;
+    /** When and how to swap to the animated variant. */
+    animate?: 'never' | 'hover' | 'always';
+    /**
+     * Force-override for the "is hovered" half of `animate: hover`.
+     * Lets the parent share hover state across multiple avatars
+     * (e.g. one row hover lighting up all avatars in that row).
+     */
+    animated?: boolean;
+    /** Alt text. Default empty (avatars are decorative when paired with a label). */
+    alt?: string;
+}>(), {
+    src: null,
+    name: null,
+    size: 40,
+    animate: 'never',
+    animated: undefined,
+    alt: '',
+});
+
+const localHover = ref(false);
+
+const effectiveSrc = computed<string | null>(() => {
+    if (!props.src) return null;
+    if (!isAnimatedAvatar(props.src)) return props.src;
+    const shouldAnimate =
+        props.animate === 'always' ||
+        (props.animate === 'hover' && (props.animated ?? localHover.value));
+    return shouldAnimate ? animatedAvatarUrl(props.src) : props.src;
+});
+
+const initial = computed<string>(() => {
+    const source = (props.name ?? props.alt ?? '').trim();
+    if (!source) return '?';
+    // Take the first grapheme — covers CJK / emoji single-char display
+    // names where charAt(0) would split a surrogate pair.
+    return [...source][0]?.toUpperCase() ?? '?';
+});
+
+const sizeStyle = computed(() => ({
+    width: `${props.size}px`,
+    height: `${props.size}px`,
+    fontSize: `${Math.round(props.size * 0.42)}px`,
+}));
+</script>
+
+<template>
+    <div
+        class="user-avatar"
+        :class="{ 'has-image': !!effectiveSrc }"
+        :style="sizeStyle"
+        @mouseenter="localHover = true"
+        @mouseleave="localHover = false"
+    >
+        <img
+            v-if="effectiveSrc"
+            :src="effectiveSrc"
+            :alt="alt"
+            draggable="false"
+        />
+        <span v-else aria-hidden="true">{{ initial }}</span>
+    </div>
+</template>
+
+<style scoped>
+.user-avatar {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    overflow: hidden;
+    background: var(--accent);
+    color: var(--text-on-accent);
+    font-weight: 600;
+    line-height: 1;
+    flex-shrink: 0;
+    user-select: none;
+}
+.user-avatar.has-image {
+    background: var(--bg-surface-2);
+}
+.user-avatar img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+}
+</style>