@aggc/ui 0.4.1 → 0.5.0

package/src/stories/support/storyStyles.ts

@@ -0,0 +1,150 @@
+import { css, cva } from "@styled/css";
+
+export const storyStackClass = css({
+  display: "grid",
+  gap: "5",
+  alignContent: "start",
+  minWidth: "0",
+});
+
+export const storyGridClass = css({
+  display: "grid",
+  gap: "4",
+  gridTemplateColumns: {
+    base: "1fr",
+    md: "repeat(2, minmax(0, 1fr))",
+  },
+});
+
+export const storyRowClass = css({
+  display: "flex",
+  flexWrap: "wrap",
+  alignItems: "center",
+  gap: "3",
+});
+
+export const storySurfaceClass = css({
+  display: "grid",
+  gap: "4",
+  alignContent: "start",
+  minWidth: "0",
+  maxWidth: "100%",
+  padding: { base: "4", md: "5" },
+  borderWidth: "1px",
+  borderColor: "border.subtle",
+  borderRadius: "2xl",
+  bg: "bg.card",
+  boxShadow: "0 30px 90px -72px rgba(15,23,42,0.7)",
+});
+
+export const storyPreviewRootClass = css({
+  display: "grid",
+  gap: "4",
+  alignContent: "start",
+  minWidth: "0",
+  width: "100%",
+  minHeight: "100%",
+  padding: { base: "4", md: "5" },
+  borderRadius: "3xl",
+  borderWidth: "1px",
+  borderColor: "border.subtle",
+  bg: "bg.canvas",
+  boxShadow: "0 30px 90px -72px rgba(15,23,42,0.7)",
+});
+
+export const storyPreviewHeaderClass = css({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  gap: "3",
+  flexWrap: "wrap",
+});
+
+export const storyPreviewActionsClass = css({
+  display: "inline-flex",
+  alignItems: "center",
+  gap: "2",
+  fontSize: "xs",
+  fontWeight: "700",
+  letterSpacing: "0.05em",
+  textTransform: "uppercase",
+  color: "text.muted",
+});
+
+export const storyPreviewThemeGroupClass = css({
+  display: "inline-flex",
+  alignItems: "center",
+  gap: "1",
+  padding: "1",
+  borderRadius: "xl",
+  borderWidth: "1px",
+  borderColor: "border.subtle",
+  bg: "bg.soft",
+});
+
+export const storyPreviewThemeButtonClass = cva({
+  base: {
+    appearance: "none",
+    border: "0",
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    minW: "4.75rem",
+    px: "3",
+    py: "2",
+    borderRadius: "lg",
+    fontSize: "sm",
+    fontWeight: "700",
+    color: "text.secondary",
+    cursor: "pointer",
+    transitionProperty: "background-color, color, box-shadow",
+    transitionDuration: "fast",
+    _hover: {
+      color: "text.primary",
+      bg: "bg.hover",
+    },
+    _focusVisible: {
+      outline: "2px solid",
+      outlineColor: "border.accent",
+      outlineOffset: "2px",
+    },
+  },
+  variants: {
+    active: {
+      true: {
+        bg: "bg.cardStrong",
+        color: "text.primary",
+        boxShadow: "0 10px 30px -20px rgba(15,23,42,0.72)",
+      },
+      false: {},
+    },
+  },
+});
+
+export const storySurfaceCompactClass = css({
+  maxWidth: "28rem",
+});
+
+export const storySurfaceWideClass = css({
+  maxWidth: "48rem",
+});
+
+export const storySectionLabelClass = css({
+  fontSize: "xs",
+  fontWeight: "800",
+  letterSpacing: "0.08em",
+  textTransform: "uppercase",
+  color: "text.muted",
+});
+
+export const storyCaptionClass = css({
+  color: "text.secondary",
+  lineHeight: "1.7",
+  maxWidth: "42rem",
+});
+
+export const storyScrollFrameClass = css({
+  maxHeight: "220px",
+  overflowY: "auto",
+  paddingRight: "1",
+});

package/src/styles/README.md

