@redvars/peacock 3.6.2 → 3.7.0

package/dist/calendar-column-view.js.map

@@ -1 +1 @@
-{"version":3,"file":"calendar-column-view.js","sources":["../../src/calendar/calendar-column-view.ts"],"sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport {\n  addDays,\n  addHours,\n  differenceInDays,\n  startOfDay,\n  endOfDay,\n  calculateDateRange,\n  formatDate,\n  getTimePercent,\n  LONG_EVENT_PADDING,\n} from './utils.js';\nimport { BaseEvent } from './base-event.js';\nimport { CalendarEvent } from './calendar-event.js';\nimport { EventManager } from './event-manager.js';\nimport type { ColumnEvent } from './event-manager.js';\nimport IndividualComponent from '@/IndividualComponent.js';\nimport styles from './calendar-column-view.scss';\n\n/**\n * @label Calendar Column View\n * @tag wc-calendar-column-view\n * @rawTag calendar-column-view\n * @parentRawTag calendar\n * @summary Internal column view component for the calendar (day/week views).\n */\n@IndividualComponent\nexport class CalendarColumnView extends LitElement {\n  static styles = [styles];\n\n  @property({ type: Array })\n  events: CalendarEvent[] = [];\n\n  @property({ type: String })\n  view: string = 'week';\n\n  @property({ type: Number })\n  days: number = 7;\n\n  @property({ type: Boolean, attribute: 'event-clickable' })\n  eventClickable: boolean = true;\n\n  @property({ type: Object, attribute: false })\n  currentTime: Date = new Date();\n\n  @property({ type: Object, attribute: false })\n  contextDate: Date = new Date();\n\n  @state()\n  private dateRange: any = {};\n\n  @state()\n  private singleDayEvents: Record<string, ColumnEvent[][]> = {};\n\n  @state()\n  private multiDayEvents: ColumnEvent[][] = [];\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this._processEvents();\n  }\n\n  override willUpdate(changedProperties: Map<string, unknown>) {\n    if (\n      changedProperties.has('events') ||\n      changedProperties.has('contextDate') ||\n      changedProperties.has('view') ||\n      changedProperties.has('days')\n    ) {\n      this._processEvents();\n    }\n  }\n\n  override firstUpdated() {\n    const viewBody = this.renderRoot.querySelector('.view-body');\n    if (viewBody) {\n      const viewBodyHeight = viewBody.scrollHeight;\n      viewBody.scrollTo({\n        top:\n          (getTimePercent(this.currentTime) / 100) * viewBodyHeight - 150,\n      });\n    }\n  }\n\n  private _processEvents() {\n    this.dateRange = calculateDateRange(this.view, this.contextDate, this.days);\n    this.singleDayEvents = {};\n\n    this._forEachDayInRange(i => {\n      const manager = new EventManager();\n      manager.addEvents(\n        this.events.filter(\n          event =>\n            event.isOverlapping(new BaseEvent(startOfDay(i), endOfDay(i))) &&\n            event.length() < 86400000,\n        ),\n      );\n      manager.process();\n      this.singleDayEvents[this._getDateOnly(i)] = manager.columns;\n    });\n\n    const multiManager = new EventManager();\n    multiManager.addEvents(\n      this.events.filter(\n        event =>\n          event.isOverlapping(\n            new BaseEvent(this.dateRange.startDate, this.dateRange.endDate),\n          ) && event.length() >= 86400000,\n      ),\n    );\n    multiManager.process();\n    this.multiDayEvents = multiManager.columns;\n  }\n\n  private _forEachDayInRange(callback: (d: Date) => void) {\n    for (\n      let i = new Date(this.dateRange.startDate);\n      differenceInDays(startOfDay(this.dateRange.endDate), i) >= 0;\n      i = addDays(i, 1)\n    ) {\n      callback(i);\n    }\n  }\n\n  private _getDateOnly(date: Date): string {\n    return formatDate(date, 'dd-MM-yyyy');\n  }\n\n  private _getDatePercent(date: Date): number {\n    const currentDay = differenceInDays(\n      startOfDay(date),\n      this.dateRange.startDate,\n    );\n    const percent = (currentDay / this.dateRange.totalDays) * 100;\n    if (percent < 0) return 0;\n    if (percent > 100) return 100;\n    return percent;\n  }\n\n  private _getDayClass(date: Date): string {\n    const diff = differenceInDays(startOfDay(date), startOfDay(this.currentTime));\n    if (diff === 0) return 'column today';\n    if (diff < 0) return 'column past';\n    return 'column future';\n  }\n\n  private _populateColorVars(\n    styles: Record<string, string>,\n    color: string,\n  ) {\n    styles['--calendar-event-bg-color'] = `var(--color-${color}-container)`;\n    styles['--calendar-event-bg-color--hover'] = `var(--color-inverse-${color})`;\n    styles['--calendar-event-border-color'] = `var(--color-${color})`;\n    styles['--calendar-event-text-color'] = `var(--color-on-${color}-container)`;\n    styles['--calendar-event-text-color--hover'] = `var(--color-on-${color})`;\n  }\n\n  private _emitDateClick(date: Date) {\n    this.dispatchEvent(\n      new CustomEvent('column-view-date-click', {\n        detail: { date },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private _emitEventClick(event: any) {\n    this.dispatchEvent(\n      new CustomEvent('column-view-event-click', {\n        detail: { event },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private _renderHeader() {\n    const columns: any[] = [];\n    this._forEachDayInRange(i => {\n      columns.push(html`\n        <div class=${this._getDayClass(i)}>\n          <div class=\"column-content\">\n            <div\n              class=\"date\"\n              @click=${() => this._emitDateClick(i)}\n            >\n              ${formatDate(i, 'dd')}\n            </div>\n            <div class=\"day\">${formatDate(i, 'E')}</div>\n          </div>\n        </div>\n      `);\n    });\n    return columns;\n  }\n\n  private _renderMultiDayBackground() {\n    const columns: any[] = [];\n    this._forEachDayInRange(i => {\n      columns.push(html`<div class=${this._getDayClass(i)}></div>`);\n    });\n    return columns;\n  }\n\n  private _renderScale() {\n    const rows: any[] = [];\n    for (let i = 0; i < 48; i++) {\n      const cls = i % 2 ? 'row hour' : 'row';\n      const sd = startOfDay(new Date());\n      rows.push(html`\n        <div class=${cls}>\n          ${i % 2 === 0 && i\n            ? html`<div class=\"time\">${formatDate(addHours(sd, i / 2), 'hh a')}</div>`\n            : nothing}\n        </div>\n      `);\n    }\n    return html`<div class=\"background\">${rows}</div>`;\n  }\n\n  private _renderBackgroundGrid() {\n    const rows: any[] = [];\n    for (let i = 0; i < 48; i++) {\n      const cls = i % 2 ? 'row hour' : 'row';\n      const columns: any[] = [];\n      this._forEachDayInRange(d => {\n        columns.push(html`<div class=${this._getDayClass(d)}></div>`);\n      });\n      rows.push(html`<div class=${cls}>${columns}</div>`);\n    }\n    return html`<div class=\"background\">${rows}</div>`;\n  }\n\n  private _renderEvents() {\n    const columns: any[] = [];\n    this._forEachDayInRange(i => {\n      const cls = this._getDayClass(i);\n      const eventDay = this.singleDayEvents[this._getDateOnly(i)];\n      columns.push(html`\n        <div class=${cls}>\n          <div class=\"column-content\">\n            ${eventDay\n              ? eventDay.map((nodes, columnIndex) =>\n                  nodes.map(node => {\n                    const evtCls = this.eventClickable\n                      ? 'event clickable'\n                      : 'event';\n                    const evtStyles: Record<string, string> = {\n                      top: `${getTimePercent(node.start, startOfDay(i))}%`,\n                      height: `${getTimePercent(node.end, startOfDay(i)) - getTimePercent(node.start, startOfDay(i))}%`,\n                      left: `${(columnIndex / eventDay.length) * 100}%`,\n                      width: `calc(${((1 * node.width) / eventDay.length) * 100}% - 1px)`,\n                    };\n                    if (node.color) {\n                      this._populateColorVars(evtStyles, node.color);\n                    }\n                    return html`\n                      <div\n                        class=${evtCls}\n                        style=${this._styleMap(evtStyles)}\n                        @click=${() => {\n                          if (this.eventClickable) this._emitEventClick(node.data);\n                        }}\n                      >\n                        <div class=\"event-title\">\n                          ${node.title || '(no title)'}\n                        </div>\n                      </div>\n                    `;\n                  }),\n                )\n              : nothing}\n          </div>\n        </div>\n      `);\n    });\n    return html`<div class=\"events-container\">${columns}</div>`;\n  }\n\n  private _renderMultiDayEvents() {\n    if (!this.multiDayEvents || !this.multiDayEvents.length) return nothing;\n    return html`\n      <div class=\"row-content\">\n        ${this.multiDayEvents.map(\n          nodes => html`\n            <div class=\"row\">\n              ${nodes.map(node => {\n                const evtCls = this.eventClickable\n                  ? 'event clickable'\n                  : 'event';\n                const evtStyles: Record<string, string> = {\n                  left: `${this._getDatePercent(node.start) + LONG_EVENT_PADDING}%`,\n                  width: `${this._getDatePercent(addDays(node.end, 1)) - this._getDatePercent(node.start) - 2 * LONG_EVENT_PADDING}%`,\n                };\n                if (node.color) {\n                  this._populateColorVars(evtStyles, node.color);\n                }\n                return html`\n                  <div\n                    class=${evtCls}\n                    style=${this._styleMap(evtStyles)}\n                    @click=${() => {\n                      if (this.eventClickable) this._emitEventClick(node.data);\n                    }}\n                  >\n                    <div class=\"event-title\">\n                      ${node.title || '(no title)'}\n                    </div>\n                  </div>\n                `;\n              })}\n            </div>\n          `,\n        )}\n        <div class=\"row-spacer\"></div>\n      </div>\n    `;\n  }\n\n  private _renderCurrentTime() {\n    if (\n      this.currentTime.valueOf() < this.dateRange.startDate?.valueOf() - 1 ||\n      this.currentTime.valueOf() > this.dateRange.endDate?.valueOf() + 1\n    ) {\n      return nothing;\n    }\n    return html`\n      <div\n        class=\"current-time-line\"\n        style=\"top: calc(${getTimePercent(this.currentTime)}% - 1px)\"\n      >\n        <div class=\"time\">${formatDate(this.currentTime, 'hh:mm a')}</div>\n        <div\n          class=\"dash-line\"\n          style=\"width: ${this._getDatePercent(this.currentTime)}%\"\n        ></div>\n        <div\n          class=\"dot\"\n          style=\"left: calc(${this._getDatePercent(this.currentTime)}% - 0.25rem)\"\n        ></div>\n        <div\n          class=\"line\"\n          style=\"left: ${this._getDatePercent(this.currentTime)}%; width: ${(1 / this.dateRange.totalDays) * 100}%\"\n        ></div>\n      </div>\n    `;\n  }\n\n  private _styleMap(styles: Record<string, string>): string {\n    return Object.entries(styles)\n      .map(([k, v]) => `${k}:${v}`)\n      .join(';');\n  }\n\n  render() {\n    return html`\n      <div class=\"calendar-column-view\">\n        <div class=\"view-header\">\n          <div class=\"scale\"></div>\n          <div class=\"columns\">${this._renderHeader()}</div>\n          <div class=\"scrollbar-placeholder\"></div>\n        </div>\n        <div class=\"multi-day-section-wrapper\">\n          <div class=\"multi-day-section-scroll\">\n            <div class=\"multi-day-section\">\n              <div class=\"multi-day-background\">\n                <div class=\"scale\"></div>\n                <div class=\"columns\">\n                  ${this._renderMultiDayBackground()}\n                </div>\n              </div>\n              <div class=\"multi-events\">\n                ${this._renderMultiDayEvents()}\n              </div>\n            </div>\n          </div>\n        </div>\n        <div class=\"view-body\">\n          <div class=\"view-body-scroll\">\n            <div class=\"scale\">${this._renderScale()}</div>\n            <div class=\"drawing-area\">\n              ${this._renderBackgroundGrid()} ${this._renderEvents()}\n            </div>\n            ${this._renderCurrentTime()}\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n"],"names":["LitElement","html","nothing","styles","property","state"],"mappings":"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"}
+{"version":3,"file":"calendar-column-view.js","sources":["../../src/calendar/calendar-column-view.ts"],"sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport {\n  addDays,\n  addHours,\n  differenceInDays,\n  startOfDay,\n  endOfDay,\n  calculateDateRange,\n  formatDate,\n  getTimePercent,\n  LONG_EVENT_PADDING,\n} from './utils.js';\nimport { BaseEvent } from './base-event.js';\nimport { CalendarEvent } from './calendar-event.js';\nimport { EventManager } from './event-manager.js';\nimport type { ColumnEvent } from './event-manager.js';\nimport IndividualComponent from '@/IndividualComponent.js';\nimport styles from './calendar-column-view.scss';\n\n/**\n * @label Calendar Column View\n * @tag wc-calendar-column-view\n * @rawTag calendar-column-view\n * @summary Internal column view component for the calendar (day/week views).\n */\n@IndividualComponent\nexport class CalendarColumnView extends LitElement {\n  static styles = [styles];\n\n  @property({ type: Array })\n  events: CalendarEvent[] = [];\n\n  @property({ type: String })\n  view: string = 'week';\n\n  @property({ type: Number })\n  days: number = 7;\n\n  @property({ type: Boolean, attribute: 'event-clickable' })\n  eventClickable: boolean = true;\n\n  @property({ type: Object, attribute: false })\n  currentTime: Date = new Date();\n\n  @property({ type: Object, attribute: false })\n  contextDate: Date = new Date();\n\n  @state()\n  private dateRange: any = {};\n\n  @state()\n  private singleDayEvents: Record<string, ColumnEvent[][]> = {};\n\n  @state()\n  private multiDayEvents: ColumnEvent[][] = [];\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this._processEvents();\n  }\n\n  override willUpdate(changedProperties: Map<string, unknown>) {\n    if (\n      changedProperties.has('events') ||\n      changedProperties.has('contextDate') ||\n      changedProperties.has('view') ||\n      changedProperties.has('days')\n    ) {\n      this._processEvents();\n    }\n  }\n\n  override firstUpdated() {\n    const viewBody = this.renderRoot.querySelector('.view-body');\n    if (viewBody) {\n      const viewBodyHeight = viewBody.scrollHeight;\n      viewBody.scrollTo({\n        top:\n          (getTimePercent(this.currentTime) / 100) * viewBodyHeight - 150,\n      });\n    }\n  }\n\n  private _processEvents() {\n    this.dateRange = calculateDateRange(this.view, this.contextDate, this.days);\n    this.singleDayEvents = {};\n\n    this._forEachDayInRange(i => {\n      const manager = new EventManager();\n      manager.addEvents(\n        this.events.filter(\n          event =>\n            event.isOverlapping(new BaseEvent(startOfDay(i), endOfDay(i))) &&\n            event.length() < 86400000,\n        ),\n      );\n      manager.process();\n      this.singleDayEvents[this._getDateOnly(i)] = manager.columns;\n    });\n\n    const multiManager = new EventManager();\n    multiManager.addEvents(\n      this.events.filter(\n        event =>\n          event.isOverlapping(\n            new BaseEvent(this.dateRange.startDate, this.dateRange.endDate),\n          ) && event.length() >= 86400000,\n      ),\n    );\n    multiManager.process();\n    this.multiDayEvents = multiManager.columns;\n  }\n\n  private _forEachDayInRange(callback: (d: Date) => void) {\n    for (\n      let i = new Date(this.dateRange.startDate);\n      differenceInDays(startOfDay(this.dateRange.endDate), i) >= 0;\n      i = addDays(i, 1)\n    ) {\n      callback(i);\n    }\n  }\n\n  private _getDateOnly(date: Date): string {\n    return formatDate(date, 'dd-MM-yyyy');\n  }\n\n  private _getDatePercent(date: Date): number {\n    const currentDay = differenceInDays(\n      startOfDay(date),\n      this.dateRange.startDate,\n    );\n    const percent = (currentDay / this.dateRange.totalDays) * 100;\n    if (percent < 0) return 0;\n    if (percent > 100) return 100;\n    return percent;\n  }\n\n  private _getDayClass(date: Date): string {\n    const diff = differenceInDays(startOfDay(date), startOfDay(this.currentTime));\n    if (diff === 0) return 'column today';\n    if (diff < 0) return 'column past';\n    return 'column future';\n  }\n\n  private _populateColorVars(\n    styles: Record<string, string>,\n    color: string,\n  ) {\n    styles['--calendar-event-bg-color'] = `var(--color-${color}-container)`;\n    styles['--calendar-event-bg-color--hover'] = `var(--color-inverse-${color})`;\n    styles['--calendar-event-border-color'] = `var(--color-${color})`;\n    styles['--calendar-event-text-color'] = `var(--color-on-${color}-container)`;\n    styles['--calendar-event-text-color--hover'] = `var(--color-on-${color})`;\n  }\n\n  private _emitDateClick(date: Date) {\n    this.dispatchEvent(\n      new CustomEvent('column-view-date-click', {\n        detail: { date },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private _emitEventClick(event: any) {\n    this.dispatchEvent(\n      new CustomEvent('column-view-event-click', {\n        detail: { event },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private _renderHeader() {\n    const columns: any[] = [];\n    this._forEachDayInRange(i => {\n      columns.push(html`\n        <div class=${this._getDayClass(i)}>\n          <div class=\"column-content\">\n            <div\n              class=\"date\"\n              @click=${() => this._emitDateClick(i)}\n            >\n              ${formatDate(i, 'dd')}\n            </div>\n            <div class=\"day\">${formatDate(i, 'E')}</div>\n          </div>\n        </div>\n      `);\n    });\n    return columns;\n  }\n\n  private _renderMultiDayBackground() {\n    const columns: any[] = [];\n    this._forEachDayInRange(i => {\n      columns.push(html`<div class=${this._getDayClass(i)}></div>`);\n    });\n    return columns;\n  }\n\n  private _renderScale() {\n    const rows: any[] = [];\n    for (let i = 0; i < 48; i++) {\n      const cls = i % 2 ? 'row hour' : 'row';\n      const sd = startOfDay(new Date());\n      rows.push(html`\n        <div class=${cls}>\n          ${i % 2 === 0 && i\n            ? html`<div class=\"time\">${formatDate(addHours(sd, i / 2), 'hh a')}</div>`\n            : nothing}\n        </div>\n      `);\n    }\n    return html`<div class=\"background\">${rows}</div>`;\n  }\n\n  private _renderBackgroundGrid() {\n    const rows: any[] = [];\n    for (let i = 0; i < 48; i++) {\n      const cls = i % 2 ? 'row hour' : 'row';\n      const columns: any[] = [];\n      this._forEachDayInRange(d => {\n        columns.push(html`<div class=${this._getDayClass(d)}></div>`);\n      });\n      rows.push(html`<div class=${cls}>${columns}</div>`);\n    }\n    return html`<div class=\"background\">${rows}</div>`;\n  }\n\n  private _renderEvents() {\n    const columns: any[] = [];\n    this._forEachDayInRange(i => {\n      const cls = this._getDayClass(i);\n      const eventDay = this.singleDayEvents[this._getDateOnly(i)];\n      columns.push(html`\n        <div class=${cls}>\n          <div class=\"column-content\">\n            ${eventDay\n              ? eventDay.map((nodes, columnIndex) =>\n                  nodes.map(node => {\n                    const evtCls = this.eventClickable\n                      ? 'event clickable'\n                      : 'event';\n                    const evtStyles: Record<string, string> = {\n                      top: `${getTimePercent(node.start, startOfDay(i))}%`,\n                      height: `${getTimePercent(node.end, startOfDay(i)) - getTimePercent(node.start, startOfDay(i))}%`,\n                      left: `${(columnIndex / eventDay.length) * 100}%`,\n                      width: `calc(${((1 * node.width) / eventDay.length) * 100}% - 1px)`,\n                    };\n                    if (node.color) {\n                      this._populateColorVars(evtStyles, node.color);\n                    }\n                    return html`\n                      <div\n                        class=${evtCls}\n                        style=${this._styleMap(evtStyles)}\n                        @click=${() => {\n                          if (this.eventClickable) this._emitEventClick(node.data);\n                        }}\n                      >\n                        <div class=\"event-title\">\n                          ${node.title || '(no title)'}\n                        </div>\n                      </div>\n                    `;\n                  }),\n                )\n              : nothing}\n          </div>\n        </div>\n      `);\n    });\n    return html`<div class=\"events-container\">${columns}</div>`;\n  }\n\n  private _renderMultiDayEvents() {\n    if (!this.multiDayEvents || !this.multiDayEvents.length) return nothing;\n    return html`\n      <div class=\"row-content\">\n        ${this.multiDayEvents.map(\n          nodes => html`\n            <div class=\"row\">\n              ${nodes.map(node => {\n                const evtCls = this.eventClickable\n                  ? 'event clickable'\n                  : 'event';\n                const evtStyles: Record<string, string> = {\n                  left: `${this._getDatePercent(node.start) + LONG_EVENT_PADDING}%`,\n                  width: `${this._getDatePercent(addDays(node.end, 1)) - this._getDatePercent(node.start) - 2 * LONG_EVENT_PADDING}%`,\n                };\n                if (node.color) {\n                  this._populateColorVars(evtStyles, node.color);\n                }\n                return html`\n                  <div\n                    class=${evtCls}\n                    style=${this._styleMap(evtStyles)}\n                    @click=${() => {\n                      if (this.eventClickable) this._emitEventClick(node.data);\n                    }}\n                  >\n                    <div class=\"event-title\">\n                      ${node.title || '(no title)'}\n                    </div>\n                  </div>\n                `;\n              })}\n            </div>\n          `,\n        )}\n        <div class=\"row-spacer\"></div>\n      </div>\n    `;\n  }\n\n  private _renderCurrentTime() {\n    if (\n      this.currentTime.valueOf() < this.dateRange.startDate?.valueOf() - 1 ||\n      this.currentTime.valueOf() > this.dateRange.endDate?.valueOf() + 1\n    ) {\n      return nothing;\n    }\n    return html`\n      <div\n        class=\"current-time-line\"\n        style=\"top: calc(${getTimePercent(this.currentTime)}% - 1px)\"\n      >\n        <div class=\"time\">${formatDate(this.currentTime, 'hh:mm a')}</div>\n        <div\n          class=\"dash-line\"\n          style=\"width: ${this._getDatePercent(this.currentTime)}%\"\n        ></div>\n        <div\n          class=\"dot\"\n          style=\"left: calc(${this._getDatePercent(this.currentTime)}% - 0.25rem)\"\n        ></div>\n        <div\n          class=\"line\"\n          style=\"left: ${this._getDatePercent(this.currentTime)}%; width: ${(1 / this.dateRange.totalDays) * 100}%\"\n        ></div>\n      </div>\n    `;\n  }\n\n  private _styleMap(styles: Record<string, string>): string {\n    return Object.entries(styles)\n      .map(([k, v]) => `${k}:${v}`)\n      .join(';');\n  }\n\n  render() {\n    return html`\n      <div class=\"calendar-column-view\">\n        <div class=\"view-header\">\n          <div class=\"scale\"></div>\n          <div class=\"columns\">${this._renderHeader()}</div>\n          <div class=\"scrollbar-placeholder\"></div>\n        </div>\n        <div class=\"multi-day-section-wrapper\">\n          <div class=\"multi-day-section-scroll\">\n            <div class=\"multi-day-section\">\n              <div class=\"multi-day-background\">\n                <div class=\"scale\"></div>\n                <div class=\"columns\">\n                  ${this._renderMultiDayBackground()}\n                </div>\n              </div>\n              <div class=\"multi-events\">\n                ${this._renderMultiDayEvents()}\n              </div>\n            </div>\n          </div>\n        </div>\n        <div class=\"view-body\">\n          <div class=\"view-body-scroll\">\n            <div class=\"scale\">${this._renderScale()}</div>\n            <div class=\"drawing-area\">\n              ${this._renderBackgroundGrid()} ${this._renderEvents()}\n            </div>\n            ${this._renderCurrentTime()}\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n"],"names":["LitElement","html","nothing","styles","property","state"],"mappings":"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"}

