@lukekaalim/act-insight 1.0.0 → 2.0.0

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @lukekaalim/act-insight
 
+## 2.0.0
+
+### Major Changes
+
+- Improve debugger support
+
+### Patch Changes
+
+- Updated dependencies
+  - @lukekaalim/act-recon@4.0.0
+  - @lukekaalim/act-debug@2.0.0
+  - @lukekaalim/act@4.2.0
+  - @lukekaalim/act-web@5.1.0
+
+## 1.1.0
+
+### Minor Changes
+
+- bcbd299: SSR API for @lukekaalim/act-web
+- beec21c: Fixed Web text element rehydration, remove nodejs dependencies from dehydration
+
+### Patch Changes
+
+- Updated dependencies [bcbd299]
+- Updated dependencies [beec21c]
+  - @lukekaalim/act-web@5.0.0
+  - @lukekaalim/act-recon@3.1.0
+  - @lukekaalim/act@4.1.0
+  - @lukekaalim/act-debug@1.0.1
+
 ## 1.0.0
 
 ### Major Changes

package/InsightApp.module.css

@@ -16,4 +16,40 @@
 
   position: absolute;
   */
+}
+
+.insightRoot {
+  display: flex;
+  flex-direction: column;
+  
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+
+  position: absolute;
+  overflow: hidden;
+
+  font-family: 'Fira Code';
+}
+
+.insightContent {
+  display: flex;
+  flex-direction: row;
+  flex: 1;
+  overflow: hidden;
+
+  min-width: 0px;
+}
+
+.activeWindow {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.199);
+  min-width: 0px;
+}
+
+h4 {
+  margin: 0 4px;
 }

package/InsightApp2.ts

@@ -0,0 +1,82 @@
+import { Component, h, Node, OpaqueID, useEffect, useMemo, useRef, useState } from "@lukekaalim/act";
+import { CommitReport, DebugClient } from "@lukekaalim/act-debug";
+
+import classes from './InsightApp.module.css';
+
+import { CommitTree } from "./components/CommitTree";
+import { EffectTable } from "./components/EffectTable";
+import { ControlBar } from "./components/ControlBar";
+import { BreakpointPanel } from "./components/BreakpointPanel";
+import { InspectorPanel } from "./components/InspectorPanel";
+import { PlaybackBar } from "./components/PlaybackBar";
+import { SelectionContext, SelectionTarget, useSelectionManager } from "./lib/selection";
+import { CommitListEntry, createCommitList } from "./lib/list";
+import { useInsightManager } from "./lib/controller";
+import { CommitPreview } from "./TreeViewer";
+import { CommitID } from "@lukekaalim/act-recon";
+import { EffectButton } from "./components/Button";
+
+export type InsightApp2Props = {
+  client: DebugClient;
+  onReady(): void;
+}
+
+export const InsightApp2: Component<InsightApp2Props> = ({ client, onReady }) => {
+  const [state, controller] = useInsightManager(client);
+
+  useEffect(() => {
+    onReady();
+  }, [])
+
+  const providers = (child: Node) => {
+    return h(SelectionContext.Provider, { value: state.selection },
+      child
+    )
+  }
+
+  const breakLocation = state.breakPosition && h('div', {}, [
+    state.breakPosition.commit && h('div', {}, h(CommitPreview, { commit: state.client.cache.getCommitOrThrow(state.breakPosition.commit ) })),
+    state.breakPosition.effect && h('div', {}, h(EffectButton, { onClick() {}, effectId: state.breakPosition.effect })),
+    state.breakPosition.named && h('div', {}, `@${state.breakPosition.named}`),
+  ])
+
+  return providers(h('div', { className: classes.insightRoot }, [
+    h(ControlBar, {
+      showBreakpointPanel: state.panels.breakpoints,
+      showInspectorPanel: state.panels.inspector,
+      activeWindow: state.activeWindow,
+
+      onChangeWindow: controller.changeWindow,
+      onShowInspectorPanelChange: controller.setShowInspectorPanel,
+      onShowBreakpointPanelChange: controller.setShowBreakpointPanel,
+    }),
+    h('div', { className: classes.insightContent }, [
+      state.panels.breakpoints && h(BreakpointPanel, {
+        controller,
+        onBreakpointsChange: (breakpoints) => client.setBreakpoints(breakpoints),
+        breakpoints: state.breakpoints,
+        paused: state.paused,
+        cache: client.cache,
+        state,
+
+        onResumePressed: () => client.resume(),
+        onStepPressed: () => client.step(),
+      }),
+      h('div', { className: classes.activeWindow }, [
+        state.activeWindow === 'commits' && h(CommitTree, { commits: state.commits, client, thread: state.thread, state, controller,
+          scrollTarget: state.commitScrollTarget,
+          onScrollTargetComplete: controller.onConsumeCommitScrollTarget }),
+        state.activeWindow === 'effects' && h(EffectTable, { state, controller }),
+      ]),
+      state.panels.inspector && h(InspectorPanel, { client, breakpoints: state.breakpoints, state, controller }),
+    ]),
+    state.paused && h(PlaybackBar, {
+      onResumeClick: () => client.resume(),
+      onStepClick: () => client.step(),
+      onReloadClick: () => console.warn('UNIMPLEMETED'),
+      onToggleBreakpointsEnabled: () => console.warn("UNIMPLEMNTED"),
+      breakpointsEnabled: true,
+      currentBreakLocation: breakLocation
+    }),
+  ]))
+};