@@ -0,0 +1,23 @@
+# Shared UI Style Architecture
+
+This directory is the single entry point for reusable frontend styling primitives.
+
+## Rules
+
+- Keep visual definitions out of `.vue` files.
+- Do not add new `css(...)` calls inside `.vue` files.
+- Do not add new `:style=` bindings unless the style is truly runtime-driven.
+- Prefer importing from the local `src/styles` barrel or the published `@aggc/ui/styles` entrypoint when the export is stable.
+
+## Directory layout
+
+- `primitives/`: low-level reusable classes such as surfaces, typography, fields, and feedback states.
+- `recipes/`: variant-driven Panda recipes for reusable component families.
+- `layouts/`: generic page, stack, cluster, and split layouts.
+- `patterns/`: repeated UI compositions that are broader than a single primitive.
+
+## Migration guidance
+
+- Existing shared styles can keep using `fieldStyles.ts` temporarily, but new work should import from this directory.
+- When a component still needs local styling, create `ComponentName.styles.ts` next to it and compose from these shared exports.
+- Shrink the allowlist in the architectural validation script as components are migrated away from inline style definitions.

package/src/styles/index.ts

@@ -0,0 +1,20 @@
+export * from "./primitives/surfaces";
+export * from "./primitives/typography";
+export * from "./primitives/fields";
+export * from "./primitives/feedback";
+export * from "./recipes/card.recipe";
+export * from "./recipes/button.recipe";
+export * from "./recipes/badge.recipe";
+export * from "./recipes/input.recipe";
+export * from "./recipes/dropdown.recipe";
+export * from "./layouts/page";
+export * from "./layouts/stack";
+export * from "./layouts/cluster";
+export * from "./layouts/split";
+export * from "./patterns/pageHeader";
+export * from "./patterns/metricGrid";
+export * from "./patterns/actionToolbar";
+export * from "./patterns/resultRegion";
+export * from "./patterns/infoPanel";
+export * from "./patterns/emptyState";
+export * from "./patterns/selectableListDetail";

package/src/styles/layouts/cluster.ts

@@ -0,0 +1,27 @@
+import { cva } from "@styled/css";
+
+export const clusterLayout = cva({
+  base: {
+    display: "flex",
+    flexWrap: "wrap",
+    alignItems: "center",
+    minWidth: "0",
+  },
+  variants: {
+    gap: {
+      xs: { gap: "1" },
+      sm: { gap: "2" },
+      md: { gap: "3" },
+      lg: { gap: "4" },
+    },
+    justify: {
+      start: { justifyContent: "flex-start" },
+      between: { justifyContent: "space-between" },
+      end: { justifyContent: "flex-end" },
+    },
+  },
+  defaultVariants: {
+    gap: "sm",
+    justify: "start",
+  },
+});

package/src/styles/layouts/page.ts

@@ -0,0 +1,22 @@
+import { css } from "@styled/css";
+
+export const pageRootClass = css({
+  width: "100%",
+  display: "grid",
+  gap: "5",
+  alignContent: "start",
+  height: "100%",
+  minHeight: "0",
+  overflow: "hidden",
+  minWidth: "0",
+});
+
+export const pageScrollRegionClass = css({
+  display: "grid",
+  gap: "4",
+  height: "100%",
+  minHeight: "0",
+  overflowY: "auto",
+  paddingRight: "1",
+  alignContent: "start",
+});

package/src/styles/layouts/split.ts

@@ -0,0 +1,26 @@
+import { cva } from "@styled/css";
+
+export const splitLayout = cva({
+  base: {
+    display: "grid",
+    gap: "4",
+    alignItems: "start",
+    minWidth: "0",
+  },
+  variants: {
+    ratio: {
+      equal: {
+        gridTemplateColumns: { base: "1fr", xl: "repeat(2, minmax(0, 1fr))" },
+      },
+      sidebar: {
+        gridTemplateColumns: { base: "1fr", xl: "minmax(18rem, 0.9fr) minmax(0, 1.4fr)" },
+      },
+      detail: {
+        gridTemplateColumns: { base: "1fr", xl: "minmax(18rem, 0.85fr) minmax(0, 1.45fr)" },
+      },
+    },
+  },
+  defaultVariants: {
+    ratio: "equal",
+  },
+});

