@flamingo-stack/openframe-frontend-core 0.0.748 → 0.0.750

package/dist/components/features/auth/login-form.d.ts

@@ -1,5 +1,17 @@
 import type { ReactNode } from 'react';
 import type { AuthSsoProvider } from './sso-providers';
+/** The sign-in methods of the organization an email resolved to. */
+export interface LoginFormTenantMethods {
+    /** Names the block ("Sign-in methods for <name>") and tags the organization's own providers. */
+    name?: string;
+    /** Its built-in OpenFrame login, offered first. */
+    openframe: boolean;
+    /**
+     * Identity providers it configured with its own credentials, tagged with `name` so they cannot be
+     * mistaken for the generic button of the same provider.
+     */
+    providers: Exclude<AuthSsoProvider, 'openframe'>[];
+}
 export interface LoginFormProps {
     /** Controlled email value */
     email: string;
@@ -15,37 +27,39 @@ export interface LoginFormProps {
         message: string;
         variant: 'error' | 'warning' | 'success' | 'muted';
     };
+    /** A message too long for the field's one-line status, shown in a notice row under the field. */
+    notice?: string;
     /**
-     * SSO providers, rendered ABOVE the email field with a divider between the two. Always visible;
-     * gate clickability with `ssoDisabled` / `ssoEnabledProviders`.
+     * The generic providers, under the email field behind `dividerLabel`. They need nothing typed: the
+     * server resolves the organization from the identity the provider asserts. With `tenantMethods`
+     * they follow the organization's own methods; pass `[]` to offer only those.
      */
     ssoProviders: AuthSsoProvider[];
     onSsoClick?: (provider: AuthSsoProvider) => void;
-    /** Disables every provider button (e.g. until the email passes discovery). */
+    /** Disables every provider button (e.g. while the typed email is being looked up). */
     ssoDisabled?: boolean;
-    /** When set, only these providers are clickable; the rest stay disabled. */
+    /** When set, only these generic providers are clickable; the rest stay disabled. */
     ssoEnabledProviders?: AuthSsoProvider[];
     /** Verb prefix for provider buttons, e.g. "Continue with". */
     ssoActionLabel?: string;
-    /** Label on the divider between the provider buttons and the email field. */
+    /** Label on the divider above the generic providers. */
     dividerLabel?: string;
     /**
-     * The discovered tenant's own SSO options, rendered UNDER the email field — unlike `ssoProviders`
-     * above, these depend on knowing the tenant, so they cannot be offered before an address is
-     * typed. Shares `onSsoClick`.
-     *
-     * Three states, and the empty array is not the same as nothing: `undefined` means discovery has
-     * not resolved a tenant yet and the slot stays empty, while `[]` means it resolved and the tenant
-     * has none — which is an answer worth showing rather than silence.
+     * The organization the typed email resolved to. Its methods render above the generic block, under
+     * a heading that names it, so the switch from "any account" to "this organization's sign-in" is
+     * visible rather than a silent change of what the same buttons do.
      */
-    customSsoProviders?: AuthSsoProvider[];
-    /** Shown in place of the custom SSO buttons when the resolved tenant has none configured. */
-    noCustomSsoLabel?: string;
+    tenantMethods?: LoginFormTenantMethods;
     /** Primary submit under the email field. Omit the handler to hide the button. */
     onSubmitClick?: () => void;
     submitLabel?: string;
     /** Disables just the primary submit (fields stay editable). */
     submitDisabled?: boolean;
+    /**
+     * Enter in the email field when there is no submit button, e.g. to look the address up now
+     * instead of after a typing pause. With `onSubmitClick` set, Enter drives that instead.
+     */
+    onEmailEnter?: () => void;
     /** Overrides the default heading. */
     title?: string;
     /** Overrides the default sub-heading. */
@@ -60,11 +74,10 @@ export interface LoginFormProps {
     className?: string;
 }
 /**
- * Login form (Login tab). Presentational + controlled — the consumer owns
- * state, validation and discovery. Single-screen design: the provider buttons come first and need
- * nothing typed, then the email field below them. Whether the providers are gated is the
- * consumer's call via `ssoDisabled`; the identity-first flows leave them open, because the server
- * resolves the tenant from the identity the provider asserts.
+ * Login form (Login tab). Presentational + controlled — the consumer owns state, validation and
+ * discovery. Email first, sign-in methods under it: everything that changes once the email is known
+ * sits below the field, and the block changes as a whole. Before that the generic providers are
+ * there and need nothing typed; whether they are gated is the consumer's call via `ssoDisabled`.
  */
-export declare function LoginForm({ email, onEmailChange, emailPlaceholder, loading, disabled, errors, emailStatus, ssoProviders, onSsoClick, ssoDisabled, ssoEnabledProviders, ssoActionLabel, dividerLabel, customSsoProviders, noCustomSsoLabel, onSubmitClick, submitLabel, submitDisabled, title, subtitle, termsUrl, privacyPolicyUrl, className, }: LoginFormProps): import("react").JSX.Element;
+export declare function LoginForm({ email, onEmailChange, emailPlaceholder, loading, disabled, errors, emailStatus, notice, ssoProviders, onSsoClick, ssoDisabled, ssoEnabledProviders, ssoActionLabel, dividerLabel, tenantMethods, onSubmitClick, submitLabel, submitDisabled, onEmailEnter, title, subtitle, termsUrl, privacyPolicyUrl, className, }: LoginFormProps): import("react").JSX.Element;
 //# sourceMappingURL=login-form.d.ts.map

package/dist/components/features/auth/login-form.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"login-form.d.ts","sourceRoot":"","sources":["../../../../src/components/features/auth/login-form.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AAStD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAGvD,MAAM,WAAW,cAAc;IAC7B,6BAA6B;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE;QACP,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,oGAAoG;IACpG,WAAW,CAAC,EAAE;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAA;KAAE,CAAC;IACtF;;;OAGG;IACH,YAAY,EAAE,eAAe,EAAE,CAAC;IAChC,UAAU,CAAC,EAAE,CAAC,QAAQ,EAAE,eAAe,KAAK,IAAI,CAAC;IACjD,8EAA8E;IAC9E,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,4EAA4E;IAC5E,mBAAmB,CAAC,EAAE,eAAe,EAAE,CAAC;IACxC,8DAA8D;IAC9D,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,6EAA6E;IAC7E,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;;;;;OAQG;IACH,kBAAkB,CAAC,EAAE,eAAe,EAAE,CAAC;IACvC,6FAA6F;IAC7F,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,iFAAiF;IACjF,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+DAA+D;IAC/D,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,qCAAqC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yCAAyC;IACzC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;GAMG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,aAAa,EACb,gBAAsC,EACtC,OAAe,EACf,QAAgB,EAChB,MAAM,EACN,WAAW,EACX,YAAY,EACZ,UAAU,EACV,WAAmB,EACnB,mBAAmB,EACnB,cAAgC,EAChC,YAA+C,EAC/C,kBAAkB,EAClB,gBAAqE,EACrE,aAAa,EACb,WAAwB,EACxB,cAAsB,EACtB,KAA4B,EAC5B,QAA0D,EAC1D,QAAQ,EACR,gBAAgB,EAChB,SAAS,GACV,EAAE,cAAc,+BAoGhB"}
+{"version":3,"file":"login-form.d.ts","sourceRoot":"","sources":["../../../../src/components/features/auth/login-form.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AAStD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AASvD,oEAAoE;AACpE,MAAM,WAAW,sBAAsB;IACrC,gGAAgG;IAChG,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,mDAAmD;IACnD,SAAS,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,SAAS,EAAE,OAAO,CAAC,eAAe,EAAE,WAAW,CAAC,EAAE,CAAC;CACpD;AAED,MAAM,WAAW,cAAc;IAC7B,6BAA6B;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE;QACP,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,oGAAoG;IACpG,WAAW,CAAC,EAAE;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAA;KAAE,CAAC;IACtF,iGAAiG;IACjG,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,YAAY,EAAE,eAAe,EAAE,CAAC;IAChC,UAAU,CAAC,EAAE,CAAC,QAAQ,EAAE,eAAe,KAAK,IAAI,CAAC;IACjD,sFAAsF;IACtF,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,oFAAoF;IACpF,mBAAmB,CAAC,EAAE,eAAe,EAAE,CAAC;IACxC,8DAA8D;IAC9D,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,wDAAwD;IACxD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;OAIG;IACH,aAAa,CAAC,EAAE,sBAAsB,CAAC;IACvC,iFAAiF;IACjF,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+DAA+D;IAC/D,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,qCAAqC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yCAAyC;IACzC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;GAKG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,aAAa,EACb,gBAAsC,EACtC,OAAe,EACf,QAAgB,EAChB,MAAM,EACN,WAAW,EACX,MAAM,EACN,YAAY,EACZ,UAAU,EACV,WAAmB,EACnB,mBAAmB,EACnB,cAAgC,EAChC,YAAiC,EACjC,aAAa,EACb,aAAa,EACb,WAAwB,EACxB,cAAsB,EACtB,YAAY,EACZ,KAA4B,EAC5B,QAA0D,EAC1D,QAAQ,EACR,gBAAgB,EAChB,SAAS,GACV,EAAE,cAAc,+BAwIhB"}

package/dist/components/features/auth/login-form.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useDeferredError } from "../../../hooks/ui/use-deferred-error.js";
 import { cn } from "../../../utils/cn.js";
 import { AlertTriangleIcon } from "../../icons-v2-generated/interface/alert-triangle-icon.js";
@@ -9,6 +9,7 @@ import { Input } from "../../ui/input.js";
 import { LabeledDivider } from "./labeled-divider.js";
 import { LegalLinks } from "./legal-links.js";
 import { SsoProviderButtons } from "./sso-providers.js";
+const ENTER_ANIMATION = "animate-in fade-in-0 slide-in-from-top-1 duration-200 ease-out motion-reduce:animate-none";
 function LoginForm({
   email,
   onEmailChange,
@@ -17,17 +18,18 @@ function LoginForm({
   disabled = false,
   errors,
   emailStatus,
+  notice,
   ssoProviders,
   onSsoClick,
   ssoDisabled = false,
   ssoEnabledProviders,
   ssoActionLabel = "Continue with",
-  dividerLabel = "or continue with OpenFrame SSO",
-  customSsoProviders,
-  noCustomSsoLabel = "No additional SSO configurations for this domain",
+  dividerLabel = "or continue with",
+  tenantMethods,
   onSubmitClick,
   submitLabel = "Continue",
   submitDisabled = false,
+  onEmailEnter,
   title = "Login to OpenFrame",
   subtitle = "Enter your email to access your organization.",
   termsUrl,
@@ -35,10 +37,15 @@ function LoginForm({
   className
 }) {
   const fieldDisabled = disabled || loading;
+  const providersDisabled = fieldDisabled || ssoDisabled;
   const emailErr = useDeferredError(errors?.email, email);
   const handleKeyDown = (event) => {
-    if (event.key !== "Enter" || fieldDisabled || submitDisabled) return;
-    onSubmitClick?.();
+    if (event.key !== "Enter" || event.repeat || fieldDisabled) return;
+    if (onSubmitClick) {
+      if (!submitDisabled) onSubmitClick();
+      return;
+    }
+    onEmailEnter?.();
   };
   return /* @__PURE__ */ jsxs(
     "div",
@@ -52,17 +59,6 @@ function LoginForm({
           /* @__PURE__ */ jsx("h1", { className: "tracking-[-0.64px] text-ods-text-primary text-h2", children: accentSentenceMarks(title) }),
           /* @__PURE__ */ jsx("p", { className: "text-ods-text-secondary text-h4", children: subtitle })
         ] }),
-        ssoProviders.length > 0 && /* @__PURE__ */ jsx(
-          SsoProviderButtons,
-          {
-            providers: ssoProviders,
-            onSsoClick,
-            actionLabel: ssoActionLabel,
-            disabled: disabled || loading || ssoDisabled,
-            enabledProviders: ssoEnabledProviders
-          }
-        ),
-        ssoProviders.length > 0 && /* @__PURE__ */ jsx(LabeledDivider, { label: dividerLabel }),
         /* @__PURE__ */ jsx(
           Input,
           {
@@ -78,30 +74,22 @@ function LoginForm({
             onKeyDown: handleKeyDown
           }
         ),
-        customSsoProviders && (customSsoProviders.length > 0 ? /* @__PURE__ */ jsx(
-          SsoProviderButtons,
+        notice && // Tokens are the design's: soft-grey surface, grey text and icon, the bold-body step, a 24px
+        // icon, and 12/16 for the inset and the gap.
+        /* @__PURE__ */ jsxs(
+          "div",
           {
-            providers: customSsoProviders,
-            onSsoClick,
-            actionLabel: ssoActionLabel,
-            disabled: disabled || loading
+            role: "status",
+            className: cn(
+              "flex min-h-11 w-full items-center gap-[var(--spacing-system-m)] rounded-md bg-ods-bg-surface px-[var(--spacing-system-s)] py-[var(--spacing-system-s)] text-ods-text-secondary text-h3 md:min-h-12",
+              ENTER_ANIMATION
+            ),
+            children: [
+              /* @__PURE__ */ jsx(AlertTriangleIcon, { className: "h-6 w-6 shrink-0" }),
+              notice
+            ]
           }
-        ) : (
-          // Same footprint as the button it stands in for, so nothing shifts when a tenant does
-          // have options. Tokens are the design's: soft-grey surface, grey text and icon, the
-          // bold-body step, a 24px icon, and 12/16 for the inset and the gap.
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              role: "status",
-              className: "flex min-h-11 w-full items-center gap-[var(--spacing-system-m)] rounded-md bg-ods-bg-surface px-[var(--spacing-system-s)] py-[var(--spacing-system-s)] text-ods-text-secondary text-h3 md:min-h-12",
-              children: [
-                /* @__PURE__ */ jsx(AlertTriangleIcon, { className: "h-6 w-6 shrink-0" }),
-                noCustomSsoLabel
-              ]
-            }
-          )
-        )),
+        ),
         onSubmitClick && // Full width on a phone, half the row and right-aligned from `md` up, matching the design.
         // The spacer, rather than a width on the button, keeps it flush with the fields' right edge.
         /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-[var(--spacing-system-l)]", children: [
@@ -120,6 +108,56 @@ function LoginForm({
             }
           )
         ] }),
+        (tenantMethods || ssoProviders.length > 0) && // One block, so an organization's methods replace the generic set as a whole: the key mounts
+        // it anew when they arrive, and every row of it eases in, not only the rows that are new.
+        // Going back to the generic set swaps without a transition, as the prototype does.
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            role: "group",
+            "aria-label": "Sign-in methods",
+            className: cn("flex flex-col gap-[var(--spacing-system-l)]", tenantMethods && ENTER_ANIMATION),
+            children: [
+              tenantMethods && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(LabeledDivider, { label: `Sign-in methods for ${tenantMethods.name || "your organization"}` }),
+                tenantMethods.openframe && // Not configured with anyone's credentials, so it carries no tag.
+                /* @__PURE__ */ jsx(
+                  SsoProviderButtons,
+                  {
+                    providers: ["openframe"],
+                    onSsoClick,
+                    actionLabel: ssoActionLabel,
+                    disabled: providersDisabled
+                  }
+                ),
+                tenantMethods.providers.length > 0 && /* @__PURE__ */ jsx(
+                  SsoProviderButtons,
+                  {
+                    providers: tenantMethods.providers,
+                    onSsoClick,
+                    actionLabel: ssoActionLabel,
+                    disabled: providersDisabled,
+                    tag: tenantMethods.name
+                  }
+                )
+              ] }),
+              ssoProviders.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+                (!tenantMethods || tenantMethods.openframe || tenantMethods.providers.length > 0) && /* @__PURE__ */ jsx(LabeledDivider, { label: dividerLabel }),
+                /* @__PURE__ */ jsx(
+                  SsoProviderButtons,
+                  {
+                    providers: ssoProviders,
+                    onSsoClick,
+                    actionLabel: ssoActionLabel,
+                    disabled: providersDisabled,
+                    enabledProviders: ssoEnabledProviders
+                  }
+                )
+              ] })
+            ]
+          },
+          tenantMethods ? `tenant:${tenantMethods.name ?? ""}` : "generic"
+        ),
         termsUrl && privacyPolicyUrl && /* @__PURE__ */ jsx(LegalLinks, { termsUrl, privacyPolicyUrl })
       ]
     }

