@processengine/uikit 0.1.0 → 0.2.0

package/CHANGELOG.md

@@ -4,6 +4,16 @@
 
 ## [Unreleased]
 
+## [0.2.0] - 2026-06-09
+
+### Добавлено
+- Router-agnostic примитивы `BackLink`, `PageLayout`, `PageShell`.
+- Generic `ServerControl` без backend-specific логики.
+- `StatusBadge`, `InfoGrid`, `InfoItem`, `DataCard` для переиспользуемых карточек и метаданных.
+
+### Изменено
+- `PageHeader` получил `className` и настраиваемый `titleId`.
+
 ## [0.1.0] - 2026-06-09
 
 ### Добавлено

package/README.md

@@ -4,17 +4,7 @@ Shared UI kit for ProcessEngine interfaces: orchestrator admin UI, Rules UI, Flo
 
 ## Install
 
-Before the first npm release, consumers can use a local file dependency:
-
-```json
-{
-  "dependencies": {
-    "@processengine/uikit": "file:../uikit"
-  }
-}
-```
-
-After publication, pin exact versions in production consumers:
+Pin exact versions in production consumers:
 
 ```json
 {
@@ -46,7 +36,8 @@ The sandbox bundle is exported as `@processengine/uikit/sandbox.css`; consuming
 import { Tabs, JsonPanel, CopyableValue } from "@processengine/uikit";
 ```
 
-The React layer intentionally does not depend on routing. Consumers keep their own router-specific links and page shells.
+The React layer intentionally does not depend on routing or backend clients.
+Consumers keep their own router-specific links and backend-specific state.
 
 ## Release Process
 

package/dist/components.css

@@ -391,6 +391,186 @@
   color: var(--surface-card);
 }
 
