@stll/ui 0.5.2 → 0.7.0

package/dist/review/review-diff-text.js

@@ -0,0 +1,67 @@
+import { cn } from "../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/review/review-diff-text.tsx
+const TRACKED_DELETION_STYLE = {
+	color: "color-mix(in oklch, var(--destructive) 35%, var(--muted-foreground))",
+	textDecorationLine: "line-through",
+	textDecorationThickness: "1px",
+	textDecorationColor: "color-mix(in oklch, var(--destructive) 30%, var(--muted-foreground))"
+};
+const TRACKED_INSERTION_STYLE = {
+	borderRadius: "3px",
+	padding: "0 2px",
+	backgroundColor: "color-mix(in oklch, var(--success) 14%, transparent)",
+	boxShadow: "inset 0 0 0 1px color-mix(in oklch, var(--success) 28%, transparent)",
+	textDecorationLine: "none",
+	boxDecorationBreak: "clone",
+	WebkitBoxDecorationBreak: "clone"
+};
+/** Inserted text, wherever it is shown. */
+const ReviewDiffInsertion = ({ className, children }) => /* @__PURE__ */ jsx("ins", {
+	className,
+	style: TRACKED_INSERTION_STYLE,
+	children
+});
+/** Deleted text, wherever it is shown. */
+const ReviewDiffDeletion = ({ className, children }) => /* @__PURE__ */ jsx("del", {
+	className,
+	style: TRACKED_DELETION_STYLE,
+	children
+});
+/** A word-level diff rendered inline, in the product's one track-changes
+*  language. */
+const ReviewDiffText = ({ segments, className }) => {
+	const keys = reviewDiffSegmentKeys(segments);
+	return /* @__PURE__ */ jsx("span", {
+		className: cn(className),
+		"data-slot": "review-diff-text",
+		children: segments.map((segment, index) => /* @__PURE__ */ jsx(ReviewDiffSegmentSpan, { segment }, keys[index]))
+	});
+};
+/**
+* A stable render key per segment. Type and text alone repeat inside a single
+* diff (the same word deleted twice), so each repetition carries its
+* occurrence count; the result is stable across renders of the same diff and
+* never falls back to the array index.
+*/
+const reviewDiffSegmentKeys = (segments) => {
+	const seen = /* @__PURE__ */ new Map();
+	return segments.map((segment) => {
+		const base = `${segment.type}-${segment.text}`;
+		const occurrence = seen.get(base) ?? 0;
+		seen.set(base, occurrence + 1);
+		return `${base}-${occurrence}`;
+	});
+};
+const ReviewDiffSegmentSpan = ({ segment }) => {
+	switch (segment.type) {
+		case "insert": return /* @__PURE__ */ jsx(ReviewDiffInsertion, { children: segment.text });
+		case "delete": return /* @__PURE__ */ jsx(ReviewDiffDeletion, { children: segment.text });
+		case "equal": return /* @__PURE__ */ jsx("span", { children: segment.text });
+		default:
+			segment.type;
+			return null;
+	}
+};
+//#endregion
+export { ReviewDiffDeletion, ReviewDiffInsertion, ReviewDiffText, TRACKED_DELETION_STYLE, TRACKED_INSERTION_STYLE, reviewDiffSegmentKeys };

package/dist/review/review-out-of-date-notice.d.ts