package/dist/components/features/auth/sso-providers.d.ts

@@ -18,7 +18,13 @@ export interface SsoProviderButtonsProps {
      * `disabled` still wins over this list.
      */
     enabledProviders?: AuthSsoProvider[];
+    /**
+     * A stamp on every button naming who configured these providers — e.g. the organization whose
+     * own Google Workspace a "Continue with Google" button signs in through, which is not the same
+     * button as the generic one.
+     */
+    tag?: string;
 }
 /** Stacked full-width SSO provider buttons shared by the auth forms. */
-export declare function SsoProviderButtons({ providers, onSsoClick, actionLabel, disabled, enabledProviders, }: SsoProviderButtonsProps): import("react").JSX.Element;
+export declare function SsoProviderButtons({ providers, onSsoClick, actionLabel, disabled, enabledProviders, tag, }: SsoProviderButtonsProps): import("react").JSX.Element;
 //# sourceMappingURL=sso-providers.d.ts.map

package/dist/components/features/auth/sso-providers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sso-providers.d.ts","sourceRoot":"","sources":["../../../../src/components/features/auth/sso-providers.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAe,KAAK,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAGhF,+CAA+C;AAC/C,MAAM,MAAM,eAAe,GAAG,WAAW,GAAG,QAAQ,GAAG,WAAW,GAAG,OAAO,CAAC;AAE7E,+GAA+G;AAC/G,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,eAAe,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,aAAa,CAAA;CAAE,CAaxF,CAAC;AAEF,MAAM,WAAW,uBAAuB;IACtC,SAAS,EAAE,eAAe,EAAE,CAAC;IAC7B,UAAU,CAAC,EAAE,CAAC,QAAQ,EAAE,eAAe,KAAK,IAAI,CAAC;IACjD,8DAA8D;IAC9D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,eAAe,EAAE,CAAC;CACtC;AAED,wEAAwE;AACxE,wBAAgB,kBAAkB,CAAC,EACjC,SAAS,EACT,UAAU,EACV,WAA6B,EAC7B,QAAgB,EAChB,gBAAgB,GACjB,EAAE,uBAAuB,+BAwBzB"}
+{"version":3,"file":"sso-providers.d.ts","sourceRoot":"","sources":["../../../../src/components/features/auth/sso-providers.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAe,KAAK,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAIhF,+CAA+C;AAC/C,MAAM,MAAM,eAAe,GAAG,WAAW,GAAG,QAAQ,GAAG,WAAW,GAAG,OAAO,CAAC;AAE7E,+GAA+G;AAC/G,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,eAAe,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,aAAa,CAAA;CAAE,CAaxF,CAAC;AAEF,MAAM,WAAW,uBAAuB;IACtC,SAAS,EAAE,eAAe,EAAE,CAAC;IAC7B,UAAU,CAAC,EAAE,CAAC,QAAQ,EAAE,eAAe,KAAK,IAAI,CAAC;IACjD,8DAA8D;IAC9D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,eAAe,EAAE,CAAC;IACrC;;;;OAIG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,wEAAwE;AACxE,wBAAgB,kBAAkB,CAAC,EACjC,SAAS,EACT,UAAU,EACV,WAA6B,EAC7B,QAAgB,EAChB,gBAAgB,EAChB,GAAG,GACJ,EAAE,uBAAuB,+BAqCzB"}

package/dist/components/features/auth/sso-providers.js

@@ -1,7 +1,8 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { requireIcon } from "../../chat/utils/icon-loading.js";
 import { Button } from "../../ui/button/index.js";
+import { StatusBadge } from "../../ui/status-badge.js";
 const PROVIDER_META = {
   openframe: {
     name: "OpenFrame",
@@ -21,12 +22,13 @@ function SsoProviderButtons({
   onSsoClick,
   actionLabel = "Continue with",
   disabled = false,
-  enabledProviders
+  enabledProviders,
+  tag
 }) {
   return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-[var(--spacing-system-l)]", children: providers.map((provider) => {
     const meta = PROVIDER_META[provider];
     const Icon = meta.Icon;
-    return /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsxs(
       Button,
       {
         type: "button",
@@ -36,7 +38,23 @@ function SsoProviderButtons({
         className: "disabled:bg-ods-bg",
         leftIcon: /* @__PURE__ */ jsx(Icon, { className: "h-5 w-5" }),
         onClick: () => onSsoClick?.(provider),
-        children: `${actionLabel} ${meta.name}`
+        children: [
+          `${actionLabel} ${meta.name}`,
+          tag && // A child, not `rightIcon`: the Button lays its children out through a `contents` span,
+          // so the badge is a flex item of the button itself and can give up width (`min-w-0`)
+          // where a long organization name would otherwise push the label out of a phone-width
+          // button. `block` over its inline-flex, because an ellipsis only renders on a block box.
+          /* @__PURE__ */ jsx(
+            StatusBadge,
+            {
+              text: tag,
+              variant: "button",
+              singleLine: true,
+              title: tag,
+              className: "block min-w-0 max-w-32 truncate"
+            }
+          )
+        ]
       },
       provider
     );

package/dist/components/features/board/ticket-card-skeleton.js

@@ -2,7 +2,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { cn } from "../../../utils/cn.js";
-import { Skeleton } from "../../ui/skeleton.js";
+import { UnifiedSkeleton } from "../../loading/unified-skeleton.js";
 const TicketCardSkeleton = forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxs(
     "div",
@@ -16,20 +16,20 @@ const TicketCardSkeleton = forwardRef(
       children: [
         /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-[var(--spacing-system-sf)]", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-[var(--spacing-system-xxs)]", children: [
-            /* @__PURE__ */ jsx("div", { className: "flex items-center text-h3", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-3/4" }) }),
+            /* @__PURE__ */ jsx("div", { className: "flex items-center text-h3", children: /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-4 w-3/4" }) }),
             /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-[var(--spacing-system-xxs)] text-h6", children: [
-              /* @__PURE__ */ jsx(Skeleton, { className: "size-4 shrink-0 rounded-sm" }),
-              /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-1/2" })
+              /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "size-4 shrink-0 rounded-sm" }),
+              /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-3 w-1/2" })
             ] })
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-[var(--spacing-system-xsf)]", children: [
-            /* @__PURE__ */ jsx(Skeleton, { className: "size-4 rounded-sm" }),
-            /* @__PURE__ */ jsx(Skeleton, { className: "size-8 rounded-full" })
+            /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "size-4 rounded-sm" }),
+            /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "size-8 rounded-full" })
           ] })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "flex h-8 items-center gap-[var(--spacing-system-xxs)]", children: [
-          /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-16 rounded-md" }),
-          /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-12 rounded-md" })
+          /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-8 w-16 rounded-md" }),
+          /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-8 w-12 rounded-md" })
         ] })
       ]
     }