+.app-status-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-block-size: 2.05rem;
+  padding: 0.35rem 0.75rem;
+  border: 0.0625rem solid var(--status-neutral-border);
+  border-radius: 999px;
+  background: var(--status-neutral-bg);
+  color: var(--status-neutral-text);
+  font-size: 0.78rem;
+  line-height: 1;
+  font-weight: 750;
+  white-space: nowrap;
+}
+
+.app-status-badge--success {
+  border-color: var(--status-success-border);
+  background: var(--status-success-bg);
+  color: var(--status-success-text);
+}
+
+.app-status-badge--error {
+  border-color: var(--status-error-border);
+  background: var(--status-error-bg);
+  color: var(--status-error-text);
+}
+
+.app-status-badge--warning {
+  border-color: var(--status-warning-border);
+  background: var(--status-warning-bg);
+  color: var(--status-warning-text);
+}
+
+.app-status-badge--neutral {
+  border-color: var(--status-neutral-border);
+  background: var(--status-neutral-bg);
+  color: var(--status-neutral-text);
+}
+
+.app-data-card {
+  padding: 1rem;
+  border: 0.0625rem solid var(--border-color);
+  border-radius: var(--radius-lg);
+  background: var(--surface-card);
+  box-shadow: var(--shadow-sm);
+}
+
+.app-data-card--success {
+  border-color: var(--status-success-border);
+  background: var(--status-success-bg);
+}
+
+.app-data-card--error {
+  border-color: var(--status-error-border);
+  background: var(--status-error-bg);
+}
+
+.app-data-card--warning {
+  border-color: var(--status-warning-border);
+  background: var(--status-warning-bg);
+}
+
+.app-data-card--neutral {
+  border-color: var(--status-neutral-border);
+  background: var(--status-neutral-bg);
+}
+
+.app-data-card__header {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  margin-bottom: 0.875rem;
+}
+
+.app-data-card__heading {
+  min-width: 0;
+}
+
+.app-data-card__eyebrow {
+  margin-bottom: 0.2rem;
+  color: var(--text-faint);
+  font-size: 0.68rem;
+  line-height: 1.2;
+  font-weight: 800;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.app-data-card__title {
+  color: var(--text-strong);
+  font-size: 1rem;
+  line-height: 1.2;
+  font-weight: 800;
+  letter-spacing: -0.02em;
+}
+
+.app-data-card__subtitle {
+  margin-top: 0.35rem;
+  color: var(--text-dim);
+  font-size: 0.9rem;
+  line-height: 1.45;
+}
+
+.app-data-card__aside {
+  flex: 0 0 auto;
+}
+
+.app-data-card__body {
+  min-width: 0;
+}
+
+.app-data-card__footer {
+  margin-top: 0.875rem;
+  padding-top: 0.875rem;
+  border-top: 0.0625rem solid var(--border-color);
+}
+
+.app-info-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
+  gap: 1rem 1.5rem;
+}
+
+.app-info-grid--compact {
+  gap: 0.75rem 1rem;
+}
+
+.app-info-item {
+  min-width: 0;
+}
+
+.app-info-item__label {
+  display: block;
+  margin-bottom: 0.28rem;
+  color: var(--text-faint);
+  font-size: 0.68rem;
+  line-height: 1.2;
+  font-weight: 800;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.app-info-item__value {
+  margin: 0;
+  color: var(--text-strong);
+  font-size: 0.88rem;
+  line-height: 1.35;
+  font-weight: 750;
+  overflow-wrap: anywhere;
+}
+
+.app-info-item__description {
+  margin: 0.3rem 0 0;
+  color: var(--text-dim);
+  font-size: 0.82rem;
+  line-height: 1.35;
+  overflow-wrap: anywhere;
+}
+
+.app-info-item--tone-success .app-info-item__value,
+.app-info-item--tone-success .app-info-item__description {
+  color: var(--status-success-text);
+}
+
+.app-info-item--tone-error .app-info-item__value,
+.app-info-item--tone-error .app-info-item__description {
+  color: var(--status-error-text);
+}
+
+.app-info-item--tone-warning .app-info-item__value,
+.app-info-item--tone-warning .app-info-item__description {
+  color: var(--status-warning-text);
+}
+
+.app-info-item--tone-neutral .app-info-item__value,
+.app-info-item--tone-neutral .app-info-item__description {
+  color: var(--status-neutral-text);
+}
+
 .app-empty-text {
   font-size: 0.95rem;
   line-height: 1.6;

package/dist/react/BackLink.d.ts

@@ -0,0 +1,9 @@
+type BackLinkProps = {
+    label: string;
+    href?: string;
+    className?: string;
+    onClick?: () => void;
+};
+export declare function BackLink({ label, href, className, onClick }: BackLinkProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=BackLink.d.ts.map

package/dist/react/BackLink.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BackLink.d.ts","sourceRoot":"","sources":["../../src/react/BackLink.tsx"],"names":[],"mappings":"AAEA,KAAK,aAAa,GAAG;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAqBF,wBAAgB,QAAQ,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,OAAO,EAAE,EAAE,aAAa,+BAyB1E"}

package/dist/react/BackLink.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "./cn";
+function BackIcon() {
+    return (_jsx("svg", { "aria-hidden": "true", className: "app-back-link__icon", fill: "none", viewBox: "0 0 20 20", children: _jsx("path", { d: "M12.5 4.5 7 10l5.5 5.5", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2" }) }));
+}
+export function BackLink({ label, href, className, onClick }) {
+    const content = (_jsxs(_Fragment, { children: [_jsx(BackIcon, {}), _jsx("span", { children: label })] }));
+    if (href) {
+        return (_jsx("a", { className: cn("app-back-link", className), href: href, onClick: onClick, children: content }));
+    }
+    return (_jsx("button", { className: cn("app-back-link", className), type: "button", onClick: onClick, children: content }));
+}

package/dist/react/DataCard.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from "react";
+type DataCardProps = {
+    children: ReactNode;
+    title?: ReactNode;
+    eyebrow?: ReactNode;
+    subtitle?: ReactNode;
+    aside?: ReactNode;
+    footer?: ReactNode;
+    className?: string;
+    tone?: "success" | "error" | "neutral" | "warning";
+};
+export declare function DataCard({ children, title, eyebrow, subtitle, aside, footer, className, tone, }: DataCardProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=DataCard.d.ts.map

package/dist/react/DataCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataCard.d.ts","sourceRoot":"","sources":["../../src/react/DataCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,KAAK,aAAa,GAAG;IACnB,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC;CACpD,CAAC;AAEF,wBAAgB,QAAQ,CAAC,EACvB,QAAQ,EACR,KAAK,EACL,OAAO,EACP,QAAQ,EACR,KAAK,EACL,MAAM,EACN,SAAS,EACT,IAAI,GACL,EAAE,aAAa,+BAmBf"}

package/dist/react/DataCard.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "./cn";
+export function DataCard({ children, title, eyebrow, subtitle, aside, footer, className, tone, }) {
+    const hasHeader = eyebrow || title || subtitle || aside;
+    return (_jsxs("article", { className: cn("app-data-card", tone && `app-data-card--${tone}`, className), children: [hasHeader ? (_jsxs("header", { className: "app-data-card__header", children: [_jsxs("div", { className: "app-data-card__heading", children: [eyebrow ? _jsx("p", { className: "app-data-card__eyebrow", children: eyebrow }) : null, title ? _jsx("h2", { className: "app-data-card__title", children: title }) : null, subtitle ? _jsx("p", { className: "app-data-card__subtitle", children: subtitle }) : null] }), aside ? _jsx("div", { className: "app-data-card__aside", children: aside }) : null] })) : null, _jsx("div", { className: "app-data-card__body", children: children }), footer ? _jsx("footer", { className: "app-data-card__footer", children: footer }) : null] }));
+}

package/dist/react/InfoGrid.d.ts

@@ -0,0 +1,18 @@
+import type { ReactNode } from "react";
+type InfoGridProps = {
+    children?: ReactNode;
+    items?: InfoItemData[];
+    className?: string;
+    compact?: boolean;
+};
+export type InfoItemData = {
+    label: ReactNode;
+    value: ReactNode;
+    description?: ReactNode;
+    copyValue?: string;
+    tone?: "success" | "error" | "neutral" | "warning";
+};
+export declare function InfoGrid({ children, items, className, compact, }: InfoGridProps): import("react").JSX.Element;
+export declare function InfoItem({ label, value, description, copyValue, tone, }: InfoItemData): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=InfoGrid.d.ts.map

package/dist/react/InfoGrid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InfoGrid.d.ts","sourceRoot":"","sources":["../../src/react/InfoGrid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,KAAK,aAAa,GAAG;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,YAAY,EAAE,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC;CACpD,CAAC;AAEF,wBAAgB,QAAQ,CAAC,EACvB,QAAQ,EACR,KAAK,EACL,SAAS,EACT,OAAe,GAChB,EAAE,aAAa,+BAgBf;AAED,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,KAAK,EACL,WAAW,EACX,SAAS,EACT,IAAI,GACL,EAAE,YAAY,+BAYd"}

package/dist/react/InfoGrid.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CopyableValue } from "./CopyableValue";
+import { cn } from "./cn";
+export function InfoGrid({ children, items, className, compact = false, }) {
+    return (_jsxs("dl", { className: cn("app-info-grid", compact && "app-info-grid--compact", className), children: [items?.map((item, index) => (_jsx(InfoItem, { label: item.label, value: item.value, description: item.description, copyValue: item.copyValue, tone: item.tone }, `${String(item.label)}-${index}`))), children] }));
+}
+export function InfoItem({ label, value, description, copyValue, tone, }) {
+    return (_jsxs("div", { className: cn("app-info-item", tone && `app-info-item--tone-${tone}`), children: [_jsx("dt", { className: "app-info-item__label", children: label }), _jsx("dd", { className: "app-info-item__value", children: copyValue ? _jsx(CopyableValue, { value: copyValue }) : value }), description ? (_jsx("dd", { className: "app-info-item__description", children: description })) : null] }));
+}

package/dist/react/PageHeader.d.ts

@@ -4,7 +4,9 @@ type PageHeaderProps = {
     subtitle?: ReactNode;
     eyebrow?: string;
     detail?: boolean;
+    className?: string;
+    titleId?: string;
 };
-export declare function PageHeader({ title, subtitle, eyebrow, detail }: PageHeaderProps): import("react").JSX.Element;
+export declare function PageHeader({ title, subtitle, eyebrow, detail, className, titleId, }: PageHeaderProps): import("react").JSX.Element;
 export {};
 //# sourceMappingURL=PageHeader.d.ts.map

package/dist/react/PageHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PageHeader.d.ts","sourceRoot":"","sources":["../../src/react/PageHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,KAAK,eAAe,GAAG;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,eAAe,+BAU/E"}
+{"version":3,"file":"PageHeader.d.ts","sourceRoot":"","sources":["../../src/react/PageHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,KAAK,eAAe,GAAG;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,OAAO,EACP,MAAM,EACN,SAAS,EACT,OAAsB,GACvB,EAAE,eAAe,+BAgBjB"}

package/dist/react/PageHeader.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "./cn";
-export function PageHeader({ title, subtitle, eyebrow, detail }) {
-    return (_jsxs("header", { className: cn("app-page-header", detail && "app-page-header--detail"), children: [eyebrow ? _jsx("div", { className: "app-page-header__eyebrow", children: eyebrow }) : null, _jsx("h1", { className: "app-page-header__title", id: "page-title", children: title }), subtitle ? _jsx("div", { className: "app-page-header__subtitle", children: subtitle }) : null] }));
+export function PageHeader({ title, subtitle, eyebrow, detail, className, titleId = "page-title", }) {
+    return (_jsxs("header", { className: cn("app-page-header", detail && "app-page-header--detail", className), children: [eyebrow ? _jsx("div", { className: "app-page-header__eyebrow", children: eyebrow }) : null, _jsx("h1", { className: "app-page-header__title", id: titleId, children: title }), subtitle ? _jsx("div", { className: "app-page-header__subtitle", children: subtitle }) : null] }));
 }

package/dist/react/PageLayout.d.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from "react";
+type PageLayoutProps = {
+    children: ReactNode;
+    toolbar?: ReactNode;
+    className?: string;
+    frameClassName?: string;
+    shellClassName?: string;
+    labelledBy?: string;
+};
+export declare function PageLayout({ children, toolbar, className, frameClassName, shellClassName, labelledBy, }: PageLayoutProps): import("react").JSX.Element;
+export declare const PageShell: typeof PageLayout;
+export {};
+//# sourceMappingURL=PageLayout.d.ts.map

package/dist/react/PageLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageLayout.d.ts","sourceRoot":"","sources":["../../src/react/PageLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,KAAK,eAAe,GAAG;IACrB,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,OAAO,EACP,SAAS,EACT,cAAc,EACd,cAAc,EACd,UAAU,GACX,EAAE,eAAe,+BAcjB;AAED,eAAO,MAAM,SAAS,mBAAa,CAAC"}

package/dist/react/PageLayout.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "./cn";
+export function PageLayout({ children, toolbar, className, frameClassName, shellClassName, labelledBy, }) {
+    return (_jsx("main", { className: cn("app-page", className), children: _jsxs("div", { className: cn("app-shell-frame", frameClassName), children: [toolbar, _jsx("section", { className: cn("app-shell", shellClassName), "aria-labelledby": labelledBy, children: children })] }) }));
+}
+export const PageShell = PageLayout;

package/dist/react/ServerControl.d.ts

@@ -0,0 +1,14 @@
+type ServerControlProps = {
+    label: string;
+    value: string;
+    onSave: (value: string) => void;
+    placeholder?: string;
+    emptyValueLabel?: string;
+    className?: string;
+    inputAriaLabel?: string;
+    normalize?: (value: string) => string | null;
+    saveOnBlur?: boolean;
+};
+export declare function ServerControl({ label, value, onSave, placeholder, emptyValueLabel, className, inputAriaLabel, normalize, saveOnBlur, }: ServerControlProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=ServerControl.d.ts.map

package/dist/react/ServerControl.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ServerControl.d.ts","sourceRoot":"","sources":["../../src/react/ServerControl.tsx"],"names":[],"mappings":"AASA,KAAK,kBAAkB,GAAG;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,IAAI,CAAC;IAC7C,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,KAAK,EACL,MAAM,EACN,WAAW,EACX,eAA+B,EAC/B,SAAS,EACT,cAAc,EACd,SAA2C,EAC3C,UAAkB,GACnB,EAAE,kBAAkB,+BAiGpB"}

package/dist/react/ServerControl.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState, } from "react";
+import { cn } from "./cn";
+export function ServerControl({ label, value, onSave, placeholder, emptyValueLabel = "same-origin", className, inputAriaLabel, normalize = (nextValue) => nextValue.trim(), saveOnBlur = false, }) {
+    const [isEditing, setIsEditing] = useState(false);
+    const [draftValue, setDraftValue] = useState(value);
+    const [hasError, setHasError] = useState(false);
+    const inputRef = useRef(null);
+    useEffect(() => {
+        if (!isEditing) {
+            setDraftValue(value);
+        }
+    }, [isEditing, value]);
+    useEffect(() => {
+        if (isEditing) {
+            inputRef.current?.focus();
+            inputRef.current?.select();
+        }
+    }, [isEditing]);
+    function startEditing() {
+        setDraftValue(value);
+        setHasError(false);
+        setIsEditing(true);
+    }
+    function stopEditing() {
+        setDraftValue(value);
+        setHasError(false);
+        setIsEditing(false);
+    }
+    function saveValue() {
+        const normalizedValue = normalize(draftValue);
+        if (normalizedValue === null) {
+            setHasError(true);
+            return;
+        }
+        onSave(normalizedValue);
+        setHasError(false);
+        setIsEditing(false);
+    }
+    function handleSubmit(event) {
+        event.preventDefault();
+        saveValue();
+    }
+    function handleKeyDown(event) {
+        if (event.key === "Escape") {
+            event.preventDefault();
+            stopEditing();
+        }
+    }
+    if (isEditing) {
+        return (_jsx("form", { className: "app-server-control__form", onSubmit: handleSubmit, children: _jsxs("label", { className: "app-server-control app-server-control--editing", children: [_jsx("span", { className: "app-server-control__label", children: label }), _jsx("input", { ref: inputRef, className: cn("app-server-control__input", hasError && "app-server-control__input--error"), value: draftValue, onBlur: saveOnBlur ? saveValue : undefined, onChange: (event) => {
+                            setDraftValue(event.target.value);
+                            if (hasError) {
+                                setHasError(false);
+                            }
+                        }, onKeyDown: handleKeyDown, placeholder: placeholder, "aria-label": inputAriaLabel ?? label })] }) }));
+    }
+    return (_jsxs("button", { className: cn("app-server-control", className), type: "button", onClick: startEditing, title: value, children: [_jsx("span", { className: "app-server-control__label", children: label }), _jsx("span", { className: "app-server-control__value", children: value || emptyValueLabel })] }));
+}

package/dist/react/StatusBadge.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from "react";
+export type StatusBadgeTone = "success" | "error" | "neutral" | "warning";
+type StatusBadgeProps = {
+    label: ReactNode;
+    tone?: StatusBadgeTone;
+    className?: string;
+};
+export declare function StatusBadge({ label, tone, className, }: StatusBadgeProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=StatusBadge.d.ts.map

package/dist/react/StatusBadge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusBadge.d.ts","sourceRoot":"","sources":["../../src/react/StatusBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC;AAE1E,KAAK,gBAAgB,GAAG;IACtB,KAAK,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,IAAgB,EAChB,SAAS,GACV,EAAE,gBAAgB,+BAYlB"}

package/dist/react/StatusBadge.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "./cn";
+export function StatusBadge({ label, tone = "neutral", className, }) {
+    return (_jsx("span", { className: cn("app-status-badge", `app-status-badge--${tone}`, className), children: label }));
+}

package/dist/react/index.d.ts

@@ -1,9 +1,15 @@
+export { BackLink } from "./BackLink";
 export { cn, type ClassValue } from "./cn";
 export { CopyableValue } from "./CopyableValue";
+export { DataCard } from "./DataCard";
+export { InfoGrid, InfoItem, type InfoItemData } from "./InfoGrid";
 export { JsonExplorer } from "./JsonExplorer";
 export { JsonPanel } from "./JsonPanel";
+export { PageLayout, PageShell } from "./PageLayout";
 export { PageHeader } from "./PageHeader";
 export { SearchInput } from "./SearchInput";
+export { ServerControl } from "./ServerControl";
 export { StateCard } from "./StateCard";
+export { StatusBadge, type StatusBadgeTone } from "./StatusBadge";
 export { Tabs, type TabOption } from "./Tabs";
 //# sourceMappingURL=index.d.ts.map

package/dist/react/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/react/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,KAAK,UAAU,EAAE,MAAM,MAAM,CAAC;AAC3C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/react/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,EAAE,EAAE,KAAK,UAAU,EAAE,MAAM,MAAM,CAAC;AAC3C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,YAAY,EAAE,MAAM,YAAY,CAAC;AACnE,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,KAAK,eAAe,EAAE,MAAM,eAAe,CAAC;AAClE,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC"}

package/dist/react/index.js

@@ -1,8 +1,14 @@
+export { BackLink } from "./BackLink";
 export { cn } from "./cn";
 export { CopyableValue } from "./CopyableValue";
+export { DataCard } from "./DataCard";
+export { InfoGrid, InfoItem } from "./InfoGrid";
 export { JsonExplorer } from "./JsonExplorer";
 export { JsonPanel } from "./JsonPanel";
+export { PageLayout, PageShell } from "./PageLayout";
 export { PageHeader } from "./PageHeader";
 export { SearchInput } from "./SearchInput";
+export { ServerControl } from "./ServerControl";
 export { StateCard } from "./StateCard";
+export { StatusBadge } from "./StatusBadge";
 export { Tabs } from "./Tabs";

package/dist/styles.css

@@ -33,6 +33,9 @@
   --status-neutral-bg: #f1f5f9;
   --status-neutral-border: #cbd5e1;
   --status-neutral-text: #334155;
+  --status-warning-bg: #fffbeb;
+  --status-warning-border: #fde68a;
+  --status-warning-text: #92400e;
 
   --stage-success-bg: #f0fdf4;
   --stage-success-border: #bbf7d0;
@@ -526,6 +529,186 @@ a {
   color: var(--surface-card);
 }
 
+.app-status-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-block-size: 2.05rem;
+  padding: 0.35rem 0.75rem;
+  border: 0.0625rem solid var(--status-neutral-border);
+  border-radius: 999px;
+  background: var(--status-neutral-bg);
+  color: var(--status-neutral-text);
+  font-size: 0.78rem;
+  line-height: 1;
+  font-weight: 750;
+  white-space: nowrap;
+}
+
+.app-status-badge--success {
+  border-color: var(--status-success-border);
+  background: var(--status-success-bg);
+  color: var(--status-success-text);
+}
+
+.app-status-badge--error {
+  border-color: var(--status-error-border);
+  background: var(--status-error-bg);
+  color: var(--status-error-text);
+}
+
+.app-status-badge--warning {
+  border-color: var(--status-warning-border);
+  background: var(--status-warning-bg);
+  color: var(--status-warning-text);
+}
+
+.app-status-badge--neutral {
+  border-color: var(--status-neutral-border);
+  background: var(--status-neutral-bg);
+  color: var(--status-neutral-text);
+}
+
+.app-data-card {
+  padding: 1rem;
+  border: 0.0625rem solid var(--border-color);
+  border-radius: var(--radius-lg);
+  background: var(--surface-card);
+  box-shadow: var(--shadow-sm);
+}
+
+.app-data-card--success {
+  border-color: var(--status-success-border);
+  background: var(--status-success-bg);
+}
+
+.app-data-card--error {
+  border-color: var(--status-error-border);
+  background: var(--status-error-bg);
+}
+
+.app-data-card--warning {
+  border-color: var(--status-warning-border);
+  background: var(--status-warning-bg);
+}
+
+.app-data-card--neutral {
+  border-color: var(--status-neutral-border);
+  background: var(--status-neutral-bg);
+}
+
+.app-data-card__header {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  margin-bottom: 0.875rem;
+}
+
+.app-data-card__heading {
+  min-width: 0;
+}
+
+.app-data-card__eyebrow {
+  margin-bottom: 0.2rem;
+  color: var(--text-faint);
+  font-size: 0.68rem;
+  line-height: 1.2;
+  font-weight: 800;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.app-data-card__title {
+  color: var(--text-strong);
+  font-size: 1rem;
+  line-height: 1.2;
+  font-weight: 800;
+  letter-spacing: -0.02em;
+}
+
+.app-data-card__subtitle {
+  margin-top: 0.35rem;
+  color: var(--text-dim);
+  font-size: 0.9rem;
+  line-height: 1.45;
+}
+
+.app-data-card__aside {
+  flex: 0 0 auto;
+}
+
+.app-data-card__body {
+  min-width: 0;
+}
+
+.app-data-card__footer {
+  margin-top: 0.875rem;
+  padding-top: 0.875rem;
+  border-top: 0.0625rem solid var(--border-color);
+}
+
+.app-info-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
+  gap: 1rem 1.5rem;
+}
+
+.app-info-grid--compact {
+  gap: 0.75rem 1rem;
+}
+
+.app-info-item {
+  min-width: 0;
+}
+
+.app-info-item__label {
+  display: block;
+  margin-bottom: 0.28rem;
+  color: var(--text-faint);
+  font-size: 0.68rem;
+  line-height: 1.2;
+  font-weight: 800;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.app-info-item__value {
+  margin: 0;
+  color: var(--text-strong);
+  font-size: 0.88rem;
+  line-height: 1.35;
+  font-weight: 750;
+  overflow-wrap: anywhere;
+}
+
+.app-info-item__description {
+  margin: 0.3rem 0 0;
+  color: var(--text-dim);
+  font-size: 0.82rem;
+  line-height: 1.35;
+  overflow-wrap: anywhere;
+}
+
+.app-info-item--tone-success .app-info-item__value,
+.app-info-item--tone-success .app-info-item__description {
+  color: var(--status-success-text);
+}
+
+.app-info-item--tone-error .app-info-item__value,
+.app-info-item--tone-error .app-info-item__description {
+  color: var(--status-error-text);
+}
+
+.app-info-item--tone-warning .app-info-item__value,
+.app-info-item--tone-warning .app-info-item__description {
+  color: var(--status-warning-text);
+}
+
+.app-info-item--tone-neutral .app-info-item__value,
+.app-info-item--tone-neutral .app-info-item__description {
+  color: var(--status-neutral-text);
+}
+
 .app-empty-text {
   font-size: 0.95rem;
   line-height: 1.6;

package/dist/tokens.css

@@ -32,6 +32,9 @@
   --status-neutral-bg: #f1f5f9;
   --status-neutral-border: #cbd5e1;
   --status-neutral-text: #334155;
+  --status-warning-bg: #fffbeb;
+  --status-warning-border: #fde68a;
+  --status-warning-text: #92400e;
 
   --stage-success-bg: #f0fdf4;
   --stage-success-border: #bbf7d0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@processengine/uikit",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Shared UI kit for ProcessEngine admin, rules, and sandbox interfaces",
   "type": "module",
   "main": "./dist/react/index.js",