package/dist/calendar-month-view.js

@@ -176,7 +176,6 @@ var css_248z = i`@charset "UTF-8";
  * @label Calendar Month View
  * @tag wc-calendar-month-view
  * @rawTag calendar-month-view
- * @parentRawTag calendar
  * @summary Internal month view component for the calendar.
  */
 let CalendarMonthView = class CalendarMonthView extends i$1 {

package/dist/calendar-month-view.js.map

@@ -1 +1 @@
-{"version":3,"file":"calendar-month-view.js","sources":["../../src/calendar/calendar-month-view.ts"],"sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport {\n  addDays,\n  differenceInDays,\n  startOfDay,\n  endOfDay,\n  calculateMonthRange,\n  formatDate,\n  getTimePercent,\n  LONG_EVENT_PADDING,\n} from './utils.js';\nimport { BaseEvent } from './base-event.js';\nimport { CalendarEvent } from './calendar-event.js';\nimport { MonthEventManager } from './event-manager.js';\nimport type { ColumnEvent } from './event-manager.js';\nimport IndividualComponent from '@/IndividualComponent.js';\nimport styles from './calendar-month-view.scss';\n\n/**\n * @label Calendar Month View\n * @tag wc-calendar-month-view\n * @rawTag calendar-month-view\n * @parentRawTag calendar\n * @summary Internal month view component for the calendar.\n */\n@IndividualComponent\nexport class CalendarMonthView extends LitElement {\n  static styles = [styles];\n\n  @property({ type: Array })\n  events: CalendarEvent[] = [];\n\n  @property({ type: Boolean, attribute: 'event-clickable' })\n  eventClickable: boolean = true;\n\n  @property({ type: Object, attribute: false })\n  currentTime: Date = new Date();\n\n  @property({ type: Object, attribute: false })\n  contextDate: Date = new Date();\n\n  @state()\n  private dateRange: any = {};\n\n  @state()\n  private weekDayEvents: ColumnEvent[][][] = [];\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this._processEvents();\n  }\n\n  override willUpdate(changedProperties: Map<string, unknown>) {\n    if (\n      changedProperties.has('events') ||\n      changedProperties.has('contextDate')\n    ) {\n      this._processEvents();\n    }\n  }\n\n  override firstUpdated() {\n    const viewBody = this.renderRoot.querySelector('.view-body');\n    if (viewBody) {\n      const viewBodyHeight = viewBody.scrollHeight;\n      viewBody.scrollTo({\n        top:\n          (getTimePercent(this.currentTime) / 100) * viewBodyHeight - 150,\n      });\n    }\n  }\n\n  private _processEvents() {\n    this.dateRange = calculateMonthRange(this.contextDate, 1);\n    this.weekDayEvents = [];\n\n    for (\n      let i = new Date(this.dateRange.startDate), j = 0;\n      j < 6;\n      i = addDays(i, 7), j++\n    ) {\n      const manager = new MonthEventManager();\n      manager.addEvents(\n        this.events.filter(event =>\n          event.isOverlapping(\n            new BaseEvent(startOfDay(i), endOfDay(addDays(i, 6))),\n          ),\n        ),\n      );\n      manager.process();\n      this.weekDayEvents.push(manager.columns);\n    }\n  }\n\n  private _getDatePercent(date: Date, dateRangeStartDate: Date): number {\n    const currentDay = differenceInDays(startOfDay(date), dateRangeStartDate);\n    const percent = (currentDay / 7) * 100;\n    if (percent < 0) return 0;\n    if (percent > 100) return 100;\n    return percent;\n  }\n\n  private _getDayClass(date: Date): string {\n    const diff = differenceInDays(\n      startOfDay(date),\n      startOfDay(this.currentTime),\n    );\n    if (diff === 0) return 'column today';\n    if (diff < 0) return 'column past';\n    return 'column future';\n  }\n\n  private _populateColorVars(\n    styles: Record<string, string>,\n    color: string,\n  ) {\n    styles['--calendar-event-bg-color'] = `var(--color-${color}-container)`;\n    styles['--calendar-event-bg-color--hover'] = `var(--color-inverse-${color})`;\n    styles['--calendar-event-border-color'] = `var(--color-${color})`;\n    styles['--calendar-event-text-color'] = `var(--color-on-${color}-container)`;\n    styles['--calendar-event-text-color--hover'] = `var(--color-on-${color})`;\n  }\n\n  private _emitEventClick(event: any) {\n    this.dispatchEvent(\n      new CustomEvent('month-view-event-click', {\n        detail: { event },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private _renderHeader() {\n    const columns: any[] = [];\n    for (\n      let i = new Date(this.dateRange.startDate), j = 0;\n      j < 7;\n      i = addDays(i, 1), j++\n    ) {\n      columns.push(html`\n        <div class=\"column\">\n          <div class=\"column-content\">\n            <div class=\"day\">${formatDate(i, 'EEEE')}</div>\n          </div>\n        </div>\n      `);\n    }\n    return columns;\n  }\n\n  private _renderMultiDayBackground(sd: Date) {\n    const columns: any[] = [];\n    for (let i = new Date(sd), j = 0; j < 7; i = addDays(i, 1), j++) {\n      columns.push(html`\n        <div class=${this._getDayClass(i)}>\n          <div class=\"column-content\">\n            <div class=\"column-header\">\n              <div class=\"day\">${formatDate(i, 'd')}</div>\n            </div>\n          </div>\n        </div>\n      `);\n    }\n    return columns;\n  }\n\n  private _renderEvents() {\n    return this.weekDayEvents.map((eventDay, index) => {\n      const weekStartDate = addDays(this.dateRange.startDate, index * 7);\n      return html`\n        <div class=\"multi-day-section\">\n          <div class=\"multi-day-body-scroll\">\n            <div class=\"multi-day-background\">\n              <div class=\"columns\">\n                ${this._renderMultiDayBackground(weekStartDate)}\n              </div>\n            </div>\n            <div class=\"multi-events\">\n              <div class=\"row-content\">\n                ${eventDay.map(\n                  nodes => html`\n                    <div class=\"row\">\n                      ${nodes.map(node => {\n                        const evtCls = this.eventClickable\n                          ? 'event clickable'\n                          : 'event';\n                        const evtStyles: Record<string, string> = {\n                          left: `${this._getDatePercent(node.start, weekStartDate) + LONG_EVENT_PADDING}%`,\n                          width: `${this._getDatePercent(addDays(node.end, 1), weekStartDate) - this._getDatePercent(node.start, weekStartDate) - 2 * LONG_EVENT_PADDING}%`,\n                        };\n                        if (node.color) {\n                          this._populateColorVars(evtStyles, node.color);\n                        }\n                        return html`\n                          <div\n                            class=${evtCls}\n                            style=${this._styleMap(evtStyles)}\n                            @click=${() => {\n                              if (this.eventClickable)\n                                this._emitEventClick(node.data);\n                            }}\n                          >\n                            <div class=\"event-title\">\n                              ${node.title || '(no title)'}\n                            </div>\n                          </div>\n                        `;\n                      })}\n                    </div>\n                  `,\n                )}\n                <div class=\"row-spacer\"></div>\n              </div>\n            </div>\n          </div>\n        </div>\n      `;\n    });\n  }\n\n  private _styleMap(styles: Record<string, string>): string {\n    return Object.entries(styles)\n      .map(([k, v]) => `${k}:${v}`)\n      .join(';');\n  }\n\n  render() {\n    return html`\n      <div class=\"calendar-month-view\">\n        <div class=\"view-header\">\n          <div class=\"columns\">${this._renderHeader()}</div>\n          <div class=\"scrollbar-placeholder\"></div>\n        </div>\n        <div class=\"view-body\">\n          <div class=\"view-body-scroll\">\n            <div class=\"drawing-area\">${this._renderEvents()}</div>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n"],"names":["LitElement","html","styles","property","state"],"mappings":"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"}
+{"version":3,"file":"calendar-month-view.js","sources":["../../src/calendar/calendar-month-view.ts"],"sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport {\n  addDays,\n  differenceInDays,\n  startOfDay,\n  endOfDay,\n  calculateMonthRange,\n  formatDate,\n  getTimePercent,\n  LONG_EVENT_PADDING,\n} from './utils.js';\nimport { BaseEvent } from './base-event.js';\nimport { CalendarEvent } from './calendar-event.js';\nimport { MonthEventManager } from './event-manager.js';\nimport type { ColumnEvent } from './event-manager.js';\nimport IndividualComponent from '@/IndividualComponent.js';\nimport styles from './calendar-month-view.scss';\n\n/**\n * @label Calendar Month View\n * @tag wc-calendar-month-view\n * @rawTag calendar-month-view\n * @summary Internal month view component for the calendar.\n */\n@IndividualComponent\nexport class CalendarMonthView extends LitElement {\n  static styles = [styles];\n\n  @property({ type: Array })\n  events: CalendarEvent[] = [];\n\n  @property({ type: Boolean, attribute: 'event-clickable' })\n  eventClickable: boolean = true;\n\n  @property({ type: Object, attribute: false })\n  currentTime: Date = new Date();\n\n  @property({ type: Object, attribute: false })\n  contextDate: Date = new Date();\n\n  @state()\n  private dateRange: any = {};\n\n  @state()\n  private weekDayEvents: ColumnEvent[][][] = [];\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this._processEvents();\n  }\n\n  override willUpdate(changedProperties: Map<string, unknown>) {\n    if (\n      changedProperties.has('events') ||\n      changedProperties.has('contextDate')\n    ) {\n      this._processEvents();\n    }\n  }\n\n  override firstUpdated() {\n    const viewBody = this.renderRoot.querySelector('.view-body');\n    if (viewBody) {\n      const viewBodyHeight = viewBody.scrollHeight;\n      viewBody.scrollTo({\n        top:\n          (getTimePercent(this.currentTime) / 100) * viewBodyHeight - 150,\n      });\n    }\n  }\n\n  private _processEvents() {\n    this.dateRange = calculateMonthRange(this.contextDate, 1);\n    this.weekDayEvents = [];\n\n    for (\n      let i = new Date(this.dateRange.startDate), j = 0;\n      j < 6;\n      i = addDays(i, 7), j++\n    ) {\n      const manager = new MonthEventManager();\n      manager.addEvents(\n        this.events.filter(event =>\n          event.isOverlapping(\n            new BaseEvent(startOfDay(i), endOfDay(addDays(i, 6))),\n          ),\n        ),\n      );\n      manager.process();\n      this.weekDayEvents.push(manager.columns);\n    }\n  }\n\n  private _getDatePercent(date: Date, dateRangeStartDate: Date): number {\n    const currentDay = differenceInDays(startOfDay(date), dateRangeStartDate);\n    const percent = (currentDay / 7) * 100;\n    if (percent < 0) return 0;\n    if (percent > 100) return 100;\n    return percent;\n  }\n\n  private _getDayClass(date: Date): string {\n    const diff = differenceInDays(\n      startOfDay(date),\n      startOfDay(this.currentTime),\n    );\n    if (diff === 0) return 'column today';\n    if (diff < 0) return 'column past';\n    return 'column future';\n  }\n\n  private _populateColorVars(\n    styles: Record<string, string>,\n    color: string,\n  ) {\n    styles['--calendar-event-bg-color'] = `var(--color-${color}-container)`;\n    styles['--calendar-event-bg-color--hover'] = `var(--color-inverse-${color})`;\n    styles['--calendar-event-border-color'] = `var(--color-${color})`;\n    styles['--calendar-event-text-color'] = `var(--color-on-${color}-container)`;\n    styles['--calendar-event-text-color--hover'] = `var(--color-on-${color})`;\n  }\n\n  private _emitEventClick(event: any) {\n    this.dispatchEvent(\n      new CustomEvent('month-view-event-click', {\n        detail: { event },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private _renderHeader() {\n    const columns: any[] = [];\n    for (\n      let i = new Date(this.dateRange.startDate), j = 0;\n      j < 7;\n      i = addDays(i, 1), j++\n    ) {\n      columns.push(html`\n        <div class=\"column\">\n          <div class=\"column-content\">\n            <div class=\"day\">${formatDate(i, 'EEEE')}</div>\n          </div>\n        </div>\n      `);\n    }\n    return columns;\n  }\n\n  private _renderMultiDayBackground(sd: Date) {\n    const columns: any[] = [];\n    for (let i = new Date(sd), j = 0; j < 7; i = addDays(i, 1), j++) {\n      columns.push(html`\n        <div class=${this._getDayClass(i)}>\n          <div class=\"column-content\">\n            <div class=\"column-header\">\n              <div class=\"day\">${formatDate(i, 'd')}</div>\n            </div>\n          </div>\n        </div>\n      `);\n    }\n    return columns;\n  }\n\n  private _renderEvents() {\n    return this.weekDayEvents.map((eventDay, index) => {\n      const weekStartDate = addDays(this.dateRange.startDate, index * 7);\n      return html`\n        <div class=\"multi-day-section\">\n          <div class=\"multi-day-body-scroll\">\n            <div class=\"multi-day-background\">\n              <div class=\"columns\">\n                ${this._renderMultiDayBackground(weekStartDate)}\n              </div>\n            </div>\n            <div class=\"multi-events\">\n              <div class=\"row-content\">\n                ${eventDay.map(\n                  nodes => html`\n                    <div class=\"row\">\n                      ${nodes.map(node => {\n                        const evtCls = this.eventClickable\n                          ? 'event clickable'\n                          : 'event';\n                        const evtStyles: Record<string, string> = {\n                          left: `${this._getDatePercent(node.start, weekStartDate) + LONG_EVENT_PADDING}%`,\n                          width: `${this._getDatePercent(addDays(node.end, 1), weekStartDate) - this._getDatePercent(node.start, weekStartDate) - 2 * LONG_EVENT_PADDING}%`,\n                        };\n                        if (node.color) {\n                          this._populateColorVars(evtStyles, node.color);\n                        }\n                        return html`\n                          <div\n                            class=${evtCls}\n                            style=${this._styleMap(evtStyles)}\n                            @click=${() => {\n                              if (this.eventClickable)\n                                this._emitEventClick(node.data);\n                            }}\n                          >\n                            <div class=\"event-title\">\n                              ${node.title || '(no title)'}\n                            </div>\n                          </div>\n                        `;\n                      })}\n                    </div>\n                  `,\n                )}\n                <div class=\"row-spacer\"></div>\n              </div>\n            </div>\n          </div>\n        </div>\n      `;\n    });\n  }\n\n  private _styleMap(styles: Record<string, string>): string {\n    return Object.entries(styles)\n      .map(([k, v]) => `${k}:${v}`)\n      .join(';');\n  }\n\n  render() {\n    return html`\n      <div class=\"calendar-month-view\">\n        <div class=\"view-header\">\n          <div class=\"columns\">${this._renderHeader()}</div>\n          <div class=\"scrollbar-placeholder\"></div>\n        </div>\n        <div class=\"view-body\">\n          <div class=\"view-body-scroll\">\n            <div class=\"drawing-area\">${this._renderEvents()}</div>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n"],"names":["LitElement","html","styles","property","state"],"mappings":"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"}

