react-timelane 0.0.2 → 0.0.4

package/README.md

@@ -1,54 +1,144 @@
-# React + TypeScript + Vite
-
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
-
-Currently, two official plugins are available:
-
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
-
-```js
-export default tseslint.config({
-  extends: [
-    // Remove ...tseslint.configs.recommended and replace with this
-    ...tseslint.configs.recommendedTypeChecked,
-    // Alternatively, use this for stricter rules
-    ...tseslint.configs.strictTypeChecked,
-    // Optionally, add this for stylistic rules
-    ...tseslint.configs.stylisticTypeChecked,
-  ],
-  languageOptions: {
-    // other options...
-    parserOptions: {
-      project: ['./tsconfig.node.json', './tsconfig.app.json'],
-      tsconfigRootDir: import.meta.dirname,
-    },
-  },
-})
+# react-timelane
+
+A React/TypeScript library to build timelines / horizontally scrollable calendars with multiple lanes.
+
+## Features
+
+react-timelane has a particular focus on usability and comes with many neat features:
+
+- item drag and drop
+- item resizing
+- jump (scroll) to point in time, lane or item
+- item selection via mouse range
+
+## Demo
+
+https://dhansmair.github.io/react-timelane
+
+## Installation
+
+```bash
+npm install react-timelane
 ```
 
-You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
-
-```js
-// eslint.config.js
-import reactX from 'eslint-plugin-react-x'
-import reactDom from 'eslint-plugin-react-dom'
-
-export default tseslint.config({
-  plugins: {
-    // Add the react-x and react-dom plugins
-    'react-x': reactX,
-    'react-dom': reactDom,
-  },
-  rules: {
-    // other rules...
-    // Enable its recommended typescript rules
-    ...reactX.configs['recommended-typescript'].rules,
-    ...reactDom.configs.recommended.rules,
-  },
-})
+## Code Example
+
+see `docs/src/components/MyTimelane.tsx` for the full example:
+
+```typescript
+import { addDays, min } from "date-fns";
+import { useState, type MouseEvent } from "react";
+import {
+  type AvailableSpace,
+  type Lane,
+  type Item,
+  type ItemId,
+  type TimelaneSettings,
+  TimelaneSettingsProvider,
+  useScroll,
+} from "react-timelane";
+import type Allocation from "../models/Allocation";
+import type Resource from "../models/Resource";
+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[];
+  allocations: Allocation[];
+  onAllocationCreate: (allocation: Allocation) => void;
+  onAllocationUpdate: (allocation: Allocation) => void;
+}
+
+function MyTimelane({
+  resources,
+  allocations,
+  onAllocationCreate,
+  onAllocationUpdate,
+}: MyTimelaneProps) {
+  const [selection, setSelection] = useState<ItemId[]>([]);
+
+  const lanes: Lane[] = resources.map((resource) => ({
+    id: resource.id,
+    capacity: resource.capacity,
+  }));
+
+  const items: Item<Allocation>[] = allocations.map((allocation) => ({
+    id: allocation.id,
+    laneId: allocation.resourceId,
+    start: allocation.start,
+    end: allocation.end,
+    size: allocation.size,
+    offset: allocation.offset,
+    payload: allocation,
+  }));
+
+  function handleItemUpdate(item: Item<Allocation>) {
+    const updatedAllocation: Allocation = {
+      ...item.payload,
+      resourceId: item.laneId,
+      start: item.start,
+      end: item.end,
+      size: item.size,
+      offset: item.offset,
+    };
+
+    onAllocationUpdate(updatedAllocation);
+  }
+
+  return (
+    <TL.Container>
+      <TL.Header
+        onDayClick={({ day }) => {
+          console.log("day clicked", day);
+        }}
+        onMonthClick={({ firstDay }) => {
+          console.log("month clicked", firstDay);
+        }}
+        onWeekClick={({ firstDay }) => {
+          console.log("week clicked", firstDay);
+        }}
+      />
+      <TL.Body
+        onSelect={(selection) => {
+          setSelection(selection);
+        }}
+      >
+        {lanes.map((lane) => (
+          <TL.Lane
+            key={lane.id}
+            lane={lane}
+            items={items.filter((item) => item.laneId === lane.id)}
+            onItemUpdate={handleItemUpdate}
+            renderItem={(item, isDragged) => (
+              <AllocationComponent
+                allocation={item.payload}
+                isDragged={isDragged}
+                isSelected={selection.includes(item.id)}
+              />
+            )}
+          />
+        ))}
+      </TL.Body>
+      <TL.Background />
+      <TL.Aside
+        lanes={lanes}
+        renderLaneHeader={(lane) => <div>{lane.id}</div>}
+      />
+      <TL.Layout.Corner />
+    </TL.Container>
+  );
+}
 ```

