diff --git a/packages/core/src/design-jsx/reference/authoring.md b/packages/core/src/design-jsx/reference/authoring.md index 89bf846a2..3b421fe26 100644 --- a/packages/core/src/design-jsx/reference/authoring.md +++ b/packages/core/src/design-jsx/reference/authoring.md @@ -35,7 +35,7 @@ This reference describes scene creation, not React DOM output. Use the `render` - Child `propertyRefs` connect fields to stable property IDs, for example `[{ propertyId: 'message', field: 'TEXT' }]`. Supported fields are `TEXT`, `VISIBLE`, and `INSTANCE_SWAP`; text and swap references require text and instance nodes respectively. References do not depend on layer names. - Instance assignments use the native string values (including `'true'` / `'false'` for BOOLEAN properties and component IDs for swaps). For example `Instance({ of: noteId, properties: { message: 'Updated review' } })`. Assignments persist through component synchronization; unknown IDs and invalid values fail rather than silently creating inert overrides. Select variants through component-set variant props, not through instance property assignments. - Reuse existing local or library components before recreating them. Keep meaningful text, visibility, and swap properties exposed rather than hand-editing cloned child nodes. -- Distinguish a main component's default size from its instance's placement constraints. Verify the actual instance bounds in narrower parents; a requested Fill dimension alone is not proof that inherited sizing changed. Do not compensate for a sizing mismatch with guessed heights, clipping, or manually positioned siblings. +- Explicit instance `w` / `h` replace the inherited sizing mode on that axis; omitted dimensions retain the main component's sizing. Authored overrides survive component synchronization. Distinguish those placement constraints from the main component's default size, and verify actual bounds in narrower parents. Do not compensate for a sizing mismatch with guessed heights, clipping, or manually positioned siblings. ## Verification diff --git a/packages/docs/reference/design-authoring.md b/packages/docs/reference/design-authoring.md index ca61b2d0e..36395a9f6 100644 --- a/packages/docs/reference/design-authoring.md +++ b/packages/docs/reference/design-authoring.md @@ -37,7 +37,7 @@ This reference describes scene creation, not React DOM output. Use the `render` - Child `propertyRefs` connect fields to stable property IDs, for example `[{ propertyId: 'message', field: 'TEXT' }]`. Supported fields are `TEXT`, `VISIBLE`, and `INSTANCE_SWAP`; text and swap references require text and instance nodes respectively. References do not depend on layer names. - Instance assignments use the native string values (including `'true'` / `'false'` for BOOLEAN properties and component IDs for swaps). For example `Instance({ of: noteId, properties: { message: 'Updated review' } })`. Assignments persist through component synchronization; unknown IDs and invalid values fail rather than silently creating inert overrides. Select variants through component-set variant props, not through instance property assignments. - Reuse existing local or library components before recreating them. Keep meaningful text, visibility, and swap properties exposed rather than hand-editing cloned child nodes. -- Distinguish a main component's default size from its instance's placement constraints. Verify the actual instance bounds in narrower parents; a requested Fill dimension alone is not proof that inherited sizing changed. Do not compensate for a sizing mismatch with guessed heights, clipping, or manually positioned siblings. +- Explicit instance `w` / `h` replace the inherited sizing mode on that axis; omitted dimensions retain the main component's sizing. Authored overrides survive component synchronization. Distinguish those placement constraints from the main component's default size, and verify actual bounds in narrower parents. Do not compensate for a sizing mismatch with guessed heights, clipping, or manually positioned siblings. ## Verification diff --git a/skills/open-pencil/references/design-authoring.md b/skills/open-pencil/references/design-authoring.md index ca61b2d0e..36395a9f6 100644 --- a/skills/open-pencil/references/design-authoring.md +++ b/skills/open-pencil/references/design-authoring.md @@ -37,7 +37,7 @@ This reference describes scene creation, not React DOM output. Use the `render` - Child `propertyRefs` connect fields to stable property IDs, for example `[{ propertyId: 'message', field: 'TEXT' }]`. Supported fields are `TEXT`, `VISIBLE`, and `INSTANCE_SWAP`; text and swap references require text and instance nodes respectively. References do not depend on layer names. - Instance assignments use the native string values (including `'true'` / `'false'` for BOOLEAN properties and component IDs for swaps). For example `Instance({ of: noteId, properties: { message: 'Updated review' } })`. Assignments persist through component synchronization; unknown IDs and invalid values fail rather than silently creating inert overrides. Select variants through component-set variant props, not through instance property assignments. - Reuse existing local or library components before recreating them. Keep meaningful text, visibility, and swap properties exposed rather than hand-editing cloned child nodes. -- Distinguish a main component's default size from its instance's placement constraints. Verify the actual instance bounds in narrower parents; a requested Fill dimension alone is not proof that inherited sizing changed. Do not compensate for a sizing mismatch with guessed heights, clipping, or manually positioned siblings. +- Explicit instance `w` / `h` replace the inherited sizing mode on that axis; omitted dimensions retain the main component's sizing. Authored overrides survive component synchronization. Distinguish those placement constraints from the main component's default size, and verify actual bounds in narrower parents. Do not compensate for a sizing mismatch with guessed heights, clipping, or manually positioned siblings. ## Verification diff --git a/tests/engine/render/jsx/instance-sizing.test.ts b/tests/engine/render/jsx/instance-sizing.test.ts index 472e8f43c..336aad266 100644 --- a/tests/engine/render/jsx/instance-sizing.test.ts +++ b/tests/engine/render/jsx/instance-sizing.test.ts @@ -6,6 +6,19 @@ import { computeAllLayouts } from '@open-pencil/core/layout' import { getNodeOrThrow } from '#tests/helpers/assert' import { makeSceneGraph } from '#tests/helpers/scene' +test('overriding one instance dimension preserves the other inherited dimension', async () => { + const graph = makeSceneGraph() + const component = await renderTree(graph, Component({ flex: 'col', w: 280, h: 100 })) + const result = await renderTree(graph, Instance({ of: component.id, w: 120 })) + graph.syncInstances(component.id) + computeAllLayouts(graph) + const instance = getNodeOrThrow(graph, result.id) + expect(instance.width).toBe(120) + expect(instance.height).toBe(100) + expect(instance.counterAxisSizing).toBe('FIXED') + expect(instance.primaryAxisSizing).toBe('FIXED') +}) + for (const flex of ['row', 'col'] as const) { test(`instances fill their parent across inherited fixed ${flex} dimensions`, async () => { const graph = makeSceneGraph()