package/dist/canvas.js

@@ -21,8 +21,22 @@ var css_248z = i`* {
 }
 
 .canvas-wrapper {
+  position: relative;
   background: var(--canvas-background);
-  border-radius: var(--shape-corner-medium);
+}
+
+.canvas {
+  display: block;
+}
+
+.canvas-background,
+.canvas-shapes {
+  position: absolute;
+  inset: 0;
+}
+
+.canvas-background {
+  pointer-events: none;
 }
 
 #canvas-background circle {
@@ -31,14 +45,13 @@ var css_248z = i`* {
 
 #endarrow polyline {
   fill: none;
-  stroke: var(--canvas-arrow-color);
+  stroke: context-stroke;
   vector-effect: non-scaling-stroke;
   stroke-width: 2;
+  stroke-linejoin: round;
+  stroke-linecap: round;
 }
 
-.line.no-color {
-  stroke: var(--canvas-line-color);
-}
 .line.variant-dashed {
   stroke-dasharray: 6 6;
 }
@@ -64,6 +77,8 @@ var css_248z = i`* {
 }`;
 
 var Canvas_1;
+const GRID_GAP = 10;
+const GRID_DOT_RADIUS = 1;
 /**
  * @label Canvas
  * @tag wc-canvas
@@ -101,8 +116,6 @@ let Canvas = Canvas_1 = class Canvas extends i$1 {
          * Zoom multiplier for the canvas dimensions.
          */
         this.zoom = 1;
