@ticatec/topside-elements 1.0.0

package/dist/layouts/form_panel/grid_form/GridForm.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { EditorVariant } from "../../../form/types";
+import type { Snippet } from 'svelte';
+interface Props {
+    style?: string;
+    columns?: number;
+    /** 传给内部编辑器的外观变体 */
+    variant?: EditorVariant;
+    theme?: string;
+    children?: Snippet<[string | undefined, string | undefined]>;
+}
+declare const GridForm: import("svelte").Component<Props, {}, "">;
+type GridForm = ReturnType<typeof GridForm>;
+export default GridForm;

package/dist/layouts/form_panel/grid_form/README.md

@@ -0,0 +1,217 @@
+# GridForm
+
+> **Renamed in 5.1.0**: this document uses the names from the [API Naming Guide](../../../../docs/NAMING.md); the old names `arrangement` were removed in 5.1.0 (no compatibility aliases are kept).
+
+A CSS-Grid-based form layout. Configure the column count on the form, then place each `GridField` with `colSpan` / `rowSpan` (or absolute `col` / `row` coordinates). The most expressive of the three form layouts — supports fields spanning multiple rows/columns, with placement that doesn't shift when content size changes.
+
+## Components
+
+| Export | Purpose |
+|--------|---------|
+| `GridForm` (default) | Outer wrapper — CSS Grid container |
+| `GridField` | A grid cell wrapping [FormField](../../form_field/README.md), with `colSpan` / `rowSpan` / `col` / `row` placement |
+| `EmptyCell` | Empty spacer with the same placement props |
+
+## Installation
+
+```bash
+npm install @ticatec/topside-elements
+```
+
+## Import
+
+```typescript
+import GridForm, { GridField, EmptyCell } from '@ticatec/topside-elements/GridForm';
+```
+
+## Basic Usage
+
+```svelte
+<script>
+  import GridForm, { GridField } from '@ticatec/topside-elements/GridForm';
+  import TextEditor from '@ticatec/topside-elements/TextEditor';
+</script>
+
+<GridForm columns={6}>
+  <GridField label="First name" colSpan={2}>
+    <TextEditor bind:value={firstName} />
+  </GridField>
+  <GridField label="Last name" colSpan={2}>
+    <TextEditor bind:value={lastName} />
+  </GridField>
+  <GridField label="Email" colSpan={2}>
+    <TextEditor type="email" bind:value={email} />
+  </GridField>
+
+  <GridField label="Address" colSpan={6}>
+    <TextEditor bind:value={address} />
+  </GridField>
+</GridForm>
+```
+
+The form above has 6 columns. Row 1: three 2-column fields. Row 2: one 6-column field.
+
+## Components Reference
+
+### `GridForm`
+
+Outer wrapper. Children render inside a CSS Grid container.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `columns` | `number` | `6` | Number of equal-width columns in the grid |
+| `style` | `string` | `''` | Inline CSS on the outer wrapper |
+| `theme` | `string \| undefined` | `undefined` | CSS class on the wrapper (not `data-theme`) |
+| `variant` | `string \| undefined` | `undefined` | Snippet arg passed to children |
+| `children` | `Snippet<[string \| undefined, string \| undefined]> \| undefined` | `undefined` | Grid content. Snippet receives `(theme, variant)`. |
+
+The grid container style is computed from `columns`:
+
+```js
+const gridStyle = `grid-template-columns: repeat(${columns}, 1fr)`;
+```
+
+So `columns={6}` → `grid-template-columns: repeat(6, 1fr)`. Each `GridField` with `colSpan={2}` takes 2 of those 6 tracks.
+
+> **For per-field horizontal layout**, set `direction="horizontal"` on each `GridField`. There's no form-level toggle.
+
+### `GridField`
+
+A grid cell wrapping [FormField](../../form_field/README.md), with full CSS-Grid placement control.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `label` | `string` | `'Label:'` | Label text forwarded to FormField |
+| `labelSuffix` | `string` | `':'` | Suffix appended to label |
+| `label$style` | `string` | `''` | Inline CSS on the label |
+| `required` | `boolean` | `false` | Show red `*` before the label |
+| `direction` | `'vertical' \| 'horizontal'` | `'vertical'` | Sets the FormField's `class` to include this value. **Note: this is a class name, not the FormField's `layout` prop.** FormField's actual `layout` still defaults to `getLayoutMode()` from context. |
+| `colSpan` | `number` | `1` | Number of columns to span (`grid-column-end: span N`) |
+| `rowSpan` | `number` | `1` | Number of rows to span (`grid-row-end: span N`) |
+| `col` | `number \| null` | `null` | Explicit column start (1-based). `grid-column-start: N` |
+| `row` | `number \| null` | `null` | Explicit row start (1-based). `grid-row-start: N` |
+| `variant` | `string \| undefined` | `undefined` | Snippet arg |
+| `theme` | `string \| undefined` | `undefined` | Snippet arg |
+| `children` | `Snippet<[string \| undefined, string \| undefined]> \| undefined` | `undefined` | Cell content. Snippet receives `(theme, variant)`. |
+
+The grid placement style is computed:
+
+```js
+let s = '';
+if (rowSpan > 1) s += `grid-row-end: span ${rowSpan};`;
+if (colSpan > 1) s += `grid-column-end: span ${colSpan};`;
+if (row != null) s += `grid-row-start: ${row};`;
+if (col != null) s += `grid-column-start: ${col};`;
+```
+
+### `EmptyCell`
+
+Empty spacer with the same grid-placement props (but no `colSpan` defaulting — `rowSpan` / `colSpan` are both `1` by default).
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `colSpan` | `number` | `1` | Columns to span |
+| `rowSpan` | `number` | `1` | Rows to span |
+| `col` | `number \| undefined` | `undefined` | Explicit column start |
+| `row` | `number \| undefined` | `undefined` | Explicit row start |
+
+## Examples
+
+### Auto-Placement with colSpan
+
+Let CSS Grid auto-place fields with `colSpan`:
+
+```svelte
+<GridForm columns={12}>
+  <GridField label="A" colSpan={4} />
+  <GridField label="B" colSpan={4} />
+  <GridField label="C" colSpan={4} />
+  <GridField label="D" colSpan={6} />
+  <GridField label="E" colSpan={6} />
+</GridForm>
+```
+
+Row 1: A, B, C. Row 2: D, E. Auto-placement packs fields left-to-right, top-to-bottom.
+
+### Explicit Placement
+
+Use `col` and `row` for absolute positioning (1-based):
+
+```svelte
+<GridForm columns={4}>
+  <GridField label="Top-left"     col={1} row={1} colSpan={2} />
+  <GridField label="Top-right"    col={3} row={1} colSpan={2} />
+  <GridField label="Bottom-full"  col={1} row={2} colSpan={4} />
+</GridForm>
+```
+
+### Tall Field (rowSpan)
+
+A field that spans multiple rows — useful for textareas next to shorter fields:
+
+```svelte
+<GridForm columns={4}>
+  <GridField label="Notes" rowSpan={3} colSpan={2}>
+    <MemoEditor />
+  </GridField>
+  <GridField label="Status"   colSpan={2}><OptionsSelect options={statusOptions} /></GridField>
+  <GridField label="Priority" colSpan={2}><OptionsSelect options={priorityOptions} /></GridField>
+  <GridField label="Owner"    colSpan={2}><TextEditor /></GridField>
+</GridForm>
+```
+
+"Notes" occupies the left half and 3 rows; the right half stacks three 1-row fields.
+
+### EmptyCell Spacers
+
+```svelte
+<GridForm columns={6}>
+  <GridField label="A" colSpan={2} />
+  <EmptyCell colSpan={2} />
+  <GridField label="B" colSpan={2} />
+</GridForm>
+```
+
+### Mixed colSpan + Explicit Placement
+
+```svelte
+<GridForm columns={6}>
+  <GridField label="Title"     col={1} row={1} colSpan={6} />
+  <GridField label="Left"      col={1} row={2} colSpan={3} rowSpan={2} />
+  <GridField label="Top-right" col={4} row={2} colSpan={3} />
+  <GridField label="Bot-right" col={4} row={3} colSpan={3} />
+</GridForm>
+```
+
+## CSS Variables
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `--topside-form-container-padding` | (theme) | Outer wrapper padding |
+| `--topside-form-field-padding` | (theme) | Per-cell padding — consumed by the inner FormField |
+
+## Behavior Notes
+
+- **CSS Grid, not flex.** Items don't wrap; they're placed by the grid algorithm (auto-flow) or explicit `col` / `row`.
+- **`colSpan` / `rowSpan` only emit CSS when > 1.** `colSpan={1}` produces no inline style (uses the default 1-track placement).
+- **`col` / `row` are 1-based** (CSS Grid convention).
+- **`theme` and `variant` on GridForm are CSS classes + snippet args** — `theme` is **not** `data-theme` here, unlike most components.
+- **`direction` prop is a class name**, not the FormField's `layout` prop. Confusing but that's how it's wired. If you need actual horizontal layout inside a field, the FormField inside still inherits from context.
+
+## Accessibility
+
+Inherits FormField a11y limitations (label not associated via `<label for>`). See [FormField's a11y notes](../../form_field/README.md#accessibility).
+
+## Best Practices
+
+1. **Pick a column count that divides cleanly** (4, 6, 12) so `colSpan` values map to nice fractions.
+2. **Use auto-placement (colSpan only) for most fields.** Reserve explicit `col` / `row` for fields that need to lock position regardless of order.
+3. **Pair `rowSpan` with tall controls** (MemoEditor, code editor) to use vertical space efficiently.
+4. **Use `EmptyCell` for intentional gaps**, not for alignment tricks — explicit `col` is more robust.
+5. **For per-field horizontal layout**, set `direction="horizontal"` on each `GridField`.
+
+## Related Components
+
+- [FlexForm](../flex_form/README.md) — auto-wrapping flex-row sibling
+- [FlexRowForm](../flex_row_form/README.md) — explicit-row flex sibling
+- [FormField](../../form_field/README.md) — what GridField renders internally

package/dist/layouts/form_panel/grid_form/README_CN.md

@@ -0,0 +1,217 @@
+# GridForm
+
+> **5.1.0 重命名**：本文使用 [API 命名规范](../../../../docs/NAMING_CN.md) 中的名字；旧名 `arrangement` 已在 5.1.0 移除（5.1.0 不保留兼容别名）。
+
+基于 CSS Grid 的表单布局。在表单上配置列数，然后用 `colSpan` / `rowSpan`（或绝对 `col` / `row` 坐标）放置每个 `GridField`。三个表单布局里表达力最强的一个 —— 支持跨多行多列的字段，放置位置不会随内容尺寸漂移。
+
+## 组件
+
+| 导出 | 用途 |
+|------|------|
+| `GridForm`（默认） | 外层 wrapper —— CSS Grid 容器 |
+| `GridField` | 网格 cell，内部包 [FormField](../../form_field/README_CN.md)，支持 `colSpan` / `rowSpan` / `col` / `row` 放置 |
+| `EmptyCell` | 空占位，同样支持放置 props |
+
+## 安装
+
+```bash
+npm install @ticatec/topside-elements
+```
+
+## 导入
+
+```typescript
+import GridForm, { GridField, EmptyCell } from '@ticatec/topside-elements/GridForm';
+```
+
+## 基本用法
+
+```svelte
+<script>
+  import GridForm, { GridField } from '@ticatec/topside-elements/GridForm';
+  import TextEditor from '@ticatec/topside-elements/TextEditor';
+</script>
+
+<GridForm columns={6}>
+  <GridField label="姓" colSpan={2}>
+    <TextEditor bind:value={firstName} />
+  </GridField>
+  <GridField label="名" colSpan={2}>
+    <TextEditor bind:value={lastName} />
+  </GridField>
+  <GridField label="邮箱" colSpan={2}>
+    <TextEditor type="email" bind:value={email} />
+  </GridField>
+
+  <GridField label="地址" colSpan={6}>
+    <TextEditor bind:value={address} />
+  </GridField>
+</GridForm>
+```
+
+上面表单 6 列。第 1 行：三个 2 列字段。第 2 行：一个 6 列字段。
+
+## 组件参考
+
+### `GridForm`
+
+外层 wrapper。children 渲染在 CSS Grid 容器里。
+
+| 属性 | 类型 | 默认值 | 描述 |
+|------|------|---------|-------------|
+| `columns` | `number` | `6` | 网格的等宽列数 |
+| `style` | `string` | `''` | 外层 wrapper 的内联 CSS |
+| `theme` | `string \| undefined` | `undefined` | wrapper 的 CSS 类（**不是** `data-theme`） |
+| `variant` | `string \| undefined` | `undefined` | 传给 children 的 snippet 参数 |
+| `children` | `Snippet<[string \| undefined, string \| undefined]> \| undefined` | `undefined` | 网格内容。snippet 接收 `(theme, variant)` |
+
+网格容器样式从 `columns` 计算：
+
+```js
+const gridStyle = `grid-template-columns: repeat(${columns}, 1fr)`;
+```
+
+所以 `columns={6}` → `grid-template-columns: repeat(6, 1fr)`。每个 `colSpan={2}` 的 `GridField` 占 6 条轨道中的 2 条。
+
+> **要字段内部横向布局**，在每个 `GridField` 上设 `direction="horizontal"`。没有表单级的开关。
+
+### `GridField`
+
+网格 cell，内部包 [FormField](../../form_field/README_CN.md)，完整 CSS-Grid 放置控制。
+
+| 属性 | 类型 | 默认值 | 描述 |
+|------|------|---------|-------------|
+| `label` | `string` | `'Label:'` | 标签文字，透传给 FormField |
+| `labelSuffix` | `string` | `':'` | 标签后缀 |
+| `label$style` | `string` | `''` | 标签的内联 CSS |
+| `required` | `boolean` | `false` | 标签前显示红色 `*` |
+| `direction` | `'vertical' \| 'horizontal'` | `'vertical'` | 把这个值加进 FormField 的 `class`。**注意：是类名，不是 FormField 的 `layout` prop。** FormField 的实际 `layout` 仍然从 context 的 `getLayoutMode()` 默认 |
+| `colSpan` | `number` | `1` | 跨多少列（`grid-column-end: span N`） |
+| `rowSpan` | `number` | `1` | 跨多少行（`grid-row-end: span N`） |
+| `col` | `number \| null` | `null` | 显式列起点（1 起算）。`grid-column-start: N` |
+| `row` | `number \| null` | `null` | 显式行起点（1 起算）。`grid-row-start: N` |
+| `variant` | `string \| undefined` | `undefined` | snippet 参数 |
+| `theme` | `string \| undefined` | `undefined` | snippet 参数 |
+| `children` | `Snippet<[string \| undefined, string \| undefined]> \| undefined` | `undefined` | cell 内容。snippet 接收 `(theme, variant)` |
+
+网格放置样式计算：
+
+```js
+let s = '';
+if (rowSpan > 1) s += `grid-row-end: span ${rowSpan};`;
+if (colSpan > 1) s += `grid-column-end: span ${colSpan};`;
+if (row != null) s += `grid-row-start: ${row};`;
+if (col != null) s += `grid-column-start: ${col};`;
+```
+
+### `EmptyCell`
+
+空占位，同样的网格放置 props（但 `colSpan` 默认为 1，不是 GridField 的语义）。
+
+| 属性 | 类型 | 默认值 | 描述 |
+|------|------|---------|-------------|
+| `colSpan` | `number` | `1` | 跨多少列 |
+| `rowSpan` | `number` | `1` | 跨多少行 |
+| `col` | `number \| undefined` | `undefined` | 显式列起点 |
+| `row` | `number \| undefined` | `undefined` | 显式行起点 |
+
+## 示例
+
+### 用 colSpan 自动放置
+
+让 CSS Grid 自动按 `colSpan` 放置字段：
+
+```svelte
+<GridForm columns={12}>
+  <GridField label="A" colSpan={4} />
+  <GridField label="B" colSpan={4} />
+  <GridField label="C" colSpan={4} />
+  <GridField label="D" colSpan={6} />
+  <GridField label="E" colSpan={6} />
+</GridForm>
+```
+
+第 1 行：A、B、C。第 2 行：D、E。自动放置从左到右、从上到下打包。
+
+### 显式放置
+
+用 `col` 和 `row` 做绝对定位（1 起算）：
+
+```svelte
+<GridForm columns={4}>
+  <GridField label="左上"     col={1} row={1} colSpan={2} />
+  <GridField label="右上"     col={3} row={1} colSpan={2} />
+  <GridField label="底部整宽" col={1} row={2} colSpan={4} />
+</GridForm>
+```
+
+### 高字段（rowSpan）
+
+跨多行的字段 —— 适合 textarea 旁边放短字段：
+
+```svelte
+<GridForm columns={4}>
+  <GridField label="备注" rowSpan={3} colSpan={2}>
+    <MemoEditor />
+  </GridField>
+  <GridField label="状态"   colSpan={2}><OptionsSelect options={statusOptions} /></GridField>
+  <GridField label="优先级" colSpan={2}><OptionsSelect options={priorityOptions} /></GridField>
+  <GridField label="所有者" colSpan={2}><TextEditor /></GridField>
+</GridForm>
+```
+
+"备注" 占左半边 3 行；右半边叠三个 1 行字段。
+
+### EmptyCell 占位
+
+```svelte
+<GridForm columns={6}>
+  <GridField label="A" colSpan={2} />
+  <EmptyCell colSpan={2} />
+  <GridField label="B" colSpan={2} />
+</GridForm>
+```
+
+### colSpan + 显式放置混用
+
+```svelte
+<GridForm columns={6}>
+  <GridField label="标题"     col={1} row={1} colSpan={6} />
+  <GridField label="左"       col={1} row={2} colSpan={3} rowSpan={2} />
+  <GridField label="右上"     col={4} row={2} colSpan={3} />
+  <GridField label="右下"     col={4} row={3} colSpan={3} />
+</GridForm>
+```
+
+## CSS 变量
+
+| 变量 | 默认值 | 描述 |
+|------|--------|------|
+| `--topside-form-container-padding` | （主题） | 外层 wrapper 的 padding |
+| `--topside-form-field-padding` | （主题） | 每个 cell 的 padding —— 由内部 FormField 消费 |
+
+## 行为说明
+
+- **CSS Grid，不是 flex。** 选项不换行；由 grid 算法（auto-flow）或显式 `col` / `row` 放置
+- **`colSpan` / `rowSpan` 只有 > 1 才输出 CSS。** `colSpan={1}` 不产生内联样式（用默认的 1 轨道放置）
+- **`col` / `row` 是 1 起算**（CSS Grid 约定）
+- **GridForm 的 `theme` 和 `variant` 是 CSS 类 + snippet 参数** —— 这里 `theme` **不是** `data-theme`，跟大多数组件不同
+- **`direction` prop 是类名**，不是 FormField 的 `layout` prop。绕，但代码就是这么接的。需要字段内部真横向布局的话，里面的 FormField 仍然从 context 继承
+
+## 无障碍访问
+
+继承 FormField 的 a11y 限制（标签不通过 `<label for>` 关联）。详见 [FormField 的 a11y 说明](../../form_field/README_CN.md#无障碍访问)。
+
+## 最佳实践
+
+1. **选能整除的列数**（4、6、12），让 `colSpan` 值映射成漂亮的分数
+2. **大多数字段用自动放置（仅 colSpan）。** 把显式 `col` / `row` 留给位置不能依赖顺序的字段
+3. **`rowSpan` 配合高控件**（MemoEditor、代码编辑器），高效利用纵向空间
+4. **`EmptyCell` 用于有意的空隙**，不要用于对齐戏法 —— 显式 `col` 更可靠
+5. **要字段内部横向布局**，在每个 `GridField` 上设 `direction="horizontal"`
+
+## 相关组件
+
+- [FlexForm](../flex_form/README_CN.md) —— 自动换行的 flex-row 同胞
+- [FlexRowForm](../flex_row_form/README_CN.md) —— 显式行的 flex 同胞
+- [FormField](../../form_field/README_CN.md) —— GridField 内部渲染的东西

package/dist/layouts/form_panel/grid_form/index.d.ts

@@ -0,0 +1,5 @@
+import GridForm from "./GridForm.svelte";
+import GridField from "./GridField.svelte";
+import EmptyCell from "./EmptyCell.svelte";
+export default GridForm;
+export { GridField, EmptyCell };

package/dist/layouts/form_panel/grid_form/index.js

@@ -0,0 +1,5 @@
+import GridForm from "./GridForm.svelte";
+import GridField from "./GridField.svelte";
+import EmptyCell from "./EmptyCell.svelte";
+export default GridForm;
+export { GridField, EmptyCell };

package/dist/layouts/form_panel/index.d.ts

@@ -0,0 +1,4 @@
+import FlexForm from "./flex_form";
+import GridForm from "./grid_form";
+import FlexRowForm from "./flex_row_form";
+export { FlexForm, GridForm, FlexRowForm };

package/dist/layouts/form_panel/index.js

@@ -0,0 +1,4 @@
+import FlexForm from "./flex_form";
+import GridForm from "./grid_form";
+import FlexRowForm from "./flex_row_form";
+export { FlexForm, GridForm, FlexRowForm };

package/dist/layouts/page/Page.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">
+    import type {Snippet} from 'svelte';
+    import PageHeader from "./PageHeader.svelte";
+    import type {PageAction} from "../../types";
+
+    interface Props {
+        title?: string;
+        comment?: string;
+        content$style?: string;
+        round?: boolean;
+        shadow?: boolean;
+        goBack?: PageAction;
+        reload?: PageAction;
+        style?: string;
+        theme?: string;
+        header?: Snippet<[string, string?, PageAction?, PageAction?]>;
+        headerExtra?: Snippet;
+        children?: Snippet;
+    }
+
+    let {
+        title = '',
+        comment = '',
+        content$style = '',
+        round = true,
+        shadow = true,
+        goBack,
+        reload,
+        style = '',
+        theme,
+        header,
+        headerExtra,
+        children
+    }: Props = $props();
+</script>
+
+<div class="topside-page-wrapper" {style} data-theme={theme}>
+    <div class="topside-page" class:round class:shadow>
+        <div class="topside-page-header">
+            {#if header}
+                {@render header(title, comment, goBack, reload)}
+            {:else}
+                <PageHeader {title} {comment} {goBack} {reload} {headerExtra} />
+            {/if}
+        </div>
+        <div class="page-container" style={content$style}>
+            {#if children}
+                {@render children()}
+            {/if}
+        </div>
+    </div>
+</div>
+
+<style>
+    .topside-page-wrapper {
+        width: 100%;
+        position: relative;
+        padding: var(--topside-page-margin-size);
+        background-color: var(--topside-page-color-margin-surface);
+    }
+
+    .topside-page {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        background-color: var(--topside-page-color-surface);
+        color: var(--topside-page-text-color);
+        border: 1px solid var(--topside-page-border-color);
+    }
+
+    .topside-page.round {
+        border-radius: var(--topside-page-border-radius);
+    }
+
+    .topside-page.shadow {
+        box-shadow: var(--topside-page-box-shadow);
+    }
+
+    .topside-page-header {
+        position: relative;
+        width: 100%;
+        display: flex;
+        flex: 0 0 auto;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        align-items: center;
+        height: var(--topside-page-header-height);
+        padding: 0 var(--topside-page-header-margin);
+        border-bottom: 1px solid var(--topside-page-color-header-bottom);
+    }
+
+    .page-container {
+        flex: 1 1 auto;
+        overflow: hidden;
+    }
+</style>

package/dist/layouts/page/Page.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { Snippet } from 'svelte';
+import type { PageAction } from "../../types";
+interface Props {
+    title?: string;
+    comment?: string;
+    content$style?: string;
+    round?: boolean;
+    shadow?: boolean;
+    goBack?: PageAction;
+    reload?: PageAction;
+    style?: string;
+    theme?: string;
+    header?: Snippet<[string, string?, PageAction?, PageAction?]>;
+    headerExtra?: Snippet;
+    children?: Snippet;
+}
+declare const Page: import("svelte").Component<Props, {}, "">;
+type Page = ReturnType<typeof Page>;
+export default Page;

package/dist/layouts/page/PageHeader.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+    import type {Snippet} from 'svelte';
+    import Icon from "../../general/icon";
+    import type {PageAction} from "../../types";
+
+    interface Props {
+        title: string;
+        comment?: string;
+        goBack?: PageAction;
+        reload?: PageAction;
+        headerExtra?: Snippet;
+    }
+
+    let {
+        title,
+        comment,
+        goBack,
+        reload,
+        headerExtra
+    }: Props = $props();
+</script>
+
+{#if goBack}
+    <div style="padding-right: 12px;">
+        <Icon name="icon_google_keyboard_backspace" onclick={goBack}></Icon>
+    </div>
+{:else if reload}
+    <div style="padding-right: 12px;">
+        <Icon name="icon_google_refresh" onclick={reload}></Icon>
+    </div>
+{/if}
+<div class="page-topic">
+    <span>{title}</span>
+</div>
+<div class="page-comment">
+    {#if comment}
+        <span>{comment}</span>
+    {/if}
+</div>
+{#if headerExtra}
+    {@render headerExtra()}
+{/if}
+
+<style>
+    .page-topic {
+        font-size: 1.1em;
+        font-weight: 600;
+    }
+
+    .page-comment {
+        flex: 1 1 auto;
+        overflow: hidden;
+        color: var(--topside-page-header-comment-color);
+        margin-left: 8px;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        padding: 0 8px;
+    }
+</style>

package/dist/layouts/page/PageHeader.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+import type { PageAction } from "../../types";
+interface Props {
+    title: string;
+    comment?: string;
+    goBack?: PageAction;
+    reload?: PageAction;
+    headerExtra?: Snippet;
+}
+declare const PageHeader: import("svelte").Component<Props, {}, "">;
+type PageHeader = ReturnType<typeof PageHeader>;
+export default PageHeader;