package/dist/components/features/capability-explorer.d.ts

@@ -77,7 +77,9 @@ export declare const capabilityTabId: (id: string) => string;
  * first card over the carousel's controls. Every box is the loaded one's, so
  * nothing moves when the jobs arrive.
  */
-export declare function CapabilityExplorerSkeleton({ className, count }: {
+export declare function CapabilityExplorerSkeleton({ region, className, count, }: {
+    /** The loading state announces itself (`LoadingRegion`). `false` inside another loading region. Default `true`. */
+    region?: boolean;
     className?: string;
     count?: number;
 }): import("react").JSX.Element;

package/dist/components/features/capability-explorer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"capability-explorer.d.ts","sourceRoot":"","sources":["../../../src/components/features/capability-explorer.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAsB,KAAK,SAAS,EAAU,MAAM,OAAO,CAAC;AAUnE,0FAA0F;AAC1F,MAAM,WAAW,sBAAsB;IACrC;;;;OAIG;IACH,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,wBAAwB;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,gEAAgE;IAChE,UAAU,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAC/B,6DAA6D;IAC7D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gEAAgE;IAChE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;;OAKG;IACH,OAAO,CAAC,EAAE;QACR,OAAO,EAAE,MAAM,CAAC;QAChB,OAAO,EAAE,MAAM,CAAC;QAChB,SAAS,CAAC,EAAE,sBAAsB,CAAC;QACnC,SAAS,CAAC,EAAE,sBAAsB,CAAC;KACpC,GAAG,IAAI,CAAC;IACT,gFAAgF;IAChF,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAED,kGAAkG;AAClG,MAAM,WAAW,sBAAsB;IACrC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uFAAuF;IACvF,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED,MAAM,WAAW,wBAAwB;IACvC,iDAAiD;IACjD,IAAI,EAAE,MAAM,CAAC;IACb,uCAAuC;IACvC,SAAS,EAAE,MAAM,CAAC;IAClB,oEAAoE;IACpE,SAAS,EAAE,MAAM,CAAC;IAClB,gDAAgD;IAChD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,2DAA2D;IAC3D,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,yBAAyB;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,uBAAuB;IACtC,KAAK,EAAE,SAAS,sBAAsB,EAAE,CAAC;IACzC,MAAM,EAAE,wBAAwB,CAAC;IACjC,QAAQ,EAAE,MAAM,CAAC;IACjB,cAAc,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,yFAAyF;IACzF,YAAY,EAAE,CAAC,IAAI,EAAE,sBAAsB,EAAE,OAAO,EAAE;QAAE,OAAO,EAAE,OAAO,CAAA;KAAE,KAAK,SAAS,CAAC;IACzF,iFAAiF;IACjF,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAaD,yFAAyF;AACzF,eAAO,MAAM,eAAe,GAAI,IAAI,MAAM,KAAG,MAAqB,CAAC;AA6HnE;;;;;;GAMG;AACH,wBAAgB,0BAA0B,CAAC,EAAE,SAAS,EAAE,KAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,+BA+E1G;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,MAAM,EACN,QAAQ,EACR,cAAc,EACd,YAAY,EACZ,aAAa,EACb,aAAa,EACb,SAAS,GACV,EAAE,uBAAuB,sCA6MzB"}
+{"version":3,"file":"capability-explorer.d.ts","sourceRoot":"","sources":["../../../src/components/features/capability-explorer.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAsB,KAAK,SAAS,EAAU,MAAM,OAAO,CAAC;AAWnE,0FAA0F;AAC1F,MAAM,WAAW,sBAAsB;IACrC;;;;OAIG;IACH,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,wBAAwB;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,gEAAgE;IAChE,UAAU,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAC/B,6DAA6D;IAC7D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gEAAgE;IAChE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;;OAKG;IACH,OAAO,CAAC,EAAE;QACR,OAAO,EAAE,MAAM,CAAC;QAChB,OAAO,EAAE,MAAM,CAAC;QAChB,SAAS,CAAC,EAAE,sBAAsB,CAAC;QACnC,SAAS,CAAC,EAAE,sBAAsB,CAAC;KACpC,GAAG,IAAI,CAAC;IACT,gFAAgF;IAChF,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAED,kGAAkG;AAClG,MAAM,WAAW,sBAAsB;IACrC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uFAAuF;IACvF,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED,MAAM,WAAW,wBAAwB;IACvC,iDAAiD;IACjD,IAAI,EAAE,MAAM,CAAC;IACb,uCAAuC;IACvC,SAAS,EAAE,MAAM,CAAC;IAClB,oEAAoE;IACpE,SAAS,EAAE,MAAM,CAAC;IAClB,gDAAgD;IAChD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,2DAA2D;IAC3D,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,yBAAyB;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,uBAAuB;IACtC,KAAK,EAAE,SAAS,sBAAsB,EAAE,CAAC;IACzC,MAAM,EAAE,wBAAwB,CAAC;IACjC,QAAQ,EAAE,MAAM,CAAC;IACjB,cAAc,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,yFAAyF;IACzF,YAAY,EAAE,CAAC,IAAI,EAAE,sBAAsB,EAAE,OAAO,EAAE;QAAE,OAAO,EAAE,OAAO,CAAA;KAAE,KAAK,SAAS,CAAC;IACzF,iFAAiF;IACjF,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAaD,yFAAyF;AACzF,eAAO,MAAM,eAAe,GAAI,IAAI,MAAM,KAAG,MAAqB,CAAC;AAoInE;;;;;;GAMG;AACH,wBAAgB,0BAA0B,CAAC,EACzC,MAAa,EACb,SAAS,EACT,KAAS,GACV,EAAE;IACD,mHAAmH;IACnH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,+BA6FA;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,MAAM,EACN,QAAQ,EACR,cAAc,EACd,YAAY,EACZ,aAAa,EACb,aAAa,EACb,SAAS,GACV,EAAE,uBAAuB,sCA6MzB"}

package/dist/components/features/capability-explorer.js

@@ -6,7 +6,8 @@ import { cn } from "../../utils/cn.js";
 import { EntityIcon } from "../icon-display.js";
 import { Chevron02RightIcon } from "../icons-v2-generated/arrows/chevron-02-right-icon.js";
 import { CheckIcon } from "../icons-v2-generated/signs-and-symbols/check-icon.js";
-import { Skeleton } from "../ui/skeleton.js";
+import { LoadingRegion } from "../loading/loading-region.js";
+import { UnifiedSkeleton } from "../loading/unified-skeleton.js";
 import { SnapCarousel, SnapCarouselControlsSkeleton } from "../ui/snap-carousel.js";
 import { TruncateText } from "../ui/truncate-text.js";
 const PANEL_HEIGHT_CLASS = "h-[824px]";
@@ -65,17 +66,15 @@ function Example({
     }
   );
 }
-function LineBar({ line, width }) {
-  return /* @__PURE__ */ jsx("div", { className: line, children: /* @__PURE__ */ jsx("span", { className: cn("inline-block h-[0.7em] animate-pulse rounded bg-ods-border align-middle", width) }) });
-}
+const LINE_SKELETON_CLASS = "inline-block h-[0.7em] rounded align-middle";
 function ExampleSkeleton({ className }) {
   const turn = (first) => /* @__PURE__ */ jsxs("div", { className: cn("flex min-w-0 gap-2.5", !first && "border-t border-ods-border pt-3"), children: [
-    /* @__PURE__ */ jsx(Skeleton, { className: "size-6 shrink-0 rounded-full" }),
+    /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "size-6 shrink-0 rounded-full" }),
     /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
-      /* @__PURE__ */ jsx(LineBar, { line: "text-h6", width: "w-28" }),
+      /* @__PURE__ */ jsx("div", { className: "text-h6", children: /* @__PURE__ */ jsx(UnifiedSkeleton, { as: "span", className: cn(LINE_SKELETON_CLASS, "w-28") }) }),
       /* @__PURE__ */ jsxs("div", { className: "min-h-[2lh] text-h4", children: [
-        /* @__PURE__ */ jsx(LineBar, { line: "text-h4", width: "w-full" }),
-        /* @__PURE__ */ jsx(LineBar, { line: "text-h4", width: "w-2/3" })
+        /* @__PURE__ */ jsx("div", { className: "text-h4", children: /* @__PURE__ */ jsx(UnifiedSkeleton, { as: "span", className: cn(LINE_SKELETON_CLASS, "w-full") }) }),
+        /* @__PURE__ */ jsx("div", { className: "text-h4", children: /* @__PURE__ */ jsx(UnifiedSkeleton, { as: "span", className: cn(LINE_SKELETON_CLASS, "w-2/3") }) })
       ] })
     ] })
   ] });
