@plumile/backoffice-react 0.1.134 → 0.1.140

package/README.md

@@ -63,6 +63,9 @@ packages.
 - `PasswordResetCompleteScreen`
 - `VerifyEmailScreen`
 - `createUseAuth`
+- `AuthRefreshNotice` keeps the backoffice session-refresh subscription and
+  fixed positioning in this package, while delegating its visual notice surface
+  to `InlineBanner` from `@plumile/ui`.
 
 ### Hooks and backoffice helpers
 
@@ -86,8 +89,49 @@ packages.
 
 - `BackofficeOverviewLayout`
 - `BackofficeTabbedDetailShell`
-- detail and filter components
-- picker and layout helpers
+- `BackofficeContentBoundary`, `BackofficeContentFallback`, and related route
+  fallbacks remain backoffice-specific because they encode Suspense,
+  error-boundary reset, and routing behavior. Their error display composes the
+  shared `InlineBanner` visual primitive from `@plumile/ui`.
+- backoffice-specific detail components such as
+  `BackofficeLifecycleTimelineSection` and `BackofficeEntityLink`
+- `EntityIdPickerDialog`, which remains the backoffice picker integration for
+  manifests, picker facets, Relay loading, scope, search, and selected IDs.
+  The reusable picker visuals live in `@plumile/ui` as
+  `BackofficePickerShell`, `BackofficePickerList`, and `BackofficePickerRow`.
+
+Backoffice React no longer exports generic toolbar or detail-header wrappers.
+Use `BackofficeToolbar`, `BackofficeListFooter`, and `BackofficePageHeader`
+from `@plumile/ui` for visual composition; this package keeps the backoffice
+integration layer focused on manifests, routing, permissions, Relay, filters,
+and i18n.
+
+Backoffice React also no longer exports the old generic detail wrappers and
+aliases: `BackofficeDetailField`, `BackofficeDetailSection`,
+`BackofficeScopeStack`, `BackofficeContextPanel`,
+`BackofficeAuditMetadataPanel`,
+`BackofficeDetailPage`, `BackofficeCopyButton`, `BackofficeDetailTable`,
+`BackofficeDetailActionBar`, `BackofficeDetailBlock`,
+`BackofficeEmptyValue`, `BackofficeTechnicalFacts`,
+`BackofficeEntityRefLink`, `BackofficeFieldSet`,
+`BackofficeMetricGrid`, `BackofficeKpiStrip`, `BackofficeTimeline`,
+`BackofficeAuditTrail`, and `BackofficePayloadViewer`. The timeline aliases
+were removed without compatibility wrappers; use `AuditTimeline` and
+`TimelineEventRow` from `@plumile/ui` for visual timelines. Use the canonical
+components instead: `CopyableText`, `DataTable`, `MetricCard`,
+`MetricTileGroup`, `DashboardPanel`, `DashboardMetricGroup`,
+`DashboardQuickActions`, `DashboardStatusList`, `BackofficeKeyValueList`,
+`BackofficeDetailField`, `BackofficeDetailSection`, `BackofficeScopeStack`,
+`BackofficeAuditMetadataPanel`, and `AuditTimeline` from `@plumile/ui`; direct
+React composition for empty/action/block wrappers; and
+`BackofficeLifecycleTimelineSection` and `BackofficeEntityLink` from
+`@plumile/backoffice-react`.
+
+Backoffice React no longer exports generic payload viewers:
+`BackofficeDetailPayload`, `BackofficePayloadInspectorSection`, the legacy
+`BackofficePayloadViewer` alias, and `formatJsonPayload` were removed. Compose
+`BackofficeDetailSection` with `BackofficePayloadViewer` from `@plumile/ui` for
+payload, JSON, markdown, text, and code display.
 
 For the complete export list, see [`src/index.ts`](./src/index.ts).
 

package/lib/esm/auth/AuthRefreshNotice.js

