@processengine/uikit 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,13 @@
+# Changelog
+
+Все значимые изменения в этом проекте документируются здесь.
+
+## [Unreleased]
+
+## [0.1.0] - 2026-06-09
+
+### Добавлено
+- Первичная структура пакета `@processengine/uikit`.
+- CSS entrypoint для React-приложений: `@processengine/uikit/styles.css`.
+- CSS bundle для статических sandbox-форм: `@processengine/uikit/sandbox.css`.
+- React-примитивы для вкладок, JSON-панелей, копируемых значений, заголовков, поиска и state-card.

package/README.md

@@ -0,0 +1,61 @@
+# @processengine/uikit
+
+Shared UI kit for ProcessEngine interfaces: orchestrator admin UI, Rules UI, Flow UI, and processor sandbox forms.
+
+## 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:
+
+```json
+{
+  "dependencies": {
+    "@processengine/uikit": "0.1.0"
+  }
+}
+```
+
+## CSS Entrypoints
+
+```ts
+import "@processengine/uikit/styles.css";
+```
+
+Use `styles.css` for React applications. It includes tokens, base reset, and shared application components.
+
+For plain processor sandbox forms, use the prebuilt bundle:
+
+```html
+<link rel="stylesheet" href="./uikit-sandbox.css" />
+```
+
+The sandbox bundle is exported as `@processengine/uikit/sandbox.css`; consuming services can copy it into their static directories during their build.
+
+## React Entrypoint
+
+```tsx
+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.
+
+## Release Process
+
+Releases follow the ProcessEngine tagged-release canon:
+
+1. Update `CHANGELOG.md` under `[Unreleased]`.
+2. Run `npm test`.
+3. Run `npm version patch`, `npm version minor`, or `npm version major`.
+4. Push the version commit and tag with `git push origin main --follow-tags`.
+5. GitHub Actions publishes the package to npm and creates the GitHub Release from `CHANGELOG.md`.
+
+Publishing by hand is blocked by `prepublishOnly`; releases should go through GitHub Actions.

package/dist/base.css

@@ -0,0 +1,51 @@
+html {
+  background: var(--page-bg);
+}
+
+body {
+  margin: 0;
+  min-width: 20rem;
+  min-height: 100svh;
+  background: var(--page-bg);
+  background-image: var(--page-glow);
+  color: var(--text-strong);
+  font-family: var(--font-sans);
+  font-size: 100%;
+  line-height: 1.5;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+#root {
+  min-height: 100svh;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+button,
+input,
+textarea,
+select {
+  font: inherit;
+}
+
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+pre {
+  margin: 0;
+}
+
+a {
+  color: inherit;
+}

package/dist/components.css

@@ -0,0 +1,539 @@
+.app-page {
+  min-height: 100svh;
+  padding: var(--page-block-start) var(--page-inline-padding)
+    var(--page-block-end);
+}
+
+.app-shell-frame {
+  inline-size: min(100%, var(--shell-max-width));
+  margin: 0 auto;
+  padding: 0.875rem;
+  border: 0.0625rem solid rgba(255, 255, 255, 0.72);
+  border-radius: calc(var(--radius-xl) + 0.5rem);
+  background: var(--surface-canvas);
+  box-shadow: var(--shadow-lg);
+  backdrop-filter: blur(12px);
+}
+
+.app-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 0.625rem 0.875rem;
+  border: 0.0625rem solid var(--border-color);
+  border-radius: calc(var(--radius-lg) - 0.125rem);
+  background: var(--surface-card);
+  box-shadow: var(--shadow-sm);
+}
+
+.app-toolbar__brand {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.75rem;
+  color: var(--text-strong);
+  text-decoration: none;
+}
+
+.app-toolbar__brand-mark {
+  inline-size: 2rem;
+  block-size: 2rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  background: var(--text-strong);
+  color: #fff;
+  font-weight: 800;
+  font-size: 0.95rem;
+  letter-spacing: -0.02em;
+}
+
+.app-toolbar__brand-text {
+  font-size: 1rem;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+}
+
+.app-toolbar__breadcrumbs {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45rem;
+  min-width: 0;
+  color: var(--text-dim);
+  font-size: 0.86rem;
+}
+
+.app-toolbar__crumb {
+  white-space: nowrap;
+}
+
+.app-toolbar__crumb--current {
+  color: var(--text-strong);
+  font-weight: 600;
+}
+
+.app-toolbar__crumb-separator {
+  color: var(--text-faint);
+}
+
+.app-toolbar__actions {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  margin-left: auto;
+  min-width: 0;
+}
+
+.app-server-control__form {
+  min-width: min(28rem, 45vw);
+}
+
+.app-server-control {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 0.125rem;
+  min-width: 0;
+  max-width: min(28rem, 45vw);
+  padding: 0.3rem 0.55rem;
+  border: 0.0625rem solid transparent;
+  border-radius: var(--radius-md);
+  background: transparent;
+  color: var(--text-dim);
+}
+
+.app-server-control:not(label) {
+  cursor: pointer;
+}
+
+.app-server-control:not(label):hover,
+.app-server-control:not(label):focus-visible {
+  border-color: var(--border-color);
+  background: var(--surface-subtle);
+  outline: none;
+}
+
+.app-server-control--editing {
+  align-items: stretch;
+  inline-size: 100%;
+}
+
+.app-server-control__label {
+  font-size: 0.62rem;
+  line-height: 1.2;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--text-faint);
+}
+
+.app-server-control__value {
+  max-width: 100%;
+  overflow: hidden;
+  color: var(--text-muted);
+  font-size: 0.78rem;
+  line-height: 1.35;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.app-server-control__input {
+  inline-size: 100%;
+  min-block-size: 2.2rem;
+  padding: 0.45rem 0.6rem;
+  border: 0.0625rem solid var(--border-color);
+  border-radius: var(--radius-md);
+  background: var(--surface-card);
+  color: var(--text-strong);
+  font-family: var(--font-input);
+  font-size: 0.82rem;
+  line-height: 1.3;
+  box-shadow: var(--shadow-sm);
+}
+
+.app-server-control__input:focus {
+  outline: none;
+  border-color: var(--accent-color);
+}
+
+.app-server-control__input--error {
+  border-color: var(--status-error-border);
+}
+
+.app-toolbar__pill {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-block-size: 2.375rem;
+  padding: 0.4rem 0.9rem;
+  border-radius: 999px;
+  background: var(--text-strong);
+  color: #fff;
+  font-size: 0.8rem;
+  font-weight: 700;
+  letter-spacing: 0.01em;
+}
+
+.app-toolbar__pill--soft {
+  background: var(--surface-subtle);
+  color: var(--text-medium);
+  border: 0.0625rem solid var(--border-color);
+}
+
+.app-shell {
+  padding: 1.5rem 1rem 1rem;
+}
+
+.app-back-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45rem;
+  margin-bottom: 1.125rem;
+  padding: 0.5rem 0.875rem;
+  border-radius: 999px;
+  background: var(--surface-card);
+  border: 0.0625rem solid var(--border-color);
+  box-shadow: var(--shadow-sm);
+  color: var(--text-dim);
+  font-size: 0.85rem;
+  font-weight: 600;
+  text-decoration: none;
+}
+
+.app-back-link__icon {
+  inline-size: 0.95rem;
+  block-size: 0.95rem;
+  flex: 0 0 auto;
+  opacity: 0.78;
+}
+
+.app-back-link:hover,
+.app-back-link:focus-visible {
+  color: var(--text-strong);
+  background: var(--surface-hover);
+}
+
+.app-back-link:hover .app-back-link__icon,
+.app-back-link:focus-visible .app-back-link__icon {
+  opacity: 1;
+}
+
+.app-page-header {
+  margin-bottom: 1.5rem;
+}
+
+.app-page-header__eyebrow {
+  margin-bottom: 0.35rem;
+  color: var(--text-faint);
+  font-size: 0.72rem;
+  font-weight: 800;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.app-page-header__title {
+  /* max-inline-size: 32rem; */
+  margin-bottom: 0.5rem;
+  font-size: clamp(2rem, 4vw, 2.85rem);
+  line-height: 0.98;
+  font-weight: 800;
+  letter-spacing: -0.04em;
+  color: var(--text-strong);
+}
+
+.app-page-header__subtitle {
+  max-inline-size: 42rem;
+  font-size: 1rem;
+  line-height: 1.45;
+  color: var(--text-dim);
+}
+
+.app-page-header--detail .app-page-header__title {
+  max-inline-size: 38rem;
+  font-size: clamp(1.85rem, 3vw, 2.45rem);
+}
+
+.app-page-header--detail .app-page-header__subtitle {
+  font-size: 1.08rem;
+}
+
+.app-search {
+  margin-bottom: 1.25rem;
+}
+
+.app-search__field {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.35rem 0.95rem;
+  border: 0.0625rem solid var(--border-color);
+  border-radius: var(--radius-lg);
+  background: var(--surface-card);
+  box-shadow: var(--shadow-sm);
+}
+
+.app-search__icon {
+  color: var(--text-faint);
+  font-size: 1rem;
+  flex: 0 0 auto;
+}
+
+.app-search__icon svg {
+  display: block;
+  inline-size: 1rem;
+  block-size: 1rem;
+}
+
+.app-search__input {
+  inline-size: 100%;
+  min-block-size: 3rem;
+  border: 0;
+  background: transparent;
+  color: var(--text-strong);
+  font-family: var(--font-input);
+  font-size: 0.96rem;
+  line-height: 1.4;
+}
+
+.app-search__input::placeholder {
+  color: var(--text-faint);
+}
+
+.app-search__input:focus {
+  outline: none;
+}
+
+.app-state-card {
+  padding: 1.5rem;
+  border: 0.0625rem solid var(--border-color);
+  border-radius: var(--radius-xl);
+  background: var(--surface-card);
+  box-shadow: var(--shadow-sm);
+}
+
+.app-state-card__title {
+  margin-bottom: 0.5rem;
+  font-size: 1.4rem;
+  line-height: 1.15;
+  font-weight: 700;
+  color: var(--text-strong);
+  letter-spacing: -0.03em;
+}
+
+.app-state-card__text {
+  max-inline-size: 36rem;
+  font-size: 0.97rem;
+  line-height: 1.55;
+  color: var(--text-dim);
+}
+
+.app-state-card__action {
+  margin-top: 1rem;
+  padding: 0.7rem 1rem;
+  border: 0.0625rem solid var(--border-color);
+  border-radius: 999px;
+  background: var(--surface-subtle);
+  color: var(--text-strong);
+  font-weight: 600;
+  cursor: pointer;
+  transition:
+    background-color 160ms ease,
+    border-color 160ms ease,
+    box-shadow 160ms ease;
+}
+
+.app-state-card__action:hover,
+.app-state-card__action:focus-visible {
+  background: var(--surface-hover);
+  border-color: var(--border-strong);
+  box-shadow: var(--shadow-sm);
+}
+
+.app-tabs {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.35rem;
+  border: 0.0625rem solid var(--border-color);
+  border-radius: 999px;
+  background: var(--surface-subtle);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
+}
+
+.app-tabs__tab {
+  padding: 0.6rem 0.95rem;
+  border: 0;
+  border-radius: 999px;
+  background: transparent;
+  color: var(--text-dim);
+  font-size: 0.82rem;
+  line-height: 1;
+  font-weight: 600;
+  cursor: pointer;
+  transition:
+    background-color 160ms ease,
+    color 160ms ease,
+    box-shadow 160ms ease;
+}
+
+.app-tabs__tab:hover,
+.app-tabs__tab:focus-visible {
+  color: var(--text-strong);
+}
+
+.app-tabs__tab--active {
+  color: var(--surface-card);
+  background: var(--text-strong);
+  box-shadow: var(--shadow-sm);
+}
+.app-tabs__tab--active:hover {
+  color: var(--surface-card);
+}
+
+.app-empty-text {
+  font-size: 0.95rem;
+  line-height: 1.6;
+  color: var(--text-dim);
+}
+
+.app-error {
+  padding: 0.85rem 1rem;
+  border: 0.0625rem solid var(--status-error-border);
+  border-radius: var(--radius-md);
+  background: var(--status-error-bg);
+  color: var(--status-error-text);
+  font-weight: 650;
+}
+
+.app-json-panel {
+  max-block-size: 40rem;
+  overflow: auto;
+  padding: 1rem 1.1rem;
+  border: 0.0625rem solid var(--border-color);
+  border-radius: var(--radius-lg);
+  background: var(--surface-subtle);
+  color: var(--text-medium);
+  font-family: var(--font-mono);
+  font-size: 0.81rem;
+  line-height: 1.6;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.app-copyable {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45rem;
+  min-width: 0;
+}
+
+.app-copyable__value {
+  min-width: 0;
+  order: 2;
+  overflow-wrap: anywhere;
+}
+
+.app-copyable__button {
+  flex: 0 0 auto;
+  order: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: 1.45rem;
+  block-size: 1.45rem;
+  padding: 0;
+  border: 0.0625rem solid var(--border-color);
+  border-radius: 999px;
+  background: var(--surface-subtle);
+  color: var(--text-faint);
+  font-size: 0.78rem;
+  line-height: 1;
+  font-weight: 600;
+  cursor: pointer;
+  transition:
+    border-color 140ms ease,
+    color 140ms ease,
+    background-color 140ms ease;
+}
+
+.app-copyable__button--copied {
+  border-color: var(--status-success-border);
+  background: var(--status-success-bg);
+}
+
+.app-copyable__icon {
+  inline-size: 0.7rem;
+  block-size: 0.7rem;
+  opacity: 0.62;
+}
+
+.app-copyable__button:hover,
+.app-copyable__button:focus-visible {
+  border-color: var(--border-strong);
+  color: var(--text-strong);
+  background: var(--surface-hover);
+  outline: none;
+}
+
+.app-copyable__button:hover .app-copyable__icon,
+.app-copyable__button:focus-visible .app-copyable__icon,
+.app-copyable__button--copied .app-copyable__icon {
+  opacity: 0.92;
+}
+
+.app-visually-hidden {
+  position: absolute;
+  width: 0.0625rem;
+  height: 0.0625rem;
+  padding: 0;
+  margin: -0.0625rem;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+@media (max-width: 52rem) {
+  .app-page {
+    padding: 1rem;
+  }
+
+  .app-shell-frame {
+    padding: 0.75rem;
+  }
+
+  .app-toolbar {
+    flex-wrap: wrap;
+  }
+
+  .app-toolbar__breadcrumbs {
+    order: 3;
+    inline-size: 100%;
+  }
+
+  .app-toolbar__actions {
+    width: 100%;
+    margin-left: 0;
+    justify-content: flex-end;
+  }
+
+  .app-shell {
+    padding: 1.25rem 0.5rem 0.5rem;
+  }
+
+  .app-tabs {
+    inline-size: 100%;
+    justify-content: flex-start;
+    border-radius: var(--radius-lg);
+  }
+
+  .app-tab-panel {
+    padding: 1rem;
+  }
+
+  .app-server-control__form,
+  .app-server-control {
+    max-width: min(100%, 28rem);
+  }
+}

package/dist/react/CopyableValue.d.ts

@@ -0,0 +1,7 @@
+type CopyableValueProps = {
+    value: string;
+    className?: string;
+};
+export declare function CopyableValue({ value, className }: CopyableValueProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=CopyableValue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CopyableValue.d.ts","sourceRoot":"","sources":["../../src/react/CopyableValue.tsx"],"names":[],"mappings":"AAGA,KAAK,kBAAkB,GAAG;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAkBF,wBAAgB,aAAa,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,kBAAkB,+BAmCrE"}

package/dist/react/CopyableValue.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { cn } from "./cn";
+function CopyIcon() {
+    return (_jsx("svg", { "aria-hidden": "true", className: "app-copyable__icon", fill: "none", viewBox: "0 0 32 32", children: _jsx("path", { d: "M29 2.85713V22.2856C29 23.0427 28.7033 23.7699 28.1759 24.3056C27.6486 24.8413 26.9328 25.1427 26.1875 25.1427H24.5V9.71405C24.4943 6.87693 22.2303 4.57689 19.4376 4.5714H8.74987V2.85713C8.74987 1.27857 10.0085 0 11.5624 0H26.1875C26.9328 0 27.6486 0.301427 28.1759 0.837152C28.7033 1.37285 29 2.09999 29 2.85713ZM19.4376 6.85729H4.81252C3.2586 6.85729 2 8.13585 2 9.71441V29.1429C2 29.9 2.29672 30.6272 2.82408 31.1628C3.35141 31.6985 4.06721 32 4.81252 32H19.4376C20.1829 32 20.8987 31.6986 21.4261 31.1628C21.9534 30.6272 22.2501 29.9 22.2501 29.1429V9.71441C22.2501 8.95728 21.9534 8.23013 21.4261 7.69444C20.8987 7.15874 20.1829 6.85729 19.4376 6.85729Z", fill: "currentColor" }) }));
+}
+export function CopyableValue({ value, className }) {
+    const [isCopied, setIsCopied] = useState(false);
+    async function handleCopy(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        try {
+            await navigator.clipboard.writeText(value);
+            setIsCopied(true);
+            window.setTimeout(() => setIsCopied(false), 1200);
+        }
+        catch {
+            setIsCopied(false);
+        }
+    }
+    return (_jsxs("span", { className: cn("app-copyable", className), children: [_jsx("button", { className: cn("app-copyable__button", isCopied && "app-copyable__button--copied"), type: "button", "aria-label": `Скопировать ${value}`, title: isCopied ? "Скопировано" : "Скопировать", onClick: handleCopy, children: _jsx(CopyIcon, {}) }), _jsx("span", { className: "app-copyable__value", title: value, children: value })] }));
+}

package/dist/react/JsonExplorer.d.ts

@@ -0,0 +1,9 @@
+type JsonExplorerProps = {
+    data: unknown;
+    defaultExpanded?: string[];
+    collapsed?: boolean | number;
+    className?: string;
+};
+export declare function JsonExplorer({ data, defaultExpanded, collapsed, className, }: JsonExplorerProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=JsonExplorer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"JsonExplorer.d.ts","sourceRoot":"","sources":["../../src/react/JsonExplorer.tsx"],"names":[],"mappings":"AAGA,KAAK,iBAAiB,GAAG;IACvB,IAAI,EAAE,OAAO,CAAC;IACd,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAC3B,SAAS,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AA+CF,wBAAgB,YAAY,CAAC,EAC3B,IAAI,EACJ,eAAoB,EACpB,SAAa,EACb,SAAS,GACV,EAAE,iBAAiB,+BAsBnB"}