@karyl-chan/ui 0.1.0

package/src/components/AppItemCard.vue

@@ -0,0 +1,216 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { Icon } from '@iconify/vue';
+
+/**
+ * List-item card with an expandable body — the shared chrome that
+ * BehaviorCard and PluginCard each re-implemented (and that PluginCard
+ * was the uglier of the two, with a hand-rolled menu and no source
+ * stripe).
+ *
+ * The component owns:
+ *   - Outer card border + radius + background.
+ *   - Optional left-edge accent stripe (`accentBar` prop).
+ *   - The header row that holds:
+ *       - `#leading` slot   (drag handle / lock icon, no click semantics)
+ *       - The expand button — chevron + `#title` slot, click toggles `expanded`
+ *       - `#trailing` slot  (badges / toggles / menus)
+ *   - The body container that mounts the default slot when expanded.
+ *   - Disabled-style strikethrough on the title when `disabled` is true.
+ *
+ * Everything domain-specific (which badge to show, whether to include a
+ * toggle, what's in the form) stays at the caller. This deliberately
+ * does NOT take an `enabled` prop or render an internal toggle — those
+ * are call-site decisions, and forcing them into the API would push
+ * BehaviorCard's protected-system rules and PluginCard's per-status
+ * delete-only menu logic up into ui.
+ */
+
+export type AccentBarTone = 'neutral' | 'accent' | 'success' | 'warn' | 'danger';
+
+const props = withDefaults(defineProps<{
+    /** Controlled expansion. Pair with `@update:expanded`. */
+    expanded?: boolean;
+    /** Strike-through + muted title — used by BehaviorCard when off. */
+    disabled?: boolean;
+    /** Left-edge 3px accent stripe. Use to indicate source / kind. */
+    accentBar?: AccentBarTone | null;
+    /** Custom CSS colour for `accentBar` — overrides the tone palette. */
+    accentBarColor?: string;
+}>(), {
+    expanded: false,
+    disabled: false,
+    accentBar: null,
+    accentBarColor: ''
+});
+
+const emit = defineEmits<{
+    (e: 'update:expanded', value: boolean): void;
+    /** Fired regardless of who owns the expanded state. */
+    (e: 'toggle', next: boolean): void;
+}>();
+
+const rootClass = computed(() => [
+    'app-item-card',
+    {
+        'app-item-card--disabled': props.disabled,
+        'app-item-card--bar': !!props.accentBar || !!props.accentBarColor
+    }
+]);
+
+const barStyle = computed(() => {
+    if (props.accentBarColor) return { background: props.accentBarColor };
+    if (!props.accentBar) return undefined;
+    return { background: `var(--app-item-card-bar-${props.accentBar})` };
+});
+
+function toggle(): void {
+    const next = !props.expanded;
+    emit('update:expanded', next);
+    emit('toggle', next);
+}
+</script>
+
+<template>
+    <article :class="rootClass">
+        <div v-if="accentBar || accentBarColor" class="app-item-card__bar" :style="barStyle" aria-hidden="true"></div>
+        <div class="app-item-card__inner">
+            <header class="app-item-card__head" :class="{ 'app-item-card__head--has-body': expanded }">
+                <div v-if="$slots.leading" class="app-item-card__leading">
+                    <slot name="leading" />
+                </div>
+                <button
+                    type="button"
+                    class="app-item-card__expander"
+                    :aria-expanded="expanded"
+                    @click="toggle"
+                >
+                    <Icon
+                        :icon="expanded ? 'material-symbols:expand-less-rounded' : 'material-symbols:expand-more-rounded'"
+                        width="18"
+                        height="18"
+                        class="app-item-card__chevron"
+                    />
+                    <span class="app-item-card__title">
+                        <slot name="title" />
+                    </span>
+                </button>
+                <div v-if="$slots.trailing" class="app-item-card__trailing">
+                    <slot name="trailing" />
+                </div>
+            </header>
+            <div v-if="expanded" class="app-item-card__body">
+                <slot />
+                <footer v-if="$slots.footer" class="app-item-card__footer">
+                    <slot name="footer" />
+                </footer>
+            </div>
+        </div>
+    </article>
+</template>
+
+<style scoped>
+.app-item-card {
+    /* Bar tone palette — sourced from semantic tokens so themes flow through. */
+    --app-item-card-bar-neutral: var(--text-muted);
+    --app-item-card-bar-accent: var(--accent);
+    --app-item-card-bar-success: var(--success-text);
+    --app-item-card-bar-warn: var(--warn-text);
+    --app-item-card-bar-danger: var(--danger);
+
+    display: flex;
+    flex-direction: row;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-base);
+    background: var(--bg-surface);
+    overflow: hidden;
+}
+.app-item-card--disabled .app-item-card__title {
+    color: var(--text-muted);
+    text-decoration: line-through;
+}
+
+.app-item-card__bar {
+    width: 3px;
+    flex-shrink: 0;
+    border-radius: var(--radius-base) 0 0 var(--radius-base);
+}
+
+.app-item-card__inner {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+}
+
+.app-item-card__head {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.45rem 0.75rem 0.45rem 0.4rem;
+    background: var(--bg-page);
+    border-bottom: 1px solid transparent;
+}
+.app-item-card__head--has-body {
+    border-bottom-color: var(--border);
+}
+
+.app-item-card__leading {
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+}
+
+.app-item-card__expander {
+    flex: 1;
+    min-width: 0;
+    background: none;
+    border: none;
+    text-align: left;
+    cursor: pointer;
+    color: var(--text);
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+    padding: 0.25rem 0.1rem;
+    overflow: hidden;
+    font: inherit;
+}
+.app-item-card__expander:hover { color: var(--text-strong); }
+.app-item-card__expander:focus-visible {
+    outline: 2px solid var(--accent);
+    outline-offset: -1px;
+    border-radius: var(--radius-sm);
+}
+.app-item-card__chevron {
+    color: var(--text-muted);
+    flex-shrink: 0;
+}
+.app-item-card__title {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+    overflow: hidden;
+}
+
+.app-item-card__trailing {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+    flex-shrink: 0;
+}
+
+.app-item-card__body {
+    padding: 0.75rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.6rem;
+}
+.app-item-card__footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.5rem;
+}
+</style>

