@aggc/ui 0.4.1 → 0.5.1

package/README.md

@@ -51,6 +51,25 @@ You can also consume the public subpaths:
 - `@aggc/ui/tokens/desktop-only` — desktop-only tokens: `result.*`, `nav.*`, `sync.*`
 - `@aggc/ui/ui.css` — direct CSS asset (for bundlers that handle CSS imports natively)
 
+## PandaCSS consumer setup
+
+If you use PandaCSS in your app, add the package sources to your `panda.config.ts` scanner.
+This is required because PandaCSS does static analysis — it needs the original source files where
+`cva`, `css`, etc. appear by name. The compiled `dist/` renames these functions and PandaCSS
+cannot recognize them.
+
+```ts
+// panda.config.ts
+export default defineConfig({
+  include: [
+    './src/**/*.{ts,vue}',
+    './node_modules/@aggc/ui/src/**/*.{ts,vue}',
+  ],
+})
+```
+
+The `src/` directory is published in the package specifically for this purpose.
+
 Everything else in this repo is maintenance tooling for the package itself:
 
 - `src/stories/**` powers Storybook docs

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aggc/ui",
-  "version": "0.4.1",
+  "version": "0.5.1",
   "description": "Shared Vue UI primitives, patterns, and tokens for AGGC desktop and web.",
   "type": "module",
   "license": "MIT",
@@ -50,7 +50,8 @@
     "*.css"
   ],
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -102,6 +103,7 @@
     "@playwright/test": "^1.52.0",
     "@storybook/addon-a11y": "^9.1.20",
     "@storybook/addon-docs": "^9.1.20",
+    "@storybook/addon-mcp": "^0.4.2",
     "@storybook/vue3-vite": "^9.1.20",
     "@types/node": "^24.0.15",
     "@vitejs/plugin-vue": "^6.0.1",

package/src/components/PageSurface.styles.ts

@@ -0,0 +1,3 @@
+import { pageRootClass } from "../styles";
+
+export const pageSurfaceClass = pageRootClass;

package/src/components/PageSurface.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { pageSurfaceClass } from "./PageSurface.styles";
+</script>
+
+<template>
+  <div :class="pageSurfaceClass">
+    <slot />
+  </div>
+</template>

package/src/components/ResultPanel.styles.ts