@@ -0,0 +1,28 @@
+import { ReactNode } from "react";
+//#region src/review/review-out-of-date-notice.d.ts
+type ReviewOutOfDateTone = "warning" | "muted";
+/**
+ * One reason a review has fallen behind. Carries its own key so the list is
+ * never rendered by array index: reasons come and go independently (the
+ * document changed, the playbook moved on, the source was deleted) and each
+ * one has a stable identity at its call site.
+ */
+type ReviewOutOfDateReason = {
+  id: string;
+  label: ReactNode;
+};
+type ReviewOutOfDateNoticeProps = {
+  reasons: readonly ReviewOutOfDateReason[];
+  actionLabel?: ReactNode;
+  onAction?: (() => void) | undefined;
+  tone?: ReviewOutOfDateTone;
+  className?: string;
+};
+/**
+ * What a review no longer reflects. Every applicable reason is listed
+ * together: they are different reasons to run again, and a reviewer working
+ * through findings should see each one rather than the first.
+ */
+declare const ReviewOutOfDateNotice: ({ reasons, actionLabel, onAction, tone, className }: ReviewOutOfDateNoticeProps) => import("react").JSX.Element | null;
+//#endregion
+export { ReviewOutOfDateNotice, ReviewOutOfDateReason, ReviewOutOfDateTone };

package/dist/review/review-out-of-date-notice.js

@@ -0,0 +1,32 @@
+import { cn } from "../lib/utils.js";
+import { Button } from "../components/button.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/review/review-out-of-date-notice.tsx
+/**
+* What a review no longer reflects. Every applicable reason is listed
+* together: they are different reasons to run again, and a reviewer working
+* through findings should see each one rather than the first.
+*/
+const ReviewOutOfDateNotice = ({ reasons, actionLabel, onAction, tone = "warning", className }) => {
+	if (reasons.length === 0) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("mb-2 rounded-lg border px-3 py-2", TONE_CLASS[tone], className),
+		"data-slot": "review-out-of-date-notice",
+		children: [/* @__PURE__ */ jsx("ul", {
+			className: "space-y-1 text-xs",
+			children: reasons.map((reason) => /* @__PURE__ */ jsx("li", { children: reason.label }, reason.id))
+		}), onAction === void 0 ? null : /* @__PURE__ */ jsx(Button, {
+			className: "mt-2",
+			onClick: onAction,
+			size: "xs",
+			variant: "outline",
+			children: actionLabel
+		})]
+	});
+};
+const TONE_CLASS = {
+	warning: "border-warning/30 bg-warning/10 text-warning-foreground",
+	muted: "border-border bg-muted/50 text-muted-foreground"
+};
+//#endregion
+export { ReviewOutOfDateNotice };

package/dist/review/review-severity-dot.d.ts

@@ -0,0 +1,27 @@
+import { ReviewStatusTone } from "./review-status-badge.js";
+//#region src/review/review-severity-dot.d.ts
+/**
+ * How bad a finding is, on the one scale every review surface reports against.
+ * Vocabularies that stop short of five levels (a playbook's blocker/high/
+ * medium/low, a suggestion's high/medium/low/unspecified) map onto this at
+ * their call site rather than growing a palette of their own.
+ */
+type ReviewSeverityLevel = "critical" | "high" | "medium" | "low" | "none";
+type ReviewSeverityDotProps = {
+  level: ReviewSeverityLevel;
+  className?: string | undefined;
+};
+/** The dot that precedes a severity label, and the one place a severity level
+ *  turns into a colour. */
+declare const ReviewSeverityDot: ({ level, className }: ReviewSeverityDotProps) => import("react").JSX.Element;
+type ReviewStatusDotProps = {
+  tone: ReviewStatusTone;
+  className?: string | undefined;
+};
+/** The same dot keyed by tone, for vocabularies that are not severities
+ *  (verdicts, directed impact, comparison assessments). */
+declare const ReviewStatusDot: ({ tone, className }: ReviewStatusDotProps) => import("react").JSX.Element;
+/** The tone a severity level carries, so a badge and its dot cannot disagree. */
+declare const reviewSeverityTone: (level: ReviewSeverityLevel) => ReviewStatusTone;
+//#endregion
+export { ReviewSeverityDot, ReviewSeverityLevel, ReviewStatusDot, reviewSeverityTone };

package/dist/review/review-severity-dot.js

