feat(svelte-ds-app): Port React core layouts

[jmuzina]

Done

Svelte port of #656 , implementing:

1. ApplicationLayout, the outermost shell of an application. Splits a navigation rail and an app's main content side-by-side.
2. ViewLayout, a "sub-shell" for the main content area of an application, rendered inside an ApplicationLayout typically. Defines a main area and optional aside
3. ContentLayout, a content grid for the meat of an application (the main area from ViewLayout). The rest of the app consumes ContentLayout's grid.

Depends on #694 for creation of the ds-app Svelte package.

QA

• Open the storybook. Ensure the docs and behavior of each of the layouts exactly match the React storybook.
• Pay special attention to responsiveness.
  • ContentLayout is responsive and lays out cards according to an intrinsic grid strategy.
  • ApplicationLayout and ViewLayout are not responsive (reduction in space does not cause navigation aside rails to collapse), following the current React layout behavior.

PR readiness check

• PR should have one of the following labels:
  • Feature 🎁, Breaking Change 💣, Bug 🐛, Documentation 📝, Maintenance 🔨.
• PR title follows the Conventional Commits format.
• The code follows the appropriate code standards
• All packages define the required scripts in package.json:
  • All packages: check, check:fix, and test.
  • Packages with build steps: build to build the package for development or distribution, build:all to build all artifacts. See CONTRIBUTING.md for details.
• If this PR introduces a new package: first-time publish has been done manually from inside the package directory using npm publish --access public (first-time publishing is not automated). Run bun run publish:status from the repo root to verify. Then configure an OIDC trusted publisher for the package on npmjs.com (repo canonical/pragma, workflow tag.yml) and set publishing access to disallow tokens, so the automated release workflow can publish future versions.
• If this PR does not require visual testing, add the no visual change label to skip Chromatic.

Screenshots

[jmuzina]

should be updated to depend on #694 and implemented in global ds-app package instead

[Copilot]

Pull request overview

Ports the core apps-tier layout grammar from the React @canonical/react-ds-app package into @canonical/svelte-ds-app, including storybook composition docs and supporting story-only helpers.

Changes:

• Adds Svelte implementations of ApplicationLayout, ViewLayout, and ContentLayout (components, styles, types, anatomy YAML, and SPEC docs).
• Adds unit + SSR tests and Storybook stories/docs (including a “Composed” grammar example) for the new layouts.
• Updates @canonical/svelte-ds-app package metadata to support Storybook-only #storybook/* imports and moves @canonical/ds-types to dependencies for exported type compatibility.

Reviewed changes

Copilot reviewed 34 out of 35 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
packages/svelte/ds-app/src/storybook/layouts/MockCard.svelte	Story-only card placeholder used in layout stories
packages/svelte/ds-app/src/storybook/layouts/LayoutSlot.svelte	Story-only slot marker placeholder for visualizing layout slots
packages/svelte/ds-app/src/storybook/layouts/LayoutFrame.svelte	Story-only frame providing a sized .surface container for fullscreen layout stories
packages/svelte/ds-app/src/storybook/layouts/Composed.stories.svelte	Story that composes ApplicationLayout → ViewLayout → ContentLayout
packages/svelte/ds-app/src/storybook/layouts/Composed.mdx	Docs page describing the composed layout grammar and embedding the story
packages/svelte/ds-app/src/lib/component/ViewLayout/ViewLayout.svelte.test.ts	Browser/unit tests for ViewLayout slot behavior, classes, and passthrough props
packages/svelte/ds-app/src/lib/component/ViewLayout/ViewLayout.svelte	ViewLayout Svelte component implementation
packages/svelte/ds-app/src/lib/component/ViewLayout/ViewLayout.stories.svelte	Storybook stories for ViewLayout
packages/svelte/ds-app/src/lib/component/ViewLayout/ViewLayout.ssr.test.ts	SSR coverage for ViewLayout
packages/svelte/ds-app/src/lib/component/ViewLayout/ViewLayout.anatomy.yaml	Anatomy DSL for ViewLayout
packages/svelte/ds-app/src/lib/component/ViewLayout/types.ts	Public props/types for ViewLayout
packages/svelte/ds-app/src/lib/component/ViewLayout/styles.css	ViewLayout grid styling (incl. :has() track collapse)
packages/svelte/ds-app/src/lib/component/ViewLayout/SPEC.md	Spec documentation for ViewLayout
packages/svelte/ds-app/src/lib/component/ViewLayout/index.ts	Public exports for ViewLayout
packages/svelte/ds-app/src/lib/component/index.ts	Re-exports new layout components from the component barrel
packages/svelte/ds-app/src/lib/component/ContentLayout/types.ts	Public props/types for ContentLayout (incl. exported grid preset type)
packages/svelte/ds-app/src/lib/component/ContentLayout/styles.css	ContentLayout supplemental styling (align-content)
packages/svelte/ds-app/src/lib/component/ContentLayout/SPEC.md	Spec documentation for ContentLayout
packages/svelte/ds-app/src/lib/component/ContentLayout/index.ts	Public exports for ContentLayout
packages/svelte/ds-app/src/lib/component/ContentLayout/ContentLayout.svelte.test.ts	Browser/unit tests for ContentLayout behavior and class composition
packages/svelte/ds-app/src/lib/component/ContentLayout/ContentLayout.svelte	ContentLayout Svelte component implementation
packages/svelte/ds-app/src/lib/component/ContentLayout/ContentLayout.stories.svelte	Storybook stories for ContentLayout
packages/svelte/ds-app/src/lib/component/ContentLayout/ContentLayout.ssr.test.ts	SSR coverage for ContentLayout
packages/svelte/ds-app/src/lib/component/ContentLayout/ContentLayout.anatomy.yaml	Anatomy DSL for ContentLayout
packages/svelte/ds-app/src/lib/component/ApplicationLayout/types.ts	Public props/types for ApplicationLayout
packages/svelte/ds-app/src/lib/component/ApplicationLayout/styles.css	ApplicationLayout grid styling (incl. :has() track collapse)
packages/svelte/ds-app/src/lib/component/ApplicationLayout/SPEC.md	Spec documentation for ApplicationLayout
packages/svelte/ds-app/src/lib/component/ApplicationLayout/index.ts	Public exports for ApplicationLayout
packages/svelte/ds-app/src/lib/component/ApplicationLayout/ApplicationLayout.svelte.test.ts	Browser/unit tests for ApplicationLayout slot behavior, classes, passthrough props
packages/svelte/ds-app/src/lib/component/ApplicationLayout/ApplicationLayout.svelte	ApplicationLayout Svelte component implementation
packages/svelte/ds-app/src/lib/component/ApplicationLayout/ApplicationLayout.stories.svelte	Storybook stories for ApplicationLayout
packages/svelte/ds-app/src/lib/component/ApplicationLayout/ApplicationLayout.ssr.test.ts	SSR coverage for ApplicationLayout
packages/svelte/ds-app/src/lib/component/ApplicationLayout/ApplicationLayout.anatomy.yaml	Anatomy DSL for ApplicationLayout
packages/svelte/ds-app/package.json	Adds #storybook/* imports map and promotes @canonical/ds-types to dependencies
bun.lock	Lockfile update reflecting dependency move

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[jmuzina]

This was moved to a non-dev dependency because ContentLayout aliases GridPreset as part of its public API.

pragma/packages/svelte/ds-app/src/lib/component/ContentLayout/types.ts

Line 14 in 6d1381d

export type ContentLayoutGrid = GridPreset;

Consumers of this package need ds-types to be available in node_modules in order for type-checks of ContentLayout calls to pass.