package/TreeViewer.module.css

@@ -13,24 +13,19 @@
   padding: 4px;
   border-radius: 8px;
 
-  margin: 2px;
-
   border: 2px solid rgba(255, 255, 255, 0);
   white-space: nowrap;
-}
-.elementName:hover {
-  font-weight: bold;
+
   cursor: pointer;
-  border: 2px solid white;
+  font-weight: inherit;
 }
 
 .commit {
-  display: flex;
+  display: inline-flex;
   flex-direction: column;
   overflow: visible;
   white-space: pre;
   width: max-content;
-  flex: 1;
 }
 
 .elementBar.selected .elementName {

package/TreeViewer.ts

@@ -7,6 +7,7 @@ import classes from './TreeViewer.module.css';
 import { CommitReport, TreeReport } from "@lukekaalim/act-debug";
 import { CommitID } from "@lukekaalim/act-recon";
 import { CommitAttributeTag } from './AttributeTag';
+import { getTextForElementType } from "./utils";
 
 export type TreeViewerProps = {
   //commits: Map<CommitID, CommitReport>,
@@ -34,6 +35,8 @@ export type CommitPreviewProps = {
   attributes?: [string, string][],
 
   color?: string,
+  border?: string,
+  className?: string,
 
   depth?: number,
 
@@ -43,28 +46,25 @@ export type CommitPreviewProps = {
 
 export const CommitPreview: Component<CommitPreviewProps> = ({
   commit, depth = 0,
-  attributes = [],
+  attributes = [['Id', commit.id.toString()]],
   renderCommit,
   color,
+  border = 'none',
   onClick,
+  className,
 }) => {
   const background = `hsl(${(depth * 22.3) % 360}deg, 50%, 80%)`;
-  const elementBackground = color || `hsl(${stringHash(commit.element.type) % 360}deg, 60%, 80%)`;
+  const text = getTextForElementType(commit.element);
+  const elementBackground = color || `hsl(${stringHash(text) % 360}deg, 60%, 80%)`;
   const lineColor = `hsl(${stringHash(commit.id.toString()) % 360}, 100%, 20%)`
 
 
-  return hs('div', { className: classes.commit, style: { position: 'relative' }, id: `commit:${commit.id}` }, [
-    commit.children.length > 0 &&
-      h('div', { style: {
-        position: 'absolute',
-        top: '5px',
-        height: 'calc(100% - 18px)', width: '1px', background: lineColor, transform: `translate(20px, 0px)`
-      } }),
+  return hs('div', { classList: [classes.commit, className], style: { position: 'relative' }, id: `commit:${commit.id}` }, [
 
     hs('div', { className: [classes.elementBar].join(' '), style: { 'position': 'relative' } }, [
-      hs('button', { onClick, className: classes.elementName, style: { background: elementBackground } },
-        commit.element.type),
-      h(CommitAttributeTag, { name: 'Id', value: commit.id.toString() }),
+      hs('button', { onClick, className: classes.elementName, style: { background: elementBackground, border } },
+        text),
+      //h(CommitAttributeTag, { name: 'Id', value: commit.id.toString() }),
       attributes.map(([name, value]) => h(CommitAttributeTag, { name, value }))
       //h(CommitAttributeTag, { name: 'Version', value: commit.version.toString() }),
     ]),
@@ -80,4 +80,8 @@ export const CommitPreview: Component<CommitPreviewProps> = ({
   ])
 };
 
+const renderElementName = () => {
+  
+}
+
 // h(CommitPreview, { commit: child, tree, depth: depth + 1, selectedCommits, onSelectCommit })))

package/Virtual.ts

@@ -10,14 +10,12 @@ export type VirtualTreeProps = {
   chunkSize: number,
   chunkCount: number,
 
-  windowRange: number,
-
-  renderChunk(index: number): Node,
+  renderChunk(index: number, width: number): Node,
 
   viewportRef?: ReadonlyRef<HTMLElement | null>,
 }
 
-export const Virtual1D: Component<VirtualTreeProps> = ({ chunkSize, chunkCount, renderChunk, viewportRef: propViewportRef, windowRange }) => {
+export const Virtual1D: Component<VirtualTreeProps> = ({ chunkSize, chunkCount, renderChunk, viewportRef: propViewportRef }) => {
   const [start, setStart] = useState(0);
   const [end, setEnd] = useState(0);
 
@@ -35,30 +33,50 @@ export const Virtual1D: Component<VirtualTreeProps> = ({ chunkSize, chunkCount,
     const setViewport = () => {
       const rect = viewport.getBoundingClientRect();
 
-      setStart(Math.floor((viewport.scrollTop) / chunkSize))
-      setEnd(Math.ceil((viewport.scrollTop + rect.height) / chunkSize))
+      const start = Math.floor((viewport.scrollTop) / chunkSize);
+      const end = Math.ceil((viewport.scrollTop + rect.height) / chunkSize)
+
+      setStart(start)
+      setEnd(end)
     };
     setViewport();
 
     viewport.addEventListener('scroll', setViewport)
+    const resize = new ResizeObserver(setViewport);
+    resize.observe(viewport);
     return () => {
       viewport.removeEventListener('scroll', setViewport)
+      resize.disconnect();
     }
-  }, [propViewportRef])
+  }, [propViewportRef, chunkSize])
 
   const renderedIndices = Array
     .from({ length: end - start })
     .map((_, i) => start + i)
     .filter(x => x >= 0 && x < chunkCount);
+
+  const [width, setWidth] = useState(0);
+
+  useEffect(() => {
+    const list = listRef.current;
+    const viewport = viewportRef.current;
+    if (!list || !viewport)
+      return;
+    const rect = viewport.getBoundingClientRect();
+
+    const maxWidth = [...list.children].reduce((acc, curr) => Math.max(curr.getBoundingClientRect().width, acc), rect.width)
+
+    setWidth(prevMaxWidth => Math.max(maxWidth, prevMaxWidth));
+  }, [start, end])
     
 
   return [
     //h('pre', {}, renderedIndices.join(', ')),
-    h('div', { ref: viewportRef, style: { overflow: 'auto', height: '100%' } },
-      h('div', { ref: listRef, style: { height: (chunkSize * chunkCount) + 'px', position: 'relative' } },
+    h('div', { ref: viewportRef, style: { 'overflow': 'auto',  flex: 1 } },
+      h('div', { ref: listRef, style: { height: (chunkSize * chunkCount) + 'px', position: 'relative', width: `${width}px` } },
         renderedIndices.map(index =>
-          h('div', { style: { position: 'absolute', top: (index * chunkSize) + 'px', height: chunkSize, padding: '-1', border: '1px dotted black', width: '100%' }},
-            renderChunk(index)))
+          h('div', { key: index, style: { position: 'absolute', top: (index * chunkSize) + 'px', height: chunkSize }},
+            renderChunk(index, width)))
     ))
   ];
 };

package/assets/icons/ancestor_column.svg

@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="12.48817mm"
+   height="3.8353176mm"
+   viewBox="0 0 12.48817 3.8353177"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <g
+     id="layer1"
+     transform="translate(-47.030357,-38.101349)">
+    <rect
+       style="fill:#5d7388;fill-opacity:1;stroke:none;stroke-width:0.303001;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       id="rect34"
+       width="1.1926903"
+       height="4.396584"
+       x="53.017189"
+       y="37.867489"
+       ry="0.20103791" />
+  </g>
+</svg>

package/assets/icons/ancestor_skip_row_column.svg

@@ -0,0 +1,52 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="12.490001mm"
+   height="3.8399999mm"
+   viewBox="0 0 12.490001 3.84"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <g
+     id="layer1"
+     transform="translate(-60.87492,-38.077965)">
+    <rect
+       style="fill:#5d7388;fill-opacity:1;stroke:none;stroke-width:0.303001;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       id="rect34-6"
+       width="1.1926903"
+       height="4.396584"
+       x="66.861916"
+       y="37.843967"
+       ry="0.20103791" />
+    <rect
+       style="fill:#5d7388;fill-opacity:1;stroke:none;stroke-width:0.295564;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       id="rect35"
+       width="7.7882543"
+       height="1.2862346"
+       x="63.341316"
+       y="39.387585"
+       ry="0.20103791" />
+    <circle
+       style="fill:#ffffff;fill-opacity:1;stroke:#5d7388;stroke-width:0.603;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       id="path39"
+       cx="64.382828"
+       cy="39.961376"
+       r="0.98221552" />
+    <circle
+       style="fill:#ffffff;fill-opacity:1;stroke:#5d7388;stroke-width:0.603;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       id="path39-2"
+       cx="67.392464"
+       cy="39.961376"
+       r="0.98221552" />
+    <circle
+       style="fill:#ffffff;fill-opacity:1;stroke:#5d7388;stroke-width:0.603;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       id="path39-2-5"
+       cx="70.369026"
+       cy="39.961376"
+       r="0.98221552" />
+  </g>
+</svg>

package/assets/icons/breakpoint.svg

@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="11.941043mm"
+   height="11.941043mm"
+   viewBox="0 0 11.941043 11.941043"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <g
+     id="layer1"
+     transform="translate(-5.4966703,-2.2270989)">
+    <g
+       id="g20">
+      <circle
+         style="fill:#d76a51;fill-opacity:1;stroke-width:0.20519"
+         id="path1"
+         cx="11.467192"
+         cy="8.1976204"
+         r="4.6302686" />
+      <circle
+         style="fill:#c83d1d;fill-opacity:1;stroke-width:0.162849"
+         id="path1-3"
+         cx="11.467192"
+         cy="8.1976204"
+         r="3.6748166" />
+    </g>
+  </g>
+</svg>

package/assets/icons/breakpoint_arrow.svg

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="12.01108mm"
+   height="5.519321mm"
+   viewBox="0 0 12.01108 5.5193212"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <g
+     id="layer1"
+     transform="translate(-55.203632,-5.0938974)">
+    <path
+       id="rect15"
+       style="fill:#d76a51;fill-opacity:1;stroke:none;stroke-width:0.165;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       d="m 55.961807,5.8284295 v 4.0752034 l 7.009391,-0.00155 3.516065,-2.0293335 -3.512447,-2.0360517 z" />
+  </g>
+</svg>

package/assets/icons/breakpoint_arrow_paused.svg

@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="12.010001mm"
+   height="5.5199995mm"
+   viewBox="0 0 12.010001 5.5199997"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <g
+     id="layer1"
+     transform="translate(-55.153038,-11.508349)">
+    <path
+       id="rect15-7"
+       style="fill:#9babba;fill-opacity:1;stroke:none;stroke-width:0.139224;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       d="m 56.78394,12.51294 v 3.438583 l 5.914398,-0.0013 2.966792,-1.712314 -2.963739,-1.717984 z" />
+    <rect
+       style="fill:#5d7388;fill-opacity:1;stroke-width:0.22508"
+       id="rect5-3"
+       width="1.5069969"
+       height="4.8598962"
+       x="59.121918"
+       y="11.787687"
+       ry="0.085511364" />
+    <rect
+       style="fill:#5d7388;fill-opacity:1;stroke-width:0.22508"
+       id="rect5-5-9"
+       width="1.5069969"
+       height="4.8598962"
+       x="61.681629"
+       y="11.787687"
+       ry="0.085511364" />
+  </g>
+</svg>

package/assets/icons/breakpoint_panel.svg

@@ -0,0 +1,121 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="11.940001mm"
+   height="11.94mm"
+   viewBox="0 0 11.940002 11.94"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <g
+     id="layer1"
+     transform="translate(17.248171,-2.0375583)">
+    <g
+       id="g12">
+      <rect
+         style="fill:#c7d1d9;fill-opacity:1;stroke:#5d7388;stroke-width:0.165;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+         id="rect11"
+         width="7.3140426"
+         height="9.9508686"
+         x="-16.158314"
+         y="2.9852602"
+         ry="0" />
+      <rect
+         style="fill:#5d7388;fill-opacity:1;stroke:none;stroke-width:0.165;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+         id="rect12"
+         width="3.3841388"
+         height="0.63661981"
+         x="-15.746336"
+         y="3.7683892"
+         ry="0.23643248" />
+      <rect
+         style="fill:#5d7388;fill-opacity:1;stroke:none;stroke-width:0.165;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+         id="rect12-1"
+         width="3.3841388"
+         height="0.63661981"
+         x="-15.059457"
+         y="4.6060472"
+         ry="0.23643248" />
+      <rect
+         style="fill:#5d7388;fill-opacity:1;stroke:none;stroke-width:0.165;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+         id="rect12-6"
+         width="1.1057094"
+         height="0.63662004"
+         x="-15.746336"
+         y="5.4437051"
+         ry="0.23643248" />
+      <rect
+         style="fill:#5d7388;fill-opacity:1;stroke:none;stroke-width:0.165;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+         id="rect12-1-5"
+         width="1.1392158"
+         height="0.63662004"
+         x="-15.746336"
+         y="6.281363"
+         ry="0.23643248" />
+      <rect
+         style="fill:#5d7388;fill-opacity:1;stroke:none;stroke-width:0.165;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+         id="rect12-4"
+         width="1.3402537"
+         height="0.63662004"
+         x="-15.176728"
+         y="7.1860337"
+         ry="0.23643248" />
+      <rect
+         style="fill:#5d7388;fill-opacity:1;stroke:none;stroke-width:0.165;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+         id="rect12-1-52"
+         width="3.0658281"
+         height="0.63661957"
+         x="-15.428026"
+         y="8.0236921"
+         ry="0.23643248" />
+      <rect
+         style="fill:#5d7388;fill-opacity:1;stroke:none;stroke-width:0.165;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+         id="rect12-6-5"
+         width="3.4176464"
+         height="0.63661957"
+         x="-15.39452"
+         y="8.8613501"
+         ry="0.23643248" />
+      <rect
+         style="fill:#5d7388;fill-opacity:1;stroke:none;stroke-width:0.165;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+         id="rect12-1-5-4"
+         width="3.3841388"
+         height="0.63661981"
+         x="-15.746336"
+         y="9.699008"
+         ry="0.23643248" />
+      <rect
+         style="fill:#5d7388;fill-opacity:1;stroke:none;stroke-width:0.165;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+         id="rect12-1-5-0"
+         width="2.9150507"
+         height="0.63661957"
+         x="-15.210235"
+         y="10.620432"
+         ry="0.23643248" />
+      <rect
+         style="fill:#5d7388;fill-opacity:1;stroke:none;stroke-width:0.165;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+         id="rect12-4-7"
+         width="3.3841388"
+         height="0.63661981"
+         x="-15.260494"
+         y="11.525103"
+         ry="0.23643248" />
+    </g>
+    <circle
+       style="fill:#d76a51;fill-opacity:1;stroke-width:0.144294"
+       id="path1-4"
+       cx="-10.329949"
+       cy="7.6289997"
+       r="3.2561009" />
+    <circle
+       style="fill:#c83d1d;fill-opacity:1;stroke-width:0.114519"
+       id="path1-3-9"
+       cx="-10.329949"
+       cy="7.6289997"
+       r="2.5842073" />
+  </g>
+</svg>

package/assets/icons/breakpoint_unset.svg

@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="11.940001mm"
+   height="11.94mm"
+   viewBox="0 0 11.940002 11.94"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <g
+     id="layer1"
+     transform="translate(-19.901739,11.277651)">
+    <g
+       id="g19"
+       transform="translate(0.42282735,0.21148449)">
+      <path
+         id="path1-0"
+         style="fill:#ba4c4c;fill-opacity:1;stroke-width:0.20519"
+         d="m 25.449343,-10.149018 c -2.55718,3.3e-5 -4.630175,2.073029 -4.630208,4.6302086 3.3e-5,2.5571795 2.073028,4.63017485 4.630208,4.63020832 2.55718,-3.292e-5 4.630176,-2.07302842 4.630209,-4.63020832 -3.3e-5,-2.55718 -2.073029,-4.6301756 -4.630209,-4.6302086 z m -2.3e-5,1.2973424 c 1.840668,5.25e-5 3.332813,1.4921966 3.332866,3.3328662 -5.3e-5,1.8406696 -1.492198,3.3328137 -3.332866,3.3328662 -1.840853,2.055e-4 -3.333282,-1.4920142 -3.333335,-3.3328662 5.3e-5,-1.840852 1.492482,-3.3330717 3.333335,-3.3328662 z" />
+    </g>
+  </g>
+</svg>