@stll/ui 0.6.0 → 0.8.0

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stll/ui",
-  "version": "0.6.0",
+  "version": "0.8.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",
@@ -37,10 +37,18 @@
       "types": "./dist/components/accordion.d.ts",
       "import": "./dist/components/accordion.js"
     },
+    "./application-rail": {
+      "types": "./dist/components/application-rail.d.ts",
+      "import": "./dist/components/application-rail.js"
+    },
     "./alert-dialog": {
       "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"
@@ -81,6 +89,10 @@
       "types": "./dist/components/command.d.ts",
       "import": "./dist/components/command.js"
     },
+    "./control-size": {
+      "types": "./dist/lib/control-size.d.ts",
+      "import": "./dist/lib/control-size.js"
+    },
     "./calendar": {
       "types": "./dist/calendar/index.d.ts",
       "import": "./dist/calendar/index.js"
@@ -133,6 +145,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 +189,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"
@@ -278,10 +322,18 @@
       "types": "./dist/components/accordion.d.ts",
       "import": "./dist/components/accordion.js"
     },
+    "./components/application-rail": {
+      "types": "./dist/components/application-rail.d.ts",
+      "import": "./dist/components/application-rail.js"
+    },
     "./components/alert-dialog": {
       "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"