@@ -0,0 +1,35 @@
+import { cn } from "../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/review/review-severity-dot.tsx
+/** The dot that precedes a severity label, and the one place a severity level
+*  turns into a colour. */
+const ReviewSeverityDot = ({ level, className }) => /* @__PURE__ */ jsx(ReviewStatusDot, {
+	className,
+	tone: SEVERITY_TONE[level]
+});
+/** The same dot keyed by tone, for vocabularies that are not severities
+*  (verdicts, directed impact, comparison assessments). */
+const ReviewStatusDot = ({ tone, className }) => /* @__PURE__ */ jsx("span", {
+	"aria-hidden": "true",
+	className: cn(REVIEW_STATUS_DOT_BASE_CLASS, TONE_DOT_CLASS[tone], className),
+	"data-slot": "review-status-dot"
+});
+/** The tone a severity level carries, so a badge and its dot cannot disagree. */
+const reviewSeverityTone = (level) => SEVERITY_TONE[level];
+const REVIEW_STATUS_DOT_BASE_CLASS = "size-1.5 shrink-0 rounded-full";
+const SEVERITY_TONE = {
+	critical: "destructive",
+	high: "destructive",
+	medium: "warning",
+	low: "neutral",
+	none: "success"
+};
+const TONE_DOT_CLASS = {
+	neutral: "bg-muted-foreground",
+	success: "bg-success",
+	warning: "bg-warning",
+	destructive: "bg-destructive",
+	highlight: "bg-highlight-foreground"
+};
+//#endregion
+export { ReviewSeverityDot, ReviewStatusDot, reviewSeverityTone };

package/dist/review/review-status-badge.d.ts

@@ -0,0 +1,30 @@
+import { ReactNode } from "react";
+//#region src/review/review-status-badge.d.ts
+/**
+ * The semantic weight of a review status, independent of the words a surface
+ * uses for it. Playbook verdicts, overall risk, proposal states, suggestion
+ * decisions and approval states each map their own vocabulary onto one tone,
+ * so "this is fine" reads as the same green everywhere and a reviewer never
+ * has to relearn a palette when moving between panels.
+ */
+type ReviewStatusTone = "neutral" | "success" | "warning" | "destructive" | "highlight";
+type ReviewStatusVariant = "solid" | "outline" | "strong";
+type ReviewStatusSize = "xs" | "sm";
+type ReviewStatusBadgeProps = {
+  tone: ReviewStatusTone;
+  /** Outlined by default. `solid` adds a tonal wash for a status that has to
+   *  carry more weight than its neighbours (an overall risk, an approval);
+   *  `strong` fills it outright, reserved for the one state on a surface that
+   *  must escalate past every other badge beside it. */
+  variant?: ReviewStatusVariant;
+  size?: ReviewStatusSize;
+  /** Leading glyph, typically a `<ReviewSeverityDot />`. */
+  icon?: ReactNode;
+  className?: string;
+  children: ReactNode;
+};
+/** One status pill for every review surface: one radius, one padding scale,
+ *  one tone vocabulary. */
+declare const ReviewStatusBadge: ({ tone, variant, size, icon, className, children }: ReviewStatusBadgeProps) => import("react").JSX.Element;
+//#endregion
+export { ReviewStatusBadge, ReviewStatusSize, ReviewStatusTone, ReviewStatusVariant };

package/dist/review/review-status-badge.js

