Merge pull request #630 from Perdolique/feat/packing-list-shell

Add packing list shell

Author: Perdolique

.agents/skills/vue-components/SKILL.md

@@ -5,6 +5,10 @@ description: Vue component conventions and patterns for the Perd project. Use wh
 
 # Vue Component Conventions
 
+## Web Baseline 2025
+
+The project targets **Baseline 2025** across all web technologies. Freely use modern HTML elements (like native `<dialog>`, `popover`, etc.), modern JS browser APIs, and modern CSS. We do not chase legacy browser support. Always choose modern native features over polyfills, fallbacks, or compatibility workarounds when they simplify the component structure.
+
 ## Component Structure
 
 Use the standard order: `<template>`, `<script>`, `<style>`.
@@ -84,9 +88,11 @@ const emit = defineEmits<Emits>()
 Use `useTemplateRef` (Vue 3.5+), not the old `ref()` + template `ref=""` pattern:
 
 ```ts
-const dialogRef = useTemplateRef<HTMLDialogElement>('dialog')
+const dialogRef = useTemplateRef('dialog')
 ```
 
+Do not add an explicit generic to `useTemplateRef` when Vue can infer the type from a static template `ref` on a native element or component. Add a generic only when inference is unavailable or incorrect.
+
 ### Models
 
 Use `defineModel` for two-way binding:
@@ -218,18 +224,32 @@ Use full, readable names for component prop values and CSS/state variants. Prefe
 
 Style owned markup through explicit classes on the element being styled. Avoid nested tag selectors such as `& em`, `& span`, or `& strong` when the element can be given its own class.
 
-### CSS Features (Baseline 2025)
+When an element changes style based on an ancestor component state, keep that state rule nested under the element's own class instead of writing a separate ancestor-to-descendant selector. Prefer this:
+
+```css
+.name {
+  .component:hover &,
+  .component:focus-visible & {
+    color: var(--color-text-primary);
+  }
+}
+```
+
+Do not write the same rule as a separate selector such as `.component:hover .name` or `.component:focus-visible .name`. In this codebase, selector ownership should stay with the class being styled.
+
+### Modern CSS Features
 
-The project targets modern browsers only. Use these freely:
+Leverage our Web Baseline 2025 and use these CSS features freely:
 
 - **Native CSS nesting** — no preprocessors
+- **Modern CSS features and selectors** when they simplify the component without adding unnecessary complexity
 - **`oklch()` color function** with `prefers-color-scheme` for light/dark themes
 - **`@starting-style`** + `allow-discrete` for animating `display: none` transitions
 - **Range media queries** — `@media (width >= 768px)`, never `@media screen and (min-width: 768px)`
 - **`@layer`** for CSS organization (reset, colors, spacings, sizes, transitions, typography)
 - **CSS custom properties** for all design tokens (`--spacing-*`, `--color-*`, `--font-size-*`, etc.)
 
-Prefer native CSS features that are already part of the supported browser baseline over legacy compatibility workarounds.
+Prefer native CSS features over legacy compatibility workarounds.
 
 ### Responsive Rules
 

.husky/pre-commit

@@ -1,6 +1,6 @@
 pnpm run lint:markdown
-pnpm run lint:oxlint
+pnpm run lint:oxlint:agent
 pnpm run test:typecheck
-pnpm run test:unit:ci
+pnpm run test:unit:agent
 pnpm run build
 pnpm run test:e2e:ci

.oxlintrc.jsonc

@@ -64,6 +64,15 @@
     "rules": {
       "import/no-default-export": "off"
     }
