@karyl-chan/ui 0.1.0

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@karyl-chan/ui",
+  "version": "0.1.0",
+  "description": "Shared Vue UI primitives, composables, and design tokens used by karyl-chan's bot frontend and plugin webuis.",
+  "type": "module",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/karyl-chan/karyl-chan.git",
+    "directory": "packages/ui"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": {
+      "import": "./src/index.ts",
+      "types": "./src/index.ts"
+    },
+    "./tokens.css": "./src/tokens.css",
+    "./reset.css": "./src/reset.css",
+    "./use-drawer.css": "./src/composables/use-drawer.css",
+    "./use-popover.css": "./src/composables/use-popover.css"
+  },
+  "files": ["src"],
+  "engines": {
+    "node": ">=22"
+  },
+  "scripts": {
+    "typecheck": "vue-tsc --noEmit"
+  },
+  "peerDependencies": {
+    "@iconify/vue": ">=5",
+    "@popperjs/core": ">=2",
+    "nanoid": ">=3",
+    "pinia": ">=3",
+    "vue": ">=3.5",
+    "vue-router": ">=4"
+  },
+  "peerDependenciesMeta": {
+    "vue-router": { "optional": true }
+  },
+  "devDependencies": {
+    "@iconify/vue": "^5.0.0",
+    "@popperjs/core": "^2.11.8",
+    "@vue/test-utils": "^2.4.8",
+    "@vue/tsconfig": "^0.7.0",
+    "jsdom": "^29.0.2",
+    "nanoid": "^3.3.11",
+    "pinia": "^3.0.4",
+    "typescript": "^5.9.3",
+    "vite": "^6.0.7",
+    "vitest": "^4.1.5",
+    "vue": "^3.5.13",
+    "vue-router": "^4.5.0",
+    "vue-tsc": "^2.2.0"
+  }
+}

package/src/components/AppBadge.vue

