@ticatec/topside-elements 1.0.0

package/dist/app_layout/HeaderLayout.svelte

@@ -0,0 +1,93 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte';
+    import Split from "../general/split";
+
+    interface Props {
+        headerHeight?: string;
+        sidebarWidth?: string;
+        sidebarResize?: boolean;
+        sidebarMaxWidth?: string | null;
+        sidebarMinWidth?: string | null;
+        header?: Snippet;
+        sidebar?: Snippet;
+        children?: Snippet;
+    }
+
+    let {
+        headerHeight = "48px",
+        sidebarWidth = '300px',
+        sidebarResize = false,
+        sidebarMaxWidth = null,
+        sidebarMinWidth = null,
+        header,
+        sidebar,
+        children
+    }: Props = $props();
+
+    let sidebarPanel = $state<HTMLElement>();
+    let maxWidth = $derived(sidebarResize && sidebarMaxWidth ? `max-width: ${sidebarMaxWidth};` : '');
+    let minWidth = $derived(sidebarResize && sidebarMinWidth ? `min-width: ${sidebarMinWidth};` : '');
+</script>
+
+<div class="topside-header-layout">
+    {#if header}
+        <div class="header-area" style="height: {headerHeight}">
+            {@render header()}
+        </div>
+    {/if}
+    <div class="content-wrapper">
+        {#if sidebar}
+            <div bind:this={sidebarPanel} class="sidebar" style="width: {sidebarWidth}; {maxWidth} {minWidth}">
+                {#if sidebar}
+                    {@render sidebar()}
+                {/if}
+            </div>
+            {#if sidebarResize}
+                <Split direction="vertical" bindingPanel={sidebarPanel}/>
+            {/if}
+        {/if}
+        <div class="main-content">
+            {#if children}
+                {@render children()}
+            {/if}
+        </div>
+    </div>
+</div>
+
+<style>
+    .topside-header-layout {
+        width: 100%;
+        height: 100%;
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        position: relative;
+    }
+
+    .header-area {
+        width: 100%;
+        flex: 0 0 auto;
+        overflow: hidden;
+    }
+
+    .content-wrapper {
+        width: 100%;
+        flex: 1 1 auto;
+        overflow: hidden;
+        display: flex;
+        flex-direction: row;
+    }
+
+    .sidebar {
+        height: 100%;
+        flex: 0 0 auto;
+        overflow: auto;
+        border-right: 1px solid var(--topside-color-border-secondary);
+    }
+
+    .main-content {
+        height: 100%;
+        flex: 1 1 auto;
+        overflow: hidden;
+    }
+</style>

package/dist/app_layout/HeaderLayout.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    headerHeight?: string;
+    sidebarWidth?: string;
+    sidebarResize?: boolean;
+    sidebarMaxWidth?: string | null;
+    sidebarMinWidth?: string | null;
+    header?: Snippet;
+    sidebar?: Snippet;
+    children?: Snippet;
+}
+declare const HeaderLayout: import("svelte").Component<Props, {}, "">;
+type HeaderLayout = ReturnType<typeof HeaderLayout>;
+export default HeaderLayout;

package/dist/app_layout/README.md

@@ -0,0 +1,316 @@
+# App Layout Components
+
+> **Renamed in 5.1.0**: this document uses the names from the [API Naming Guide](../../docs/NAMING.md); the old names `bottomMax`, `bottomMin`, `leftMax`, `leftMin`, `rightMax`, `rightMin`, `topMax`, `topMin` were removed in 5.1.0 (no compatibility aliases are kept).
+
+A collection of flexible layout components for building application interfaces with headers, sidebars, and resizable panels.
+
+All components target **Svelte 5** and use the snippet API (`{#snippet ...}` / `{@render ...}`). Default content is passed as `children` (the implicit body of the component).
+
+## Installation
+
+```bash
+npm install @ticatec/topside-elements
+```
+
+## Import
+
+```svelte
+<script lang="ts">
+  import {
+    SidebarLayout,
+    HeaderLayout,
+    ClassicLayout,
+    ColumnsLayout,
+    RowsLayout
+  } from '@ticatec/topside-elements/app-layout';
+</script>
+```
+
+> Each component is also available as a default export: `import SidebarLayout from '@ticatec/topside-elements/app-layout/SidebarLayout'`.
+
+## Components
+
+| Component | Structure |
+|-----------|-----------|
+| **SidebarLayout** | Sidebar on the left, header + content on the right |
+| **HeaderLayout** | Header on top, then sidebar + content below |
+| **ClassicLayout** | Header + left sidebar + content + optional right sidebar + optional status bar |
+| **ColumnsLayout** | Left + center + right horizontal panels |
+| **RowsLayout** | Top + center + bottom vertical panels |
+
+All layouts accept `*Resize` props and constraints; panels without a corresponding snippet are not rendered.
+
+---
+
+## SidebarLayout
+
+Optional resizable sidebar on the left, plus a header area and content area stacked vertically on the right.
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `sidebarResize` | `boolean` | `false` | Enable sidebar resizing |
+| `headerHeight` | `string` | `'48px'` | Height of the header area |
+| `sidebarWidth` | `string` | `'300px'` | Initial width of the sidebar |
+| `sidebarMaxWidth` | `string \| null` | `null` | Maximum sidebar width (only when `sidebarResize`) |
+| `sidebarMinWidth` | `string \| null` | `null` | Minimum sidebar width (only when `sidebarResize`) |
+
+### Snippets
+
+| Snippet | Required | Description |
+|---------|----------|-------------|
+| `sidebar` | no | Sidebar content (if omitted, no sidebar is rendered) |
+| `header` | no | Header content (if omitted, no header is rendered) |
+| `children` | no | Main content area |
+
+### Example
+
+```svelte
+<SidebarLayout
+  sidebarResize={true}
+  sidebarWidth="250px"
+  sidebarMinWidth="200px"
+  sidebarMaxWidth="400px"
+>
+  {#snippet sidebar()}
+    <!-- Navigation menu -->
+  {/snippet}
+
+  {#snippet header()}
+    <!-- Top bar content -->
+  {/snippet}
+
+  <!-- Main content (children) -->
+  <div>Main application content</div>
+</SidebarLayout>
+```
+
+---
+
+## HeaderLayout
+
+Header on top, with a sidebar + content area below the header.
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `headerHeight` | `string` | `'48px'` | Height of the header |
+| `sidebarWidth` | `string` | `'300px'` | Width of the sidebar |
+| `sidebarResize` | `boolean` | `false` | Enable sidebar resizing |
+| `sidebarMaxWidth` | `string \| null` | `null` | Maximum sidebar width (only when `sidebarResize`) |
+| `sidebarMinWidth` | `string \| null` | `null` | Minimum sidebar width (only when `sidebarResize`) |
+
+### Snippets
+
+| Snippet | Required | Description |
+|---------|----------|-------------|
+| `header` | no | Header content (if omitted, no header is rendered) |
+| `sidebar` | no | Sidebar content (if omitted, no sidebar is rendered) |
+| `children` | no | Main content area |
+
+### Example
+
+```svelte
+<HeaderLayout headerHeight="60px" sidebarResize={true}>
+  {#snippet header()}
+    <!-- App header -->
+  {/snippet}
+
+  {#snippet sidebar()}
+    <!-- Side navigation -->
+  {/snippet}
+
+  <!-- Main content -->
+  <div>Page content</div>
+</HeaderLayout>
+```
+
+---
+
+## ClassicLayout
+
+Traditional desktop application layout: header, left sidebar, content area, optional right sidebar, optional status bar.
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `headerHeight` | `string` | `'48px'` | Height of the header |
+| `sidebarWidth` | `string` | `'300px'` | Width of the left sidebar |
+| `statusHeight` | `string` | `'22px'` | Height of the status bar |
+| `rightBarWidth` | `string` | `'240px'` | Width of the right sidebar |
+| `sidebarResize` | `boolean` | `false` | Enable left sidebar resizing |
+| `sidebarMaxWidth` | `string \| null` | `null` | Maximum left sidebar width (only when `sidebarResize`) |
+| `sidebarMinWidth` | `string \| null` | `null` | Minimum left sidebar width (only when `sidebarResize`) |
+| `rightBarResize` | `boolean` | `false` | Enable right sidebar resizing |
+| `rightBarMaxWidth` | `string \| null` | `null` | Maximum right sidebar width (only when `rightBarResize`) |
+| `rightBarMinWidth` | `string \| null` | `null` | Minimum right sidebar width (only when `rightBarResize`) |
+
+### Snippets
+
+| Snippet | Required | Description |
+|---------|----------|-------------|
+| `header` | no | Header content |
+| `sidebar` | no | Left sidebar content |
+| `rightSidebar` | no | Right sidebar content (camelCase — not `right-sidebar`) |
+| `bottom` | no | Status bar content |
+| `children` | no | Main content area |
+
+### Example
+
+```svelte
+<ClassicLayout
+  sidebarResize={true}
+  rightBarResize={true}
+  statusHeight="24px"
+>
+  {#snippet header()}
+    <!-- Application header -->
+  {/snippet}
+
+  {#snippet sidebar()}
+    <!-- Left navigation -->
+  {/snippet}
+
+  {#snippet rightSidebar()}
+    <!-- Properties panel -->
+  {/snippet}
+
+  {#snippet bottom()}
+    <!-- Status bar -->
+  {/snippet}
+
+  <!-- Main workspace -->
+  <div>Editor or main content</div>
+</ClassicLayout>
+```
+
+---
+
+## ColumnsLayout
+
+Three-column horizontal layout: left + center + right. Center fills remaining space; left and right default to `25%` (or `50%` when only one side panel is provided).
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `width` | `string` | `'100%'` | Total layout width |
+| `height` | `string` | `'100%'` | Total layout height |
+| `leftWidth` | `string \| null` | `null` | Left column width (falls back to `25%` / `50%`) |
+| `rightWidth` | `string \| null` | `null` | Right column width (falls back to `25%` / `50%`) |
+| `leftMinWidth` | `string \| null` | `null` | Left column min-width |
+| `leftMaxWidth` | `string \| null` | `null` | Left column max-width |
+| `rightMinWidth` | `string \| null` | `null` | Right column min-width |
+| `rightMaxWidth` | `string \| null` | `null` | Right column max-width |
+| `leftResize` | `boolean` | `false` | Enable left column resizing |
+| `rightResize` | `boolean` | `false` | Enable right column resizing |
+
+### Snippets
+
+| Snippet | Required | Description |
+|---------|----------|-------------|
+| `left` | no | Left column content (if omitted, no left column is rendered) |
+| `right` | no | Right column content (if omitted, no right column is rendered) |
+| `children` | no | Center column content |
+
+### Example
+
+```svelte
+<ColumnsLayout
+  leftResize={true}
+  rightResize={true}
+  leftWidth="200px"
+  rightWidth="300px"
+  leftMinWidth="150px"
+  rightMinWidth="250px"
+>
+  {#snippet left()}
+    <!-- Left panel -->
+  {/snippet}
+
+  {#snippet right()}
+    <!-- Right panel -->
+  {/snippet}
+
+  <!-- Center content -->
+  <div>Main content area</div>
+</ColumnsLayout>
+```
+
+---
+
+## RowsLayout
+
+Three-row vertical layout: top + center + bottom. Center fills remaining space; top and bottom default to `25%` (or `50%` when only one outer panel is provided).
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `width` | `string` | `'100%'` | Total layout width |
+| `height` | `string` | `'100%'` | Total layout height |
+| `topHeight` | `string \| null` | `null` | Top row height (falls back to `25%` / `50%`) |
+| `bottomHeight` | `string \| null` | `null` | Bottom row height (falls back to `25%` / `50%`) |
+| `topMinHeight` | `string \| null` | `null` | Top row min-height |
+| `topMaxHeight` | `string \| null` | `null` | Top row max-height |
+| `bottomMinHeight` | `string \| null` | `null` | Bottom row min-height |
+| `bottomMaxHeight` | `string \| null` | `null` | Bottom row max-height |
+| `topResize` | `boolean` | `false` | Enable top row resizing |
+| `bottomResize` | `boolean` | `false` | Enable bottom row resizing |
+
+### Snippets
+
+| Snippet | Required | Description |
+|---------|----------|-------------|
+| `top` | no | Top row content (if omitted, no top row is rendered) |
+| `bottom` | no | Bottom row content (if omitted, no bottom row is rendered) |
+| `children` | no | Center row content |
+
+### Example
+
+```svelte
+<RowsLayout
+  topResize={true}
+  bottomResize={true}
+  topHeight="150px"
+  bottomHeight="100px"
+  topMinHeight="100px"
+  bottomMinHeight="80px"
+>
+  {#snippet top()}
+    <!-- Top panel -->
+  {/snippet}
+
+  {#snippet bottom()}
+    <!-- Bottom panel -->
+  {/snippet}
+
+  <!-- Center content -->
+  <div>Main content area</div>
+</RowsLayout>
+```
+
+---
+
+## Resizable Panels
+
+When `*Resize` is enabled, a split handle is rendered between the panel and the center area:
+
+- Drag the handle to resize.
+- Min/max constraints are honored when set.
+- SidebarLayout / HeaderLayout / ClassicLayout use **vertical** split handles (drag horizontally).
+- RowsLayout uses **horizontal** split handles (drag vertically).
+- ClassicLayout's right sidebar uses a reversed handle (anchored to the right).
+
+`min`/`max` props are only applied while the corresponding `*Resize` is `true`.
+
+## Best Practices
+
+1. **Pick the right layout** — match the component to your application structure.
+2. **Set constraints** — use `min`/`max` to prevent panels from collapsing or overgrowing.
+3. **Remember container height** — these layouts fill their parent; make sure the parent has an explicit height.
+4. **Snippets are conditional** — omit a snippet and the panel disappears entirely (no empty space).
+5. **Performance** — keep resizable panels light for smooth dragging.