@@ -0,0 +1,45 @@
+import { cn } from "../lib/utils.js";
+import { jsxs } from "react/jsx-runtime";
+//#region src/review/review-status-badge.tsx
+/** One status pill for every review surface: one radius, one padding scale,
+*  one tone vocabulary. */
+const ReviewStatusBadge = ({ tone, variant = "outline", size = "xs", icon, className, children }) => /* @__PURE__ */ jsxs("span", {
+	className: cn(REVIEW_STATUS_BADGE_BASE_CLASS, SIZE_CLASS[size], VARIANT_CLASS[variant], TONE_CLASS[variant][tone], className),
+	"data-slot": "review-status-badge",
+	children: [icon, children]
+});
+const REVIEW_STATUS_BADGE_BASE_CLASS = "inline-flex shrink-0 items-center rounded-full border font-medium whitespace-nowrap";
+const SIZE_CLASS = {
+	xs: "gap-1 px-1.5 py-0.5 text-[11px]",
+	sm: "gap-1.5 px-2 py-0.5 text-xs"
+};
+const TONE_CLASS = {
+	outline: {
+		neutral: "border-border text-muted-foreground",
+		success: "border-success/30 text-success",
+		warning: "border-warning/30 text-warning-foreground",
+		destructive: "border-destructive/30 text-destructive",
+		highlight: "border-highlight text-highlight-foreground"
+	},
+	solid: {
+		neutral: "border-transparent bg-muted text-muted-foreground",
+		success: "border-transparent bg-success/12 text-success",
+		warning: "border-transparent bg-warning/12 text-warning-foreground",
+		destructive: "border-transparent bg-destructive/12 text-destructive",
+		highlight: "border-transparent bg-highlight/50 text-highlight-foreground"
+	},
+	strong: {
+		neutral: "border-transparent bg-muted-foreground text-background",
+		success: "border-transparent bg-success text-success-foreground",
+		warning: "border-transparent bg-warning text-warning-foreground",
+		destructive: "border-transparent bg-destructive text-destructive-foreground",
+		highlight: "border-transparent bg-highlight text-highlight-foreground"
+	}
+};
+const VARIANT_CLASS = {
+	outline: "",
+	solid: "",
+	strong: "[&_[data-slot=review-status-dot]]:bg-current"
+};
+//#endregion
+export { ReviewStatusBadge };

package/dist/styles/theme.css

@@ -69,6 +69,32 @@
      affordance the user has to notice, not merely acknowledge. */
   --animate-attention-flash: attention-flash 700ms ease-out;
   --animate-attention-flash-twice: attention-flash 700ms ease-out 2;