@@ -0,0 +1,155 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { Icon } from '@iconify/vue';
+
+/**
+ * Compact inline label. Replaces the per-page .tag / .status-pill /
+ * .health-badge / .scope-chip / .stat classes that each carried their
+ * own colour-by-state logic.
+ *
+ * Two axes:
+ *   - `tone` is semantic colour: neutral (default), accent, success,
+ *     warn, danger.
+ *   - `variant` is style strength: soft (subtle background, default),
+ *     outline (border-only, transparent background), solid (filled).
+ *
+ * `size` is the visual weight only — md by default, sm for the tighter
+ * tag-row use case the bot's BehaviorCard trigger badges relied on.
+ */
+
+export type BadgeTone = 'neutral' | 'accent' | 'success' | 'warn' | 'danger';
+export type BadgeVariant = 'soft' | 'outline' | 'solid';
+export type BadgeSize = 'sm' | 'md';
+
+const props = withDefaults(defineProps<{
+    tone?: BadgeTone;
+    variant?: BadgeVariant;
+    size?: BadgeSize;
+    /** Iconify icon shown before the label. */
+    icon?: string;
+    /** Render in monospaced font (e.g. for IDs / keys). */
+    mono?: boolean;
+}>(), {
+    tone: 'neutral',
+    variant: 'soft',
+    size: 'md',
+    icon: '',
+    mono: false
+});
+
+const classes = computed(() => [
+    'app-badge',
+    `app-badge--${props.variant}`,
+    `app-badge--tone-${props.tone}`,
+    `app-badge--${props.size}`,
+    { 'app-badge--mono': props.mono }
+]);
+</script>
+
+<template>
+    <span :class="classes">
+        <!-- Icon sizes itself off Iconify's 1em default, which inherits
+             the badge's font-size — this keeps the icon proportional to
+             the label and avoids a Ref<number> being silently rejected
+             by Iconify's width/height customisation typing. -->
+        <Icon v-if="icon" :icon="icon" class="app-badge__icon" aria-hidden="true" />
+        <slot />
+    </span>
+</template>
+
+<style scoped>
+.app-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.2rem;
+    border-radius: var(--radius-pill);
+    font-weight: 500;
+    line-height: 1;
+    white-space: nowrap;
+    box-sizing: border-box;
+    border: 1px solid transparent;
+}
+.app-badge__icon {
+    flex-shrink: 0;
+    /* Iconify uses font-size for its default 1em sizing; bumping it
+       slightly so the icon balances visually against the label
+       (Material Symbols icons read best at ~1.2× the text height). */
+    font-size: 1.2em;
+}
+.app-badge--md { font-size: 0.74rem; padding: 0.15rem 0.55rem; min-height: 18px; }
+.app-badge--sm { font-size: 0.68rem; padding: 0.1rem 0.45rem; min-height: 15px; }
+
+.app-badge--mono {
+    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+    letter-spacing: 0.01em;
+}
+
+/* ───────── soft (default) ──────────────────────────────────────── */
+.app-badge--soft.app-badge--tone-neutral {
+    background: var(--pill-bg, var(--bg-surface-2));
+    color: var(--text);
+}
+.app-badge--soft.app-badge--tone-accent {
+    background: var(--accent-bg);
+    color: var(--accent-text-strong, var(--accent));
+}
+.app-badge--soft.app-badge--tone-success {
+    background: var(--success-bg);
+    color: var(--success-text);
+}
+.app-badge--soft.app-badge--tone-warn {
+    background: var(--warn-bg);
+    color: var(--warn-text);
+}
+.app-badge--soft.app-badge--tone-danger {
+    background: color-mix(in srgb, var(--danger) 15%, transparent);
+    color: var(--danger);
+}
+
+/* ───────── outline ─────────────────────────────────────────────── */
+.app-badge--outline {
+    background: transparent;
+}
+.app-badge--outline.app-badge--tone-neutral {
+    border-color: var(--border);
+    color: var(--text-muted);
+}
+.app-badge--outline.app-badge--tone-accent {
+    border-color: color-mix(in srgb, var(--accent) 50%, transparent);
+    color: var(--accent-text, var(--accent));
+}
+.app-badge--outline.app-badge--tone-success {
+    border-color: color-mix(in srgb, var(--success-text) 50%, transparent);
+    color: var(--success-text);
+}
+.app-badge--outline.app-badge--tone-warn {
+    border-color: color-mix(in srgb, var(--warn-text) 50%, transparent);
+    color: var(--warn-text);
+}
+.app-badge--outline.app-badge--tone-danger {
+    border-color: color-mix(in srgb, var(--danger) 50%, transparent);
+    color: var(--danger);
+}
+
+/* ───────── solid ───────────────────────────────────────────────── */
+.app-badge--solid.app-badge--tone-neutral {
+    background: var(--text-muted);
+    color: var(--bg-surface);
+}
+.app-badge--solid.app-badge--tone-accent {
+    background: var(--accent);
+    color: var(--text-on-accent);
+}
+.app-badge--solid.app-badge--tone-success {
+    background: var(--success-text);
+    color: var(--success-bg);
+}
+.app-badge--solid.app-badge--tone-warn {
+    background: var(--warn-text);
+    color: var(--warn-bg);
+}
+.app-badge--solid.app-badge--tone-danger {
+    background: var(--danger);
+    color: var(--bg-surface);
+}
+</style>

package/src/components/AppButton.vue