-        this.unitSize = 1;
-        this.gap = this.unitSize * 10;
     }
     static getNextPoint(point, direction, length) {
         if (direction === 'down')
@@ -115,47 +128,44 @@ let Canvas = Canvas_1 = class Canvas extends i$1 {
             return { x: point.x + length, y: point.y };
         return { x: point.x, y: point.y };
     }
-    static updateComputationArea(point, area) {
-        const nextArea = { ...area };
-        if (point.x > nextArea.width)
-            nextArea.width = point.x;
-        else if (point.x < nextArea.x)
-            nextArea.x = point.x;
-        if (point.y > nextArea.height)
-            nextArea.height = point.y;
-        else if (point.y < nextArea.y)
-            nextArea.y = point.y;
-        return nextArea;
+    static updateExtents(extents, x, y) {
+        if (x < extents.minX)
+            extents.minX = x;
+        if (x > extents.maxX)
+            extents.maxX = x;
+        if (y < extents.minY)
+            extents.minY = y;
+        if (y > extents.maxY)
+            extents.maxY = y;
     }
     static getStrokeVariantClasses(variant) {
         return {
             line: true,
-            'no-color': false,
             'variant-dashed': variant === 'dashed' || variant === 'animated-dashed',
             'variant-animated-dashed': variant === 'animated-dashed',
         };
     }
     computeShapes(initialBounds) {
-        const dotRadius = this.unitSize;
-        let computedViewbox = { ...initialBounds };
+        // Track world-space bounds (grid units) as shapes are processed.
+        const extents = {
+            minX: initialBounds.x,
+            minY: initialBounds.y,
+            maxX: initialBounds.x + initialBounds.width,
+            maxY: initialBounds.y + initialBounds.height,
+        };
         const shapes = this.shapes.map(shape => {
             switch (shape.type) {
                 case 'circle': {
                     const r = shape.radius || 1;
                     const cx = shape.x || 0;
                     const cy = shape.y || 0;
-                    if (cx + Math.ceil(r) > computedViewbox.width)
-                        computedViewbox.width = cx + Math.ceil(r);
-                    if (cx - Math.ceil(r) < computedViewbox.x)
-                        computedViewbox.x = cx - Math.ceil(r);
-                    if (cy + Math.ceil(r) > computedViewbox.height)
-                        computedViewbox.height = cy + Math.ceil(r);
-                    if (cy - Math.ceil(r) < computedViewbox.y)
-                        computedViewbox.y = cy - Math.ceil(r);
+                    Canvas_1.updateExtents(extents, cx - r, cy - r);
+                    Canvas_1.updateExtents(extents, cx + r, cy + r);
+                    // Convert from grid units to SVG pixels using the fixed gap.
                     return w `<circle
-            cx=${cx * this.gap + dotRadius}
-            cy=${cy * this.gap + dotRadius}
-            r=${r * this.gap}
+            cx=${cx * GRID_GAP + GRID_DOT_RADIUS}
+            cy=${cy * GRID_GAP + GRID_DOT_RADIUS}
+            r=${r * GRID_GAP}
             fill=${shape.color || 'var(--canvas-line-color, var(--color-on-surface))'}
           />`;
                 }
@@ -164,33 +174,28 @@ let Canvas = Canvas_1 = class Canvas extends i$1 {
                     const h = shape.height || 1;
                     const rx = shape.x || 0;
                     const ry = shape.y || 0;
-                    if (rx + Math.ceil(w$1) > computedViewbox.width)
-                        computedViewbox.width = rx + Math.ceil(w$1);
-                    if (rx - Math.ceil(w$1) < computedViewbox.x)
-                        computedViewbox.x = rx - Math.ceil(w$1);
-                    if (ry + Math.ceil(h) > computedViewbox.height)
-                        computedViewbox.height = ry + Math.ceil(h);
-                    if (ry - Math.ceil(h) < computedViewbox.y)
-                        computedViewbox.y = ry - Math.ceil(h);
+                    Canvas_1.updateExtents(extents, rx, ry);
+                    Canvas_1.updateExtents(extents, rx + w$1, ry + h);
                     return w `<rect
-            x=${rx * this.gap + dotRadius}
-            y=${ry * this.gap}
-            width=${w$1 * this.gap + dotRadius}
-            height=${h * this.gap + dotRadius}
+            x=${rx * GRID_GAP + GRID_DOT_RADIUS}
+            y=${ry * GRID_GAP}
+            width=${w$1 * GRID_GAP + GRID_DOT_RADIUS}
+            height=${h * GRID_GAP + GRID_DOT_RADIUS}
             fill=${shape.color || 'var(--canvas-line-color, var(--color-on-surface))'}
           />`;
                 }
                 case 'line': {
                     const start = shape.start || { x: 0, y: 0 };
                     const end = shape.end || { x: 0, y: 0 };
-                    const pathString = `M${start.x * this.gap + dotRadius} ${start.y * this.gap + dotRadius} L${end.x * this.gap + dotRadius} ${end.y * this.gap + dotRadius}`;
+                    Canvas_1.updateExtents(extents, start.x, start.y);
+                    Canvas_1.updateExtents(extents, end.x, end.y);
+                    const pathString = `M${start.x * GRID_GAP + GRID_DOT_RADIUS} ${start.y * GRID_GAP + GRID_DOT_RADIUS} L${end.x * GRID_GAP + GRID_DOT_RADIUS} ${end.y * GRID_GAP + GRID_DOT_RADIUS}`;
                     const strokeColor = shape.color ||
                         'var(--canvas-line-color, var(--color-on-surface))';
                     return w `<path
             class=${e({
                         ...Canvas_1.getStrokeVariantClasses(shape.variant),
                         clickable: !!shape.clickable,
-                        'no-color': !shape.color,
                     })}
             stroke-width="2"
             stroke-linecap="round"
@@ -204,35 +209,38 @@ let Canvas = Canvas_1 = class Canvas extends i$1 {
                 }
                 case 'connector': {
                     const start = shape.start || { x: 0, y: 0 };
-                    let pathString = `M${start.x * this.gap + dotRadius} ${start.y * this.gap + dotRadius}`;
+                    let pathString = `M${start.x * GRID_GAP + GRID_DOT_RADIUS} ${start.y * GRID_GAP + GRID_DOT_RADIUS}`;
                     let current = { ...start };
-                    computedViewbox = Canvas_1.updateComputationArea(current, computedViewbox);
+                    Canvas_1.updateExtents(extents, current.x, current.y);
                     const pathSegments = shape.path || [];
                     for (let i = 0; i < pathSegments.length; i += 1) {
                         const path = pathSegments[i];
                         if (i === 0) {
+                            // Move one unit first so curved corner joins don't overlap start.
                             const point = Canvas_1.getNextPoint(current, path.direction, 1);
-                            pathString += ` L${point.x * this.gap + dotRadius} ${point.y * this.gap + dotRadius}`;
+                            pathString += ` L${point.x * GRID_GAP + GRID_DOT_RADIUS} ${point.y * GRID_GAP + GRID_DOT_RADIUS}`;
                             current = { ...point };
-                            computedViewbox = Canvas_1.updateComputationArea(current, computedViewbox);
+                            Canvas_1.updateExtents(extents, current.x, current.y);
                         }
                         const point = Canvas_1.getNextPoint(current, path.direction, path.length - 2);
-                        pathString += ` L${point.x * this.gap + dotRadius} ${point.y * this.gap + dotRadius}`;
+                        pathString += ` L${point.x * GRID_GAP + GRID_DOT_RADIUS} ${point.y * GRID_GAP + GRID_DOT_RADIUS}`;
                         current = { ...point };
-                        computedViewbox = Canvas_1.updateComputationArea(current, computedViewbox);
+                        Canvas_1.updateExtents(extents, current.x, current.y);
                         if (i === pathSegments.length - 1) {
                             const endPoint = Canvas_1.getNextPoint(current, path.direction, 1);
-                            pathString += ` L${endPoint.x * this.gap + dotRadius} ${endPoint.y * this.gap + dotRadius}`;
+                            pathString += ` L${endPoint.x * GRID_GAP + GRID_DOT_RADIUS} ${endPoint.y * GRID_GAP + GRID_DOT_RADIUS}`;
                             current = { ...endPoint };
-                            computedViewbox = Canvas_1.updateComputationArea(current, computedViewbox);
+                            Canvas_1.updateExtents(extents, current.x, current.y);
                         }
                         else {
                             const nextPath = pathSegments[i + 1];
                             const midPoint = Canvas_1.getNextPoint(current, path.direction, 1);
+                            Canvas_1.updateExtents(extents, midPoint.x, midPoint.y);
                             const nextPoint = Canvas_1.getNextPoint(midPoint, nextPath.direction, 1);
-                            pathString += ` Q ${midPoint.x * this.gap + dotRadius} ${midPoint.y * this.gap + dotRadius} ${nextPoint.x * this.gap + dotRadius} ${nextPoint.y * this.gap + dotRadius}`;
+                            // Use a quadratic segment to round corners between directions.
+                            pathString += ` Q ${midPoint.x * GRID_GAP + GRID_DOT_RADIUS} ${midPoint.y * GRID_GAP + GRID_DOT_RADIUS} ${nextPoint.x * GRID_GAP + GRID_DOT_RADIUS} ${nextPoint.y * GRID_GAP + GRID_DOT_RADIUS}`;
                             current = { ...nextPoint };
-                            computedViewbox = Canvas_1.updateComputationArea(current, computedViewbox);
+                            Canvas_1.updateExtents(extents, current.x, current.y);
                         }
                     }
                     const strokeColor = shape.color ||
@@ -241,7 +249,6 @@ let Canvas = Canvas_1 = class Canvas extends i$1 {
             <path
               class=${e({
                         ...Canvas_1.getStrokeVariantClasses(shape.variant),
-                        'no-color': !shape.color,
                     })}
               stroke-width="2"
               stroke-linecap="round"
@@ -266,17 +273,64 @@ let Canvas = Canvas_1 = class Canvas extends i$1 {
                     return A;
             }
         });
-        // Padding
-        computedViewbox.x -= this.padding;
-        computedViewbox.y -= this.padding;
-        computedViewbox.width += this.padding;
-        computedViewbox.height += this.padding;
-        computedViewbox.width -= computedViewbox.x;
-        computedViewbox.height -= computedViewbox.y;
+        // Expand bounds with padding so shapes are not flush to the edge.
+        const computedViewbox = {
+            x: extents.minX - this.padding,
+            y: extents.minY - this.padding,
+            width: Math.max(extents.maxX - extents.minX + this.padding * 2, 0),
+            height: Math.max(extents.maxY - extents.minY + this.padding * 2, 0),
+        };
         return { shapes, computedViewbox };
     }
+    renderBackgroundSvg(computedViewBox, svgViewBox) {
+        return b `
+      <svg
+        class="canvas canvas-background"
+        height="100%"
+        width="100%"
+        viewBox=${svgViewBox}
+        aria-hidden="true"
+      >
+        <defs>
+          <pattern
+            id="canvas-background"
+            patternUnits="userSpaceOnUse"
+            width=${GRID_GAP}
+            height=${GRID_GAP}
+          >
+            <circle cx="1" cy="1" r=${GRID_DOT_RADIUS} />
+          </pattern>
+        </defs>
+
+        <rect
+          x=${computedViewBox.x * GRID_GAP}
+          y=${computedViewBox.y * GRID_GAP}
+          width="100%"
+          height="100%"
+          fill="url(#canvas-background)"
+        />
+      </svg>
+    `;
+    }
+    renderShapesSvg(shapes, svgViewBox) {
+        return b `
+      <svg
+        class="canvas canvas-shapes"
+        height="100%"
+        width="100%"
+        viewBox=${svgViewBox}
+      >
+        <defs>
+          <marker id="endarrow" markerWidth="10" markerHeight="10" refX="5" refY="5" markerUnits="strokeWidth" orient="auto">
+            <polyline  points="0 2, 5 5, 0 8"></polyline>
+          </marker>
+        </defs>
+
+        ${shapes}
+      </svg>
+    `;
+    }
     render() {
-        const dotRadius = this.unitSize;
         let computedViewBox = { width: 0, height: 0, x: 0, y: 0 };
         const { shapes, computedViewbox } = this.computeShapes(computedViewBox);
         computedViewBox = computedViewbox;
@@ -289,53 +343,18 @@ let Canvas = Canvas_1 = class Canvas extends i$1 {
                 height: parseInt(viewBox[3], 10),
             };
         }
-        const wrapperWidth = (computedViewBox.width * this.gap + 2) * dotRadius * this.zoom;
-        const wrapperHeight = (computedViewBox.height * this.gap + 2) * dotRadius * this.zoom;
-        const svgViewBox = `${computedViewBox.x * this.gap} ${computedViewBox.y * this.gap} ${computedViewBox.width * this.gap + 2 * dotRadius} ${computedViewBox.height * this.gap + 2 * dotRadius}`;
+        // Zoom scales the outer viewport size while the SVG viewBox stays in world units.
+        const wrapperWidth = (computedViewBox.width * GRID_GAP + 2) * GRID_DOT_RADIUS * this.zoom;
+        const wrapperHeight = (computedViewBox.height * GRID_GAP + 2) * GRID_DOT_RADIUS * this.zoom;
+        // viewBox maps world-space extents into the internal SVG coordinate system.
+        const svgViewBox = `${computedViewBox.x * GRID_GAP} ${computedViewBox.y * GRID_GAP} ${computedViewBox.width * GRID_GAP + 2 * GRID_DOT_RADIUS} ${computedViewBox.height * GRID_GAP + 2 * GRID_DOT_RADIUS}`;
         return b `
       <div
         class="canvas-wrapper"
         style="width: ${wrapperWidth}px; height: ${wrapperHeight}px;"
       >
-        <svg
-          class="canvas"
-          height="100%"
-          width="100%"
-          viewBox=${svgViewBox}
-        >
-          <defs>
-            <pattern
-              id="canvas-background"
-              patternUnits="userSpaceOnUse"
-              width=${this.gap}
-              height=${this.gap}
-            >
-              <circle cx="1" cy="1" r=${dotRadius} />
-            </pattern>
-
-            <marker
-              id="endarrow"
-              markerWidth="15"
-              markerHeight="22.5"
-              refX="9"
-              refY="15"
-              markerUnits="userSpaceOnUse"
-              orient="auto"
-            >
-              <polyline points="0 22.5, 7.5 15, 0 7.5"></polyline>
-            </marker>
-          </defs>
-
-          <rect
-            x=${computedViewBox.x * this.gap}
-            y=${computedViewBox.y * this.gap}
-            width="100%"
-            height="100%"
-            fill="url(#canvas-background)"
-          />
-
-          ${shapes}
-        </svg>
+        ${this.renderBackgroundSvg(computedViewBox, svgViewBox)}
+        ${this.renderShapesSvg(shapes, svgViewBox)}
       </div>
     `;
     }