package/src/components/AppMenu.vue

@@ -0,0 +1,197 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useBreakpoint } from '../composables/use-breakpoint';
+import { usePopover, type Placement } from '../composables/use-popover';
+import { useDrawer } from '../composables/use-drawer';
+
+/**
+ * Viewport-aware menu:
+ * - Desktop → popover anchored to the trigger via usePopover.
+ * - Mobile  → bottom drawer (mirrors AppPopover so menu surfaces
+ *   feel consistent with picker / popover surfaces on touch).
+ *
+ * The trigger slot is wrapped in a click-bubbling `display: contents`
+ * span so the wrapper doesn't affect the caller's layout. Clicking
+ * any AppMenuItem inside the default slot closes the menu when
+ * `closeOnItemClick` is true (the default — same as the original
+ * desktop-only AppMenu it replaces).
+ */
+const props = withDefaults(defineProps<{
+    placement?: Placement;
+    /** Distance [skidding, distance] between trigger and menu. Default: [0, 8]. */
+    offset?: [number, number];
+    /** Close after the user clicks any item inside the menu. Default: true. */
+    closeOnItemClick?: boolean;
+    /** Optional heading rendered at the top of the mobile drawer. */
+    drawerTitle?: string;
+}>(), {
+    placement: 'bottom-end',
+    closeOnItemClick: true
+});
+
+const { isMobile } = useBreakpoint();
+
+const isOpen = ref(false);
+function toggle() { isOpen.value = !isOpen.value; }
+function close() { isOpen.value = false; }
+
+const triggerWrapRef = ref<HTMLElement | null>(null);
+const contentEl = ref<HTMLElement | null>(null);
+
+// Anchor the desktop popover against the slot's first real child —
+// the wrapper itself uses display: contents and has no usable layout
+// rectangle in some browsers. Same trick AppPopover plays.
+const anchorRef = computed<HTMLElement | null>(() => {
+    const wrap = triggerWrapRef.value;
+    if (!wrap) return null;
+    return (wrap.firstElementChild as HTMLElement | null) ?? wrap;
+});
+
+const popoverVisible = computed(() => !isMobile.value && isOpen.value);
+const drawerVisible = computed(() => isMobile.value && isOpen.value);
+
+usePopover(anchorRef, contentEl, {
+    placement: props.placement,
+    trigger: 'manual',
+    offset: props.offset ?? [0, 8],
+    teleportTo: 'body',
+    visible: popoverVisible,
+    closeOnClickOutside: true,
+    closeOnEscape: true,
+    closeOnContentClick: props.closeOnItemClick,
+    onHide: () => {
+        // Mirror self-close (Escape / click-outside / item-click) back
+        // onto the local open ref. Guard against the false branch
+        // firing during a mobile/desktop swap, which would otherwise
+        // recurse the close.
+        if (popoverVisible.value) close();
+    }
+});
+
+const { backdropClass, panelClass, backdropTransition, panelTransition } = useDrawer({
+    visible: drawerVisible,
+    placement: 'bottom',
+    closeOnEscape: true,
+    onClose: close
+});
+
+function onContentClick() {
+    if (props.closeOnItemClick) close();
+}
+</script>
+
+<template>
+    <span
+        ref="triggerWrapRef"
+        class="app-menu-trigger"
+        @click="toggle"
+    >
+        <slot name="trigger" :is-open="isOpen" :toggle="toggle" :close="close" />
+    </span>
+
+    <!-- Desktop popover content. Always rendered so usePopover binds on
+         mount; visibility gated by popoverVisible. -->
+    <div
+        ref="contentEl"
+        class="app-menu app-menu--hidden"
+        role="menu"
+        @click="onContentClick"
+    >
+        <slot :close="close" :is-open="isOpen" />
+    </div>
+
+    <!-- Mobile drawer branch — slides up from the bottom edge,
+         matches AppPopover's drawer chrome. z-index sits above
+         AppModal (1500) so a menu opened from inside a modal still
+         floats on top. -->
+    <Teleport v-if="isMobile" to="body">
+        <Transition :name="backdropTransition">
+            <div
+                v-if="drawerVisible"
+                :class="[backdropClass, 'app-menu-drawer-backdrop']"
+                :style="{ zIndex: 2000 }"
+                @click="close"
+            />
+        </Transition>
+        <Transition :name="panelTransition">
+            <div
+                v-if="drawerVisible"
+                :class="[panelClass, 'app-menu-drawer-panel']"
+                data-placement="bottom"
+                :style="{ zIndex: 2001 }"
+                role="menu"
+                aria-modal="true"
+                @click="onContentClick"
+            >
+                <header v-if="drawerTitle" class="app-menu-drawer-title">{{ drawerTitle }}</header>
+                <div class="app-menu-drawer-body">
+                    <slot :close="close" :is-open="isOpen" />
+                </div>
+            </div>
+        </Transition>
+    </Teleport>
+</template>
+
+<style scoped>
+.app-menu-trigger {
+    display: contents;
+    cursor: pointer;
+}
+.app-menu {
+    min-width: 180px;
+    padding: 0.3rem 0;
+    background: var(--bg-surface);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-base);
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
+    z-index: 1600;
+}
+/* .app-menu--hidden no longer sets display:none — visibility is managed
+   exclusively via inline style by use-popover to avoid specificity
+   conflicts (inline style wins over class; removing it would let the
+   class re-apply display:none and break the popover). */
+.app-menu-drawer-panel {
+    max-height: 70vh;
+    background: var(--bg-surface);
+    border-top: 1px solid var(--border);
+    border-radius: 12px 12px 0 0;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    padding-bottom: env(safe-area-inset-bottom, 0px);
+}
+.app-menu-drawer-panel::before {
+    content: '';
+    display: block;
+    width: 36px;
+    height: 4px;
+    border-radius: 2px;
+    background: var(--text-muted);
+    opacity: 0.35;
+    margin: 0.4rem auto 0;
+    flex-shrink: 0;
+}
+.app-menu-drawer-title {
+    padding: 0.6rem 1rem 0.5rem;
+    font-weight: 600;
+    font-size: 0.95rem;
+    color: var(--text-strong);
+    border-bottom: 1px solid var(--border);
+    flex-shrink: 0;
+}
+.app-menu-drawer-body {
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding: 0.3rem 0;
+}
+/* Bump menu items inside the mobile drawer to a comfortable touch
+   target — the desktop popover already has acceptable spacing for
+   pointer use, but cramped rows on a touchscreen are easy to misfire. */
+.app-menu-drawer-body :deep(.app-menu-item) {
+    padding: 0.85rem 1rem;
+    font-size: 1rem;
+    min-height: 48px;
+}
+</style>

package/src/components/AppMenuItem.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+defineProps<{
+    disabled?: boolean;
+    /** If true, the item is rendered with danger styling (e.g., sign out). */
+    danger?: boolean;
+}>();
+</script>
+
+<template>
+    <button
+        type="button"
+        role="menuitem"
+        :class="['app-menu-item', { 'is-danger': danger }]"
+        :disabled="disabled"
+    >
+        <slot />
+    </button>
+</template>
+
+<style scoped>
+.app-menu-item {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem 0.85rem;
+    background: none;
+    border: none;
+    color: var(--text);
+    font: inherit;
+    font-size: 0.9rem;
+    text-align: left;
+    cursor: pointer;
+}
+.app-menu-item:hover:not(:disabled) {
+    background: var(--bg-surface-hover);
+}
+.app-menu-item:disabled {
+    opacity: 0.5;
+    cursor: default;
+}
+.app-menu-item.is-danger { color: var(--danger); }
+</style>