@@ -0,0 +1,171 @@
+<script setup lang="ts">
+import { Icon } from '@iconify/vue';
+
+/**
+ * AppButton — 通用按鈕元件
+ *
+ * 整合 codebase 中各頁面各自實作的 scoped button CSS，
+ * 提供一致的 variant / size / loading / disabled / block 語義。
+ *
+ * Props:
+ *   variant  — 視覺風格，預設 'primary'
+ *   size     — 尺寸，預設 'md'
+ *   loading  — 顯示旋轉 spinner；按鈕同時被 disabled
+ *   disabled — 禁用
+ *   block    — 展開為 100% 寬度
+ *   type     — HTML button type，預設 'button'
+ *   icon     — 左側 iconify icon 名稱（亦可用 #icon slot）
+ *
+ * Slots:
+ *   default  — 按鈕文字
+ *   icon     — 左側圖示（優先於 `icon` prop）
+ *   trailing — 右側圖示 / badge
+ */
+withDefaults(defineProps<{
+    variant?: 'primary' | 'secondary' | 'danger' | 'ghost';
+    size?: 'sm' | 'md' | 'lg';
+    loading?: boolean;
+    disabled?: boolean;
+    block?: boolean;
+    type?: 'button' | 'submit';
+    icon?: string;
+}>(), {
+    variant: 'primary',
+    size: 'md',
+    loading: false,
+    disabled: false,
+    block: false,
+    type: 'button',
+    icon: undefined,
+});
+</script>
+
+<template>
+    <button
+        :type="type"
+        :class="[
+            'app-btn',
+            `app-btn--${variant}`,
+            `app-btn--${size}`,
+            { 'app-btn--block': block, 'app-btn--loading': loading },
+        ]"
+        :disabled="disabled || loading"
+    >
+        <!-- spinner（loading 狀態）-->
+        <Icon
+            v-if="loading"
+            icon="material-symbols:progress-activity"
+            class="app-btn-spinner"
+            aria-hidden="true"
+        />
+
+        <!-- 左側圖示：slot 優先，其次 icon prop -->
+        <slot v-if="!loading" name="icon">
+            <Icon
+                v-if="icon"
+                :icon="icon"
+                width="16"
+                height="16"
+                aria-hidden="true"
+            />
+        </slot>
+
+        <!-- 主要 label -->
+        <span class="app-btn-label"><slot /></span>
+
+        <!-- 右側 slot -->
+        <slot name="trailing" />
+    </button>
+</template>
+
+<style scoped>
+.app-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.35rem;
+    border-radius: var(--radius-sm);
+    font: inherit;
+    font-weight: 500;
+    cursor: pointer;
+    white-space: nowrap;
+    transition: filter 0.1s, background 0.1s, opacity 0.1s;
+    flex-shrink: 0;
+}
+
+/* ── block ──────────────────────────────────────────────────────── */
+.app-btn--block {
+    width: 100%;
+}
+
+/* ── disabled / loading ─────────────────────────────────────────── */
+.app-btn:disabled {
+    opacity: 0.55;
+    cursor: not-allowed;
+}
+
+/* ── sizes ──────────────────────────────────────────────────────── */
+.app-btn--sm {
+    padding: 0.3rem 0.6rem;
+    font-size: 0.82rem;
+}
+.app-btn--md {
+    padding: 0.45rem 0.85rem;
+    font-size: 0.88rem;
+}
+.app-btn--lg {
+    padding: 0.6rem 1.1rem;
+    font-size: 0.95rem;
+}
+
+/* ── primary ────────────────────────────────────────────────────── */
+.app-btn--primary {
+    background: var(--accent);
+    color: var(--text-on-accent);
+    border: 1px solid var(--accent);
+}
+.app-btn--primary:not(:disabled):hover {
+    filter: brightness(1.1);
+}
+
+/* ── secondary ──────────────────────────────────────────────────── */
+.app-btn--secondary {
+    background: var(--bg-surface-2);
+    color: var(--text);
+    border: 1px solid var(--border);
+}
+.app-btn--secondary:not(:disabled):hover {
+    background: var(--bg-surface-hover);
+}
+
+/* ── ghost ──────────────────────────────────────────────────────── */
+.app-btn--ghost {
+    background: transparent;
+    color: var(--text);
+    border: 1px solid var(--border);
+}
+.app-btn--ghost:not(:disabled):hover {
+    background: var(--bg-surface-hover);
+}
+
+/* ── danger ─────────────────────────────────────────────────────── */
+.app-btn--danger {
+    background: transparent;
+    color: var(--danger, #dc2626);
+    border: 1px solid color-mix(in srgb, var(--danger, #dc2626) 40%, transparent);
+}
+.app-btn--danger:not(:disabled):hover {
+    background: color-mix(in srgb, var(--danger, #dc2626) 8%, transparent);
+}
+
+/* ── spinner ─────────────────────────────────────────────────────── */
+@keyframes app-btn-spin { to { transform: rotate(360deg); } }
+.app-btn-spinner {
+    width: 14px;
+    height: 14px;
+    animation: app-btn-spin 0.8s linear infinite;
+    flex-shrink: 0;
+}
+
+.app-btn-label { line-height: 1.2; }
+</style>

package/src/components/AppConfirmDialog.vue

@@ -0,0 +1,176 @@
+<script setup lang="ts">
+/**
+ * AppConfirmDialog — generic confirmation dialog wrapping AppModal.
+ *
+ * `closeOnBackdrop` / `closeOnEscape` are automatically disabled when
+ * `loading` is true to prevent accidental dismissal during async work.
+ *
+ * Labels (`confirmLabel`, `cancelLabel`, `loadingLabel`) are passed in
+ * as props with English defaults — this component does not depend on
+ * vue-i18n. Consumers that need translation pass localized strings.
+ */
+import { Icon } from '@iconify/vue';
+import AppModal from './AppModal.vue';
+
+withDefaults(defineProps<{
+    visible: boolean;
+    title: string;
+    message: string;
+    confirmLabel: string;
+    /** Button colour: 'danger' = red, 'primary' = accent (default). */
+    confirmVariant?: 'primary' | 'danger';
+    loading?: boolean;
+    /** Error message shown in a red box below the message. */
+    error?: string;
+    /** Extra status line, e.g. "Progress: 3 / 10" for batch operations. */
+    progress?: string;
+    /** Cancel button label. */
+    cancelLabel?: string;
+    /** Label shown on the primary button while `loading`. */
+    loadingLabel?: string;
+}>(), {
+    confirmVariant: 'primary',
+    loading: false,
+    error: undefined,
+    progress: undefined,
+    cancelLabel: 'Cancel',
+    loadingLabel: 'Loading…',
+});
+
+const emit = defineEmits<{
+    (e: 'close'): void;
+    (e: 'confirm'): void;
+}>();
+</script>
+
+<template>
+    <AppModal
+        :visible="visible"
+        :title="title"
+        :close-on-backdrop="!loading"
+        :close-on-escape="!loading"
+        @close="emit('close')"
+    >
+        <div class="acd-body">
+            <p class="acd-message">{{ message }}</p>
+            <p v-if="progress" class="acd-progress">{{ progress }}</p>
+            <pre v-if="error" class="acd-error" role="alert">{{ error }}</pre>
+            <div class="acd-actions">
+                <button
+                    type="button"
+                    class="acd-btn acd-btn--ghost"
+                    :disabled="loading"
+                    @click="emit('close')"
+                >
+                    {{ cancelLabel }}
+                </button>
+                <button
+                    type="button"
+                    :class="['acd-btn', confirmVariant === 'danger' ? 'acd-btn--danger' : 'acd-btn--primary']"
+                    :disabled="loading"
+                    @click="emit('confirm')"
+                >
+                    <Icon
+                        v-if="loading"
+                        icon="material-symbols:progress-activity"
+                        width="14"
+                        height="14"
+                        class="acd-spin"
+                    />
+                    {{ loading ? loadingLabel : confirmLabel }}
+                </button>
+            </div>
+        </div>
+    </AppModal>
+</template>
+
+<style scoped>
+/* Inner wrapper: provides padding + flex-column layout + gap.
+   AppModal's body slots are structural-only (no padding), so each leaf
+   component is responsible for its own spacing. */
+.acd-body {
+    padding: 0.9rem 1rem 0.75rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+}
+
+.acd-message {
+    margin: 0;
+    color: var(--text);
+    font-size: 0.9rem;
+    line-height: 1.5;
+}
+
+.acd-progress {
+    margin: 0;
+    color: var(--text-muted);
+    font-size: 0.85rem;
+}
+
+.acd-error {
+    margin: 0;
+    white-space: pre-wrap;
+    background: color-mix(in srgb, var(--danger, #dc2626) 8%, transparent);
+    border: 1px solid color-mix(in srgb, var(--danger, #dc2626) 30%, transparent);
+    border-radius: var(--radius-base);
+    padding: 0.5rem;
+    font-size: 0.78rem;
+    color: var(--danger, #dc2626);
+    max-height: 12rem;
+    overflow: auto;
+}
+
+.acd-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.5rem;
+    padding-top: 0.25rem;
+    border-top: 1px solid var(--border);
+}
+
+.acd-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.3rem;
+    padding: 0.4rem 0.85rem;
+    border-radius: var(--radius-sm);
+    font-size: 0.85rem;
+    font-weight: 500;
+    cursor: pointer;
+}
+.acd-btn:disabled {
+    opacity: 0.55;
+    cursor: not-allowed;
+}
+
+.acd-btn--ghost {
+    background: none;
+    border: 1px solid var(--border);
+    color: var(--text);
+}
+.acd-btn--ghost:not(:disabled):hover {
+    background: var(--bg-surface-hover);
+}
+
+.acd-btn--primary {
+    background: var(--accent);
+    color: var(--text-on-accent);
+    border: none;
+}
+.acd-btn--primary:not(:disabled):hover {
+    filter: brightness(1.1);
+}
+
+.acd-btn--danger {
+    background: var(--danger, #dc2626);
+    color: #fff;
+    border: none;
+}
+.acd-btn--danger:not(:disabled):hover {
+    filter: brightness(1.1);
+}
+
+@keyframes spin { to { transform: rotate(360deg); } }
+.acd-spin { animation: spin 0.8s linear infinite; }
+</style>