+  /* The Stella mark breathing: the one indeterminate loading motion.
+     Opacity and scale only, so it never triggers layout. */
+  --animate-loader: loader 1.8s ease-in-out infinite;
+  /* A list item settling into place; callers stagger it by index. */
+  --animate-rise: rise 240ms ease-out both;
+  @keyframes loader {
+    0%,
+    100% {
+      opacity: 0.35;
+      transform: scale(0.94);
+    }
+    50% {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+  @keyframes rise {
+    from {
+      opacity: 0;
+      transform: translateY(4px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
   @keyframes skeleton {
     to {
       background-position: -200% 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stll/ui",
-  "version": "0.5.2",
+  "version": "0.7.0",
   "description": "Stella's design system: bidi-aware React primitives built on Base UI, the dockable inspector pane, and the Tailwind v4 theme they are styled with.",
   "keywords": [
     "base-ui",
@@ -41,6 +41,10 @@
       "types": "./dist/components/alert-dialog.d.ts",
       "import": "./dist/components/alert-dialog.js"
     },
+    "./application-shell": {
+      "types": "./dist/components/application-shell.d.ts",
+      "import": "./dist/components/application-shell.js"
+    },
     "./avatar": {
       "types": "./dist/components/avatar.d.ts",
       "import": "./dist/components/avatar.js"
@@ -133,6 +137,10 @@
       "types": "./dist/components/input-group.d.ts",
       "import": "./dist/components/input-group.js"
     },
+    "./initials": {
+      "types": "./dist/lib/initials.d.ts",
+      "import": "./dist/lib/initials.js"
+    },
     "./input-otp": {
       "types": "./dist/components/input-otp.d.ts",
       "import": "./dist/components/input-otp.js"
@@ -173,6 +181,34 @@
       "types": "./dist/components/preview-pane.d.ts",
       "import": "./dist/components/preview-pane.js"
     },
+    "./review-author-avatar": {
+      "types": "./dist/review/review-author-avatar.d.ts",
+      "import": "./dist/review/review-author-avatar.js"
+    },
+    "./review-comment-card": {
+      "types": "./dist/review/review-comment-card.d.ts",
+      "import": "./dist/review/review-comment-card.js"
+    },
+    "./review-decision-actions": {
+      "types": "./dist/review/review-decision-actions.d.ts",
+      "import": "./dist/review/review-decision-actions.js"
+    },
+    "./review-diff-text": {
+      "types": "./dist/review/review-diff-text.d.ts",
+      "import": "./dist/review/review-diff-text.js"
+    },
+    "./review-out-of-date-notice": {
+      "types": "./dist/review/review-out-of-date-notice.d.ts",
+      "import": "./dist/review/review-out-of-date-notice.js"
+    },
+    "./review-severity-dot": {
+      "types": "./dist/review/review-severity-dot.d.ts",
+      "import": "./dist/review/review-severity-dot.js"
+    },
+    "./review-status-badge": {
+      "types": "./dist/review/review-status-badge.d.ts",
+      "import": "./dist/review/review-status-badge.js"
+    },
     "./scroll-area": {
       "types": "./dist/components/scroll-area.d.ts",
       "import": "./dist/components/scroll-area.js"
@@ -201,6 +237,10 @@
       "types": "./dist/components/sheet.d.ts",
       "import": "./dist/components/sheet.js"
     },
+    "./loader": {
+      "types": "./dist/components/loader.d.ts",
+      "import": "./dist/components/loader.js"
+    },
     "./skeleton": {
       "types": "./dist/components/skeleton.d.ts",
       "import": "./dist/components/skeleton.js"
@@ -278,6 +318,10 @@
       "types": "./dist/components/alert-dialog.d.ts",
       "import": "./dist/components/alert-dialog.js"
     },
+    "./components/application-shell": {
+      "types": "./dist/components/application-shell.d.ts",
+      "import": "./dist/components/application-shell.js"
+    },
     "./components/avatar": {
       "types": "./dist/components/avatar.d.ts",
       "import": "./dist/components/avatar.js"
@@ -490,7 +534,10 @@
     "clean": "git clean -xdf dist .cache .turbo node_modules",
     "build": "tsdown",
     "pack:dry-run": "bun pm pack --dry-run",
-    "test": "bun test src",
+    "test": "bun run test:unit",
+    "test:unit": "bun test src --path-ignore-patterns '**/*.playwright.spec.ts'",
+    "test:browser": "playwright test --config playwright.config.ts",
+    "pack:check": "cd ../.. && bun scripts/check-published-exports.ts packages/ui",
     "typecheck": "bun ../../packages/scripts/src/tsc-native.ts --noEmit",
     "lint": "cd ../.. && bun --bun oxlint -c oxlint.config.ts --report-unused-disable-directives-severity=error --deny-warnings --type-aware packages/ui",
     "lint:fix": "cd ../.. && bun --bun oxlint -c oxlint.config.ts --type-aware --fix packages/ui",
@@ -506,8 +553,11 @@
   },
   "devDependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "^3.0.0",
-    "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^3.0.1",
+    "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^3.1.0",
     "@base-ui/react": "1.7.0",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@playwright/test": "^1.62.0",
     "@stll/typescript-config": "0.0.0",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
@@ -515,12 +565,15 @@
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
     "tailwindcss": "4.3.3",
-    "tsdown": "0.22.14"
+    "tsdown": "0.22.14",
+    "vite": "8.2.1"
   },
   "peerDependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "^3.0.0",
-    "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^3.0.1",
+    "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^3.1.0",
     "@base-ui/react": "^1.7.0",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
     "react": ">=19",
     "react-dom": ">=19",
     "tailwindcss": "^4.3.0"