package/src/styles/layouts/stack.ts

@@ -0,0 +1,21 @@
+import { cva } from "@styled/css";
+
+export const stackLayout = cva({
+  base: {
+    display: "grid",
+    alignContent: "start",
+    minWidth: "0",
+  },
+  variants: {
+    gap: {
+      xs: { gap: "1" },
+      sm: { gap: "2" },
+      md: { gap: "3" },
+      lg: { gap: "4" },
+      xl: { gap: "5" },
+    },
+  },
+  defaultVariants: {
+    gap: "md",
+  },
+});

package/src/styles/patterns/actionToolbar.ts

@@ -0,0 +1,8 @@
+import { css } from "@styled/css";
+
+export const actionToolbarClass = css({
+  display: "flex",
+  gap: "3",
+  flexWrap: "wrap",
+  alignItems: "center",
+});

package/src/styles/patterns/emptyState.ts

@@ -0,0 +1,23 @@
+import { css, cx } from "@styled/css";
+
+import { insetPanelClass } from "../primitives/surfaces";
+import { helperTextClass } from "../primitives/typography";
+
+export const emptyStatePanelClass = cx(
+  insetPanelClass,
+  helperTextClass,
+  css({
+    display: "grid",
+    gap: "2",
+    padding: "4",
+    lineHeight: "1.7",
+  })
+);
+
+export const centeredEmptyStatePanelClass = cx(
+  emptyStatePanelClass,
+  css({
+    alignContent: "center",
+    minHeight: "220px",
+  })
+);

package/src/styles/patterns/infoPanel.ts

@@ -0,0 +1,22 @@
+import { css, cx } from "@styled/css";
+
+import { insetPanelClass } from "../primitives/surfaces";
+
+export const infoPanelClass = cx(
+  insetPanelClass,
+  css({
+    padding: "4",
+    display: "grid",
+    gap: "3",
+  })
+);
+
+export const resultSkeletonPanelClass = cx(
+  insetPanelClass,
+  css({
+    minHeight: "220px",
+    padding: "4",
+    display: "grid",
+    gap: "3",
+  })
+);

package/src/styles/patterns/metricGrid.ts

@@ -0,0 +1,19 @@
+import { cva } from "@styled/css";
+
+export const metricGridPattern = cva({
+  base: {
+    display: "grid",
+    gap: "4",
+    minWidth: "0",
+  },
+  variants: {
+    columns: {
+      two: { gridTemplateColumns: { base: "1fr", md: "repeat(2, minmax(0, 1fr))" } },
+      three: { gridTemplateColumns: { base: "1fr", lg: "repeat(3, minmax(0, 1fr))" } },
+      four: { gridTemplateColumns: { base: "1fr", lg: "repeat(4, minmax(0, 1fr))" } },
+    },
+  },
+  defaultVariants: {
+    columns: "two",
+  },
+});

package/src/styles/patterns/pageHeader.ts

@@ -0,0 +1,19 @@
+import { css } from "@styled/css";
+
+export const pageHeaderRootClass = css({
+  display: "flex",
+  alignItems: "flex-start",
+  justifyContent: "space-between",
+  gap: "4",
+  flexDirection: { base: "column", md: "row" },
+});
+
+export const pageHeaderContentClass = css({
+  display: "grid",
+  gap: "2",
+  minWidth: "0",
+});
+
+export const pageHeaderActionsClass = css({
+  flexShrink: "0",
+});

package/src/styles/patterns/resultRegion.ts

@@ -0,0 +1,7 @@
+import { css } from "@styled/css";
+
+export const resultRegionClass = css({
+  position: "relative",
+  minWidth: "0",
+  minHeight: "220px",
+});

package/src/styles/patterns/selectableListDetail.ts