+  }, {
+    // Vue files
+    "files": [
+      "**/*.vue"
+    ],
+
+    "rules": {
+      "vitest/require-hook": "off"
+    }
   }, {
     // Nuxt-specific overrides for Vue files
     "files": [

AGENTS.md

@@ -13,6 +13,11 @@
 - Keep reference-data slugs as canonical lowercase URL tokens using only `a-z`, `0-9`, and single hyphens; `name` values stay English display strings.
 - Keep `equipment_items` brand/category foreign keys non-cascading (`restrict`) so reference-data deletion cannot silently remove catalog or inventory records.
 
+## Web Baseline 2025
+
+- The project targets **Baseline 2025** across all web technologies, including CSS, HTML, and JS browser APIs.
+- We do not chase legacy browser support. Always choose modern native features over polyfills, fallbacks, or compatibility workarounds when they simplify the code.
+
 ## Frontend and UX guardrails
 
 - For UI work, `new-design-assets/` is the source of truth for layout, component appearance, color tokens, typography, spacing, and interaction patterns.
@@ -36,5 +41,5 @@
 ## Verification
 
 - Markdown changes: `pnpm run lint:markdown`.
-- TypeScript or Vue changes: `pnpm run test:typecheck`, `pnpm run test:unit:agent`, `pnpm run lint:oxlint`, `pnpm run build`, and `pnpm run test:e2e:ci`.
+- TypeScript or Vue changes: `pnpm run test:typecheck`, `pnpm run test:unit:agent`, `pnpm run lint:oxlint:agent`, `pnpm run build`, and `pnpm run test:e2e:ci`.
 - Run applicable checks in parallel where practical.

app/components/PerdButton.vue

@@ -149,18 +149,42 @@
         transform: translateY(1px);
       }
     }
-  }
 
-  .component:disabled,
-  .component:disabled:focus-visible,
-  .component:disabled:hover,
-  .component:disabled:active {
-    cursor: not-allowed;
-    transform: none;
-    color: var(--color-text-muted);
-    background: var(--color-surface-subtle);
-    border-color: transparent;
-    outline-color: transparent;
+    &:disabled {
+      cursor: not-allowed;
+      transform: none;
+      color: var(--color-text-muted);
+      background: var(--color-surface-subtle);
+      border-color: transparent;
+      outline-color: transparent;
+
+      &:focus-visible {
+        cursor: not-allowed;
+        transform: none;
+        color: var(--color-text-muted);
+        background: var(--color-surface-subtle);
+        border-color: transparent;
+        outline-color: transparent;
+      }
+
+      &:hover {
+        cursor: not-allowed;
+        transform: none;
+        color: var(--color-text-muted);
+        background: var(--color-surface-subtle);
+        border-color: transparent;
+        outline-color: transparent;
+      }
+
+      &:active {
+        cursor: not-allowed;
+        transform: none;
+        color: var(--color-text-muted);
+        background: var(--color-surface-subtle);
+        border-color: transparent;
+        outline-color: transparent;
+      }
+    }
   }
 
   .icon {
@@ -169,8 +193,10 @@
   }
 
   @media (prefers-reduced-motion: reduce) {
-    .component:active {
-      transform: none;
+    .component {
+      &:active {
+        transform: none;
+      }
     }
   }
 </style>

app/components/PerdLink.vue

@@ -17,7 +17,11 @@
     cursor: pointer;
     font-weight: var(--font-weight-medium);
 
-    &:hover,
+    &:hover {
+      text-decoration: underline;
+      color: var(--color-accent-hover);
+    }
+
     &:focus-visible {
       text-decoration: underline;
       color: var(--color-accent-hover);

app/components/UserAvatar.vue

@@ -1,9 +1,9 @@
 <template>
-  <span :class="[$style.component, size]" aria-hidden="true">
-    <span :class="$style.initial">
+  <div :class="[$style.component, size]" aria-hidden="true">
+    <div :class="$style.initial">
       {{ initial }}
-    </span>
-  </span>
+    </div>
+  </div>
 </template>
 
 <script lang="ts" setup>
@@ -43,7 +43,6 @@
   }
 
   .initial {
-    display: block;
     line-height: 1;
     transform: translateY(0.02em);
   }

app/components/catalog/CatalogItemOwnershipCard.vue

@@ -118,25 +118,25 @@
     font-size: 1rem;
   }
 
-  .text,
-  .inlineMessage,
-  .errorMessage {
+  .text {
     margin: 0;
+    color: var(--color-text-tertiary);
   }
 
-  .text,
   .inlineMessage {
+    margin: 0;
     color: var(--color-text-tertiary);
   }
 
+  .errorMessage {
+    margin: 0;
+    color: var(--color-danger);
+  }
+
   .actions {
     display: flex;
     flex-wrap: wrap;
     gap: var(--spacing-12);
     align-items: center;
   }
-
-  .errorMessage {
-    color: var(--color-danger);
-  }
 </style>

app/components/catalog/CatalogItemPropertiesCard.vue

@@ -74,7 +74,6 @@
   }
 
   .label {
-    margin: 0;
     color: var(--color-text-muted);
     font-size: var(--font-size-12);
     text-transform: uppercase;