react-timelane 0.0.4 → 0.0.6

package/.storybook/main.ts

@@ -0,0 +1,11 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: ["@chromatic-com/storybook", "@storybook/addon-docs"],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+};
+export default config;

package/.storybook/package.json

@@ -0,0 +1,3 @@
+{
+    "type": "commonjs"
+}

package/.storybook/preview.ts

@@ -0,0 +1,14 @@
+import type { Preview } from '@storybook/react-vite'
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+       color: /(background|color)$/i,
+       date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 David Hansmair
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -2,6 +2,9 @@
 
 A React/TypeScript library to build timelines / horizontally scrollable calendars with multiple lanes.
 
+<img width="1145" alt="image" src="https://github.com/user-attachments/assets/a051f665-37ac-4292-9b85-7e1baa1bb84f" />
+
+
 ## Features
 
 react-timelane has a particular focus on usability and comes with many neat features:
@@ -23,7 +26,7 @@ npm install react-timelane
 
 ## Code Example
 
-see `docs/src/components/MyTimelane.tsx` for the full example:
+The following code example shows a basic custom Timelane, focusing on the component structure. See [docs/src/components/MyTimelane.tsx](https://github.com/dhansmair/react-timelane/blob/main/docs/src/components/MyTimelane.tsx) for the full example:
 
 ```typescript
 import { addDays, min } from "date-fns";
@@ -32,10 +35,7 @@ import {
   type AvailableSpace,
   type Lane,
   type Item,
-  type ItemId,
-  type TimelaneSettings,
-  TimelaneSettingsProvider,
-  useScroll,
+  type ItemId
 } from "react-timelane";
 import type Allocation from "../models/Allocation";
 import type Resource from "../models/Resource";
@@ -43,17 +43,6 @@ import AllocationComponent from "./AllocationComponent";
 
 import { Timelane as TL } from "react-timelane";
 
-const defaultSettings: TimelaneSettings = {
-  showMonths: true,
-  showWeeks: true,
-  showDays: true,
-  start: new Date(2025, 3, 1),
-  end: new Date(2025, 6, 2),
-  pixelsPerDay: 50,
-  pixelsPerResource: 100,
-  allowOverlaps: false,
-  focusedDate: null,
-};
 
 interface MyTimelaneProps {
   resources: Resource[];

package/dist/components/Timelane/Timelane.d.ts

@@ -0,0 +1,38 @@
+import { PropsWithChildren } from 'react';
+import { TimelaneLane } from '../TimelaneLane/TimelaneLane';
+import { TimelaneBody } from '../TimelaneBody/TimelaneBody';
+import { TimelaneLayout } from '../TimelaneLayout/TimelaneLayout';
+import { TimelaneHeader } from '../TimelaneHeader/TimelaneHeader';
+import { TimelaneBackground } from '../TimelaneBackground/TimelaneBackground';
+import { TimelaneAside } from '../TimelaneAside/TimelaneAside';
+import { EnableResizing } from '../../types';
+export interface TimelaneProps {
+    /**
+     * start of the time range
+     */
+    start?: Date;
+    /**
+     * end of the time range
+     */
+    end?: Date;
+    pixelsPerDay?: number;
+    pixelsPerLane?: number;
+    showMonths?: boolean;
+    showWeeks?: boolean;
+    showDays?: boolean;
+    allowOverlaps?: boolean;
+    enableItemResizing?: boolean | EnableResizing;
+    enableItemDragging?: boolean;
+}
+/**
+ * a component
+ */
+export declare function Timelane({ start, end, pixelsPerDay, pixelsPerLane, showMonths, showWeeks, showDays, allowOverlaps, enableItemResizing, enableItemDragging, children, }: PropsWithChildren<TimelaneProps>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Timelane {
+    var Header: typeof TimelaneHeader;
+    var Body: typeof TimelaneBody;
+    var Background: typeof TimelaneBackground;
+    var Aside: typeof TimelaneAside;
+    var Lane: typeof TimelaneLane;
+    var Layout: typeof TimelaneLayout;
+}

package/dist/components/Timelane/Timelane.stories.d.ts

@@ -0,0 +1,19 @@
+import { StoryObj } from '@storybook/react-vite';
+import { Timelane as TL } from './Timelane';
+import { TimelaneHeader } from '../TimelaneHeader';
+import { TimelaneBody } from '../TimelaneBody/TimelaneBody';
+import { TimelaneBackground } from '../TimelaneBackground/TimelaneBackground';
+import { TimelaneLane } from '../TimelaneLane/TimelaneLane';
+declare const meta: {
+    component: typeof TL;
+    tags: string[];
+    subcomponents: {
+        TimelaneHeader: typeof TimelaneHeader;
+        TimelaneBody: typeof TimelaneBody;
+        TimelaneBackground: typeof TimelaneBackground;
+        TimelaneLane: typeof TimelaneLane;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;

package/dist/components/TimelaneAllocation/TimelaneAllocation.d.ts

@@ -0,0 +1,10 @@
+import { MouseEvent } from 'react';
+export interface TimelaneAllocationProps {
+    name: string;
+    description: string;
+    isSelected?: boolean;
+    isDragged?: boolean;
+    onClick?: (e: MouseEvent) => void;
+    onContextMenu?: (e: MouseEvent) => void;
+}
+export declare function TimelaneAllocation({ name, description, isSelected, isDragged, onClick, onContextMenu, }: TimelaneAllocationProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/{TimelaneAside.d.ts → TimelaneAside/TimelaneAside.d.ts}

@@ -1,6 +1,6 @@
 import { MouseEvent, ReactElement } from 'react';
-import { Lane } from '../types';
-interface TimelaneAsideProps {
+import { Lane } from '../../types';
+export interface TimelaneAsideProps {
     lanes: Lane[];
     focusedLane?: Lane | null;
     setFocusedLane?: (lane: Lane | null) => void;
@@ -10,4 +10,3 @@ interface TimelaneAsideProps {
     renderLaneHeader?: (lane: Lane) => ReactElement;
 }
 export declare function TimelaneAside({ lanes, focusedLane, setFocusedLane, onLaneHeaderClick, onLaneHeaderDoubleClick, onLaneHeaderContextMenu, renderLaneHeader, }: TimelaneAsideProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/{TimelaneBackground.d.ts → TimelaneBackground/TimelaneBackground.d.ts}

@@ -1,5 +1,4 @@
-interface TimelaneBackgroundProps {
+export interface TimelaneBackgroundProps {
     focusedDay?: Date | null;
 }
 export declare function TimelaneBackground({ focusedDay }: TimelaneBackgroundProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/{TimelaneBody.d.ts → TimelaneBody/TimelaneBody.d.ts}

@@ -1,6 +1,5 @@
 import { PropsWithChildren } from 'react';
-interface TimelaneBodyProps {
+export interface TimelaneBodyProps {
     onSelect?: (selection: number[]) => void;
 }
 export declare function TimelaneBody({ onSelect, children, }: PropsWithChildren<TimelaneBodyProps>): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/{TimelaneBodyInner.d.ts → TimelaneBody/TimelaneBodyInner.d.ts}

@@ -1,5 +1,5 @@
 import { MouseEvent, ReactElement } from 'react';
-import { AvailableSpace, Item, Lane } from '../types';
+import { AvailableSpace, Item, Lane } from '../../types';
 interface TimelaneBodyInnerProps<T> {
     lanes: Lane[];
     items: Item<T>[];

package/dist/components/TimelaneHeader/DaysHeader.d.ts

@@ -1,6 +1,6 @@
 import { MouseEvent, ReactElement } from 'react';
 import { Pixels, TimeRange } from '../../types';
-interface DaysHeaderProps {
+export interface DaysHeaderProps {
     range: TimeRange;
     pixels: Pixels;
     focusedDay?: Date | null;
@@ -12,4 +12,3 @@ interface DaysHeaderProps {
     }) => void;
 }
 export declare function DaysHeader({ range, pixels, focusedDay, setFocusedDay, render, onDayClick, }: DaysHeaderProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/TimelaneHeader/MonthsHeader.d.ts

@@ -1,6 +1,6 @@
 import { MouseEvent, ReactElement } from 'react';
 import { Pixels, TimeRange } from '../../types';
-interface MonthsHeaderProps {
+export interface MonthsHeaderProps {
     range: TimeRange;
     pixels: Pixels;
     setFocusedDay?: (day: Date | null) => void;
@@ -12,4 +12,3 @@ interface MonthsHeaderProps {
     }) => void;
 }
 export declare function MonthsHeader({ range, pixels, setFocusedDay, render, onMonthClick, }: MonthsHeaderProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/TimelaneHeader/TimelaneHeader.d.ts

@@ -1,5 +1,5 @@
 import { MouseEvent, ReactElement } from 'react';
-interface TimelaneHeaderProps {
+export interface TimelaneHeaderProps {
     focusedDay?: Date | null;
     setFocusedDay?: (day: Date | null) => void;
     renderMonthHeader?: (firstDay: Date, lastDay: Date) => ReactElement;
@@ -21,4 +21,3 @@ interface TimelaneHeaderProps {
     }) => void;
 }
 export declare function TimelaneHeader({ focusedDay, setFocusedDay, renderMonthHeader, renderWeekHeader, renderDayHeader, onMonthClick, onDayClick, onWeekClick, }: TimelaneHeaderProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/TimelaneHeader/WeeksHeader.d.ts

@@ -1,6 +1,6 @@
 import { MouseEvent, ReactElement } from 'react';
 import { Pixels, TimeRange } from '../../types';
-interface WeeksHeaderProps {
+export interface WeeksHeaderProps {
     range: TimeRange;
     pixels: Pixels;
     setFocusedDay?: (day: Date | null) => void;
@@ -12,4 +12,3 @@ interface WeeksHeaderProps {
     }) => void;
 }
 export declare function WeeksHeader({ range, pixels, setFocusedDay, render, onWeekClick, }: WeeksHeaderProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/TimelaneHeader/index.d.ts

@@ -1,5 +1,5 @@
-export { DaysHeader } from './DaysHeader';
-export { WeeksHeader } from './WeeksHeader';
-export { MonthsHeader } from './MonthsHeader';
-export { TimelaneHeader } from './TimelaneHeader';
+export { DaysHeader, type DaysHeaderProps } from './DaysHeader';
+export { WeeksHeader, type WeeksHeaderProps } from './WeeksHeader';
+export { MonthsHeader, type MonthsHeaderProps } from './MonthsHeader';
+export { TimelaneHeader, type TimelaneHeaderProps } from './TimelaneHeader';
 export { renderDayHeader, renderMonthHeader, renderWeekHeader, } from './renderingUtils';

package/dist/components/TimelaneLane/TimelaneLane.d.ts

@@ -1,6 +1,6 @@
 import { MouseEvent, ReactElement } from 'react';
 import { AvailableSpace, Item, Lane } from '../../types';
-interface TimelaneLaneProps<T> {
+export interface TimelaneLaneProps<T> {
     lane: Lane;
     items: Item<T>[];
     focused?: boolean;
@@ -13,4 +13,3 @@ interface TimelaneLaneProps<T> {
     onResizeStart?: (data: T) => void;
 }
 export declare function TimelaneLane<T>({ lane, items, focused, onItemUpdate, onMouseUp, onClick, onDoubleClick, onContextMenu, renderItem, onResizeStart, }: TimelaneLaneProps<T>): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/TimelaneLane/TimelaneLane.stories.d.ts

@@ -0,0 +1,9 @@
+import { StoryObj } from '@storybook/react-vite';
+import { TimelaneLane } from '../TimelaneLane/TimelaneLane';
+declare const meta: {
+    component: typeof TimelaneLane;
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;

package/dist/components/{TimelaneSettingsContext.d.ts → TimelaneSettingsProvider/TimelaneSettingsContext.d.ts}

@@ -1,5 +1,5 @@
 import { Dispatch, SetStateAction } from 'react';
-import { TimelaneSettings } from '../types/';
+import { TimelaneSettings } from '../../types';
 export interface TimelaneContextOuter {
     settings: TimelaneSettings;
     setSettings: Dispatch<SetStateAction<TimelaneSettings>>;

package/dist/components/TimelaneSettingsProvider/TimelaneSettingsProvider.d.ts

@@ -0,0 +1,11 @@
+import { PropsWithChildren } from 'react';
+import { TimelaneSettings } from '../../types/TimelaneSettings';
+export interface TimelaneSettingsProviderProps {
+    settings: TimelaneSettings;
+}
+/**
+ * this is an example docstring
+ * @param param0
+ * @returns
+ */
+export declare function TimelaneSettingsProvider({ settings: _settings, children, }: PropsWithChildren<TimelaneSettingsProviderProps>): import("react/jsx-runtime").JSX.Element;

package/dist/components/TimelaneSettingsProvider/TimelaneSettingsProvider.stories.d.ts

@@ -0,0 +1,9 @@
+import { StoryObj } from '@storybook/react-vite';
+import { TimelaneSettingsProvider } from './TimelaneSettingsProvider';
+declare const meta: {
+    component: typeof TimelaneSettingsProvider;
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;

package/dist/hooks/useTimelaneContext.d.ts

@@ -1 +1 @@
-export declare const useTimelaneContext: () => import('../components/TimelaneSettingsContext').TimelaneContextOuter;
+export declare const useTimelaneContext: () => import('../components/TimelaneSettingsProvider/TimelaneSettingsContext').TimelaneContextOuter;

package/dist/index.d.ts

@@ -1,12 +1,12 @@
+export { Timelane, type TimelaneProps } from './components/Timelane/Timelane';
 export { TimelaneLayout } from './components/TimelaneLayout/TimelaneLayout';
-export { TimelaneAside } from './components/TimelaneAside';
-export { TimelaneBackground } from './components/TimelaneBackground';
-export { TimelaneLane } from './components/TimelaneLane/TimelaneLane';
-export { TimelaneBody } from './components/TimelaneBody';
-export { Timelane } from './components/Timelane';
-export { TimelaneSettingsProvider } from './components/TimelaneSettingsProvider';
+export { TimelaneAside, type TimelaneAsideProps, } from './components/TimelaneAside/TimelaneAside';
+export { TimelaneBackground, type TimelaneBackgroundProps, } from './components/TimelaneBackground/TimelaneBackground';
+export { TimelaneLane, type TimelaneLaneProps, } from './components/TimelaneLane/TimelaneLane';
+export { TimelaneBody, type TimelaneBodyProps, } from './components/TimelaneBody/TimelaneBody';
+export { TimelaneSettingsProvider, type TimelaneSettingsProviderProps, } from './components/TimelaneSettingsProvider/TimelaneSettingsProvider';
+export { TimelaneAllocation, type TimelaneAllocationProps, } from './components/TimelaneAllocation/TimelaneAllocation';
 export * from './components/TimelaneHeader';
 export * from './types';
-export * from './components/utils';
 export { useScroll } from './hooks/useScroll';
 export { useTimelaneContext } from './hooks/useTimelaneContext';

package/dist/react-timelane.css

@@ -1 +1 @@
-.timelane-layout{position:relative;width:100%;height:100%;overflow:auto}.timelane-layout .timelane-layout-inner{position:relative;width:fit-content;height:fit-content;display:grid;grid-template-areas:"corner-tl header corner-tr" "aside-l body aside-r" "corner-bl footer corner-br"}.timelane-layout .timelane-layout-inner .timelane-layout-header,.timelane-layout .timelane-layout-inner .timelane-layout-footer,.timelane-layout .timelane-layout-inner .timelane-layout-aside,.timelane-layout .timelane-layout-inner .timelane-layout-corner{background:#fff}.timelane-layout .timelane-layout-inner .timelane-layout-header{grid-area:header;position:sticky;position:-webkit-sticky;top:0;z-index:101;overflow:hidden}.timelane-layout .timelane-layout-inner .timelane-layout-body{grid-area:body;z-index:100}.timelane-layout .timelane-layout-inner .timelane-layout-background{grid-area:body;z-index:-1}.timelane-layout .timelane-layout-inner .timelane-layout-footer{grid-area:footer;position:sticky;position:-webkit-sticky;bottom:0;z-index:101;border-top:1px solid lightgray}.timelane-layout .timelane-layout-inner .timelane-layout-aside{grid-area:aside-l;position:sticky;position:-webkit-sticky;left:0;z-index:101}.timelane-layout .timelane-layout-inner .timelane-layout-aside.timelane-layout-aside-right{grid-area:aside-r;right:0;left:initial;border-left:1px solid lightgray}.timelane-layout .timelane-layout-inner .timelane-layout-corner{position:sticky;position:-webkit-sticky;z-index:102}.timelane-layout .timelane-layout-inner .timelane-layout-corner.timelane-layout-corner-top-left{grid-area:corner-tl;top:0;left:0;border-bottom:1px solid lightgray;border-right:1px solid lightgray}.timelane-layout .timelane-layout-inner .timelane-layout-corner.timelane-layout-corner-top-right{grid-area:corner-tr;top:0;right:0;border-bottom:1px solid lightgray;border-left:1px solid lightgray}.timelane-layout .timelane-layout-inner .timelane-layout-corner.timelane-layout-corner-bottom-left{grid-area:corner-bl;bottom:0;left:0;border-top:1px solid lightgray;border-right:1px solid lightgray}.timelane-layout .timelane-layout-inner .timelane-layout-corner.timelane-layout-corner-bottom-right{grid-area:corner-br;bottom:0;right:0;border-top:1px solid lightgray;border-left:1px solid lightgray}*{box-sizing:border-box}.timelane{--timelane-aside-width: 150px;--timelane-border-color-light: #f0f0f0;--timelane-border-color-normal: lightgray;--timelane-border-color-dark: gray;--timelane-highlight-color: #f8f8f8;--timelane-focused-color: rgba(0, 0, 255, .1);--timelane-hover-color: rgba(0, 0, 0, .05);overflow:auto;position:relative;width:100%;height:100%;border-left:1px solid var(--timelane-border-color-normal)}.timelane .timelane-header{top:0;z-index:101;background:#fff}.timelane .timelane-header .timelane-header-months{display:flex;flex-flow:row nowrap}.timelane .timelane-header .timelane-header-months .timelane-header-month-label{border-right:1px solid var(--timelane-border-color-normal);border-bottom:1px solid var(--timelane-border-color-normal);overflow:hidden;font-size:1em;height:30px;line-height:30px;text-align:center;cursor:pointer}.timelane .timelane-header .timelane-header-months .timelane-header-month-label:hover{background:var(--timelane-hover-color)}.timelane .timelane-header .timelane-header-weeks{display:flex;flex-flow:row nowrap}.timelane .timelane-header .timelane-header-weeks .timelane-header-week-label{border-right:1px solid var(--timelane-border-color-normal);border-bottom:1px solid var(--timelane-border-color-normal);overflow:hidden;font-size:1em;height:30px;line-height:30px;text-align:center;cursor:pointer}.timelane .timelane-header .timelane-header-weeks .timelane-header-week-label:hover{background:var(--timelane-hover-color)}.timelane .timelane-header .timelane-header-days{display:flex;flex-flow:row nowrap}.timelane .timelane-header .timelane-header-days .timelane-header-day-label{border-right:1px solid var(--timelane-border-color-normal);border-bottom:1px solid var(--timelane-border-color-normal);overflow:hidden;font-size:.8em;height:20px;line-height:20px;text-align:center;cursor:pointer}.timelane .timelane-header .timelane-header-days .timelane-header-day-label:hover{background:var(--timelane-hover-color)}.timelane .timelane-header .timelane-header-days .timelane-header-day-label.timelane-header-day-label-focused{background:var(--timelane-focused-color)}.timelane .timelane-header-corner{z-index:102;background:#fff;border-right:1px solid var(--timelane-border-color-normal);border-bottom:1px solid var(--timelane-border-color-normal)}.timelane .timelane-body{z-index:99;position:relative;width:fit-content}.timelane .timelane-body .timelane-lane{border-color:var(--timelane-border-color-normal)!important;border-top:1px solid gray;border-bottom:1px solid gray;margin-top:-1px;overflow:hidden}.timelane .timelane-body .timelane-lane .timelane-drop-target{position:relative;width:100%;height:100%}.timelane .timelane-body .timelane-lane .timelane-drop-target .timelane-item{position:absolute;cursor:pointer;border-radius:3px;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.timelane .timelane-body .timelane-lane .timelane-drop-target .timelane-item.timelane-item-marked .timelane-allocation{border:2px dashed rgba(0,0,0,.5)}.timelane .timelane-body .timelane-lane .timelane-drop-target .timelane-item .timelane-item-drag-handle{height:100%}.timelane .timelane-body .timelane-lane .timelane-drop-target .timelane-item .timelane-item-resize-handle{background:#bed7dc;border-radius:5px;top:4px!important;bottom:4px!important;height:auto!important;width:6px!important;z-index:2;background:transparent!important;transition:.2s}.timelane .timelane-body .timelane-lane .timelane-drop-target .timelane-item .timelane-item-resize-handle:hover{background:#0000001a!important}.timelane .timelane-body .timelane-lane .timelane-drop-target .timelane-item .timelane-item-resize-handle.timelane-item-resize-handle-left{left:0!important;margin-left:1px}.timelane .timelane-body .timelane-lane .timelane-drop-target .timelane-item .timelane-item-resize-handle.timelane-item-resize-handle-right{right:0!important}.timelane .timelane-body .timelane-lane .timelane-drop-target .timelane-item .timelane-allocation{background:#92a8d1;border-radius:2px;border:2px solid transparent;height:calc(100% - 1px);overflow:hidden;cursor:pointer;padding:0 4px;margin-left:1px;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;container-type:size;container-name:timelane-allocation}.timelane .timelane-body .timelane-lane .timelane-drop-target .timelane-item .timelane-allocation .timelane-allocation-title{font-weight:700;transform-origin:top left;line-height:30px;white-space:nowrap}@container timelane-allocation (max-height: 30px){.timelane .timelane-body .timelane-lane .timelane-drop-target .timelane-item .timelane-allocation .timelane-allocation-title{margin:0}}.timelane .timelane-body .timelane-lane .timelane-drop-target .timelane-item .timelane-allocation.timelane-allocation-selected{border:2px dashed rgba(0,0,0,.5)}.timelane .timelane-body .timelane-lane .timelane-drop-target .timelane-item.dragging{opacity:0}.timelane .timelane-body .timelane-lane .timelane-drop-target .timelane-drop-preview{background:#00f;position:absolute;border-radius:2px;color:#fff}.timelane .timelane-body .timelane-lane.timelane-row-focused{background:var(--timelane-focused-color)}.timelane .timelane-aside{border-right:1px solid var(--timelane-border-color-normal);width:var(--timelane-aside-width);background:#fff}.timelane .timelane-aside .timelane-aside-lane-header{border:1px solid var(--timelane-border-color-normal);border-right:none;border-left:none;margin-top:-1px;padding:10px;overflow:hidden;position:relative;cursor:pointer}.timelane .timelane-aside .timelane-aside-lane-header.timelane-aside-lane-header-focused{background:var(--timelane-focused-color)}.timelane .timelane-aside .timelane-aside-lane-header:hover .timelane-aside-resource-menu{opacity:1}.timelane .timelane-aside .timelane-aside-lane-header .timelane-aside-resource-menu{position:absolute;top:5px;right:5px;opacity:0;transition:.15s}.timelane .timelane-aside .timelane-aside-lane-header .timelane-aside-resource-menu.timelane-aside-resource-menu-open{opacity:1}.timelane .timelane-background{position:relative;width:100%;height:100%}.timelane .timelane-background .timelane-background-inner{display:flex;flex-flow:row nowrap;height:100%}.timelane .timelane-background .timelane-background-inner .timelane-background-day-label{border-right:1px solid var(--timelane-border-color-light);overflow:hidden;font-size:.8em;height:100%;z-index:-100}.timelane .timelane-background .timelane-background-inner .timelane-background-day-label.timelane-background-day-label-sunday{border-right:1px solid var(--timelane-border-color-normal)}.timelane .timelane-background .timelane-background-inner .timelane-background-day-label.timelane-background-day-label-focused{background:var(--timelane-focused-color)}.timelane .timelane-background .timelane-background-inner .timelane-background-focused-day-position{position:absolute;height:100%;background:var(--timelane-focused-color);z-index:-101}.timelane-header-tooltip,.timelane-header-day-tooltip{font-size:2em}
+.timelane-layout{position:relative;width:100%;height:100%;overflow:auto}.timelane-layout .timelane-layout-inner{position:relative;width:fit-content;height:fit-content;display:grid;grid-template-areas:"corner-tl header corner-tr" "aside-l body aside-r" "corner-bl footer corner-br"}.timelane-layout .timelane-layout-inner .timelane-layout-header,.timelane-layout .timelane-layout-inner .timelane-layout-footer,.timelane-layout .timelane-layout-inner .timelane-layout-aside,.timelane-layout .timelane-layout-inner .timelane-layout-corner{background:#fff}.timelane-layout .timelane-layout-inner .timelane-layout-header{grid-area:header;position:sticky;position:-webkit-sticky;top:0;z-index:101;overflow:hidden}.timelane-layout .timelane-layout-inner .timelane-layout-body{grid-area:body;z-index:100}.timelane-layout .timelane-layout-inner .timelane-layout-background{grid-area:body;z-index:-1}.timelane-layout .timelane-layout-inner .timelane-layout-footer{grid-area:footer;position:sticky;position:-webkit-sticky;bottom:0;z-index:101;border-top:1px solid lightgray}.timelane-layout .timelane-layout-inner .timelane-layout-aside{grid-area:aside-l;position:sticky;position:-webkit-sticky;left:0;z-index:101}.timelane-layout .timelane-layout-inner .timelane-layout-aside.timelane-layout-aside-right{grid-area:aside-r;right:0;left:initial;border-left:1px solid lightgray}.timelane-layout .timelane-layout-inner .timelane-layout-corner{position:sticky;position:-webkit-sticky;z-index:102}.timelane-layout .timelane-layout-inner .timelane-layout-corner.timelane-layout-corner-top-left{grid-area:corner-tl;top:0;left:0;border-bottom:1px solid lightgray;border-right:1px solid lightgray}.timelane-layout .timelane-layout-inner .timelane-layout-corner.timelane-layout-corner-top-right{grid-area:corner-tr;top:0;right:0;border-bottom:1px solid lightgray;border-left:1px solid lightgray}.timelane-layout .timelane-layout-inner .timelane-layout-corner.timelane-layout-corner-bottom-left{grid-area:corner-bl;bottom:0;left:0;border-top:1px solid lightgray;border-right:1px solid lightgray}.timelane-layout .timelane-layout-inner .timelane-layout-corner.timelane-layout-corner-bottom-right{grid-area:corner-br;bottom:0;right:0;border-top:1px solid lightgray;border-left:1px solid lightgray}*{box-sizing:border-box}.timelane{--timelane-aside-width: 150px;--timelane-border-color-light: #f0f0f0;--timelane-border-color-normal: lightgray;--timelane-border-color-dark: gray;--timelane-highlight-color: #f8f8f8;--timelane-focused-color: rgba(0, 0, 255, .1);--timelane-hover-color: rgba(0, 0, 0, .05);overflow:auto;position:relative;width:100%;height:100%;border:1px solid var(--timelane-border-color-normal)}.timelane .timelane-header{top:0;z-index:101;background:#fff}.timelane .timelane-header .timelane-header-months{display:flex;flex-flow:row nowrap}.timelane .timelane-header .timelane-header-months .timelane-header-month-label{border-right:1px solid var(--timelane-border-color-normal);border-bottom:1px solid var(--timelane-border-color-normal);overflow:hidden;font-size:1em;height:30px;line-height:30px;text-align:center;cursor:pointer}.timelane .timelane-header .timelane-header-months .timelane-header-month-label:hover{background:var(--timelane-hover-color)}.timelane .timelane-header .timelane-header-weeks{display:flex;flex-flow:row nowrap}.timelane .timelane-header .timelane-header-weeks .timelane-header-week-label{border-right:1px solid var(--timelane-border-color-normal);border-bottom:1px solid var(--timelane-border-color-normal);overflow:hidden;font-size:1em;height:30px;line-height:30px;text-align:center;cursor:pointer}.timelane .timelane-header .timelane-header-weeks .timelane-header-week-label:hover{background:var(--timelane-hover-color)}.timelane .timelane-header .timelane-header-days{display:flex;flex-flow:row nowrap}.timelane .timelane-header .timelane-header-days .timelane-header-day-label{border-right:1px solid var(--timelane-border-color-normal);border-bottom:1px solid var(--timelane-border-color-normal);overflow:hidden;font-size:.8em;height:20px;line-height:20px;text-align:center;cursor:pointer}.timelane .timelane-header .timelane-header-days .timelane-header-day-label:hover{background:var(--timelane-hover-color)}.timelane .timelane-header .timelane-header-days .timelane-header-day-label.timelane-header-day-label-focused{background:var(--timelane-focused-color)}.timelane .timelane-header-corner{z-index:102;background:#fff;border-right:1px solid var(--timelane-border-color-normal);border-bottom:1px solid var(--timelane-border-color-normal)}.timelane .timelane-body{z-index:99;position:relative;width:fit-content}.timelane .timelane-body .timelane-lane{border-color:var(--timelane-border-color-normal)!important;border-top:1px solid gray;border-bottom:1px solid gray;margin-top:-1px;overflow:hidden}.timelane .timelane-body .timelane-lane:last-child{margin-bottom:-1px}.timelane .timelane-body .timelane-lane .timelane-drop-target{position:relative;width:100%;height:100%}.timelane .timelane-body .timelane-lane .timelane-drop-target .timelane-item{position:absolute;cursor:pointer;border-radius:3px;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.timelane .timelane-body .timelane-lane .timelane-drop-target .timelane-item.timelane-item-marked .timelane-allocation{border:2px dashed rgba(0,0,0,.5)}.timelane .timelane-body .timelane-lane .timelane-drop-target .timelane-item .timelane-item-drag-handle{height:100%}.timelane .timelane-body .timelane-lane .timelane-drop-target .timelane-item .timelane-item-resize-handle{background:#bed7dc;border-radius:5px;top:4px!important;bottom:4px!important;height:auto!important;width:6px!important;z-index:2;background:transparent!important;transition:.2s}.timelane .timelane-body .timelane-lane .timelane-drop-target .timelane-item .timelane-item-resize-handle:hover{background:#0000001a!important}.timelane .timelane-body .timelane-lane .timelane-drop-target .timelane-item .timelane-item-resize-handle.timelane-item-resize-handle-left{left:0!important;margin-left:1px}.timelane .timelane-body .timelane-lane .timelane-drop-target .timelane-item .timelane-item-resize-handle.timelane-item-resize-handle-right{right:0!important}.timelane .timelane-body .timelane-lane .timelane-drop-target .timelane-item .timelane-allocation{background:#92a8d1;border-radius:2px;border:2px solid transparent;height:calc(100% - 1px);overflow:hidden;cursor:pointer;padding:0 4px;margin-left:1px;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;container-type:size;container-name:timelane-allocation}.timelane .timelane-body .timelane-lane .timelane-drop-target .timelane-item .timelane-allocation .timelane-allocation-title{font-weight:700;transform-origin:top left;line-height:30px;white-space:nowrap}@container timelane-allocation (max-height: 30px){.timelane .timelane-body .timelane-lane .timelane-drop-target .timelane-item .timelane-allocation .timelane-allocation-title{margin:0}}.timelane .timelane-body .timelane-lane .timelane-drop-target .timelane-item .timelane-allocation.timelane-allocation-selected{border:2px dashed rgba(0,0,0,.5)}.timelane .timelane-body .timelane-lane .timelane-drop-target .timelane-item.dragging{opacity:0}.timelane .timelane-body .timelane-lane .timelane-drop-target .timelane-drop-preview{background:#00f;position:absolute;border-radius:2px;color:#fff}.timelane .timelane-body .timelane-lane.timelane-row-focused{background:var(--timelane-focused-color)}.timelane .timelane-aside{border-right:1px solid var(--timelane-border-color-normal);width:var(--timelane-aside-width);background:#fff}.timelane .timelane-aside .timelane-aside-lane-header{border:1px solid var(--timelane-border-color-normal);border-right:none;border-left:none;margin-top:-1px;padding:10px;overflow:hidden;position:relative;cursor:pointer}.timelane .timelane-aside .timelane-aside-lane-header.timelane-aside-lane-header-focused{background:var(--timelane-focused-color)}.timelane .timelane-aside .timelane-aside-lane-header:hover .timelane-aside-resource-menu{opacity:1}.timelane .timelane-aside .timelane-aside-lane-header .timelane-aside-resource-menu{position:absolute;top:5px;right:5px;opacity:0;transition:.15s}.timelane .timelane-aside .timelane-aside-lane-header .timelane-aside-resource-menu.timelane-aside-resource-menu-open{opacity:1}.timelane .timelane-background{position:relative;width:100%;height:100%}.timelane .timelane-background .timelane-background-inner{display:flex;flex-flow:row nowrap;height:100%}.timelane .timelane-background .timelane-background-inner .timelane-background-day-label{border-right:1px solid var(--timelane-border-color-light);overflow:hidden;font-size:.8em;height:100%;z-index:-100}.timelane .timelane-background .timelane-background-inner .timelane-background-day-label.timelane-background-day-label-sunday{border-right:1px solid var(--timelane-border-color-normal)}.timelane .timelane-background .timelane-background-inner .timelane-background-day-label.timelane-background-day-label-focused{background:var(--timelane-focused-color)}.timelane .timelane-background .timelane-background-inner .timelane-background-focused-day-position{position:absolute;height:100%;background:var(--timelane-focused-color);z-index:-101}.timelane-header-tooltip,.timelane-header-day-tooltip{font-size:2em}