package/dist/components/Timelane.d.ts

@@ -1,5 +1,7 @@
 import { PropsWithChildren } from 'react';
-import { CoreSwimlane, TimelaneBody, TimelaneLayout } from '..';
+import { TimelaneLane } from './TimelaneLane/TimelaneLane';
+import { TimelaneBody } from './TimelaneBody';
+import { TimelaneLayout } from './TimelaneLayout/TimelaneLayout';
 import { TimelaneHeader } from './TimelaneHeader/TimelaneHeader';
 import { TimelaneBackground } from './TimelaneBackground';
 import { TimelaneAside } from './TimelaneAside';
@@ -10,6 +12,6 @@ export declare namespace Timelane {
     var Body: typeof TimelaneBody;
     var Background: typeof TimelaneBackground;
     var Aside: typeof TimelaneAside;
-    var Lane: typeof CoreSwimlane;
+    var Lane: typeof TimelaneLane;
     var Layout: typeof TimelaneLayout;
 }

package/dist/components/TimelaneAside.d.ts

@@ -1,13 +1,13 @@
 import { MouseEvent, ReactElement } from 'react';
-import { SwimlaneT } from '../types';
+import { Lane } from '../types';
 interface TimelaneAsideProps {
-    lanes: SwimlaneT[];
-    focusedLane?: SwimlaneT | null;
-    setFocusedLane?: (lane: SwimlaneT | null) => void;
-    onLaneHeaderClick?: (lane: SwimlaneT, e: MouseEvent) => void;
-    onLaneHeaderDoubleClick?: (lane: SwimlaneT, e: MouseEvent) => void;
-    onLaneHeaderContextMenu?: (lane: SwimlaneT, e: MouseEvent) => void;
-    renderLaneHeader?: (lane: SwimlaneT) => ReactElement;
+    lanes: Lane[];
+    focusedLane?: Lane | null;
+    setFocusedLane?: (lane: Lane | null) => void;
+    onLaneHeaderClick?: (lane: Lane, e: MouseEvent) => void;
+    onLaneHeaderDoubleClick?: (lane: Lane, e: MouseEvent) => void;
+    onLaneHeaderContextMenu?: (lane: Lane, e: MouseEvent) => void;
+    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/TimelaneBodyInner.d.ts

@@ -1,13 +1,13 @@
 import { MouseEvent, ReactElement } from 'react';
-import { AvailableSpace, CoreItem, SwimlaneT } from '../types';
+import { AvailableSpace, Item, Lane } from '../types';
 interface TimelaneBodyInnerProps<T> {
-    lanes: SwimlaneT[];
-    items: CoreItem<T>[];
-    renderItem?: (item: CoreItem<T>, isDragged: boolean) => ReactElement;
-    onItemUpdate?: (item: CoreItem<T>) => void;
-    onLaneClick?: (lane: SwimlaneT, when: Date, availableSpace: AvailableSpace | null, e: MouseEvent) => void;
-    onLaneDoubleClick?: (lane: SwimlaneT, when: Date, availableSpace: AvailableSpace | null, e: MouseEvent) => void;
-    onLaneContextMenu?: (lane: SwimlaneT, when: Date, e: MouseEvent) => void;
+    lanes: Lane[];
+    items: Item<T>[];
+    renderItem?: (item: Item<T>, isDragged: boolean) => ReactElement;
+    onItemUpdate?: (item: Item<T>) => void;
+    onLaneClick?: (lane: Lane, when: Date, availableSpace: AvailableSpace | null, e: MouseEvent) => void;
+    onLaneDoubleClick?: (lane: Lane, when: Date, availableSpace: AvailableSpace | null, e: MouseEvent) => void;
+    onLaneContextMenu?: (lane: Lane, when: Date, e: MouseEvent) => void;
 }
 /**
  * @deprecated The component should not be used

package/dist/components/{core/CoreItem → TimelaneItem}/DragResizeComponent.d.ts

@@ -1,7 +1,7 @@
 import { PropsWithChildren } from 'react';
-import { Position, Rectangle, Dimensions, CoreItem } from '../../../types';
+import { Position, Rectangle, Dimensions, Item } from '../../types';
 interface DragResizeComponentProps<T> {
-    item: CoreItem<T>;
+    item: Item<T>;
     rectangle: Rectangle;
     boundingRectangle: Dimensions;
     onDragStart: (grabPosition: Position, relativeGrabPosition: Position) => void;

package/dist/components/TimelaneItem/TimelaneItem.d.ts

@@ -0,0 +1,14 @@
+import { PropsWithChildren } from 'react';
+import { Item, Position, Lane, TimelaneSettings } from '../../types';
+interface TimelaneItemProps<T> {
+    item: Item<T>;
+    lane: Lane;
+    settings: TimelaneSettings;
+    onDragStart: (grabPosition: Position, relativeGrabPosition: Position) => void;
+    onDrop: () => void;
+    onDrag: () => void;
+    onUpdate: (updatedItem: Item<T>) => void;
+    onResizeStart: () => void;
+}
+export default function TimelaneItem<T>({ lane, item, settings, children, onDragStart, onDrag, onDrop, onUpdate, onResizeStart, }: PropsWithChildren<TimelaneItemProps<T>>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/{core/CoreSwimlane → TimelaneLane}/AvailableSpaceIndicator.d.ts

@@ -1,11 +1,11 @@
 import { PropsWithChildren } from 'react';
-import { CoreItem, Pixels, SwimlaneT, TimeRange } from '../../../types';
+import { Item, Pixels, Lane, TimeRange } from '../../types';
 interface AvailableSpaceIndicatorProps<T> {
     pixels: Pixels;
     range: TimeRange;
-    swimlane: SwimlaneT;
+    lane: Lane;
     debug: boolean;
-    items: CoreItem<T>[];
+    items: Item<T>[];
 }
 /**
  * A component that displays the available space at the mouse cursor position.
@@ -17,5 +17,5 @@ interface AvailableSpaceIndicatorProps<T> {
  * @param param0
  * @returns
  */
-export default function AvailableSpaceIndicator<T>({ pixels, range, swimlane, items, debug, children, }: PropsWithChildren<AvailableSpaceIndicatorProps<T>>): import("react/jsx-runtime").JSX.Element;
+export default function AvailableSpaceIndicator<T>({ pixels, range, lane, items, debug, children, }: PropsWithChildren<AvailableSpaceIndicatorProps<T>>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/{core/CoreSwimlane → TimelaneLane}/DropTarget.d.ts

@@ -1,5 +1,5 @@
 import { PropsWithChildren } from 'react';
-import { GrabInfo, Position } from '../../../types';
+import { GrabInfo, Position } from '../../types';
 interface DropTargetProps {
     onDragStart?: (mousePos: Position, grabInfo: GrabInfo, data: any) => void;
     onDrag?: (mousePos: Position, grabInfo: GrabInfo, data: any) => void;

package/dist/components/{core/CoreSwimlane → TimelaneLane}/OverlapIndicator.d.ts

@@ -1,4 +1,4 @@
-import { Rectangle } from '../../../types';
+import { Rectangle } from '../../types';
 interface OverlapIndicatorProps {
     overlap: Rectangle;
 }

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

@@ -0,0 +1,16 @@
+import { MouseEvent, ReactElement } from 'react';
+import { AvailableSpace, Item, Lane } from '../../types';
+interface TimelaneLaneProps<T> {
+    lane: Lane;
+    items: Item<T>[];
+    focused?: boolean;
+    onItemUpdate?: (item: Item<T>) => void;
+    onMouseUp?: (e: MouseEvent) => void;
+    onClick?: (when: Date, availableSpace: AvailableSpace | null, e: MouseEvent) => void;
+    onDoubleClick?: (when: Date, availableSpace: AvailableSpace | null, e: MouseEvent) => void;
+    onContextMenu?: (when: Date, e: MouseEvent) => void;
+    renderItem?: (item: Item<T>, isDragged: boolean) => ReactElement;
+    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/TimelaneSettingsContext.d.ts

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

package/dist/components/TimelaneWrapper.d.ts

@@ -1,8 +1,8 @@
 import { PropsWithChildren } from 'react';
-import { SwimlaneT } from '../types';
+import { Lane } from '../types';
 interface TimelaneWrapperProps {
     focusedDay?: Date | null;
-    focusedSwimlane?: SwimlaneT | null;
+    focusedLane?: Lane | null;
     start?: Date;
     end?: Date;
     pixelsPerDay?: number;

package/dist/components/utils.d.ts

@@ -0,0 +1,27 @@
+import { DragLocationHistory, ElementDragPayload } from '@atlaskit/pragmatic-drag-and-drop/dist/types/internal-types';
+import { Item, Dimensions, Pixels, Position, Rectangle, Lane, TimeRange, AvailableSpace, GrabInfo, Grid } from '../types';
+export declare function getDropTargetDimensions(lane: Lane, pixels: Pixels, range: TimeRange): Dimensions;
+export declare function getDropTargetHeight(lane: Lane, pixels: Pixels): number;
+export declare function getDropTargetWidth(lane: Lane, pixels: Pixels, range: TimeRange): number;
+export declare function getItemRectangle<T>(item: Item<T>, lane: Lane, range: TimeRange, pixels: Pixels): Rectangle;
+export declare function getItemDimensions<T>(item: Item<T>, lane: Lane, pixels: Pixels): Dimensions;
+export declare function dateToPixel(date: Date, start: Date, pixels: Pixels): number;
+export declare function offsetToPixel(offset: number, capacity: number, pixels: Pixels): number;
+export declare function getItemPosition<T>(item: Item<T>, lane: Lane, start: Date, pixels: Pixels): Position;
+export declare function getGrabPosition(source: ElementDragPayload, location: DragLocationHistory): {
+    absolute: Position;
+    relative: Position;
+};
+export declare function getUpdatedItem<T>(oldItem: Item<T>, lane: Lane, dropPreviewRect: Rectangle, pixels: Pixels, range: TimeRange): Item<T>;
+export declare function getDropPreviewRectangle<S, T>(lane: Lane, items: Item<T>[], item: Item<S>, mousePosition: Position | null, grabInfo: GrabInfo, pixels: Pixels, grid: Grid, range: TimeRange, allowOverlaps: boolean): Rectangle | null;
+/**
+ * Returns true if two rectangles (l1, r1) and (l2, r2) overlap
+ * @param a
+ * @param b
+ * @returns
+ */
+export declare function doOverlap(a: Rectangle, b: Rectangle): boolean;
+export declare function getOverlap(a: Rectangle, b: Rectangle): Rectangle | null;
+export declare function itemsDoOverlap<T>(a: Item<T>, b: Item<T>): boolean;
+export declare function isWithinTargetDimensions(item: Rectangle, targetDimensions: Dimensions): boolean;
+export declare function getAvailableSpace<T>(clickedDate: Date, clickedOffset: number, lane: Lane, items: Item<T>[], range: TimeRange): AvailableSpace | null;

package/dist/hooks/useScroll.d.ts

@@ -1,10 +1,10 @@
-import { ItemId, SwimlaneId } from '../types';
+import { ItemId, LaneId } from '../types';
 export declare const useScroll: () => {
     scrollTo: (destination: {
         horz?: Date;
-        vert?: SwimlaneId;
+        vert?: LaneId;
     } | ItemId) => void;
     scrollToDate: (date: Date) => void;
     scrollToItem: (itemId: ItemId) => void;
-    scrollToLane: (laneId: SwimlaneId) => void;
+    scrollToLane: (laneId: LaneId) => void;
 };

package/dist/index.d.ts

@@ -1,13 +1,12 @@
-export { TimelaneLayout } from './components/layout/TimelaneLayout';
+export { TimelaneLayout } from './components/TimelaneLayout/TimelaneLayout';
 export { TimelaneAside } from './components/TimelaneAside';
 export { TimelaneBackground } from './components/TimelaneBackground';
-export { CoreSwimlane } from './components/core/CoreSwimlane/CoreSwimlane';
+export { TimelaneLane } from './components/TimelaneLane/TimelaneLane';
 export { TimelaneBody } from './components/TimelaneBody';
 export { Timelane } from './components/Timelane';
 export { TimelaneSettingsProvider } from './components/TimelaneSettingsProvider';
 export * from './components/TimelaneHeader';
 export * from './types';
-export * from './components/core/utils';
-export * from './components/core/CoreSwimlane/utils';
+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-swimlane{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-swimlane .timelane-drop-target{position:relative;width:100%;height:100%}.timelane .timelane-body .timelane-swimlane .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-swimlane .timelane-drop-target .timelane-item.timelane-item-marked .timelane-allocation{border:2px dashed rgba(0,0,0,.5)}.timelane .timelane-body .timelane-swimlane .timelane-drop-target .timelane-item .timelane-item-drag-handle{height:100%}.timelane .timelane-body .timelane-swimlane .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-swimlane .timelane-drop-target .timelane-item .timelane-item-resize-handle:hover{background:#0000001a!important}.timelane .timelane-body .timelane-swimlane .timelane-drop-target .timelane-item .timelane-item-resize-handle.timelane-item-resize-handle-left{left:0!important;margin-left:1px}.timelane .timelane-body .timelane-swimlane .timelane-drop-target .timelane-item .timelane-item-resize-handle.timelane-item-resize-handle-right{right:0!important}.timelane .timelane-body .timelane-swimlane .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-swimlane .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-swimlane .timelane-drop-target .timelane-item .timelane-allocation .timelane-allocation-title{margin:0}}.timelane .timelane-body .timelane-swimlane .timelane-drop-target .timelane-item .timelane-allocation.timelane-allocation-selected{border:2px dashed rgba(0,0,0,.5)}.timelane .timelane-body .timelane-swimlane .timelane-drop-target .timelane-item.dragging{opacity:0}.timelane .timelane-body .timelane-swimlane .timelane-drop-target .timelane-drop-preview{background:#00f;position:absolute;border-radius:2px;color:#fff}.timelane .timelane-body .timelane-swimlane.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-swimlane-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-swimlane-header.timelane-aside-swimlane-header-focused{background:var(--timelane-focused-color)}.timelane .timelane-aside .timelane-aside-swimlane-header:hover .timelane-aside-resource-menu{opacity:1}.timelane .timelane-aside .timelane-aside-swimlane-header .timelane-aside-resource-menu{position:absolute;top:5px;right:5px;opacity:0;transition:.15s}.timelane .timelane-aside .timelane-aside-swimlane-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-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}