@@ -0,0 +1,108 @@
+import { cva, css, cx } from "@styled/css";
+
+import { surfacePanelClass } from "../styles";
+
+export const resultPanelClass = cva({
+  base: {
+    borderWidth: "1px",
+    padding: "5",
+  },
+  variants: {
+    ok: {
+      true: {
+        borderColor: "result.okBorder",
+        bg: "result.okBg",
+      },
+      false: {
+        borderColor: "result.failBorder",
+        bg: "result.failBg",
+      },
+    },
+  },
+});
+
+export const resultPanelRootClass = (ok: boolean) => cx(surfacePanelClass, resultPanelClass({ ok }));
+
+export const resultPanelHeaderClass = css({
+  display: "flex",
+  justifyContent: "space-between",
+  gap: "4",
+  alignItems: { base: "flex-start", md: "center" },
+  flexDirection: { base: "column", md: "row" },
+  mb: "3",
+});
+
+export const resultPanelSummaryClass = css({
+  display: "flex",
+  alignItems: "center",
+  gap: "3",
+});
+
+export const resultPanelIconClass = cva({
+  base: {
+    width: "10",
+    height: "10",
+    borderRadius: "full",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  variants: {
+    ok: {
+      true: {
+        bg: "bg.accentSoft",
+        color: "text.accent",
+      },
+      false: {
+        bg: "badge.warningBg",
+        color: "badge.warningText",
+      },
+    },
+  },
+});
+
+export const resultPanelTitleClass = css({
+  fontSize: "lg",
+  fontWeight: "700",
+  color: "text.primary",
+});
+
+export const resultPanelSectionClass = cva({
+  base: {},
+  variants: {
+    spaced: {
+      true: { mb: "3" },
+      false: { mb: "0" },
+    },
+  },
+});
+
+export const resultPanelSectionTitleClass = cva({
+  base: {
+    fontSize: "sm",
+    fontWeight: "700",
+    mb: "2",
+  },
+  variants: {
+    tone: {
+      detail: { color: "result.detailText" },
+      warning: { color: "result.warningLabel" },
+      error: { color: "result.errorLabel" },
+    },
+  },
+});
+
+export const resultPanelListClass = cva({
+  base: {
+    display: "grid",
+    gap: "1.5",
+    pl: "4",
+  },
+  variants: {
+    tone: {
+      detail: { color: "result.bodyText" },
+      warning: { color: "result.warningBody" },
+      error: { color: "result.errorBody" },
+    },
+  },
+});

package/src/components/ResultPanel.test.ts

@@ -0,0 +1,22 @@
+import { mount } from "@vue/test-utils";
+import { describe, expect, it } from "vitest";
+import ResultPanel from "./ResultPanel.vue";
+
+describe("ResultPanel", () => {
+  it("renders configurable copy and polite live region by default", () => {
+    const wrapper = mount(ResultPanel, {
+      props: {
+        ok: false,
+        summary: "Validation failed",
+        failLabel: "Failed",
+        warningsLabel: "Heads up",
+        warnings: ["One warning"],
+      },
+    });
+
+    expect(wrapper.attributes("role")).toBe("status");
+    expect(wrapper.attributes("aria-live")).toBe("polite");
+    expect(wrapper.text()).toContain("Failed");
+    expect(wrapper.text()).toContain("Heads up");
+  });
+});

package/src/components/ResultPanel.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { CheckCircle2, TriangleAlert } from "lucide-vue-next";
+
+import StatusBadge from "./StatusBadge.vue";
+import {
+  resultPanelHeaderClass,
+  resultPanelIconClass,
+  resultPanelListClass,
+  resultPanelRootClass,
+  resultPanelSectionClass,
+  resultPanelSectionTitleClass,
+  resultPanelSummaryClass,
+  resultPanelTitleClass,
+} from "./ResultPanel.styles";
+
+const props = defineProps<{
+  ok: boolean;
+  summary: string;
+  warnings?: string[];
+  errors?: string[];
+  messages?: string[];
+  live?: "polite" | "assertive" | "off";
+  passLabel?: string;
+  failLabel?: string;
+  detailsLabel?: string;
+  warningsLabel?: string;
+  errorsLabel?: string;
+}>();
+</script>
+
+<template>
+  <div
+    :class="resultPanelRootClass(ok)"
+    :aria-live="props.live ?? 'polite'"
+    :role="(props.live ?? 'polite') === 'off' ? undefined : 'status'"
+  >
+    <div :class="resultPanelHeaderClass">
+      <div :class="resultPanelSummaryClass">
+        <div :class="resultPanelIconClass({ ok })">
+          <component :is="ok ? CheckCircle2 : TriangleAlert" :size="18" />
+        </div>
+        <h3 :class="resultPanelTitleClass">{{ props.summary }}</h3>
+      </div>
+      <StatusBadge :tone="ok ? 'success' : 'warning'">
+        {{ ok ? props.passLabel ?? "Pass" : props.failLabel ?? "Fail" }}
+      </StatusBadge>
+    </div>
+
+    <div v-if="messages?.length" :class="resultPanelSectionClass({ spaced: true })">
+      <p :class="resultPanelSectionTitleClass({ tone: 'detail' })">{{ props.detailsLabel ?? "Details" }}</p>
+      <ul :class="resultPanelListClass({ tone: 'detail' })">
+        <li v-for="message in messages" :key="message">{{ message }}</li>
+      </ul>
+    </div>
+
+    <div v-if="warnings?.length" :class="resultPanelSectionClass({ spaced: !!errors?.length })">
+      <p :class="resultPanelSectionTitleClass({ tone: 'warning' })">{{ props.warningsLabel ?? "Warnings" }}</p>
+      <ul :class="resultPanelListClass({ tone: 'warning' })">
+        <li v-for="warning in warnings" :key="warning">{{ warning }}</li>
+      </ul>
+    </div>
+
+    <div v-if="errors?.length">
+      <p :class="resultPanelSectionTitleClass({ tone: 'error' })">{{ props.errorsLabel ?? "Errors" }}</p>
+      <ul :class="resultPanelListClass({ tone: 'error' })">
+        <li v-for="error in errors" :key="error">{{ error }}</li>
+      </ul>
+    </div>
+  </div>
+</template>

package/src/components/SectionCard.styles.ts

@@ -0,0 +1,65 @@
+import { css } from "@styled/css";
+import {
+  pageHeaderActionsClass,
+  pageHeaderContentClass,
+  pageHeaderRootClass,
+  sectionTitleClass,
+  surfacePanelClass,
+  eyebrowClass,
+} from "../styles";
+
+export const sectionCardClass = css({
+  padding: "6",
+});
+
+export const sectionCardScrollClass = css({
+  height: "100%",
+  minHeight: "0",
+  display: "grid",
+  gridTemplateRows: "auto minmax(0, 1fr)",
+});
+
+export const sectionCardSurfaceClass = surfacePanelClass;
+
+export const sectionCardHeaderClass = pageHeaderRootClass;
+
+export const sectionCardHeaderWithGapClass = css({
+  position: "relative",
+  zIndex: "1",
+  mb: "5",
+});
+
+export const sectionCardHeaderCollapsedGapClass = css({
+  position: "relative",
+  zIndex: "1",
+  mb: "0",
+});
+
+export const sectionCardHeaderContentClass = pageHeaderContentClass;
+
+export const sectionCardEyebrowClass = eyebrowClass;
+
+export const sectionCardTitleClass = sectionTitleClass;
+
+export const sectionCardDescriptionClass = css({
+  color: "text.secondary",
+  lineHeight: "1.65",
+  fontSize: "sm",
+  maxWidth: "2xl",
+});
+
+export const sectionCardActionsClass = pageHeaderActionsClass;
+
+export const sectionCardBodyScrollClass = css({
+  position: "relative",
+  zIndex: "1",
+  minHeight: "0",
+  overflowY: "auto",
+  paddingRight: "1",
+  overscrollBehavior: "contain",
+});
+
+export const sectionCardBodyStaticClass = css({
+  position: "relative",
+  zIndex: "1",
+});

package/src/components/SectionCard.test.ts

@@ -0,0 +1,22 @@
+import { mount } from "@vue/test-utils";
+import { describe, expect, it } from "vitest";
+import SectionCard from "./SectionCard.vue";
+
+describe("SectionCard", () => {
+  it("renders a configurable eyebrow and actions slot", () => {
+    const wrapper = mount(SectionCard, {
+      props: {
+        title: "Release",
+        eyebrow: "Lifecycle",
+      },
+      slots: {
+        actions: "Actions",
+        default: "Body",
+      },
+    });
+
+    expect(wrapper.text()).toContain("Lifecycle");
+    expect(wrapper.text()).toContain("Actions");
+    expect(wrapper.text()).toContain("Body");
+  });
+});

package/src/components/SectionCard.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { cx } from "@styled/css";
+import {
+  sectionCardActionsClass,
+  sectionCardBodyScrollClass,
+  sectionCardBodyStaticClass,
+  sectionCardClass,
+  sectionCardDescriptionClass,
+  sectionCardEyebrowClass,
+  sectionCardHeaderClass,
+  sectionCardHeaderCollapsedGapClass,
+  sectionCardHeaderContentClass,
+  sectionCardHeaderWithGapClass,
+  sectionCardScrollClass,
+  sectionCardSurfaceClass,
+  sectionCardTitleClass,
+} from "./SectionCard.styles";
+
+const props = withDefaults(defineProps<{
+  title: string;
+  eyebrow?: string;
+  description?: string;
+  scrollBody?: boolean;
+  collapseBodyGap?: boolean;
+}>(), {
+  eyebrow: "Workspace surface",
+  description: "",
+  scrollBody: false,
+  collapseBodyGap: false,
+});
+</script>
+
+<template>
+  <section :class="cx(sectionCardSurfaceClass, sectionCardClass, props.scrollBody && sectionCardScrollClass)">
+    <div :class="cx(sectionCardHeaderClass, props.collapseBodyGap ? sectionCardHeaderCollapsedGapClass : sectionCardHeaderWithGapClass)">
+      <div :class="sectionCardHeaderContentClass">
+        <p v-if="props.eyebrow" :class="sectionCardEyebrowClass">{{ props.eyebrow }}</p>
+        <h2 :class="sectionCardTitleClass">{{ props.title }}</h2>
+        <p v-if="props.description" :class="sectionCardDescriptionClass">
+          {{ props.description }}
+        </p>
+      </div>
+      <div v-if="$slots.actions" :class="sectionCardActionsClass">
+        <slot name="actions" />
+      </div>
+    </div>
+    <div :class="props.scrollBody ? sectionCardBodyScrollClass : sectionCardBodyStaticClass">
+      <slot />
+    </div>
+  </section>
+</template>

package/src/components/StatusBadge.styles.ts

@@ -0,0 +1,49 @@
+import { cva } from "@styled/css";
+
+export const statusBadgeClass = cva({
+  base: {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: "full",
+    borderWidth: "1px",
+    px: "3",
+    py: "1.5",
+    fontSize: "xs",
+    fontWeight: "700",
+    textTransform: "uppercase",
+    letterSpacing: "0.1em",
+    backdropFilter: "blur(16px) saturate(140%)",
+    boxShadow: "inset 0 1px 0 rgba(255,255,255,0.16)",
+    _dark: {
+      boxShadow: "inset 0 1px 0 rgba(255,255,255,0.04)",
+    },
+  },
+  variants: {
+    tone: {
+      success: {
+        bg: "badge.successBg",
+        color: "badge.successText",
+        borderColor: "badge.successBorder",
+      },
+      warning: {
+        bg: "badge.warningBg",
+        color: "badge.warningText",
+        borderColor: "badge.warningBorder",
+      },
+      info: {
+        bg: "badge.infoBg",
+        color: "badge.infoText",
+        borderColor: "badge.infoBorder",
+      },
+      neutral: {
+        bg: "badge.neutralBg",
+        color: "badge.neutralText",
+        borderColor: "badge.neutralBorder",
+      },
+    },
+  },
+  defaultVariants: {
+    tone: "neutral",
+  },
+});

package/src/components/StatusBadge.test.ts

@@ -0,0 +1,18 @@
+import { mount } from "@vue/test-utils";
+import { describe, expect, it } from "vitest";
+import StatusBadge from "./StatusBadge.vue";
+
+describe("StatusBadge", () => {
+  it("renders slot content", () => {
+    const wrapper = mount(StatusBadge, {
+      props: {
+        tone: "success",
+      },
+      slots: {
+        default: "Ready",
+      },
+    });
+
+    expect(wrapper.text()).toContain("Ready");
+  });
+});

package/src/components/StatusBadge.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { statusBadgeClass } from "./StatusBadge.styles";
+
+const props = withDefaults(
+  defineProps<{
+    tone?: "success" | "warning" | "info" | "neutral";
+  }>(),
+  {
+    tone: "neutral",
+  }
+);
+</script>
+
+<template>
+  <span :class="statusBadgeClass({ tone: props.tone })">
+    <slot />
+  </span>
+</template>

package/src/components/UiButton.styles.ts

@@ -0,0 +1,29 @@
+import { css } from "@styled/css";
+import { buttonRecipe } from "../styles";
+
+// buttonRecipe is the source of truth — UiButton uses it directly.
+export const uiButtonClass = buttonRecipe;
+
+export const uiButtonContentClass = css({
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: "2",
+  minWidth: "0",
+});
+
+export const uiButtonHiddenContentClass = css({
+  visibility: "hidden",
+});
+
+export const uiButtonBusyContentClass = css({
+  position: "absolute",
+  inset: "0",
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: "2",
+  px: "4",
+  py: "3",
+  pointerEvents: "none",
+});

package/src/components/UiButton.test.ts

@@ -0,0 +1,21 @@
+import { mount } from "@vue/test-utils";
+import { describe, expect, it } from "vitest";
+import UiButton from "./UiButton.vue";
+
+describe("UiButton", () => {
+  it("renders loading state accessibly", () => {
+    const wrapper = mount(UiButton, {
+      props: {
+        loading: true,
+        loadingLabel: "Saving",
+      },
+      slots: {
+        default: "Save",
+      },
+    });
+
+    expect(wrapper.attributes("aria-busy")).toBe("true");
+    expect(wrapper.text()).toContain("Saving");
+    expect(wrapper.attributes("disabled")).toBeDefined();
+  });
+});

package/src/components/UiButton.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { LoaderCircle } from "lucide-vue-next";
+import {
+  uiButtonBusyContentClass,
+  uiButtonClass,
+  uiButtonContentClass,
+  uiButtonHiddenContentClass,
+} from "./UiButton.styles";
+
+withDefaults(
+  defineProps<{
+    variant?: "solid" | "outline" | "subtle";
+    loading?: boolean;
+    loadingLabel?: string;
+    disabled?: boolean;
+    type?: "button" | "submit";
+    ariaLabel?: string;
+  }>(),
+  {
+    variant: "solid",
+    loading: false,
+    loadingLabel: "Working...",
+    disabled: false,
+    type: "button",
+    ariaLabel: undefined,
+  }
+);
+</script>
+
+<template>
+  <button
+    :type="type"
+    :disabled="disabled || loading"
+    :aria-busy="loading || undefined"
+    :aria-label="ariaLabel"
+    :class="uiButtonClass({ variant, disabled, loading })"
+  >
+    <span :class="[uiButtonContentClass, loading ? uiButtonHiddenContentClass : undefined]">
+      <slot />
+    </span>
+    <span v-if="loading" :class="uiButtonBusyContentClass">
+      <LoaderCircle :size="14" class="aggc-spin" aria-hidden="true" />
+      <span>{{ loadingLabel }}</span>
+    </span>
+  </button>
+</template>