Allow easier sharing of common web files (#8869)

There are multiple Astro project and others that use shared files such as the Slint grammar file. This puts them into an NPM project that can be imported easily.

.github/workflows/build_docs.yaml

@@ -111,9 +111,9 @@ jobs:
                     base_path="/${{ steps.version.outputs.VERSION }}/docs/slint/"
                     slint_download_version=v${{ steps.version.outputs.VERSION }}
                 fi
-                sed -i "s|BASE_URL = \".*\"|BASE_URL = \"$base_url\"|" docs/astro/src/utils/site-config.ts
-                sed -i "s|BASE_PATH = \".*\"|BASE_PATH = \"$base_path\"|" docs/astro/src/utils/site-config.ts
-                sed -i "s|SLINT_DOWNLOAD_VERSION = \".*\"| SLINT_DOWNLOAD_VERSION = \"$slint_download_version\"|" docs/astro/src/utils/site-config.ts
+                sed -i "s|BASE_URL = \".*\"|BASE_URL = \"$base_url\"|" docs/common/src/utils/site-config.ts
+                sed -i "s|BASE_PATH = \".*\"|BASE_PATH = \"$base_path\"|" docs/common/src/utils/site-config.ts
+                sed -i "s|SLINT_DOWNLOAD_VERSION = \".*\"| SLINT_DOWNLOAD_VERSION = \"$slint_download_version\"|" docs/common/src/utils/site-config.ts
             - name: "Slint Language Documentation"
               run: cargo xtask slintdocs
             - name: Spellcheck

docs/astro/astro.config.mjs

@@ -13,7 +13,7 @@ import {
     RUST_SLINT_CRATE_URL,
     NODEJS_BASE_URL,
     PYTHON_BASE_URL,
-} from "./src/utils/site-config";
+} from "@slint/common-files/src/utils/site-config";
 
 // https://astro.build/config
 export default defineConfig({
@@ -46,9 +46,9 @@ export default defineConfig({
             customCss: ["./src/styles/custom.css", "./src/styles/theme.css"],
 
             components: {
-                Footer: "./src/components/Footer.astro",
-                Header: "./src/components/Header.astro",
-                Banner: "./src/components/Banner.astro",
+                Footer: "@slint/common-files/src/components/Footer.astro",
+                Header: "@slint/common-files/src/components/Header.astro",
+                Banner: "@slint/common-files/src/components/Banner.astro",
             },
             plugins: [
                 starlightSidebarTopics([

docs/astro/biome.json

@@ -2,7 +2,12 @@
     "root": false,
     "extends": "//",
     "files": {
-        "includes": ["**", "!**/.astro/**", "**/*.astro"]
+        "includes": [
+            "**",
+            "!**/.astro/**",
+            "**/*.astro",
+            "!**/playwright-report/**"
+        ]
     },
     "formatter": {},
     "linter": {

docs/astro/ec.config.mjs

@@ -189,7 +189,7 @@ export default {
         langs: [
             JSON.parse(
                 fs.readFileSync(
-                    "../../editors/vscode/slint.tmLanguage.json",
+                    "../common/src/utils/slint.tmLanguage.json",
                     "utf-8",
                 ),
             ),

docs/astro/package.json

@@ -29,7 +29,8 @@
     "sharp": "0.34.2",
     "starlight-links-validator": "0.17.0",
     "starlight-sidebar-topics": "0.6.0",
-    "typescript": "5.8.3"
+    "typescript": "5.8.3",
+    "@slint/common-files": "workspace:*"
   },
   "devDependencies": {
     "@playwright/test": "1.53.2",

docs/astro/playwright.config.ts

@@ -1,7 +1,7 @@
 // Copyright © SixtyFPS GmbH <info@slint.dev>
 // SPDX-License-Identifier: MIT
 import { defineConfig, devices } from "@playwright/test";
-import { BASE_PATH } from "./src/utils/site-config";
+import { BASE_PATH } from "../common/src/utils/site-config";
 
 /**
  * Read environment variables from file.

docs/astro/src/content/docs/guide/backends-and-renderers/backend_qt.mdx

@@ -3,7 +3,7 @@
 title: Qt Backend
 description: Qt Backend
 ---
-import Link from '/src/components/Link.astro';
+import Link from '@slint/common-files/src/components/Link.astro';
 // cSpell: ignore qttype qttypes
 
 

docs/astro/src/content/docs/guide/backends-and-renderers/backends_and_renderers.mdx

@@ -5,8 +5,8 @@ title: Backends & Renderers
 description: Backends & Renderers
 ---
 
-import Link from '/src/components/Link.astro';
-import LangRefLink from '/src/components/LangRefLink.astro';
+import Link from '@slint/common-files/src/components/Link.astro';
+import LangRefLink from '@slint/common-files/src/components/LangRefLink.astro';
 
 
 In Slint, a backend is the module that encapsulates the interaction with the operating system,

docs/astro/src/content/docs/guide/development/best-practices.mdx

@@ -4,7 +4,7 @@ title: Best Practices
 description: Best Practices
 ---
 
-import Link from '/src/components/Link.astro';
+import Link from '@slint/common-files/src/components/Link.astro';
 import { Aside } from '@astrojs/starlight/components';
 
 In the following sections, we provide you with lessons we've learned of the years. This will help you avoid some pitfalls, tricky situations, and improve maintainability of your UI code.

docs/astro/src/content/docs/guide/development/custom-controls.mdx

@@ -6,7 +6,7 @@ description: Custom Controls
 ---
 
 import { Tabs, TabItem } from '@astrojs/starlight/components';
-import LangRefLink from '/src/components/LangRefLink.astro';
+import LangRefLink from '@slint/common-files/src/components/LangRefLink.astro';
 
 # Custom Control Introduction
 

docs/astro/src/content/docs/guide/development/debugging_techniques.mdx

@@ -4,7 +4,7 @@ title: Debugging Techniques
 description: Debugging Techniques
 ---
 
-import Link from '/src/components/Link.astro';
+import Link from '@slint/common-files/src/components/Link.astro';
 
 On this page we share different techniques and tools we've built into Slint that help you track down different issues you may be running into, during the design and development.
 

docs/astro/src/content/docs/guide/development/translations.mdx

@@ -6,7 +6,7 @@ description: Translations
 ---
 
 import { Tabs, TabItem, FileTree } from '@astrojs/starlight/components';
-import LangRefLink from '/src/components/LangRefLink.astro';
+import LangRefLink from '@slint/common-files/src/components/LangRefLink.astro';
 
 Slint's translation infrastructure makes your application available in different languages.
 

docs/astro/src/content/docs/guide/language/coding/animation.mdx

@@ -4,8 +4,8 @@ title: Animations
 description: UI Animations.
 ---
 
-import SlintProperty  from '/src/components/SlintProperty.astro';
-import Link from '/src/components/Link.astro';
+import SlintProperty from '@slint/common-files/src/components/SlintProperty.astro';
+import Link from '@slint/common-files/src/components/Link.astro';
 
 Declare animations for properties with the `animate` keyword like this:
 

docs/astro/src/content/docs/guide/language/coding/file.mdx

@@ -5,9 +5,9 @@ title: The `.slint` File
 description:  The `.slint` File
 ---
 
-import CodeSnippetMD from '/src/components/CodeSnippetMD.astro';
-import Link from '/src/components/Link.astro';
-import LangRefLink from '/src/components/LangRefLink.astro';
+import CodeSnippetMD from '@slint/common-files/src/components/CodeSnippetMD.astro';
+import Link from '@slint/common-files/src/components/Link.astro';
+import LangRefLink from '@slint/common-files/src/components/LangRefLink.astro';
 
 
 You write user interfaces in the Slint language and saved in files with the `.slint` extension.

docs/astro/src/content/docs/guide/language/coding/functions-and-callbacks.mdx

@@ -4,7 +4,7 @@ title: Functions
 description: Functions
 ---
 
-import Link from '/src/components/Link.astro';
+import Link from '@slint/common-files/src/components/Link.astro';
 
 Similar to other programming languages, functions in Slint are way to name, organize and reuse
 a piece of logic/code.

docs/astro/src/content/docs/guide/language/coding/globals.mdx

@@ -3,7 +3,7 @@
 title: Globals
 description: Globals
 ---
-import Link from '/src/components/Link.astro';
+import Link from '@slint/common-files/src/components/Link.astro';
 import { Tabs, TabItem } from '@astrojs/starlight/components';
 
 Declare a global singleton with `global Name { /* .. properties or callbacks .. */ }` to

docs/astro/src/content/docs/guide/language/coding/positioning-and-layouts.mdx

@@ -4,7 +4,7 @@ title: Positioning and Layouts
 description: Positioning and Layouting of Elements in Container Components
 ---
 
-import CodeSnippetMD from '/src/components/CodeSnippetMD.astro';
+import CodeSnippetMD from '@slint/common-files/src/components/CodeSnippetMD.astro';
 
 All visual elements are shown in a window. The `x` and `y` properties store
 the elements coordinates relative to their parent element. Slint determines the

docs/astro/src/content/docs/guide/language/coding/properties.mdx

@@ -4,7 +4,7 @@ title: Properties
 description: Properties
 ---
 
-import Link from '/src/components/Link.astro';
+import Link from '@slint/common-files/src/components/Link.astro';
 
 All elements have properties. Built-in elements come with common properties such
 as color or dimensional properties. You can assign values or entire

docs/astro/src/content/docs/guide/language/concepts/slint-language.mdx

@@ -5,8 +5,8 @@ title: Slint Language
 description: Slint Language
 ---
 
-import Link from '/src/components/Link.astro';
-import CodeSnippetMD from '/src/components/CodeSnippetMD.astro';
+import Link from '@slint/common-files/src/components/Link.astro';
+import CodeSnippetMD from '@slint/common-files/src/components/CodeSnippetMD.astro';
 import { YouTube } from 'astro-embed';
 
 This following section gives you an insight into the thinking behind the language and the core concepts it's made up from.

docs/astro/src/content/docs/guide/platforms/android.mdx

@@ -4,7 +4,7 @@ title: Android
 description: Android Platform Guide
 ---
 
-import LangRefLink from '/src/components/LangRefLink.astro';
+import LangRefLink from '@slint/common-files/src/components/LangRefLink.astro';
 
 Slint on Android is only supported for the Rust programming language.
 See the documentation of the <LangRefLink lang="rust-slint" relpath="android/">android module in our Rust API documentation</LangRefLink>.

docs/astro/src/content/docs/guide/platforms/embedded.mdx

@@ -6,7 +6,7 @@ description: Embedded Platforms on which Slint has been tested
 ---
 
 import { Tabs, TabItem } from '@astrojs/starlight/components';
-import ReleaseLink from '/src/components/ReleaseLink.astro';
+import ReleaseLink from '@slint/common-files/src/components/ReleaseLink.astro';
 
 Slint runs on many embedded platforms.
 

docs/astro/src/content/docs/guide/platforms/ios.mdx

@@ -5,7 +5,7 @@ description: iOS Platform Guide
 ---
 
 import { Code } from '@astrojs/starlight/components';
-import Link from '/src/components/Link.astro';
+import Link from '@slint/common-files/src/components/Link.astro';
 import { Image } from 'astro:assets';
 
 :::note[Note]

docs/astro/src/content/docs/guide/platforms/web.mdx

@@ -4,7 +4,7 @@ title: Web
 description: Running Slint on the Web with Wasm
 ---
 
-import Link from '/src/components/Link.astro';
+import Link from '@slint/common-files/src/components/Link.astro';
 
 :::caution[Caution]
 Only Rust supports using Slint with WebAssembly.

docs/astro/src/content/docs/guide/tooling/figma-inspector.mdx

@@ -5,7 +5,7 @@ description: Exporting Figma Variables to Slint Design Tokens
 ---
 
 import { Tabs, TabItem } from '@astrojs/starlight/components';
-import LangRefLink from '/src/components/LangRefLink.astro';
+import LangRefLink from '@slint/common-files/src/components/LangRefLink.astro';
 
 ## Introduction
 The "Figma to Slint" plugin bridges the gap between Figma designs and Slint user interfaces. It provides two primary functionalities:

docs/astro/src/content/docs/index.mdx

@@ -14,7 +14,7 @@ import { YouTube } from 'astro-embed';
 import { Image } from 'astro:assets';
 import mattermostLogoLight from '/src/assets/mattermost-logo-dark.svg';
 import mattermostLogoDark from '/src/assets/mattermost-logo-light.svg';
-import FourCardGrid from '/src/components/FourCardGrid.astro';
+import FourCardGrid from '@slint/common-files/src/components/FourCardGrid.astro';
 import BannerImage from '/src/assets/banner.webp';
 import LanguageHint from '/src/assets/getting-started/language-hint.webp';
 import RunInSlintPad from '/src/assets/getting-started/run-in-slintpad.webp';

docs/astro/src/content/docs/language-integrations/index.mdx

@@ -5,8 +5,8 @@ description: Connect the UI with business logic in your preferred language.
 ---
 
 import { Card, CardGrid, LinkButton } from "@astrojs/starlight/components";
-import IconLinkCard from "/src/components/IconLinkCard.astro";
-import { CPP_BASE_URL, RUST_SLINT_CRATE_URL, NODEJS_BASE_URL, PYTHON_BASE_URL } from "../../../utils/site-config";
+import IconLinkCard from '@slint/common-files/src/components/IconLinkCard.astro';
+import { CPP_BASE_URL, RUST_SLINT_CRATE_URL, NODEJS_BASE_URL, PYTHON_BASE_URL } from "@slint/common-files/src/utils/site-config";
 
 Slint provides first class integrations to various programming languages allowing you to implement the business logic of your Slint application in your preferred language.
 

docs/astro/src/content/docs/reference/colors-and-brushes.mdx

@@ -4,7 +4,7 @@ title: Colors & Brushes
 description: Colors Namespaces
 ---
 
-import Link from '/src/components/Link.astro';
+import Link from '@slint/common-files/src/components/Link.astro';
 
 Color literals follow the syntax of CSS:
 

docs/astro/src/content/docs/reference/common.mdx

@@ -4,9 +4,9 @@ title: Common Properties & Callbacks
 description: Common Properties & Callbacks
 ---
 
-import SlintProperty  from '/src/components/SlintProperty.astro';
-import CodeSnippetMD from '/src/components/CodeSnippetMD.astro';
-import Link from '/src/components/Link.astro';
+import SlintProperty from '@slint/common-files/src/components/SlintProperty.astro';
+import CodeSnippetMD from '@slint/common-files/src/components/CodeSnippetMD.astro';
+import Link from '@slint/common-files/src/components/Link.astro';
 
 The Slint elements have many common properties, callbacks and behavior.
 This page describes these properties and their usage.

docs/astro/src/content/docs/reference/elements/image.mdx

@@ -4,9 +4,9 @@ title: Image
 description: Image element api.
 ---
 
-import SlintProperty  from '/src/components/SlintProperty.astro';
-import CodeSnippetMD from '/src/components/CodeSnippetMD.astro';
-import Link from '/src/components/Link.astro';
+import SlintProperty from '@slint/common-files/src/components/SlintProperty.astro';
+import CodeSnippetMD from '@slint/common-files/src/components/CodeSnippetMD.astro';
+import Link from '@slint/common-files/src/components/Link.astro';
 
 <CodeSnippetMD imagePath="/src/assets/generated/image-example.png"  imageWidth="300" imageHeight="200"  imageAlt='image example'>
 ```slint

docs/astro/src/content/docs/reference/elements/path.mdx

@@ -3,7 +3,7 @@
 title: Path
 description: Path element api.
 ---
-import SlintProperty  from '/src/components/SlintProperty.astro';
+import SlintProperty from '@slint/common-files/src/components/SlintProperty.astro';
 
 The `Path` element allows rendering a generic shape, composed of different geometric commands. A path
 shape can be filled and outlined.

docs/astro/src/content/docs/reference/elements/rectangle.mdx

@@ -3,8 +3,8 @@
 title: Rectangle
 description: Rectangle element api.
 ---
-import SlintProperty  from '/src/components/SlintProperty.astro';
-import CodeSnippetMD from '/src/components/CodeSnippetMD.astro';
+import SlintProperty from '@slint/common-files/src/components/SlintProperty.astro';
+import CodeSnippetMD from '@slint/common-files/src/components/CodeSnippetMD.astro';
 
 By default, a `Rectangle` is just an empty item that shows nothing. By setting a color or configuring a border,
 it's then possible to draw a rectangle on the screen.

docs/astro/src/content/docs/reference/elements/text.mdx

@@ -4,9 +4,9 @@ title: Text
 description: Text element api.
 ---
 
-import SlintProperty  from '/src/components/SlintProperty.astro';
-import CodeSnippetMD from '/src/components/CodeSnippetMD.astro';
-import Link from '/src/components/Link.astro';
+import SlintProperty from '@slint/common-files/src/components/SlintProperty.astro';
+import CodeSnippetMD from '@slint/common-files/src/components/CodeSnippetMD.astro';
+import Link from '@slint/common-files/src/components/Link.astro';
 
 
 ```slint playground

docs/astro/src/content/docs/reference/gestures/flickable.mdx

@@ -3,9 +3,9 @@
 title: Flickable
 description: Flickable element api.
 ---
-import SlintProperty  from '/src/components/SlintProperty.astro';
-import CodeSnippetMD from '/src/components/CodeSnippetMD.astro';
-import Link from '/src/components/Link.astro';
+import SlintProperty from '@slint/common-files/src/components/SlintProperty.astro';
+import CodeSnippetMD from '@slint/common-files/src/components/CodeSnippetMD.astro';
+import Link from '@slint/common-files/src/components/Link.astro';
 
 ```slint playground
 export component Example inherits Window {

docs/astro/src/content/docs/reference/gestures/swipegesturehandler.mdx

@@ -3,7 +3,7 @@
 title: SwipeGestureHandler
 description: SwipeGestureHandler element api.
 ---
-import SlintProperty  from '/src/components/SlintProperty.astro';
+import SlintProperty  from '@slint/common-files/src/components/SlintProperty.astro';
 
 
 Use the `SwipeGestureHandler` to handle swipe gesture in some particular direction.

docs/astro/src/content/docs/reference/gestures/toucharea.mdx

@@ -3,11 +3,11 @@
 title: TouchArea
 description: TouchArea element api.
 ---
-import SlintProperty  from '/src/components/SlintProperty.astro';
+import SlintProperty from '@slint/common-files/src/components/SlintProperty.astro';
 import PointerEvent from '/src/content/collections/structs/PointerEvent.md';
 import PointerScrollEvent from '/src/content/collections/structs/PointerScrollEvent.md';
 import EventResult from '/src/content/collections/enums/EventResult.md';
-import CodeSnippetMD from '/src/components/CodeSnippetMD.astro';
+import CodeSnippetMD from '@slint/common-files/src/components/CodeSnippetMD.astro';
 
 Use `TouchArea` to control what happens when the region it covers is touched or interacted with
 using the mouse.

docs/astro/src/content/docs/reference/global-functions/math.mdx

@@ -4,7 +4,7 @@ title: Math
 description: Math Namespace
 ---
 
-import Link from '/src/components/Link.astro';
+import Link from '@slint/common-files/src/components/Link.astro';
 
 The **Math** namespace contains functions that are available both in the global scope and in the `Math` namespace.
 

docs/astro/src/content/docs/reference/global-namespaces/platform.mdx

@@ -4,8 +4,8 @@ title: Platform
 description: Platform Namespace
 ---
 
-import SlintProperty  from '/src/components/SlintProperty.astro';
-import Link from '/src/components/Link.astro';
+import SlintProperty from '@slint/common-files/src/components/SlintProperty.astro';
+import Link from '@slint/common-files/src/components/Link.astro';
 
 The **Platform** namespace contains properties that help deal with platform specific differences.
 

docs/astro/src/content/docs/reference/keyboard-input/focusscope.mdx

@@ -3,8 +3,8 @@
 title: FocusScope
 description: FocusScope element api.
 ---
-import SlintProperty  from '/src/components/SlintProperty.astro';
-import Link from '/src/components/Link.astro';
+import SlintProperty from '@slint/common-files/src/components/SlintProperty.astro';
+import Link from '@slint/common-files/src/components/Link.astro';
 
 ```slint playground
 export component Example inherits Window {

docs/astro/src/content/docs/reference/keyboard-input/overview.mdx

@@ -5,7 +5,7 @@ title: Key Handling Overview
 description: Key Handling Overview
 ---
 
-import Link from '/src/components/Link.astro';
+import Link from '@slint/common-files/src/components/Link.astro';
 
 To handle keyboard input in Slint, use the `FocusScope` or individual `key-pressed` and `key-released` callbacks in various elements. Keyboard
 input is delivered via [`KeyEvent`](#keyevent) data structures. The primary field of this data structure is the `text` property, which holds all affected keys

docs/astro/src/content/docs/reference/keyboard-input/textinput.mdx

@@ -3,8 +3,8 @@
 title: TextInput
 description: TextInput element api.
 ---
-import SlintProperty  from '/src/components/SlintProperty.astro';
-import Link from '/src/components/Link.astro';
+import SlintProperty from '@slint/common-files/src/components/SlintProperty.astro';
+import Link from '@slint/common-files/src/components/Link.astro';
 
 The `TextInput` is a lower-level item that shows text and allows entering text.
 You should probably not use this directly, but instead use the <Link type="LineEdit" /> or <Link type="TextEdit" /> component.

docs/astro/src/content/docs/reference/keyboard-input/textinputinterface.mdx

@@ -3,8 +3,8 @@
 title: TextInputInterface
 description: TextInputInterface
 ---
-import SlintProperty  from '/src/components/SlintProperty.astro';
-import Link from '/src/components/Link.astro';
+import SlintProperty from '@slint/common-files/src/components/SlintProperty.astro';
+import Link from '@slint/common-files/src/components/Link.astro';
 
 ```slint
 import { LineEdit } from "std-widgets.slint";

docs/astro/src/content/docs/reference/layouts/gridlayout.mdx

@@ -3,8 +3,8 @@
 title: GridLayout
 description: GridLayout element api.
 ---
-import SlintProperty  from '/src/components/SlintProperty.astro';
-import CodeSnippetMD from '/src/components/CodeSnippetMD.astro';
+import SlintProperty from '@slint/common-files/src/components/SlintProperty.astro';
+import CodeSnippetMD from '@slint/common-files/src/components/CodeSnippetMD.astro';
 
 `GridLayout` places elements on a grid.
 

docs/astro/src/content/docs/reference/layouts/horizontallayout.mdx

@@ -3,7 +3,7 @@
 title: HorizontalLayout
 description: HorizontalLayout element api.
 ---
-import SlintProperty  from '/src/components/SlintProperty.astro';
+import SlintProperty from '@slint/common-files/src/components/SlintProperty.astro';
 
 ```slint
 export component Foo inherits Window {

docs/astro/src/content/docs/reference/layouts/overview.mdx

@@ -4,8 +4,8 @@ title: Common Properties
 description: Layout Common Properties
 ---
 
-import Link from '/src/components/Link.astro';
-import SlintProperty from '/src/components/SlintProperty.astro';
+import Link from '@slint/common-files/src/components/Link.astro';
+import SlintProperty from '@slint/common-files/src/components/SlintProperty.astro';
 
 
 ## Properties

docs/astro/src/content/docs/reference/layouts/verticallayout.mdx

@@ -3,7 +3,7 @@
 title: VerticalLayout
 description: VerticalLayout element api.
 ---
-import SlintProperty  from '/src/components/SlintProperty.astro';
+import SlintProperty from '@slint/common-files/src/components/SlintProperty.astro';
 
 ```slint
 export component Foo inherits Window {

docs/astro/src/content/docs/reference/primitive-types.mdx

@@ -5,10 +5,10 @@ description: All Slint types
 // cSpell: ignore Farbfeld
 ---
 
-import SlintProperty  from '/src/components/SlintProperty.astro';
-import Link from '/src/components/Link.astro';
+import SlintProperty from '@slint/common-files/src/components/SlintProperty.astro';
+import Link from '@slint/common-files/src/components/Link.astro';
 import { Tabs, TabItem } from '@astrojs/starlight/components';
-import LangRefLink from '/src/components/LangRefLink.astro';
+import LangRefLink from '@slint/common-files/src/components/LangRefLink.astro';
 
 Slint is a statically typed language and offers a rich range of primitive types.
 

docs/astro/src/content/docs/reference/std-widgets/basic-widgets/button.mdx

@@ -3,8 +3,8 @@
 title: Button
 description: Button api.
 ---
-import SlintProperty  from '/src/components/SlintProperty.astro';
-import Link from '/src/components/Link.astro';
+import SlintProperty from '@slint/common-files/src/components/SlintProperty.astro';
+import Link from '@slint/common-files/src/components/Link.astro';
 
 ```slint playground
 import { Button, VerticalBox } from "std-widgets.slint";

docs/astro/src/content/docs/reference/std-widgets/basic-widgets/checkbox.mdx

@@ -4,8 +4,8 @@ title: CheckBox
 description: CheckBox api.
 ---
 
-import CodeSnippetMD from '/src/components/CodeSnippetMD.astro';
-import SlintProperty  from '/src/components/SlintProperty.astro';
+import CodeSnippetMD from '@slint/common-files/src/components/CodeSnippetMD.astro';
+import SlintProperty from '@slint/common-files/src/components/SlintProperty.astro';
 
 <CodeSnippetMD needsBackground imagePath="/src/assets/generated/std-widgets-checkbox-example.png" scale="3" imageWidth="100" imageHeight="50"  imageAlt='checkbox example'>
 ```slint

docs/astro/src/content/docs/reference/std-widgets/basic-widgets/combobox.mdx

@@ -4,8 +4,8 @@ title: ComboBox
 description: ComboBox api.
 ---
 
-import SlintProperty  from '/src/components/SlintProperty.astro';
-import CodeSnippetMD from '/src/components/CodeSnippetMD.astro';
+import SlintProperty from '@slint/common-files/src/components/SlintProperty.astro';
+import CodeSnippetMD from '@slint/common-files/src/components/CodeSnippetMD.astro';
 
 <CodeSnippetMD imagePath="/src/assets/generated/std-widget-combobox-example.png" scale="3" imageWidth="110" imageHeight="35"  imageAlt='combobox example'>
 ```slint

docs/astro/src/content/docs/reference/std-widgets/basic-widgets/progressindicator.mdx

@@ -4,8 +4,8 @@ title: ProgressIndicator
 description: ProgressIndicator api.
 ---
 
-import SlintProperty  from '/src/components/SlintProperty.astro';
-import CodeSnippetMD from '/src/components/CodeSnippetMD.astro';
+import SlintProperty from '@slint/common-files/src/components/SlintProperty.astro';
+import CodeSnippetMD from '@slint/common-files/src/components/CodeSnippetMD.astro';
 
 <CodeSnippetMD  imagePath="/src/assets/generated/std-widgets-progressindicator.png"  imageWidth="200" imageHeight="200"  imageAlt='progressindicator example'>
 ```slint playground

docs/astro/src/content/docs/reference/std-widgets/basic-widgets/slider.mdx

@@ -4,8 +4,8 @@ title: Slider
 description: Slider api.
 ---
 
-import SlintProperty  from '/src/components/SlintProperty.astro';
-import CodeSnippetMD from '/src/components/CodeSnippetMD.astro';
+import SlintProperty from '@slint/common-files/src/components/SlintProperty.astro';
+import CodeSnippetMD from '@slint/common-files/src/components/CodeSnippetMD.astro';
 
 <CodeSnippetMD imagePath="/src/assets/generated/slider-example.png"  imageWidth="200" imageHeight="200"  imageAlt='slider example'>
 ```slint

docs/astro/src/content/docs/reference/std-widgets/basic-widgets/spinbox.mdx

@@ -4,8 +4,8 @@ title: SpinBox
 description: SpinBox api.
 ---
 
-import SlintProperty  from '/src/components/SlintProperty.astro';
-import CodeSnippetMD from '/src/components/CodeSnippetMD.astro';
+import SlintProperty from '@slint/common-files/src/components/SlintProperty.astro';
+import CodeSnippetMD from '@slint/common-files/src/components/CodeSnippetMD.astro';
 
 <CodeSnippetMD imagePath="/src/assets/generated/spinbox-example.png"  imageWidth="200" imageHeight="200"  imageAlt='spinbox example'>
 ```slint playground

docs/astro/src/content/docs/reference/std-widgets/basic-widgets/spinner.mdx

@@ -4,9 +4,9 @@ title: Spinner
 description: Spinner api.
 ---
 
-import SlintProperty  from '/src/components/SlintProperty.astro';
-import CodeSnippetMD from '/src/components/CodeSnippetMD.astro';
-import Link from '/src/components/Link.astro';
+import SlintProperty from '@slint/common-files/src/components/SlintProperty.astro';
+import CodeSnippetMD from '@slint/common-files/src/components/CodeSnippetMD.astro';
+import Link from '@slint/common-files/src/components/Link.astro';
 
 <CodeSnippetMD imagePath="/src/assets/generated/std-widgets-spinner.png"  imageWidth="200" imageHeight="200"  imageAlt='std-widgets spinner example'>
 

docs/astro/src/content/docs/reference/std-widgets/basic-widgets/standardbutton.mdx

@@ -4,8 +4,8 @@ title: StandardButton
 description: StandardButton api.
 ---
 
-import SlintProperty  from '/src/components/SlintProperty.astro';
-import CodeSnippetMD from '/src/components/CodeSnippetMD.astro';
+import SlintProperty from '@slint/common-files/src/components/SlintProperty.astro';
+import CodeSnippetMD from '@slint/common-files/src/components/CodeSnippetMD.astro';
 
 <CodeSnippetMD imagePath="/src/assets/generated/std-widgets-standardbutton.png"  imageWidth="200" imageHeight="200"  imageAlt='std-widgets standardbutton example'>
 ```slint playground

docs/astro/src/content/docs/reference/std-widgets/basic-widgets/switch.mdx

@@ -4,8 +4,8 @@ title: Switch
 description: Switch api.
 ---
 
-import SlintProperty  from '/src/components/SlintProperty.astro';
-import CodeSnippetMD from '/src/components/CodeSnippetMD.astro';
+import SlintProperty from '@slint/common-files/src/components/SlintProperty.astro';
+import CodeSnippetMD from '@slint/common-files/src/components/CodeSnippetMD.astro';
 
 <CodeSnippetMD imagePath="/src/assets/generated/std-widgets-switch.png"  imageWidth="200" imageHeight="200"  imageAlt='std-widgets switch example'>
 ```slint

docs/astro/src/content/docs/reference/std-widgets/layouts/gridbox.mdx

@@ -4,7 +4,6 @@ title: GridBox
 description: GridBox api.
 ---
 
-import Link from '/src/components/Link.astro';
+import Link from '@slint/common-files/src/components/Link.astro';
 
-A `GridBox` is a <Link type="GridLayout" /> where instead of having values that default to `0`, the spacing and padding values instead
-depend on the style.
+A `GridBox`

docs/astro/src/content/docs/reference/std-widgets/layouts/groupbox.mdx

@@ -4,8 +4,8 @@ title: GroupBox
 description: GroupBox api.
 ---
 
-import SlintProperty  from '/src/components/SlintProperty.astro';
-import CodeSnippetMD from '/src/components/CodeSnippetMD.astro';
+import SlintProperty from '@slint/common-files/src/components/SlintProperty.astro';
+import CodeSnippetMD from '@slint/common-files/src/components/CodeSnippetMD.astro';
 
 <CodeSnippetMD imagePath="/src/assets/generated/std-widgets-groupbox-example.png"  imageWidth="200" imageHeight="200"  imageAlt='groupbox example'>
 ```slint

docs/astro/src/content/docs/reference/std-widgets/layouts/horizontalbox.mdx

@@ -4,9 +4,6 @@ title: HorizontalBox
 description: HorizontalBox api.
 ---
 
-import Link from '/src/components/Link.astro';
+import Link from '@slint/common-files/src/components/Link.astro';
 
-A `HorizontalBox` is a <Link type="HorizontalLayout" /> where the spacing and padding
-values depend on the style instead of defaulting to 0.
-
-See also <Link type="VerticalBox"/>.
+A `HorizontalBox`

docs/astro/src/content/docs/reference/std-widgets/layouts/verticalbox.mdx

@@ -4,9 +4,6 @@ title: VerticalBox
 description: VerticalBox api.
 ---
 
-import Link from '/src/components/Link.astro';
+import Link from '@slint/common-files/src/components/Link.astro';
 
-A `VerticalBox` is a <Link type="VerticalLayout"/> where the spacing and padding
-values depend on the style instead of defaulting to 0.
-
-See also <Link type="HorizontalBox"/>.
+A `VerticalBox`

docs/astro/src/content/docs/reference/std-widgets/misc/aboutslint.mdx

@@ -4,7 +4,7 @@ title: AboutSlint
 description: AboutSlint api.
 ---
 
-import CodeSnippetMD from "/src/components/CodeSnippetMD.astro";
+import CodeSnippetMD from "@slint/common-files/src/components/CodeSnippetMD.astro";
 
 <CodeSnippetMD imagePath="/src/assets/generated/std-widgets-about-slint.png" scale="3" imageWidth="200" imageHeight="200" imageAlt='About Slint component'>
 ```slint playground

docs/astro/src/content/docs/reference/std-widgets/misc/datepicker.mdx

@@ -4,8 +4,8 @@ title: DatePickerPopup
 description: DatePickerPopup api.
 ---
 
-import SlintProperty  from '/src/components/SlintProperty.astro';
-import CodeSnippetMD from '/src/components/CodeSnippetMD.astro';
+import SlintProperty from '@slint/common-files/src/components/SlintProperty.astro';
+import CodeSnippetMD from '@slint/common-files/src/components/CodeSnippetMD.astro';
 
 Use a date picker to let the user select a date.
 

docs/astro/src/content/docs/reference/std-widgets/misc/timepicker.mdx

@@ -4,8 +4,8 @@ title: TimePickerPopup
 description: TimePickerPopup api.
 ---
 
-import SlintProperty  from '/src/components/SlintProperty.astro';
-import CodeSnippetMD from '/src/components/CodeSnippetMD.astro';
+import SlintProperty from '@slint/common-files/src/components/SlintProperty.astro';
+import CodeSnippetMD from '@slint/common-files/src/components/CodeSnippetMD.astro';
 
 Use the timer picker to select the time, in either 24-hour or 12-hour mode (AM/PM).
 

docs/astro/src/content/docs/reference/std-widgets/overview.mdx

@@ -4,9 +4,9 @@ title: Overview
 description: Widgets Overview.
 ---
 
-import CodeSnippetMD from '/src/components/CodeSnippetMD.astro';
-import SlintProperty  from '/src/components/SlintProperty.astro';
-import Link from '/src/components/Link.astro';
+import CodeSnippetMD from '@slint/common-files/src/components/CodeSnippetMD.astro';
+import SlintProperty from '@slint/common-files/src/components/SlintProperty.astro';
+import Link from '@slint/common-files/src/components/Link.astro';
 
 ```slint playground
 import { Palette, HorizontalBox } from "std-widgets.slint";

docs/astro/src/content/docs/reference/std-widgets/views/lineedit.mdx

@@ -4,9 +4,9 @@ title: LineEdit
 description: LineEdit api.
 ---
 
-import SlintProperty  from '/src/components/SlintProperty.astro';
-import CodeSnippetMD from '/src/components/CodeSnippetMD.astro';
-import Link from '/src/components/Link.astro';
+import SlintProperty from '@slint/common-files/src/components/SlintProperty.astro';
+import CodeSnippetMD from '@slint/common-files/src/components/CodeSnippetMD.astro';
+import Link from '@slint/common-files/src/components/Link.astro';
 
 <CodeSnippetMD imagePath="/src/assets/generated/std-widgets-lineedit-example.png"  imageWidth="200" imageHeight="200"  imageAlt='lineedit example'>
 ```slint playground

docs/astro/src/content/docs/reference/std-widgets/views/listview.mdx

@@ -4,8 +4,8 @@ title: ListView
 description: ListView api.
 ---
 
-import CodeSnippetMD from '/src/components/CodeSnippetMD.astro';
-import Link from '/src/components/Link.astro';
+import CodeSnippetMD from '@slint/common-files/src/components/CodeSnippetMD.astro';
+import Link from '@slint/common-files/src/components/Link.astro';
 
 A ListView is like a Scrollview but it should have a `for` element, and the content are
 automatically laid out in a list.

docs/astro/src/content/docs/reference/std-widgets/views/scrollview.mdx

@@ -4,8 +4,8 @@ title: ScrollView
 description: ScrollView api.
 ---
 
-import SlintProperty  from '/src/components/SlintProperty.astro';
-import CodeSnippetMD from '/src/components/CodeSnippetMD.astro';
+import SlintProperty from '@slint/common-files/src/components/SlintProperty.astro';
+import CodeSnippetMD from '@slint/common-files/src/components/CodeSnippetMD.astro';
 
 <CodeSnippetMD imagePath="/src/assets/generated/std-widgets-scrollview.png"  imageWidth="200" imageHeight="200"  imageAlt='scrollview example'>
 ```slint playground

docs/astro/src/content/docs/reference/std-widgets/views/standardlistview.mdx

@@ -4,9 +4,9 @@ title: StandardListView
 description: StandardListView api.
 ---
 
-import SlintProperty  from '/src/components/SlintProperty.astro';
-import CodeSnippetMD from '/src/components/CodeSnippetMD.astro';
-import Link from '/src/components/Link.astro';
+import SlintProperty from '@slint/common-files/src/components/SlintProperty.astro';
+import CodeSnippetMD from '@slint/common-files/src/components/CodeSnippetMD.astro';
+import Link from '@slint/common-files/src/components/Link.astro';
 
 <CodeSnippetMD imagePath="/src/assets/generated/std-widgets-standardlistview.png"  imageWidth="200" imageHeight="200"  imageAlt='std-widgets standardlistview example'>
 ```slint

docs/astro/src/content/docs/reference/std-widgets/views/standardtableview.mdx

@@ -4,9 +4,9 @@ title: StandardTableView
 description: StandardTableView api
 ---
 
-import SlintProperty  from '/src/components/SlintProperty.astro';
-import CodeSnippetMD from '/src/components/CodeSnippetMD.astro';
-import Link from '/src/components/Link.astro';
+import SlintProperty from '@slint/common-files/src/components/SlintProperty.astro';
+import CodeSnippetMD from '@slint/common-files/src/components/CodeSnippetMD.astro';
+import Link from '@slint/common-files/src/components/Link.astro';
 
 The `StandardTableView` represents a table of data with columns and rows. Cells
 are organized in a model where each row is a model of

docs/astro/src/content/docs/reference/std-widgets/views/tabwidget.mdx

@@ -4,8 +4,8 @@ title: TabWidget
 description: TabWidget api.
 ---
 
-import SlintProperty  from '/src/components/SlintProperty.astro';
-import CodeSnippetMD from '/src/components/CodeSnippetMD.astro';
+import SlintProperty from '@slint/common-files/src/components/SlintProperty.astro';
+import CodeSnippetMD from '@slint/common-files/src/components/CodeSnippetMD.astro';
 
 <CodeSnippetMD imagePath="/src/assets/generated/std-widgets-tabwidget.png"  imageWidth="200" imageHeight="200"  imageAlt='std-widgets tabwidget example'>
 ```slint

docs/astro/src/content/docs/reference/std-widgets/views/textedit.mdx

@@ -5,9 +5,9 @@ title: TextEdit
 description: TextEdit api.
 ---
 
-import SlintProperty  from '/src/components/SlintProperty.astro';
-import CodeSnippetMD from '/src/components/CodeSnippetMD.astro';
-import Link from '/src/components/Link.astro';
+import SlintProperty from '@slint/common-files/src/components/SlintProperty.astro';
+import CodeSnippetMD from '@slint/common-files/src/components/CodeSnippetMD.astro';
+import Link from '@slint/common-files/src/components/Link.astro';
 
 <CodeSnippetMD imagePath="/src/assets/generated/std-widgets-textedit.png"  imageWidth="200" imageHeight="200"  imageAlt='std-widgets textedit example'>
 ```slint playground

docs/astro/src/content/docs/reference/timer.mdx

@@ -3,7 +3,7 @@
 title: Timer
 description: Timer element api.
 ---
-import SlintProperty  from '/src/components/SlintProperty.astro';
+import SlintProperty from '@slint/common-files/src/components/SlintProperty.astro';
 
 :::note[Note]
 Timer is not an actual element visible in the tree, therefore it doesn't have the common properties such as `x`, `y`, `width`, `height`, etc. It also doesn't take room in a layout and cannot have any children or be inherited from.

docs/astro/src/content/docs/reference/window/contextmenuarea.mdx

@@ -3,8 +3,8 @@
 title: ContextMenuArea
 description: ContextMenuArea element api.
 ---
-import SlintProperty from '/src/components/SlintProperty.astro';
-import Link from '/src/components/Link.astro';
+import SlintProperty from '@slint/common-files/src/components/SlintProperty.astro';
+import Link from '@slint/common-files/src/components/Link.astro';
 
 Use the non-visual `ContextMenuArea` element to declare an area where the user can show a context menu.
 

docs/astro/src/content/docs/reference/window/dialog.mdx

@@ -3,8 +3,8 @@
 title: Dialog
 description: Dialog element api.
 ---
-import SlintProperty  from '/src/components/SlintProperty.astro';
-import CodeSnippetMD from '/src/components/CodeSnippetMD.astro';
+import SlintProperty from '@slint/common-files/src/components/SlintProperty.astro';
+import CodeSnippetMD from '@slint/common-files/src/components/CodeSnippetMD.astro';
 
 <CodeSnippetMD imagePath="/src/assets/generated/dialog-example.png"  imageWidth="200" imageHeight="100"  imageAlt='dialog example'>
 

docs/astro/src/content/docs/reference/window/menubar.mdx

@@ -3,8 +3,8 @@
 title: MenuBar
 description: MenuBar element api.
 ---
-import SlintProperty from '/src/components/SlintProperty.astro';
-import Link from '/src/components/Link.astro';
+import SlintProperty from '@slint/common-files/src/components/SlintProperty.astro';
+import Link from '@slint/common-files/src/components/Link.astro';
 
 Use the `MenuBar` element in a <Link type="Window" /> to declare the structure of a menu bar, including the actual
 menus and sub-menus.

docs/astro/src/content/docs/reference/window/popupwindow.mdx

@@ -3,7 +3,7 @@
 title: PopupWindow
 description: PopupWindow element api.
 ---
-import SlintProperty  from '/src/components/SlintProperty.astro';
+import SlintProperty from '@slint/common-files/src/components/SlintProperty.astro';
 
 
 ```slint playground

docs/astro/src/content/docs/reference/window/window.mdx

@@ -3,8 +3,8 @@
 title: Window
 description: Window element api.
 ---
-import SlintProperty  from '/src/components/SlintProperty.astro';
-import Link from '/src/components/Link.astro';
+import SlintProperty  from '@slint/common-files/src/components/SlintProperty.astro';
+import Link from '@slint/common-files/src/components/Link.astro';
 
 `Window` is the root of the tree of elements that are visible on the screen.
 

docs/astro/src/content/docs/tutorial/creating_the_tiles.mdx

@@ -5,9 +5,9 @@ description: Creating the tiles
 ---
 
 import { Code } from '@astrojs/starlight/components';
-import { extractLines } from '/src/utils/utils.ts';
+import { extractLines } from '@slint/common-files/src/utils/utils';
 import { Tabs, TabItem } from '@astrojs/starlight/components';
-import LangRefLink from '/src/components/LangRefLink.astro';
+import LangRefLink from '@slint/common-files/src/components/LangRefLink.astro';
 
 This step places the game tiles randomly.
 

docs/astro/src/content/docs/tutorial/from_one_to_multiple_tiles.mdx

@@ -5,7 +5,7 @@ description: From One To Multiple Tiles
 ---
 
 import { Code } from '@astrojs/starlight/components';
-import { extractLines } from '/src/utils/utils.ts';
+import { extractLines } from '@slint/common-files/src/utils/utils';
 
 After modeling a single tile, this step creates a grid of them. For the grid to be a game board, you need two features:
 

docs/astro/src/content/docs/tutorial/game_logic.mdx

@@ -5,9 +5,9 @@ description: Game Logic
 ---
 
 import { Tabs, TabItem } from '@astrojs/starlight/components';
-import { extractLines } from '/src/utils/utils.ts';
+import { extractLines } from '@slint/common-files/src/utils/utils.ts';
 import { Code } from '@astrojs/starlight/components';
-import LangRefLink from '/src/components/LangRefLink.astro';
+import LangRefLink from '@slint/common-files/src/components/LangRefLink.astro';
 
 
 This step implements the rules of the game in your coding language of choice.

docs/astro/src/content/docs/tutorial/getting_started.mdx

@@ -5,7 +5,7 @@ description: Getting started
 
 
 ---
-import { extractLines } from "/src/utils/utils.ts"
+import { extractLines } from "@slint/common-files/src/utils/utils"
 import { Tabs, TabItem } from '@astrojs/starlight/components';
 import { Code } from '@astrojs/starlight/components'
 

docs/astro/src/content/docs/tutorial/ideas_for_the_reader.mdx

@@ -4,7 +4,7 @@ title: Ideas For The Reader
 description: Ideas For The Reader
 ---
 
-import Link from '/src/components/Link.astro';
+import Link from '@slint/common-files/src/components/Link.astro';
 
 The game is visually bare. Here are some ideas on how you could make further changes to enhance it:
 

docs/astro/src/content/docs/tutorial/memory_tile.mdx

@@ -5,7 +5,7 @@ description: Memory Tile
 ---
 
 import { Code } from '@astrojs/starlight/components';
-import { extractLines } from '/src/utils/utils.ts';
+import { extractLines } from '@slint/common-files/src/utils/utils';
 import { Tabs, TabItem } from '@astrojs/starlight/components';
 
 With the skeleton code in place, this step looks at the first element of the game, the memory tile. It's the

docs/astro/src/content/docs/tutorial/polishing_the_tile.mdx

@@ -5,7 +5,7 @@ description: Polishing the Tile
 ---
 
 import { Code } from '@astrojs/starlight/components';
-import { extractLines } from '/src/utils/utils.ts';
+import { extractLines } from '@slint/common-files/src/utils/utils.ts';
 
 In this step, you add a curtain-like cover that opens when clicked. Slint files have an implicit z order for drawing items.
 Each subsequent item is drawn above the previous one. So a `Rectangle` on line 10 would be underneath another declared later

docs/astro/tests/link-test.spec.ts

@@ -1,7 +1,7 @@
 // Copyright © SixtyFPS GmbH <info@slint.dev>
 // SPDX-License-Identifier: MIT
 import { test, expect } from "@playwright/test";
-import { linkMap } from "../src/utils/utils";
+import { linkMap } from "../../common/src/utils/utils";
 
 test("Test all links", async ({ page }) => {
     for (const [key, value] of Object.entries(linkMap)) {

docs/common/biome.json

@@ -0,0 +1,42 @@
+{
+    "root": false,
+    "extends": "//",
+    "files": {
+        "includes": [
+            "**",
+            "!**/.astro/**",
+            "**/*.astro",
+            "!**/playwright-report/**"
+        ]
+    },
+    "formatter": {},
+    "linter": {
+        "rules": {
+            "style": {
+                "noParameterAssign": "error",
+                "useAsConstAssertion": "error",
+                "useDefaultParameterLast": "error",
+                "useEnumInitializers": "error",
+                "useSelfClosingElements": "error",
+                "useSingleVarDeclarator": "error",
+                "noUnusedTemplateLiteral": "error",
+                "useNumberNamespace": "error",
+                "noInferrableTypes": "error",
+                "noUselessElse": "error"
+            }
+        }
+    },
+    "overrides": [
+        {
+            "includes": ["**/*.astro"],
+            "linter": {
+                "rules": {
+                    "style": {
+                        "useConst": "off",
+                        "useImportType": "off"
+                    }
+                }
+            }
+        }
+    ]
+}

docs/common/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "@slint/common-files",
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "format": "biome format",
+    "format:fix": "biome format --write",
+    "lint": "biome lint",
+    "lint:fix": "biome lint --fix"
+  }
+}