@@ -0,0 +1,21 @@
+import { css } from "@styled/css";
+
+export const selectableListDetailRootClass = css({
+  display: "grid",
+  gap: "4",
+  gridTemplateColumns: { base: "1fr", xl: "minmax(18rem, 0.9fr) minmax(0, 1.4fr)" },
+  alignItems: "start",
+});
+
+export const selectableListClass = css({
+  display: "grid",
+  gap: "2",
+  alignContent: "start",
+  minWidth: "0",
+});
+
+export const selectableDetailClass = css({
+  display: "grid",
+  gap: "4",
+  minWidth: "0",
+});

package/src/styles/primitives/feedback.ts

@@ -0,0 +1,23 @@
+import { css } from "@styled/css";
+
+export const loadingRegionClass = css({
+  position: "relative",
+  minWidth: "0",
+});
+
+export const errorTextClass = css({
+  color: "text.error",
+  fontSize: "sm",
+  fontWeight: "600",
+});
+
+export const mutedTextClass = css({
+  color: "text.muted",
+  fontSize: "sm",
+  lineHeight: "1.6",
+});
+
+export const focusRingClass = css({
+  outline: "2px solid var(--colors-text-accent)",
+  outlineOffset: "2px",
+});

package/src/styles/primitives/fields.ts

@@ -0,0 +1,76 @@
+import { css } from "@styled/css";
+
+export const fieldControlClass = css({
+  width: "100%",
+  minHeight: "48px",
+  borderRadius: "xl",
+  borderWidth: "1px",
+  borderColor: "border.default",
+  bg: "bg.input",
+  color: "text.primary",
+  fontSize: "sm",
+  lineHeight: "1.5",
+  px: "4",
+  py: "3",
+  backdropFilter: "blur(22px) saturate(145%)",
+  boxShadow: "inset 0 1px 0 rgba(255,255,255,0.24), 0 14px 28px -28px rgba(15,23,42,0.42)",
+  transition: "border-color 160ms ease, background 160ms ease, transform 160ms ease",
+  _hover: {
+    borderColor: "border.strong",
+  },
+  _placeholder: {
+    color: "text.muted",
+  },
+  _dark: {
+    boxShadow: "inset 0 1px 0 rgba(255,255,255,0.03)",
+  },
+});
+
+export const fieldControlSmClass = css({
+  width: "100%",
+  minHeight: "40px",
+  borderRadius: "lg",
+  borderWidth: "1px",
+  borderColor: "border.default",
+  bg: "bg.input",
+  color: "text.primary",
+  fontSize: "sm",
+  lineHeight: "1.45",
+  px: "3",
+  py: "2.5",
+  backdropFilter: "blur(20px) saturate(145%)",
+  boxShadow: "inset 0 1px 0 rgba(255,255,255,0.2)",
+  transition: "border-color 160ms ease, background 160ms ease",
+  _hover: {
+    borderColor: "border.strong",
+  },
+  _placeholder: {
+    color: "text.muted",
+  },
+  _dark: {
+    boxShadow: "inset 0 1px 0 rgba(255,255,255,0.03)",
+  },
+});
+
+export const fieldTextareaClass = css({
+  width: "100%",
+  minHeight: "420px",
+  borderRadius: "2xl",
+  borderWidth: "1px",
+  borderColor: "border.default",
+  bg: "bg.input",
+  color: "text.primary",
+  fontFamily: "mono",
+  fontSize: "sm",
+  lineHeight: "1.6",
+  px: "4",
+  py: "4",
+  backdropFilter: "blur(24px) saturate(145%)",
+  boxShadow: "inset 0 1px 0 rgba(255,255,255,0.24), 0 18px 36px -32px rgba(15,23,42,0.42)",
+  _hover: {
+    borderColor: "border.strong",
+  },
+  _dark: {
+    boxShadow: "inset 0 1px 0 rgba(255,255,255,0.03)",
+  },
+});

package/src/styles/primitives/surfaces.ts

