@vertesia/ui 1.5.0-dev.20260714.072725Z → 1.5.0-dev.20260722.120446Z

package/src/session/auth/composable.ts

@@ -17,6 +17,44 @@ interface ComposableTokenResponse {
     message?: string;
 }
 
+function normalizeIssuer(value: string | undefined): string | undefined {
+    return value?.replace(/\/+$/, '');
+}
+
+function decodeToken(token: string): AuthTokenPayload {
+    return jwtDecode(token) as AuthTokenPayload;
+}
+
+function isVertesiaIssuedToken(token: string | undefined): token is string {
+    if (!token) return false;
+    try {
+        const decoded = decodeToken(token) as AuthTokenPayload & { iss?: string };
+        return normalizeIssuer(decoded.iss) === normalizeIssuer(Env.endpoints.sts);
+    } catch {
+        return false;
+    }
+}
+
+function canUseVertesiaTokenDirectly(token: string, accountId?: string, projectId?: string): boolean {
+    const decoded = decodeToken(token);
+    const hasAuthorizationClaims = Boolean(
+        decoded.permissions?.length ||
+            decoded.account_roles?.length ||
+            decoded.project_roles?.length ||
+            decoded.apps?.length,
+    );
+    if (!hasAuthorizationClaims) {
+        return false;
+    }
+    if (accountId && decoded.account?.id !== accountId) {
+        return false;
+    }
+    if (projectId && decoded.project?.id !== projectId) {
+        return false;
+    }
+    return true;
+}
+
 export async function fetchComposableToken(
     getIdToken: () => Promise<string | null | undefined>,
     accountId?: string,
@@ -319,23 +357,40 @@ export async function getComposableToken(
     const selectedAccount = accountId ?? localStorage.getItem(LastSelectedAccountId_KEY) ?? undefined;
     const selectedProject =
         projectId ?? localStorage.getItem(`${LastSelectedProjectId_KEY}-${selectedAccount}`) ?? undefined;
+    const devAuthToken = Env.isLocalDev ? Env.devAuthToken : undefined;
+    const suppliedToken = devAuthToken ?? initToken ?? AUTH_TOKEN_RAW;
 
     //token is still valid for more than 5 minutes
     if (!forceRefresh && AUTH_TOKEN_RAW && AUTH_TOKEN && AUTH_TOKEN.exp > Date.now() / 1000 + 300) {
         return { rawToken: AUTH_TOKEN_RAW, token: AUTH_TOKEN, error: false };
     }
 
+    if (
+        !forceRefresh &&
+        isVertesiaIssuedToken(suppliedToken) &&
+        canUseVertesiaTokenDirectly(suppliedToken, selectedAccount, selectedProject)
+    ) {
+        AUTH_TOKEN_RAW = suppliedToken;
+        AUTH_TOKEN = decodeToken(AUTH_TOKEN_RAW);
+        if (!AUTH_TOKEN.exp) {
+            throw new Error('Invalid composable token');
+        }
+        return { rawToken: AUTH_TOKEN_RAW, token: AUTH_TOKEN, error: false };
+    }
+
     //token is close to expire, refresh it
-    if (!useInternalAuth && getFirebaseAuth().currentUser) {
+    if (!devAuthToken && !useInternalAuth && getFirebaseAuth().currentUser) {
         //we have a firebase user, get the token from there
         AUTH_TOKEN_RAW = await fetchComposableTokenFromFirebaseToken(selectedAccount, selectedProject);
-    } else if (initToken || AUTH_TOKEN_RAW) {
+    } else if (!devAuthToken && (initToken || AUTH_TOKEN_RAW)) {
         // we have a token already and no firebase user, refresh it
         AUTH_TOKEN_RAW = await fetchComposableToken(
             () => Promise.resolve(initToken ?? AUTH_TOKEN_RAW),
             selectedAccount,
             selectedProject,
         );
+    } else if (devAuthToken) {
+        AUTH_TOKEN_RAW = devAuthToken;
     }
 
     if (!AUTH_TOKEN_RAW) {
@@ -348,7 +403,7 @@ export async function getComposableToken(
         throw new Error('Cannot acquire a composable token');
     }
 
-    AUTH_TOKEN = jwtDecode(AUTH_TOKEN_RAW) as AuthTokenPayload;
+    AUTH_TOKEN = decodeToken(AUTH_TOKEN_RAW);
 
     if (!AUTH_TOKEN?.exp || !AUTH_TOKEN_RAW) {
         console.error('Invalid composable token', AUTH_TOKEN);

package/src/session/auth/domainRouting.test.ts

@@ -1,9 +1,15 @@
 import { afterEach, describe, expect, it } from 'vitest';
-import { shouldRedirectToCentralAuth, shouldUseFirebaseAuth } from './domainRouting';
+import { mountRootUrl, shouldRedirectToCentralAuth, shouldUseFirebaseAuth } from './domainRouting';
+
+// Stub document.baseURI to simulate the served `<base href>` (deep gateway mount) or its absence.
+function setBaseURI(baseURI: string) {
+    (globalThis as { document?: unknown }).document = { baseURI };
+}
 
 describe('domainRouting', () => {
     afterEach(() => {
         delete (globalThis as { window?: unknown }).window;
+        delete (globalThis as { document?: unknown }).document;
     });
 
     it("uses Firebase auth when AUTH_MODE is 'firebase'", () => {
@@ -23,4 +29,25 @@ describe('domainRouting', () => {
         expect(shouldUseFirebaseAuth()).toBe(false);
         expect(shouldRedirectToCentralAuth()).toBe(true);
     });
+
+    describe('mountRootUrl', () => {
+        it('returns the deep gateway mount root (dropping any deep route / query / hash)', () => {
+            const mount = 'https://gw.example.com/tenants/05948c_5ed5f4/apps/furniture-catalog/versions/v1/app/';
+            setBaseURI(mount);
+            expect(mountRootUrl().toString()).toBe(mount);
+        });
+
+        it('strips an existing query and hash so callers control the reload target', () => {
+            setBaseURI('https://gw.example.com/tenants/t/apps/a/versions/v/app/');
+            const url = mountRootUrl();
+            url.searchParams.set('a', 'acct1');
+            url.searchParams.set('p', 'proj1');
+            expect(url.toString()).toBe('https://gw.example.com/tenants/t/apps/a/versions/v/app/?a=acct1&p=proj1');
+        });
+
+        it('is the origin root for the Studio UI (no <base> element)', () => {
+            setBaseURI('https://studio.vertesia.io/');
+            expect(mountRootUrl().toString()).toBe('https://studio.vertesia.io/');
+        });
+    });
 });

package/src/session/auth/domainRouting.ts

@@ -11,3 +11,41 @@ export function shouldUseFirebaseAuth(_hostname?: string) {
 export function shouldRedirectToCentralAuth(_hostname?: string) {
     return !shouldUseFirebaseAuth();
 }
+
+/**
+ * The page URL to return to after a central-auth round-trip (`redirect_uri`).
+ *
+ * Apps served under a deep gateway mount carry a `<base href="/tenants/<t>/apps/<app>/.../app/">`
+ * that the app-gateway injects at serve time. The in-app router rewrites the address bar relative
+ * to the origin rather than that mount, so by the time the auth flow runs `window.location` can
+ * read as the bare origin `/`. Building `redirect_uri` from that drops the app path, and the
+ * post-login token bounces back to a URL that serves no app.
+ *
+ * Prefer the live location when it still sits under the mount (preserves the in-app deep route);
+ * otherwise fall back to `document.baseURI` — the mount, which the router cannot clobber. With no
+ * `<base>` element (the Studio UI), `document.baseURI` is the document URL and its `pathname` is a
+ * prefix of the live location, so the live URL is used unchanged — no behavior change there.
+ */
+export function authReturnUrl(): URL {
+    const base = new URL(document.baseURI);
+    const current = new URL(window.location.href);
+    const target = current.pathname.startsWith(base.pathname) ? current : base;
+    target.hash = '';
+    return target;
+}
+
+/**
+ * The app's mount root URL — the served `<base href>` (or the origin root for the Studio UI).
+ *
+ * Used for full-reload navigations that intentionally reset to the app root (logout, account /
+ * project switch). Building these from a bare `/` drops a gateway-mounted app off its mount and
+ * lands on a URL that serves no app; resolving against `document.baseURI` keeps the reload inside
+ * the mount. For the Studio UI (no `<base>` element) `document.baseURI` is the origin root, so the
+ * behavior is unchanged.
+ */
+export function mountRootUrl(): URL {
+    const url = new URL(document.baseURI);
+    url.hash = '';
+    url.search = '';
+    return url;
+}

package/src/shell/login/SignInRestrictedEnvStep.tsx

@@ -15,7 +15,7 @@ interface SignInRestrictedEnvStepProps {
 const AUTO_REDIRECT_SECONDS = 15;
 
 /**
- * Shown when the STS rejects sign-in because the current environment (preview/preprod) is
+ * Shown when the STS rejects sign-in because the current environment (any non-production tier) is
  * restricted to early-access users. Offers a redirect to the production web application — in the
  * user's own region — and a way to sign in with a different account. If the user takes no action, it
  * redirects automatically after {@link AUTO_REDIRECT_SECONDS}. See

package/src/shell/login/SigninScreen.tsx

@@ -89,7 +89,15 @@ function SigninScreenImpl({
 
     useEffect(() => {
         if (!preservePath) {
-            history.replaceState({}, '', '/');
+            // Reset to the app's mount root, not the bare origin. A gateway-mounted app carries a
+            // served `<base href>` deep mount; collapsing to '/' drops the app off that mount (the
+            // bare origin serves no app) and the address bar can no longer be reloaded. This effect
+            // also flashes briefly for already-authenticated users during the loading transition, so
+            // a bare '/' here loses the URL even on a normal login. Deriving the root from
+            // `document.baseURI` keeps it inside the mount; for the origin-served Studio UI the
+            // pathname is '/', so the behavior is unchanged.
+            const mountRoot = new URL(document.baseURI).pathname || '/';
+            history.replaceState({}, '', mountRoot);
         }
     }, [preservePath]);
 

package/src/shell/login/productionUrl.test.ts

@@ -2,17 +2,20 @@ import { describe, expect, it } from 'vitest';
 import { getProductionAppUrl } from './productionUrl.js';
 
 describe('getProductionAppUrl', () => {
-    it('sends a non-US region to its own regional production site', () => {
+    it('sends every production region to its regional site (one cloud.{region} pattern)', () => {
+        // us1 is not special-cased — it uses the same regional pattern as every other region.
+        expect(getProductionAppUrl('us1')).toBe('https://cloud.us1.vertesia.io/');
+        expect(getProductionAppUrl('us2')).toBe('https://cloud.us2.vertesia.io/');
         expect(getProductionAppUrl('eu1')).toBe('https://cloud.eu1.vertesia.io/');
         expect(getProductionAppUrl('jp1')).toBe('https://cloud.jp1.vertesia.io/');
     });
 
-    it('sends US regions to the canonical non-regional production site', () => {
-        expect(getProductionAppUrl('us1')).toBe('https://cloud.vertesia.io/');
-        expect(getProductionAppUrl('us')).toBe('https://cloud.vertesia.io/');
+    it('sends a dev region to the production region it mirrors, not the dev host', () => {
+        // dev1 mirrors us1: a rejected user must land on production, never back on cloud.dev1.
+        expect(getProductionAppUrl('dev1')).toBe('https://cloud.us1.vertesia.io/');
     });
 
-    it('falls back to the canonical production site when the region is unknown', () => {
+    it('falls back to the canonical non-regional site when the region is unknown', () => {
         expect(getProductionAppUrl(undefined)).toBe('https://cloud.vertesia.io/');
         expect(getProductionAppUrl('')).toBe('https://cloud.vertesia.io/');
     });

package/src/shell/login/productionUrl.ts

@@ -4,15 +4,25 @@
  * they do have access — in their own region, never another one (an EU user must not land on the US
  * site, and vice versa).
  *
- * The mapping mirrors the server's `detectUiUrl` production branch (packages/server-common):
- *   - US (`us` / `us1`) or unknown region → `https://cloud.vertesia.io/` (canonical, non-regional)
- *   - any other region (e.g. `eu1`, `jp1`)  → `https://cloud.{region}.vertesia.io/`
+ * Every production region follows one URL pattern — `https://cloud.{region}.vertesia.io/` (e.g.
+ * `us1`, `us2`, `eu1`, `jp1`) — with no region special-cased. Only the legacy non-regional
+ * deployment has no region and falls back to the apex `https://cloud.vertesia.io/`.
+ *
+ * Dev/ephemeral regions have no production site of their own — they mirror a production region — so
+ * they are mapped to it first. Sending a rejected user to the dev host (e.g. `cloud.dev1.vertesia.io`)
+ * would just bounce them back to the same restricted environment. `dev1` (us-central1) mirrors the
+ * `us1` production region.
  *
  * Region is preferred over parsing the current hostname because it is well-defined for every serving
  * pattern (including the direct-routing `*.ui.{region}.vertesia.io` hosts, which carry no
  * `preview.`/`preprod.` prefix to strip). Callers pass `Env.region` from `@vertesia/ui/env`.
  */
+const DEV_REGION_TO_PRODUCTION_REGION: Record<string, string> = {
+    // dev1 (us-central1) is a dev mirror of the us1 production region.
+    dev1: 'us1',
+};
+
 export function getProductionAppUrl(region?: string): string {
-    const isNonUsRegion = region && region !== 'us' && region !== 'us1';
-    return isNonUsRegion ? `https://cloud.${region}.vertesia.io/` : 'https://cloud.vertesia.io/';
+    const prodRegion = (region && DEV_REGION_TO_PRODUCTION_REGION[region]) || region;
+    return prodRegion ? `https://cloud.${prodRegion}.vertesia.io/` : 'https://cloud.vertesia.io/';
 }

package/src/widgets/form/Form.tsx

@@ -184,7 +184,7 @@ function ListItem({ list, object, onDelete, disabled }: ListItemProps) {
     return (
         <div className="flex gap-2 w-full">
             <div className="flex-1">{renderItemProperty(object, editor)}</div>
-            <Button variant="ghost" onClick={onDelete} disabled={disabled} alt="Delete">
+            <Button variant="ghost" onClick={onDelete} disabled={disabled} title="Delete">
                 <Trash2 className="size-4 text-destructive" />
             </Button>
         </div>

package/src/widgets/json-view/JSONSwitcher.tsx

@@ -14,7 +14,7 @@ export function JSONSwitcher({
             <Button
                 variant={viewCode ? 'ghost' : 'primary'}
                 size="sm"
-                alt="Preview properties"
+                title="Preview properties"
                 onClick={() => setViewCode(false)}
             >
                 {title}
@@ -22,7 +22,7 @@ export function JSONSwitcher({
             <Button
                 variant={viewCode ? 'primary' : 'ghost'}
                 size="sm"
-                alt="View in JSON format"
+                title="View in JSON format"
                 onClick={() => setViewCode(true)}
             >
                 JSON

package/src/widgets/json-view/JSONView.tsx

@@ -35,7 +35,7 @@ interface PropertyTitleProps {
     name: string;
 }
 function PropertyTitle({ name }: PropertyTitleProps) {
-    return <div className="text-md font-semibold">{computeTitleFromName(name)}</div>;
+    return <div className="text-sm font-semibold">{computeTitleFromName(name)}</div>;
 }
 
 interface BlockElementProps {
@@ -64,14 +64,14 @@ function PropertyElement({ name, value }: PropertyElementProps) {
     switch (info.type) {
         case ValueType.Inline:
             return (
-                <div className="w-full flex gap-2">
+                <div className="w-full flex gap-2 text-sm">
                     <PropertyTitle name={`${name}:`} />
                     <p>{info.value}</p>
                 </div>
             );
         case ValueType.Paragraph:
             return (
-                <div>
+                <div className="w-full flex flex-col gap-2 text-sm">
                     <PropertyTitle name={name} />
                     <p>{info.value}</p>
                 </div>
@@ -80,14 +80,14 @@ function PropertyElement({ name, value }: PropertyElementProps) {
             return (
                 <div className="prose dark:prose-invert">
                     <PropertyTitle name={name} />
-                    <div className="vprose dark:prose-invert">{info.value}</div>
+                    <div className="vprose prose-sm dark:prose-invert">{info.value}</div>
                 </div>
             );
         case ValueType.Array:
             return <ArrayProperty name={name} value={value as JSONArray} />;
         case ValueType.Object:
             return (
-                <div>
+                <div className="w-full flex flex-col gap-2 text-sm">
                     <PropertyTitle name={name} />
                     <BlockElement className="mt-2">
                         {Object.entries(value as JSONObject).map(([key, value]) => (
@@ -164,8 +164,8 @@ function ItemProperty({ index, value, useBullet }: ItemPropertyProps) {
             break;
     }
     return (
-        <div className="flex gap-4 hover:bg-slate-50 dark:hover:bg-slate-800 py-2 pe-2 ps-4">
-            <div className="font-semibold text-gray-600 dark:text-gray-400">{bullet}</div>
+        <div className="flex gap-4 hover:bg-muted py-2 pe-2 ps-4">
+            <div className="font-semibold text-muted">{bullet}</div>
             <div>{content}</div>
         </div>
     );

package/src/widgets/monacoEditor/MonacoEditor.tsx

@@ -8,6 +8,33 @@ import { registerCustomFoldingProviders } from './foldingProviders.js';
 
 export type Monaco = typeof monaco;
 
+/**
+ * Shared, body-level host for Monaco "overflow widgets" — the suggestion, hover, and
+ * parameter-hint popups. With `fixedOverflowWidgets` enabled these are `position: fixed`; a CSS
+ * `transform` on any ancestor (e.g. a modal centered with `translate(-50%, -50%)`) becomes their
+ * containing block and drags the popups away from the cursor, sometimes off-screen. Hosting them in
+ * an untransformed node appended to `document.body` keeps them anchored to the caret. The node
+ * carries the `monaco-editor` class so Monaco's (global) theme styles apply, and a high z-index so
+ * the popups render above modals/overlays. One shared node is reused by every editor instance.
+ */
+let overflowWidgetsNode: HTMLElement | undefined;
+function getOverflowWidgetsNode(): HTMLElement | undefined {
+    if (typeof document === 'undefined') return undefined;
+    if (!overflowWidgetsNode) {
+        const node = document.createElement('div');
+        node.className = 'monaco-editor';
+        // `absolute` + z-index establishes a stacking context above modals without creating a
+        // containing block for the fixed-positioned popups (only transform/filter/etc. would).
+        node.style.position = 'absolute';
+        node.style.top = '0';
+        node.style.left = '0';
+        node.style.zIndex = '10000';
+        document.body.appendChild(node);
+        overflowWidgetsNode = node;
+    }
+    return overflowWidgetsNode;
+}
+
 export interface IEditorApi {
     getValue(): string;
     setValue(value?: string): void;
@@ -226,6 +253,8 @@ export function MonacoEditor({
         tabSize: 2,
         insertSpaces: true,
         fixedOverflowWidgets: true, // Hover/diagnostic popovers float outside the editor bounds
+        // Host the fixed popups in a body-level node so a modal's CSS transform doesn't offset them.
+        overflowWidgetsDomNode: getOverflowWidgetsNode(),
         glyphMargin: true, // Enable better error reporting
         renderValidationDecorations: 'on', // Show error squiggles
         renderLineHighlight: 'line', // Highlight entire line for errors

package/src/widgets/schema-editor/ManagedSchema.ts

@@ -17,6 +17,11 @@ export interface NodeUpdate {
     isRequired?: boolean;
     editor?: string | null; // use null to force remove editor
     description?: string;
+    /**
+     * When false, the property is marked `"x-extract": false` and is omitted from
+     * extraction result_schema. Default / true = extractable.
+     */
+    extractable?: boolean;
 }
 
 interface SchemaLoader {
@@ -141,6 +146,19 @@ export class SchemaNode {
         this.schema.description = value;
     }
 
+    /** Whether extraction models may fill this field. Default true. */
+    get extractable(): boolean {
+        return (this.schema as Record<string, unknown>)['x-extract'] !== false;
+    }
+
+    set extractable(value: boolean) {
+        if (value) {
+            delete (this.schema as Record<string, unknown>)['x-extract'];
+        } else {
+            (this.schema as Record<string, unknown>)['x-extract'] = false;
+        }
+    }
+
     get isParent() {
         return this.type.isObject;
     }
@@ -300,6 +318,10 @@ export class SchemaNode {
             this.description = data.description;
             updated = true;
         }
+        if (data.extractable != null && this.extractable !== data.extractable) {
+            this.extractable = data.extractable;
+            updated = true;
+        }
 
         return updated;
     }

package/src/widgets/schema-editor/editor/EditableSchemaProperty.tsx

@@ -4,6 +4,8 @@ export interface EditableSchemaProperty {
     name: string;
     type: string;
     description?: string;
+    /** When false, field is excluded from model extraction (`x-extract: false`). Default true. */
+    extractable?: boolean;
 }
 
 export function getEditableSchemaProperty(schema: SchemaNode): EditableSchemaProperty {
@@ -11,5 +13,6 @@ export function getEditableSchemaProperty(schema: SchemaNode): EditableSchemaPro
         name: schema.getNameSignature(),
         type: schema.getTypeSignature(),
         description: schema.description,
+        extractable: schema.extractable,
     };
 }

package/src/widgets/schema-editor/editor/PropertyViewer.tsx

@@ -1,12 +1,23 @@
+import { useUITranslation } from '@vertesia/ui/i18n';
 import type { DataViewerProps } from './Editable.js';
 import type { EditableSchemaProperty } from './EditableSchemaProperty.js';
 
 export function PropertyViewer({ value }: DataViewerProps<EditableSchemaProperty>) {
+    const { t } = useUITranslation();
     if (!value) return null;
+    const noExtract = value.extractable === false;
     return (
-        <div className="w-full flex items-baseline">
-            <div>{value.name || ''}</div>
-            <div className="ms-2 text-sm text-muted">{value.type || ''}</div>
+        <div className="w-full flex items-baseline gap-2 min-w-0">
+            <div className="truncate">{value.name || ''}</div>
+            <div className="text-sm text-muted shrink-0">{value.type || ''}</div>
+            {noExtract && (
+                <span
+                    className="shrink-0 text-[10px] uppercase tracking-wide text-attention border border-attention/40 bg-attention/10 rounded px-1.5 py-0.5"
+                    title={t('widgets.schema.extractFromDocumentHint')}
+                >
+                    {t('widgets.schema.noExtract')}
+                </span>
+            )}
         </div>
     );
 }

package/src/widgets/schema-editor/editor/SchemaEditor.tsx

@@ -1,4 +1,4 @@
-import { Button, errorMessage, useToast } from '@vertesia/ui/core';
+import { Button, errorMessage, Switch, useToast } from '@vertesia/ui/core';
 import { useUITranslation } from '@vertesia/ui/i18n';
 import { ChevronDown, ChevronRight, Plus } from 'lucide-react';
 import { useState } from 'react';
@@ -20,13 +20,26 @@ interface SchemaTreeProps {
     readonly?: boolean;
 }
 export function SchemaEditor({ schema, readonly = false }: SchemaTreeProps) {
+    const { t } = useUITranslation();
     return (
-        <ul className="">
-            {schema.children.map((prop) => {
-                return renderProperty(prop, readonly);
-            })}
-            {!readonly ? <AddPropertyButton parent={schema.root} /> : null}
-        </ul>
+        <div className="space-y-1">
+            <div className="flex items-center gap-2 px-2 py-1 text-xs font-medium text-muted-foreground border-b border-border">
+                <div className="flex-1 min-w-0">{t('widgets.schema.propertyColumn')}</div>
+                {!readonly && (
+                    <div className="shrink-0 w-28 text-end pe-1" title={t('widgets.schema.extractFromDocumentHint')}>
+                        {t('widgets.schema.extractFromDocument')}
+                    </div>
+                )}
+                {/* space for expand/collapse on parent rows */}
+                <div className="w-8 shrink-0" />
+            </div>
+            <ul className="">
+                {schema.children.map((prop) => {
+                    return renderProperty(prop, readonly);
+                })}
+                {!readonly ? <AddPropertyButton parent={schema.root} /> : null}
+            </ul>
+        </div>
     );
 }
 
@@ -44,7 +57,7 @@ interface SimpleItemProps {
 }
 function SimpleItem({ node, readonly }: SimpleItemProps) {
     return (
-        <li>
+        <li className="border-b border-border/40 last:border-0">
             <PropertyTitleBar property={node} readonly={readonly} />
         </li>
     );
@@ -59,20 +72,21 @@ function ParentItem({ property, readonly }: ParentItemProps) {
     const Icon = isOpen ? ChevronDown : ChevronRight;
 
     return (
-        <li>
-            <div className="flex items-center w-full">
+        <li className="border-b border-border/40 last:border-0">
+            <div className="flex items-center w-full gap-1">
+                <div className="flex-1 min-w-0">
+                    <PropertyTitleBar property={property} readonly={readonly} />
+                </div>
                 <Button
                     variant="ghost"
                     size="icon"
                     onClick={() => setOpen(!isOpen)}
                     aria-label={isOpen ? `Collapse ${property.name}` : `Expand ${property.name}`}
                     aria-expanded={isOpen}
+                    className="shrink-0"
                 >
                     <Icon className="size-4 cn-rtl-flip" />
                 </Button>
-                <div className="flex-1">
-                    <PropertyTitleBar property={property} readonly={readonly} />
-                </div>
             </div>
             {isOpen && (
                 <ul className="ms-4 border-s border-gray-400 border-dashed">
@@ -110,7 +124,13 @@ function PropertyTitleBar({ property, readonly }: PropertyTitleBarProps) {
 
             const update = property.getUpdateFromNameAndTypeSignature(value.name, value.type);
 
-            if (property.update({ ...update, description: value.description })) {
+            if (
+                property.update({
+                    ...update,
+                    description: value.description,
+                    extractable: value.extractable,
+                })
+            ) {
                 property.reloadTree();
             }
         } catch (err: unknown) {
@@ -124,25 +144,56 @@ function PropertyTitleBar({ property, readonly }: PropertyTitleBarProps) {
         }
         return true;
     };
+
+    /** Toggle extractability without entering name/type edit mode. */
+    const onExtractableChange = (extractable: boolean) => {
+        if (property.update({ extractable })) {
+            property.reloadTree();
+        }
+    };
+
     const isNew = property.resetIsNew();
     const editableProp = getEditableSchemaProperty(property);
 
     return (
-        <Editable
-            value={editableProp}
-            onChange={onChange}
-            onDelete={() => {
-                property.remove();
-                property.reloadTree();
-            }}
-            editor={PropertyEditor}
-            viewer={PropertyViewer}
-            outlineOnHover
-            isEditing={isNew}
-            skipClickOutside={skipClickOutside}
-            readonly={readonly}
-            onValidate={(property) => validatePropertyName(property.name)}
-        />
+        <div className="flex items-center gap-2 w-full min-w-0 py-0.5">
+            <div className="flex-1 min-w-0">
+                <Editable
+                    value={editableProp}
+                    onChange={onChange}
+                    onDelete={() => {
+                        property.remove();
+                        property.reloadTree();
+                    }}
+                    editor={PropertyEditor}
+                    viewer={PropertyViewer}
+                    outlineOnHover
+                    isEditing={isNew}
+                    skipClickOutside={skipClickOutside}
+                    readonly={readonly}
+                    onValidate={(prop) => validatePropertyName(prop.name)}
+                />
+            </div>
+            {!readonly ? (
+                <div className="shrink-0 w-28 flex items-center justify-end gap-1.5 pe-1">
+                    <Switch
+                        size="sm"
+                        value={property.extractable}
+                        onChange={onExtractableChange}
+                        aria-label={`${t('widgets.schema.extractFromDocument')}: ${property.name}`}
+                    />
+                </div>
+            ) : property.extractable === false ? (
+                <div className="shrink-0 w-28 flex justify-end pe-1">
+                    <span
+                        className="text-[10px] uppercase tracking-wide text-attention border border-attention/40 bg-attention/10 rounded px-1.5 py-0.5"
+                        title={t('widgets.schema.extractFromDocumentHint')}
+                    >
+                        {t('widgets.schema.noExtract')}
+                    </span>
+                </div>
+            ) : null}
+        </div>
     );
 }