@@ -1,38 +1,29 @@
-import { indicator as e, root as t, text as n } from "./authRefreshNotice.css.js";
-import { useSyncExternalStore as r } from "react";
-import { addAuthRefreshStateListener as i, getAuthRefreshState as a } from "@plumile/auth/shortAccessToken.js";
-import { cx as o } from "@plumile/ui/theme/tools.js";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { root as e } from "./authRefreshNotice.css.js";
+import { useSyncExternalStore as t } from "react";
+import { addAuthRefreshStateListener as n, getAuthRefreshState as r } from "@plumile/auth/shortAccessToken.js";
+import { InlineBanner as i } from "@plumile/ui/components/feedback/InlineBanner.js";
+import { cx as a } from "@plumile/ui/theme/tools.js";
+import { jsx as o } from "react/jsx-runtime";
 //#region src/auth/AuthRefreshNotice.tsx
-var l = (e) => i(() => {
+var s = (e) => n(() => {
 	e();
-}), u = () => a(), d = () => r(l, u, u), f = ({ messages: r, className: i }) => {
-	let a = d();
-	return a.status === "temporarily_unavailable" ? /* @__PURE__ */ c("div", {
-		className: o(t, i),
+}), c = () => r(), l = () => t(s, c, c), u = ({ messages: t, className: n }) => {
+	let r = l();
+	return r.status === "temporarily_unavailable" ? /* @__PURE__ */ o(i, {
+		tone: "warning",
+		className: a(e, n),
 		role: "status",
-		"aria-live": "polite",
-		children: [/* @__PURE__ */ s("span", {
-			className: e,
-			"aria-hidden": "true"
-		}), /* @__PURE__ */ s("p", {
-			className: n,
-			children: r.temporarilyUnavailable
-		})]
-	}) : a.status === "session_expired" ? /* @__PURE__ */ c("div", {
-		className: o(t, i),
+		ariaLive: "polite",
+		children: t.temporarilyUnavailable
+	}) : r.status === "session_expired" ? /* @__PURE__ */ o(i, {
+		tone: "danger",
+		className: a(e, n),
 		role: "status",
-		"aria-live": "polite",
-		children: [/* @__PURE__ */ s("span", {
-			className: e,
-			"aria-hidden": "true"
-		}), /* @__PURE__ */ s("p", {
-			className: n,
-			children: r.sessionExpired
-		})]
+		ariaLive: "polite",
+		children: t.sessionExpired
 	}) : null;
 };
 //#endregion
-export { f as AuthRefreshNotice, f as default, d as useAuthRefreshStateSnapshot };
+export { u as AuthRefreshNotice, u as default, l as useAuthRefreshStateSnapshot };
 
 //# sourceMappingURL=AuthRefreshNotice.js.map

package/lib/esm/auth/AuthRefreshNotice.js.map

@@ -1 +1 @@
-{"version":3,"file":"AuthRefreshNotice.js","names":[],"sources":["../../../src/auth/AuthRefreshNotice.tsx"],"sourcesContent":["import { useSyncExternalStore, type JSX } from 'react';\n\nimport { type AuthRefreshState } from '@plumile/auth/authRefreshState.js';\nimport {\n  addAuthRefreshStateListener,\n  getAuthRefreshState,\n} from '@plumile/auth/shortAccessToken.js';\nimport { cx } from '@plumile/ui/theme/tools.js';\n\nimport * as styles from './authRefreshNotice.css.js';\n\nexport type AuthRefreshNoticeMessages = {\n  temporarilyUnavailable: string;\n  sessionExpired: string;\n};\n\nexport type AuthRefreshNoticeProps = {\n  messages: AuthRefreshNoticeMessages;\n  className?: string;\n};\n\nconst subscribe = (onStoreChange: () => void): (() => void) => {\n  return addAuthRefreshStateListener(() => {\n    onStoreChange();\n  });\n};\n\nconst getSnapshot = (): AuthRefreshState => {\n  return getAuthRefreshState();\n};\n\nexport const useAuthRefreshStateSnapshot = (): AuthRefreshState => {\n  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n};\n\nexport const AuthRefreshNotice = ({\n  messages,\n  className,\n}: AuthRefreshNoticeProps): JSX.Element | null => {\n  const state = useAuthRefreshStateSnapshot();\n\n  if (state.status === 'temporarily_unavailable') {\n    return (\n      <div\n        className={cx(styles.root, className)}\n        role=\"status\"\n        aria-live=\"polite\"\n      >\n        <span className={styles.indicator} aria-hidden=\"true\" />\n        <p className={styles.text}>{messages.temporarilyUnavailable}</p>\n      </div>\n    );\n  }\n\n  if (state.status === 'session_expired') {\n    return (\n      <div\n        className={cx(styles.root, className)}\n        role=\"status\"\n        aria-live=\"polite\"\n      >\n        <span className={styles.indicator} aria-hidden=\"true\" />\n        <p className={styles.text}>{messages.sessionExpired}</p>\n      </div>\n    );\n  }\n\n  return null;\n};\n\nexport default AuthRefreshNotice;\n"],"mappings":";;;;;;AAqBA,IAAM,KAAa,MACV,QAAkC;CACvC,GAAe;EACf,EAGE,UACG,GAAqB,EAGjB,UACJ,EAAqB,GAAW,GAAa,EAAY,EAGrD,KAAqB,EAChC,aACA,mBACgD;CAChD,IAAM,IAAQ,GAA6B;CA4B3C,OA1BI,EAAM,WAAW,4BAEjB,kBAAC,OAAD;EACE,WAAW,EAAG,GAAa,EAAU;EACrC,MAAK;EACL,aAAU;YAHZ,CAKE,kBAAC,QAAD;GAAM,WAAW;GAAkB,eAAY;GAAS,CAAA,EACxD,kBAAC,KAAD;GAAG,WAAW;aAAc,EAAS;GAA2B,CAAA,CAC5D;MAIN,EAAM,WAAW,oBAEjB,kBAAC,OAAD;EACE,WAAW,EAAG,GAAa,EAAU;EACrC,MAAK;EACL,aAAU;YAHZ,CAKE,kBAAC,QAAD;GAAM,WAAW;GAAkB,eAAY;GAAS,CAAA,EACxD,kBAAC,KAAD;GAAG,WAAW;aAAc,EAAS;GAAmB,CAAA,CACpD;MAIH"}
+{"version":3,"file":"AuthRefreshNotice.js","names":[],"sources":["../../../src/auth/AuthRefreshNotice.tsx"],"sourcesContent":["import { useSyncExternalStore, type JSX } from 'react';\n\nimport { type AuthRefreshState } from '@plumile/auth/authRefreshState.js';\nimport {\n  addAuthRefreshStateListener,\n  getAuthRefreshState,\n} from '@plumile/auth/shortAccessToken.js';\nimport { InlineBanner } from '@plumile/ui/components/feedback/InlineBanner.js';\nimport { cx } from '@plumile/ui/theme/tools.js';\n\nimport * as styles from './authRefreshNotice.css.js';\n\nexport type AuthRefreshNoticeMessages = {\n  temporarilyUnavailable: string;\n  sessionExpired: string;\n};\n\nexport type AuthRefreshNoticeProps = {\n  messages: AuthRefreshNoticeMessages;\n  className?: string;\n};\n\nconst subscribe = (onStoreChange: () => void): (() => void) => {\n  return addAuthRefreshStateListener(() => {\n    onStoreChange();\n  });\n};\n\nconst getSnapshot = (): AuthRefreshState => {\n  return getAuthRefreshState();\n};\n\nexport const useAuthRefreshStateSnapshot = (): AuthRefreshState => {\n  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n};\n\nexport const AuthRefreshNotice = ({\n  messages,\n  className,\n}: AuthRefreshNoticeProps): JSX.Element | null => {\n  const state = useAuthRefreshStateSnapshot();\n\n  if (state.status === 'temporarily_unavailable') {\n    return (\n      <InlineBanner\n        tone=\"warning\"\n        className={cx(styles.root, className)}\n        role=\"status\"\n        ariaLive=\"polite\"\n      >\n        {messages.temporarilyUnavailable}\n      </InlineBanner>\n    );\n  }\n\n  if (state.status === 'session_expired') {\n    return (\n      <InlineBanner\n        tone=\"danger\"\n        className={cx(styles.root, className)}\n        role=\"status\"\n        ariaLive=\"polite\"\n      >\n        {messages.sessionExpired}\n      </InlineBanner>\n    );\n  }\n\n  return null;\n};\n\nexport default AuthRefreshNotice;\n"],"mappings":";;;;;;;AAsBA,IAAM,KAAa,MACV,QAAkC;CACvC,GAAe;EACf,EAGE,UACG,GAAqB,EAGjB,UACJ,EAAqB,GAAW,GAAa,EAAY,EAGrD,KAAqB,EAChC,aACA,mBACgD;CAChD,IAAM,IAAQ,GAA6B;CA4B3C,OA1BI,EAAM,WAAW,4BAEjB,kBAAC,GAAD;EACE,MAAK;EACL,WAAW,EAAG,GAAa,EAAU;EACrC,MAAK;EACL,UAAS;YAER,EAAS;EACG,CAAA,GAIf,EAAM,WAAW,oBAEjB,kBAAC,GAAD;EACE,MAAK;EACL,WAAW,EAAG,GAAa,EAAU;EACrC,MAAK;EACL,UAAS;YAER,EAAS;EACG,CAAA,GAIZ"}

package/lib/esm/auth/authRefreshNotice.css.js

@@ -1,8 +1,8 @@
 /* empty css                                                    */
 /* empty css                                 */
 //#region src/auth/authRefreshNotice.css.ts
-var e = "txvbqbojf txvbqbph0 txvbqbpzs txvbqbn71 txvbqbzjx txvbqb10hi txvbqb11eq txvbqbwqt txvbqb11k5 txvbqbdr8 txvbqbey txvbqbffj txvbqb9j txvbqb18wh txvbqbjyr txvbqb11mo txvbqbbn1 txvbqbryx txvbqb19c9 txvbqb1937 txvbqb1w1 txvbqb2et txvbqb187 txvbqbck9", t = "txvbqbf7y txvbqb17gh txvbqbhlw txvbqb2is txvbqb197j", n = "txvbqbm9g";
+var e = "txvbqbojf txvbqbph0 txvbqbpzs txvbqbn71 txvbqb11k5 txvbqb18wh txvbqbjyr txvbqb11mo txvbqbbn1 txvbqbryx txvbqbck9";
 //#endregion
-export { t as indicator, e as root, n as text };
+export { e as root };
 
 //# sourceMappingURL=authRefreshNotice.css.js.map

package/lib/esm/auth/authRefreshNotice.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"authRefreshNotice.css.js","names":[],"sources":["../../../src/auth/authRefreshNotice.css.ts"],"sourcesContent":["import { sprinkles } from '@plumile/ui/theme/sprinkles.css.js';\n\nexport const root = sprinkles({\n  position: 'fixed',\n  display: 'flex',\n  alignItems: 'center',\n  gap: 3,\n  fontSize: 'sm',\n  zIndex: 50,\n  left: 4,\n  right: 4,\n  bottom: 4,\n  maxWidth: 720,\n  marginX: 'auto',\n  marginY: 0,\n  paddingY: 2.5,\n  paddingX: 3.5,\n  color: 'text',\n  backgroundColor: 'white',\n  borderWidth: 'px',\n  borderStyle: 'solid',\n  borderColor: 'borderStrong',\n  boxShadow: 'lg',\n});\n\nexport const indicator = sprinkles({\n  flexShrink: 0,\n  width: 2,\n  height: 2,\n  borderRadius: 'full',\n  backgroundColor: 'warning',\n});\n\nexport const text = sprinkles({\n  margin: 0,\n});\n"],"mappings":""}
+{"version":3,"file":"authRefreshNotice.css.js","names":[],"sources":["../../../src/auth/authRefreshNotice.css.ts"],"sourcesContent":["import { sprinkles } from '@plumile/ui/theme/sprinkles.css.js';\n\nexport const root = sprinkles({\n  position: 'fixed',\n  zIndex: 50,\n  left: 4,\n  right: 4,\n  bottom: 4,\n  maxWidth: 720,\n  marginX: 'auto',\n  marginY: 0,\n  boxShadow: 'lg',\n});\n"],"mappings":""}