@@ -0,0 +1,52 @@
+import { css } from "@styled/css";
+
+export const surfacePanelClass = css({
+  position: "relative",
+  overflow: "hidden",
+  borderRadius: "3xl",
+  borderWidth: "1px",
+  borderColor: "border.subtle",
+  bg: "bg.card",
+  backdropFilter: "blur(28px) saturate(155%)",
+  boxShadow: "0 25px 30px -35px rgba(15,23,42,0.42)",
+  _before: {
+    content: "\"\"",
+    position: "absolute",
+    inset: "0",
+    pointerEvents: "none",
+    background:
+      "linear-gradient(180deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.04) 18%, rgba(255,255,255,0) 100%)",
+  },
+  _dark: {
+    backdropFilter: "blur(12px) saturate(110%)",
+    boxShadow: "0 16px 34px -28px rgba(0,0,0,0.92)",
+    _before: {
+      background: "none",
+    },
+  },
+});
+
+export const insetPanelClass = css({
+  borderRadius: "2xl",
+  borderWidth: "1px",
+  borderColor: "border.soft",
+  bg: "bg.cardAlt",
+  backdropFilter: "blur(24px) saturate(145%)",
+  boxShadow: "inset 0 1px 0 rgba(255,255,255,0.22)",
+  _dark: {
+    backdropFilter: "blur(10px) saturate(105%)",
+    boxShadow: "inset 0 1px 0 rgba(255,255,255,0.03)",
+  },
+});
+
+export const elevatedPanelClass = css({
+  borderRadius: "2xl",
+  borderWidth: "1px",
+  borderColor: "border.default",
+  bg: "bg.cardStrong",
+  backdropFilter: "blur(24px) saturate(145%)",
+  boxShadow: "0 16px 32px -28px rgba(15,23,42,0.42)",
+  _dark: {
+    boxShadow: "0 16px 34px -28px rgba(0,0,0,0.92)",
+  },
+});

package/src/styles/primitives/typography.ts

@@ -0,0 +1,42 @@
+import { css } from "@styled/css";
+
+export const eyebrowClass = css({
+  fontSize: "xs",
+  textTransform: "uppercase",
+  letterSpacing: "0.12em",
+  color: "text.muted",
+  fontWeight: "700",
+});
+
+export const sectionTitleClass = css({
+  fontFamily: "heading",
+  fontSize: { base: "2xl", md: "3xl" },
+  lineHeight: "1",
+  color: "text.primary",
+});
+
+export const sectionDescriptionClass = css({
+  color: "text.secondary",
+  lineHeight: "1.65",
+  fontSize: "sm",
+});
+
+export const helperTextClass = css({
+  color: "text.secondary",
+  fontSize: "sm",
+  lineHeight: "1.6",
+});
+
+export const metricValueClass = css({
+  color: "text.primary",
+  fontWeight: "700",
+  lineHeight: "1.1",
+});
+
+export const codeBlockClass = css({
+  whiteSpace: "pre-wrap",
+  fontFamily: "mono",
+  fontSize: "sm",
+  lineHeight: "1.65",
+  color: "text.secondary",
+});

package/src/styles/recipes/badge.recipe.ts

@@ -0,0 +1,54 @@
+import { cva } from "@styled/css";
+
+export const badgeRecipe = cva({
+  base: {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "1.5",
+    borderRadius: "full",
+    borderWidth: "1px",
+    px: "3",
+    py: "2",
+    fontSize: "sm",
+    fontWeight: "600",
+    lineHeight: "1",
+    whiteSpace: "nowrap",
+    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: {
+      neutral: {
+        borderColor: "badge.neutralBorder",
+        bg: "badge.neutralBg",
+        color: "badge.neutralText",
+      },
+      info: {
+        borderColor: "badge.infoBorder",
+        bg: "badge.infoBg",
+        color: "badge.infoText",
+      },
+      success: {
+        borderColor: "badge.successBorder",
+        bg: "badge.successBg",
+        color: "badge.successText",
+      },
+      warning: {
+        borderColor: "badge.warningBorder",
+        bg: "badge.warningBg",
+        color: "badge.warningText",
+      },
+    },
+    size: {
+      sm: { px: "2.5", py: "1.5", fontSize: "xs" },
+      md: {},
+    },
+  },
+  defaultVariants: {
+    tone: "neutral",
+    size: "md",
+  },
+});