feat(web): add shared menu, switch and chip primitives

.changeset/web-ui-primitives.md

@@ -0,0 +1,5 @@
+---
+"@pymodel/pythinker-code": patch
+---
+
+Add four shared UI primitives to the web app: `Popover`, `MenuRow`, `SwitchToggle` and `Chip`. `Popover` holds the anchored-menu positioning that each menu used to write for itself, including the flip above the trigger and the viewport clamp. `MenuRow` carries the standard list row, sized from `--ui-font-size` so the font-size setting still scales it. All four style themselves only from theme tokens, and a guard test fails on any colour literal.

apps/pythinker-web/src/components/ui/Chip.vue

@@ -0,0 +1,100 @@
+<script setup lang="ts">
+type ChipVariant = 'neutral' | 'active';
+
+const props = withDefaults(defineProps<{
+  label?: string;
+  variant?: ChipVariant;
+}>(), {
+  variant: 'neutral',
+});
+
+const emit = defineEmits<{
+  click: [event: MouseEvent];
+}>();
+</script>
+
+<template>
+  <button
+    type="button"
+    class="chip"
+    :class="variant"
+    @click="emit('click', $event)"
+  >
+    <span class="icon" aria-hidden="true">
+      <span v-if="$slots.icon" class="icon-default"><slot name="icon" /></span>
+      <span class="close-glyph">×</span>
+    </span>
+    <span v-if="label || $slots.label || $slots.default" class="label">
+      <slot name="label">{{ label }}<slot /></slot>
+    </span>
+  </button>
+</template>
+
+<style scoped>
+.chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  max-width: 100%;
+  box-sizing: border-box;
+  padding: 6px;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  background: none;
+  color: var(--ink);
+  font: inherit;
+  cursor: pointer;
+}
+
+.chip.neutral {
+  background: var(--panel);
+}
+
+.chip.active {
+  border-color: color-mix(in srgb, var(--blue) 30%, var(--line));
+  background: color-mix(in srgb, var(--soft) 60%, var(--panel));
+  color: var(--blue);
+}
+
+.chip:hover {
+  background: var(--hover);
+}
+
+.icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 16px;
+  width: 16px;
+  height: 16px;
+  line-height: 1;
+}
+
+.icon-default :deep(svg) {
+  display: block;
+  width: 16px;
+  height: 16px;
+}
+
+.close-glyph {
+  display: none;
+  font-size: var(--ui-font-size-lg);
+  line-height: 1;
+}
+
+.chip:hover .icon-default {
+  display: none;
+}
+
+.chip:hover .close-glyph {
+  display: inline;
+}
+
+.label {
+  min-width: 0;
+  max-width: 160px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>

apps/pythinker-web/src/components/ui/MenuRow.vue

@@ -0,0 +1,106 @@
+<script setup lang="ts">
+withDefaults(defineProps<{
+  count?: number;
+  active?: boolean;
+  selected?: boolean;
+  disabled?: boolean;
+}>(), {
+  active: false,
+  selected: false,
+  disabled: false,
+});
+</script>
+
+<template>
+  <button
+    type="button"
+    class="menu-row"
+    :class="{ active, selected, disabled }"
+    :disabled="disabled"
+  >
+    <span v-if="$slots.leading" class="leading"><slot name="leading" /></span>
+    <span class="label">
+      <slot name="label"><slot /></slot>
+    </span>
+    <span v-if="count !== undefined" class="count">{{ count }}</span>
+    <span v-if="$slots.trailing" class="trailing"><slot name="trailing" /></span>
+  </button>
+</template>
+
+<style scoped>
+.menu-row {
+  /* Default 14px: 14 + 13 = 27px; 14 - 1 = 13px. */
+  width: 100%;
+  height: calc(var(--ui-font-size) + 13px);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  box-sizing: border-box;
+  padding: 0 8px;
+  border: 0;
+  border-radius: var(--r-md);
+  background: none;
+  color: var(--ink);
+  font-family: inherit;
+  font-size: calc(var(--ui-font-size) - 1px);
+  font-weight: 400;
+  line-height: 1;
+  text-align: left;
+  cursor: pointer;
+}
+
+.menu-row:hover {
+  background: var(--hover);
+}
+
+.menu-row.active,
+.menu-row.selected {
+  background: color-mix(in srgb, var(--soft) 45%, var(--panel));
+}
+
+.menu-row:focus-visible {
+  outline: 2px solid var(--blue);
+  outline-offset: -2px;
+}
+
+.menu-row.disabled,
+.menu-row:disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.leading {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 14px;
+  width: 14px;
+  height: 14px;
+}
+
+.leading :deep(svg) {
+  display: block;
+  width: 14px;
+  height: 14px;
+}
+
+.label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.count {
+  flex: none;
+  color: var(--muted);
+}
+
+.trailing {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  margin-left: auto;
+}
+</style>

apps/pythinker-web/src/components/ui/Popover.vue

@@ -0,0 +1,151 @@
+<script setup lang="ts">
+import { nextTick, onBeforeUnmount, ref, watch } from 'vue';
+
+type Alignment = 'start' | 'end';
+
+const props = withDefaults(defineProps<{
+  anchor: HTMLElement | null;
+  open: boolean;
+  align?: Alignment;
+}>(), {
+  align: 'start',
+});
+
+const emit = defineEmits<{
+  close: [];
+}>();
+
+const panelRef = ref<HTMLElement | null>(null);
+const panelStyle = ref<Record<string, string>>({});
+let opener: HTMLElement | null = null;
+let listenersAttached = false;
+
+function positionPanel(): void {
+  const anchor = props.anchor;
+  const panel = panelRef.value;
+  if (!anchor || !panel) return;
+
+  const anchorRect = anchor.getBoundingClientRect();
+  const gap = 4;
+  const margin = 16;
+  const panelWidth = panel.offsetWidth;
+  const panelHeight = panel.offsetHeight;
+  const preferredLeft = props.align === 'end'
+    ? anchorRect.right - panelWidth
+    : anchorRect.left;
+  const maxLeft = Math.max(margin, window.innerWidth - margin - panelWidth);
+  let left = Math.min(Math.max(preferredLeft, margin), maxLeft);
+  let top = anchorRect.bottom + gap;
+
+  if (top + panelHeight > window.innerHeight - margin) {
+    top = Math.max(margin, anchorRect.top - panelHeight - gap);
+  }
+
+  const maxTop = Math.max(margin, window.innerHeight - margin - panelHeight);
+  top = Math.min(Math.max(top, margin), maxTop);
+  left = Math.min(Math.max(left, margin), maxLeft);
+  panelStyle.value = {
+    top: `${Math.round(top)}px`,
+    left: `${Math.round(left)}px`,
+  };
+}
+
+function onViewportChange(): void {
+  if (props.open) positionPanel();
+}
+
+function onPointerDown(event: PointerEvent): void {
+  const target = event.target;
+  if (target instanceof Node && (panelRef.value?.contains(target) || props.anchor?.contains(target))) return;
+  emit('close');
+}
+
+function onKeydown(event: KeyboardEvent): void {
+  if (event.key === 'Escape') emit('close');
+}
+
+function attachListeners(): void {
+  if (listenersAttached) return;
+  document.addEventListener('pointerdown', onPointerDown);
+  document.addEventListener('keydown', onKeydown);
+  document.addEventListener('scroll', onViewportChange, true);
+  window.addEventListener('resize', onViewportChange);
+  listenersAttached = true;
+}
+
+function detachListeners(): void {
+  if (!listenersAttached) return;
+  document.removeEventListener('pointerdown', onPointerDown);
+  document.removeEventListener('keydown', onKeydown);
+  document.removeEventListener('scroll', onViewportChange, true);
+  window.removeEventListener('resize', onViewportChange);
+  listenersAttached = false;
+}
+
+function restoreFocusIfNeeded(): void {
+  const panel = panelRef.value;
+  const activeElement = document.activeElement;
+  if (!panel || !(activeElement instanceof Node) || !panel.contains(activeElement)) return;
+
+  const target = props.anchor ?? opener;
+  if (target?.isConnected) target.focus();
+}
+
+watch(() => props.open, (open, wasOpen) => {
+  if (open) {
+    if (!wasOpen) {
+      opener = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    }
+    void nextTick(() => {
+      if (!props.open) return;
+      positionPanel();
+      attachListeners();
+    });
+    return;
+  }
+
+  restoreFocusIfNeeded();
+  detachListeners();
+  panelStyle.value = {};
+}, { immediate: true });
+
+watch([() => props.anchor, () => props.align], () => {
+  if (props.open) void nextTick(positionPanel);
+});
+
+onBeforeUnmount(() => {
+  restoreFocusIfNeeded();
+  detachListeners();
+});
+</script>
+
+<template>
+  <Teleport to="body">
+    <div
+      v-if="open"
+      ref="panelRef"
+      class="popover"
+      :style="panelStyle"
+      role="menu"
+      tabindex="-1"
+    >
+      <slot />
+    </div>
+  </Teleport>
+</template>
+
+<style scoped>
+.popover {
+  position: fixed;
+  z-index: 200;
+  box-sizing: border-box;
+  max-width: calc(100vw - 32px);
+  max-height: calc(100vh - 32px);
+  overflow-y: auto;
+  padding: 2px;
+  border: 1px solid var(--line);
+  border-radius: var(--r-md);
+  background: var(--panel);
+  box-shadow: 0 8px 24px color-mix(in srgb, var(--ink) 18%, transparent);
+}
+</style>