@@ -95,15 +94,19 @@ function ExampleSkeleton({ className }) {
 }
 function JobHeadSkeleton() {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Skeleton, { className: "size-9 shrink-0 rounded-lg" }),
+    /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "size-9 shrink-0 rounded-lg" }),
     /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [
-      /* @__PURE__ */ jsx(LineBar, { line: "text-h4", width: "w-32" }),
-      /* @__PURE__ */ jsx("div", { className: "mt-0.5", children: /* @__PURE__ */ jsx(LineBar, { line: "text-h6", width: "w-40" }) })
+      /* @__PURE__ */ jsx("div", { className: "text-h4", children: /* @__PURE__ */ jsx(UnifiedSkeleton, { as: "span", className: cn(LINE_SKELETON_CLASS, "w-32") }) }),
+      /* @__PURE__ */ jsx("div", { className: "mt-0.5", children: /* @__PURE__ */ jsx("div", { className: "text-h6", children: /* @__PURE__ */ jsx(UnifiedSkeleton, { as: "span", className: cn(LINE_SKELETON_CLASS, "w-40") }) }) })
     ] })
   ] });
 }
-function CapabilityExplorerSkeleton({ className, count = 8 }) {
-  return /* @__PURE__ */ jsxs("div", { className, "aria-hidden": true, children: [
+function CapabilityExplorerSkeleton({
+  region = true,
+  className,
+  count = 8
+}) {
+  return /* @__PURE__ */ jsxs(LoadingRegion, { label: "Loading capabilities", announce: region, className, children: [
     /* @__PURE__ */ jsxs("div", { className: "content-lg:hidden", children: [
       /* @__PURE__ */ jsx("div", { className: "flex gap-[var(--spacing-system-sf)] overflow-hidden", children: /* @__PURE__ */ jsxs(
         "div",
@@ -115,10 +118,10 @@ function CapabilityExplorerSkeleton({ className, count = 8 }) {
           children: [
             /* @__PURE__ */ jsx("div", { className: "flex min-w-0 items-center gap-3", children: /* @__PURE__ */ jsx(JobHeadSkeleton, {}) }),
             /* @__PURE__ */ jsxs("div", { className: "min-h-[3lh] text-h6", children: [
-              /* @__PURE__ */ jsx(LineBar, { line: "text-h6", width: "w-full" }),
-              /* @__PURE__ */ jsx(LineBar, { line: "text-h6", width: "w-5/6" })
+              /* @__PURE__ */ jsx("div", { className: "text-h6", children: /* @__PURE__ */ jsx(UnifiedSkeleton, { as: "span", className: cn(LINE_SKELETON_CLASS, "w-full") }) }),
+              /* @__PURE__ */ jsx("div", { className: "text-h6", children: /* @__PURE__ */ jsx(UnifiedSkeleton, { as: "span", className: cn(LINE_SKELETON_CLASS, "w-5/6") }) })
             ] }),
-            /* @__PURE__ */ jsx(Skeleton, { className: "h-[300px] shrink-0 rounded-lg" }),
+            /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-[300px] shrink-0 rounded-lg" }),
             /* @__PURE__ */ jsx(ExampleSkeleton, { className: "shrink-0" })
           ]
         }
@@ -147,19 +150,19 @@ function CapabilityExplorerSkeleton({ className, count = 8 }) {
           /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 min-w-0 flex-col gap-5 overflow-hidden rounded-xl border border-ods-border bg-ods-card px-8 py-7", children: [
             /* @__PURE__ */ jsxs("div", { className: cn("grid shrink-0 grid-cols-[minmax(0,1fr)_minmax(0,380px)] gap-8", PANEL_TOP_HEIGHT_CLASS), children: [
               /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col overflow-hidden", children: [
-                /* @__PURE__ */ jsx("div", { className: "mb-2", children: /* @__PURE__ */ jsx(LineBar, { line: "text-h2", width: "w-64" }) }),
+                /* @__PURE__ */ jsx("div", { className: "mb-2", children: /* @__PURE__ */ jsx("div", { className: "text-h2", children: /* @__PURE__ */ jsx(UnifiedSkeleton, { as: "span", className: cn(LINE_SKELETON_CLASS, "w-64") }) }) }),
                 /* @__PURE__ */ jsxs("div", { className: "min-h-[3lh] text-h4", children: [
-                  /* @__PURE__ */ jsx(LineBar, { line: "text-h4", width: "w-full" }),
-                  /* @__PURE__ */ jsx(LineBar, { line: "text-h4", width: "w-4/5" })
+                  /* @__PURE__ */ jsx("div", { className: "text-h4", children: /* @__PURE__ */ jsx(UnifiedSkeleton, { as: "span", className: cn(LINE_SKELETON_CLASS, "w-full") }) }),
+                  /* @__PURE__ */ jsx("div", { className: "text-h4", children: /* @__PURE__ */ jsx(UnifiedSkeleton, { as: "span", className: cn(LINE_SKELETON_CLASS, "w-4/5") }) })
                 ] }),
                 /* @__PURE__ */ jsx("div", { className: "mt-auto grid grid-cols-1 gap-2", children: [0, 1, 2].map((i) => /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2.5", children: [
-                  /* @__PURE__ */ jsx(Skeleton, { className: "size-4 shrink-0 rounded-full" }),
-                  /* @__PURE__ */ jsx(LineBar, { line: "text-h6", width: i === 1 ? "w-56" : "w-48" })
+                  /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "size-4 shrink-0 rounded-full" }),
+                  /* @__PURE__ */ jsx("div", { className: "text-h6", children: /* @__PURE__ */ jsx(UnifiedSkeleton, { as: "span", className: cn(LINE_SKELETON_CLASS, i === 1 ? "w-56" : "w-48") }) })
                 ] }, i)) })
               ] }),
               /* @__PURE__ */ jsx(ExampleSkeleton, {})
             ] }),
-            /* @__PURE__ */ jsx(Skeleton, { className: cn("shrink-0 rounded-xl", PANEL_SCREEN_HEIGHT_CLASS) }),
+            /* @__PURE__ */ jsx(UnifiedSkeleton, { className: cn("shrink-0 rounded-xl", PANEL_SCREEN_HEIGHT_CLASS) }),
             /* @__PURE__ */ jsxs(
               "div",
               {
@@ -168,8 +171,8 @@ function CapabilityExplorerSkeleton({ className, count = 8 }) {
                   PANEL_FOOTER_HEIGHT_CLASS
                 ),
                 children: [
-                  /* @__PURE__ */ jsx(LineBar, { line: "text-h5", width: "w-16" }),
-                  /* @__PURE__ */ jsx(Skeleton, { className: "h-7 w-36 rounded-md" })
+                  /* @__PURE__ */ jsx("div", { className: "text-h5", children: /* @__PURE__ */ jsx(UnifiedSkeleton, { as: "span", className: cn(LINE_SKELETON_CLASS, "w-16") }) }),
+                  /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-7 w-36 rounded-md" })
                 ]
               }
             )

package/dist/components/features/devices/device-selector/device-selector-skeleton.d.ts

@@ -4,7 +4,10 @@ import type { DeviceSelectorProps } from './device-selector.types';
  * whichever the caller hands its real `DeviceSelector` it must hand this one too,
  * or the two disagree on how tall the block is.
  */
-type DeviceSelectorSkeletonProps = Pick<DeviceSelectorProps, 'showSelectionModeRadio' | 'singleSelect' | 'hideColumns'>;
+type DeviceSelectorSkeletonProps = Pick<DeviceSelectorProps, 'showSelectionModeRadio' | 'singleSelect' | 'hideColumns'> & {
+    /** The loading state announces itself (`LoadingRegion`). `false` inside another loading region. Default `true`. */
+    region?: boolean;
+};
 /**
  * Suspense fallback for a `DeviceSelector` whose devices come from a suspending
  * Relay query.
@@ -20,6 +23,6 @@ type DeviceSelectorSkeletonProps = Pick<DeviceSelectorProps, 'showSelectionModeR
  * stands in for, and everything below it jumped down the moment the devices
  * landed.
  */
-export declare function DeviceSelectorSkeleton(props: DeviceSelectorSkeletonProps): import("react").JSX.Element;
+export declare function DeviceSelectorSkeleton({ region, ...props }: DeviceSelectorSkeletonProps): import("react").JSX.Element;
 export {};
 //# sourceMappingURL=device-selector-skeleton.d.ts.map

package/dist/components/features/devices/device-selector/device-selector-skeleton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"device-selector-skeleton.d.ts","sourceRoot":"","sources":["../../../../../src/components/features/devices/device-selector/device-selector-skeleton.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAInE;;;;GAIG;AACH,KAAK,2BAA2B,GAAG,IAAI,CAAC,mBAAmB,EAAE,wBAAwB,GAAG,cAAc,GAAG,aAAa,CAAC,CAAC;AAExH;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,2BAA2B,+BAExE"}
+{"version":3,"file":"device-selector-skeleton.d.ts","sourceRoot":"","sources":["../../../../../src/components/features/devices/device-selector/device-selector-skeleton.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAInE;;;;GAIG;AACH,KAAK,2BAA2B,GAAG,IAAI,CACrC,mBAAmB,EACnB,wBAAwB,GAAG,cAAc,GAAG,aAAa,CAC1D,GAAG;IACF,mHAAmH;IACnH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,sBAAsB,CAAC,EAAE,MAAa,EAAE,GAAG,KAAK,EAAE,EAAE,2BAA2B,+BAE9F"}

package/dist/components/features/devices/device-selector/device-selector-skeleton.js

@@ -2,8 +2,8 @@
 import { jsx } from "react/jsx-runtime";
 import { DeviceSelector } from "./device-selector.js";
 const NO_DEVICES = [];
-function DeviceSelectorSkeleton(props) {
-  return /* @__PURE__ */ jsx(DeviceSelector, { ...props, devices: NO_DEVICES, loading: true, disabled: true });
+function DeviceSelectorSkeleton({ region = true, ...props }) {
+  return /* @__PURE__ */ jsx(DeviceSelector, { ...props, devices: NO_DEVICES, loading: true, loadingRegion: region, disabled: true });
 }
 export {
   DeviceSelectorSkeleton

package/dist/components/features/devices/device-selector/device-selector.d.ts

@@ -34,5 +34,5 @@ import type { DeviceSelectorProps } from './device-selector.types';
  *   entirely, the search toolbar and row actions go away, and the table becomes
  *   a live preview of what the rule matches.
  */
-export declare function DeviceSelector<T extends DeviceRow = DeviceRow>({ devices, loading, selectedIds: selectedIdsProp, onSelectionChange: onSelectionChangeProp, getDeviceKey: getDeviceKeyProp, infiniteScroll, disabled, showSelectionModeRadio, headerContent, addAllBehavior, singleSelect, isDeviceDisabled, hideColumns, showToolbar, totalCount, server, selectionMode, onSelectionModeChange, criteriaContent, }: DeviceSelectorProps<T>): import("react").JSX.Element;
+export declare function DeviceSelector<T extends DeviceRow = DeviceRow>({ devices, loading, loadingRegion, selectedIds: selectedIdsProp, onSelectionChange: onSelectionChangeProp, getDeviceKey: getDeviceKeyProp, infiniteScroll, disabled, showSelectionModeRadio, headerContent, addAllBehavior, singleSelect, isDeviceDisabled, hideColumns, showToolbar, totalCount, server, selectionMode, onSelectionModeChange, criteriaContent, }: DeviceSelectorProps<T>): import("react").JSX.Element;
 //# sourceMappingURL=device-selector.d.ts.map

package/dist/components/features/devices/device-selector/device-selector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"device-selector.d.ts","sourceRoot":"","sources":["../../../../../src/components/features/devices/device-selector/device-selector.tsx"],"names":[],"mappings":"AA2BA,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,UAAU,CAAC;AAGzD,OAAO,KAAK,EAAE,mBAAmB,EAAU,MAAM,yBAAyB,CAAC;AA6B3E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,wBAAgB,cAAc,CAAC,CAAC,SAAS,SAAS,GAAG,SAAS,EAAE,EAC9D,OAAO,EACP,OAAO,EACP,WAAW,EAAE,eAAe,EAC5B,iBAAiB,EAAE,qBAAqB,EACxC,YAAY,EAAE,gBAAgB,EAC9B,cAAc,EACd,QAAgB,EAChB,sBAA6B,EAC7B,aAAa,EACb,cAAwB,EACxB,YAAoB,EACpB,gBAAgB,EAChB,WAAW,EACX,WAAkB,EAClB,UAAU,EACV,MAAM,EACN,aAAa,EACb,qBAAqB,EACrB,eAAe,GAChB,EAAE,mBAAmB,CAAC,CAAC,CAAC,+BA6qBxB"}
+{"version":3,"file":"device-selector.d.ts","sourceRoot":"","sources":["../../../../../src/components/features/devices/device-selector/device-selector.tsx"],"names":[],"mappings":"AA2BA,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,UAAU,CAAC;AAGzD,OAAO,KAAK,EAAE,mBAAmB,EAAU,MAAM,yBAAyB,CAAC;AA6B3E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,wBAAgB,cAAc,CAAC,CAAC,SAAS,SAAS,GAAG,SAAS,EAAE,EAC9D,OAAO,EACP,OAAO,EACP,aAAa,EACb,WAAW,EAAE,eAAe,EAC5B,iBAAiB,EAAE,qBAAqB,EACxC,YAAY,EAAE,gBAAgB,EAC9B,cAAc,EACd,QAAgB,EAChB,sBAA6B,EAC7B,aAAa,EACb,cAAwB,EACxB,YAAoB,EACpB,gBAAgB,EAChB,WAAW,EACX,WAAkB,EAClB,UAAU,EACV,MAAM,EACN,aAAa,EACb,qBAAqB,EACrB,eAAe,GAChB,EAAE,mBAAmB,CAAC,CAAC,CAAC,+BA8qBxB"}

package/dist/components/features/devices/device-selector/device-selector.js

@@ -47,6 +47,7 @@ function CustomerCell({ device }) {
 function DeviceSelector({
   devices,
   loading,
+  loadingRegion,
   selectedIds: selectedIdsProp,
   onSelectionChange: onSelectionChangeProp,
   getDeviceKey: getDeviceKeyProp,
@@ -520,6 +521,7 @@ function DeviceSelector({
       DataTable.Body,
       {
         loading,
+        loadingRegion,
         skeletonRows: 8,
         emptyMessage: isCriteria ? "No devices match these criteria" : activeSubTab === "selected" ? "No devices selected" : "No devices found",
         rowClassName

package/dist/components/features/devices/device-selector/device-selector.types.d.ts

@@ -62,6 +62,8 @@ export interface DeviceSelectorProps<T extends DeviceRow = DeviceRow> {
     devices: T[];
     /** Whether the device list is loading. */
     loading: boolean;
+    /** The loading state announces itself ("Loading results"). `false` inside another loading region. Default `true`. */
+    loadingRegion?: boolean;
     /**
      * Currently selected device keys. Optional so a skeleton can render the real
      * picker with nothing selected, the component falls back to an empty set and