@jax-data-science/sci-image-visualizer 0.1.0

package/lib/visualizer.component.d.ts

@@ -0,0 +1,378 @@
+import { ChangeDetectorRef, AfterViewInit, EventEmitter, NgZone, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { MenuItem, MessageService, TreeNode } from 'primeng/api';
+import { ContextMenu } from 'primeng/contextmenu';
+import { IImageInfo } from './contracts/image.contract';
+import { ImageStatePort } from './contracts/ports/image-state.port';
+import { Polygon } from './models/region';
+import { RegionOpsService } from './region-ops.service';
+import { VisualizerStore } from './store/visualizer-store.service';
+import { PlotType, PlotTypeDescriptor } from './contracts/plot-type';
+import { IVisualizer } from './contracts/visualizer.contract';
+import { SamToolService } from './toolbar/segmentation/sam-tool.service';
+import { SamPointToolService } from './toolbar/segmentation/sam-point-tool.service';
+import { CellSegmentToolService } from './toolbar/segmentation/cell-segment-tool.service';
+import { ToolbarToolVisibility } from './contracts/toolbar-config';
+import { VizConfig } from './contracts/viz-config';
+import * as i0 from "@angular/core";
+export declare class VisualizerComponent implements OnInit, OnChanges, AfterViewInit, OnDestroy {
+    private state;
+    plotService: IVisualizer;
+    messageService: MessageService;
+    private ngZone;
+    private cdr;
+    private session;
+    private samTool;
+    private cellSegmentTool;
+    private samPointTool;
+    private regionOps;
+    private vizConfig?;
+    /** Per-instance toast key. MessageService is a global singleton, so two live
+     *  `<visualizer>` instances (main viewer + pipeline-dialog preview) sharing
+     *  one key would each render the same message — a duplicate toast. A unique
+     *  key per instance scopes the toast to the component that raised it. */
+    private static nextToastId;
+    isStackEvent: EventEmitter<any>;
+    isGrayscaleEvent: EventEmitter<any>;
+    /** Which toolbar groups to show. A partial override merges over the full set,
+     *  so `{ specialTools: false }` hides only that group. Defaults to everything. */
+    set toolbarTools(v: ToolbarToolVisibility | undefined);
+    get toolbarTools(): Required<ToolbarToolVisibility>;
+    private _toolbarTools;
+    /** Expose test-only plot modes in the selector (e.g. the napari `Image`
+     *  mode, otherwise hidden). The host app sets this from a `?test=1` URL
+     *  toggle. Off by default, so production users never see them. */
+    testMode: boolean;
+    /** Image-smoothing state for the toolbar's Smoothen toggle (OSD only).
+     *  Defaults to `false` so OSD shows raw pixels (nearest-neighbour). */
+    imageSmoothingEnabled: boolean;
+    loadingMessage: string;
+    zoom: boolean;
+    fileName: string | undefined;
+    private loadedFileName;
+    imageInfo: IImageInfo | undefined;
+    private unsub;
+    private previewSubscription;
+    stackLoading: boolean;
+    imgLoading: boolean;
+    loadingPercentage: number;
+    cacheProgress: number | null;
+    sharpening: boolean;
+    /** A jit-service cache copy is actively in progress (determinate 0..99). Drives the cache
+     *  progress bar independently of `imgLoading` so the bar can't be dropped — or masked by the
+     *  "Sharpening preview..." overlay — mid-download if the loading flag flips early. */
+    get isCaching(): boolean;
+    private running;
+    zIndex: number;
+    maxIndex: number;
+    contextMenu: ContextMenu;
+    contextMenuItems: MenuItem[];
+    activeDragMode: string | null;
+    /** Whether a region action is available to undo (jit-ui#85). Mirrors the
+     *  shared RegionStore's history depth; drives the toolbar Undo button. */
+    canUndoRegion: boolean;
+    /** Whether an undone region action is available to redo (jit-ui#85). */
+    canRedoRegion: boolean;
+    /** Custom-threshold Simplify dialog (jit-ui#85). */
+    displaySimplifyDialog: boolean;
+    simplifyThreshold: number;
+    /** Current region selection (array indices) — mirrored from the store so the
+     *  context-menu region actions can read it synchronously (jit-ui#85). */
+    private selectedIndices;
+    /** Wand sensitivity — higher = stricter (smaller selection). Matches QuPath default. */
+    wandSensitivity: number;
+    /** Brush diameter in image-pixel coordinates (drives the painted disc size). */
+    brushSize: number;
+    /** SAM model picker options + current selection (jit-ui#90 P1). Only models
+     *  with a hosted ONNX pair (configured via setSamModelUrls at app init) are
+     *  offered, so the picker can't select a model that can't run. */
+    samModels: {
+        id: string;
+        label: string;
+    }[];
+    samModelId: string;
+    /** SAM download/segment toast state (bound by the `sam` p-toast template). */
+    samStatus: string;
+    samProgress: number;
+    samDownloading: boolean;
+    samBusy: boolean;
+    /** Whether the shared `sam` toast is currently shown (avoids stacking it on
+     *  every point click, which re-runs inference). */
+    private samToastShown;
+    readonly samToastKey: string;
+    /** Subscriptions to the point tool's live feeds (status/busy/download). */
+    private samPointSub;
+    /** Vertex eraser radius in image-pixel coordinates. */
+    vertexEraserRadius: number;
+    colormapsOptions: any;
+    reversescale: boolean;
+    selectedColormap: any;
+    /** Channels & Histogram dialog visibility (opened from the toolbar). */
+    showChannelHistogram: boolean;
+    /** Region Editor dialog visibility (opened from the toolbar). */
+    showRegionEditor: boolean;
+    /** Region Editor dialog width. On open it is set to the configured host
+     *  element's current width, or — when no selector is configured / the element
+     *  isn't found — to a quarter of the page (see openRegionEditor). */
+    regionEditorWidth: string;
+    stackOptions: {
+        name: string;
+        val: string;
+    }[];
+    selectedStackOption: {
+        name: string;
+        val: string;
+    } | undefined;
+    readonly plotDivName: string;
+    plotType: PlotType;
+    isHeatmap: boolean;
+    activeSurface3dMode: string;
+    /** Whether the napari 3D coordinate-axes / scale gizmo is shown (volume/isosurface). */
+    axesVisible: boolean;
+    wireframeActive: boolean;
+    /** napari 3D decimate factor (1 = Full … 8 = ⅛; default ½); changing it re-plots. */
+    resolutionScale: number;
+    /** Plot types the active backend advertises (3D gated by capability). */
+    plotTypeOptions: PlotTypeDescriptor[];
+    selectedPlotType: PlotType;
+    /** Floating intensity-profile inset (LINE mode). */
+    readonly intensityInsetDiv = "intensity-inset-plot";
+    profilePanelPos: {
+        x: number;
+        y: number;
+    };
+    private profilePanelDragging;
+    private profilePanelStart;
+    /** Toolbar docking: docked across the top by default; dragging its handle
+     *  detaches it into a floating, movable window (frees the top row for the
+     *  visualization). */
+    toolbarFloating: boolean;
+    toolbarPos: {
+        x: number;
+        y: number;
+    };
+    private toolbarDragging;
+    private toolbarStart;
+    private latestProfiles;
+    /** Drives the intensity inset panel's visibility — true whenever any
+     *  intensity-profile line exists (independent of the current plot type). */
+    hasProfiles: boolean;
+    private intensityProfileSub?;
+    private viewportChangeSub?;
+    private profileDragMoveListener?;
+    private profileDragUpListener?;
+    private profileResizeListener?;
+    /** LINE plot type shows the image + draggable line ROI + intensity inset. */
+    get isProfileMode(): boolean;
+    /** True for the Image plot type, which renders as a natively pan/zoom-able
+     *  raster — so the backend-agnostic zoom/pan toolbar tools are hidden. The
+     *  component drives this off the plot type, not the active backend. */
+    get isImageView(): boolean;
+    /** Isosurface band as a 0–255 slider position, mapped onto the volume's real
+     *  intensity range by the renderer. Defaults to the full range. */
+    isoRange: number[];
+    plotWidthSubscription?: Subscription;
+    imageLoadingSubscription?: Subscription;
+    imgLoadingMessageSubscription?: Subscription;
+    isZoomSubscription?: Subscription;
+    filenameSubscription?: Subscription;
+    autoscaleSubscription?: Subscription;
+    private plotContextMenuListener?;
+    private keydownListener?;
+    private wheelListener?;
+    /** Debounced z-slice scrubbing (see SliceScrubber — refactoring plan Step 7). */
+    private readonly scrubber;
+    constructor(state: ImageStatePort, plotService: IVisualizer, messageService: MessageService, ngZone: NgZone, cdr: ChangeDetectorRef, session: VisualizerStore, samTool: SamToolService, cellSegmentTool: CellSegmentToolService, samPointTool: SamPointToolService, regionOps: RegionOpsService, vizConfig?: VizConfig | undefined);
+    /**
+     * Plot types offered in the selector for the current image:
+     *  - Outside **test mode**, only the curated default set (descriptors with a
+     *    `productionLabel`) is offered, shown under suffix-free names — Image,
+     *    Heatmap, Contour and the napari Surface / Volume / Isosurface. Test mode
+     *    exposes every backend's type under its full (backend-suffixed) label.
+     *  - 3D types hidden when the backend can't render a 3D scene.
+     *  - stack-only types (volume, isosurface) hidden unless the file is a stack —
+     *    a volume needs multiple z-slices.
+     *  - scalar-intensity types (contour, surface, isosurface) hidden for RGB
+     *    images — they map a single intensity per pixel. Image and Heatmap render
+     *    any image.
+     */
+    private computePlotTypeOptions;
+    ngOnChanges(changes: SimpleChanges): void;
+    /** If the active plot type is no longer in the offered options (e.g. test mode
+     *  turned off while a test-only type was active, or a scalar type carried onto
+     *  an RGB image), fall back to the default 2D Image view. */
+    private reconcileSelectedPlotType;
+    ngOnInit(): void;
+    ngAfterViewInit(): void;
+    onProfilePanelDragStart(e: MouseEvent): void;
+    /** Grab the toolbar handle: detach it into a floating window (if still docked)
+     *  and start dragging. */
+    onToolbarDragStart(e: MouseEvent): void;
+    /** Snap the floating toolbar back to its docked position across the top. */
+    dockToolbar(): void;
+    /** Render the intensity inset chart from the latest profile data. The actual
+     *  charting is owned by the visualizer service — the component just decides
+     *  when (profile mode + a fresh profile). */
+    private renderIntensityInset;
+    /** Toolbar "Intensity" group: add another line ROI (next bright colour). */
+    addProfileLine(): Promise<void>;
+    ngOnDestroy(): void;
+    hasRegions(): boolean;
+    /**
+     * This method is called in mainFacade.configRequest() - DO NOT DELETE
+     */
+    getRegionPolygons(): Polygon[];
+    /**
+     * Select the color scale type: called by the color scale select button
+     * @param event
+     */
+    toggleReverseScale(): void;
+    /**
+     * Select a color map: called by the color map dropdown button
+     * @param colormapNode
+     */
+    selectColormap(colormapNode: TreeNode): void;
+    /** Open the Channels & Histogram dialog (toolbar button). */
+    openChannelHistogram(): void;
+    /** Open the Region Editor dialog (toolbar button). The editor stays linked to
+     *  this plotting instance through the root RegionStore singleton, so it works
+     *  the same as the former right-panel Regions tab. */
+    openRegionEditor(): void;
+    /**
+     * Called by the stack/single image dropdown button
+     * @param showstack
+     */
+    selectStackOption(selectedStackOption: any): void;
+    updateZIndex(urls?: string[]): void;
+    /**
+     * Live z-slice scrub for the Image view: the renderer swaps the displayed
+     * slice in place (no re-mount), so dragging the slider steps through the
+     * stack the same way the heatmap frame slider does.
+     */
+    onZSlide(z: number | undefined): void;
+    /**
+     * Live (debounced) scrub while dragging the Image-view z-slider: update the
+     * slice as the user drags, but coalesce rapid changes so we don't fire a
+     * slice swap on every pixel. The final value also lands via onZSlide (onSlideEnd).
+     */
+    onZScrub(z: number | undefined): void;
+    /**
+     * Keyboard stack navigation: ←/→ step the z-slice in the Image view, the same
+     * way the slider does. Only active for a loaded stack in Image view, and
+     * ignored while a form field is focused so typing isn't hijacked. Up/Down are
+     * left to OpenSeadragon (panning).
+     */
+    onKeydown(e: KeyboardEvent): void;
+    /** Move the displayed slice by `delta`, clamped to the stack bounds. */
+    stepSlice(delta: number): void;
+    reloadAndPlot(): void;
+    cancelLoading(): void;
+    downloadImage(): void;
+    autoscaleImage(): void;
+    /** Toolbar pixel/smooth toggle: flip smoothing and apply to the active backend. */
+    onToggleImageSmoothing(): void;
+    resetAxes(): void;
+    toggleDragMode(mode: string): void;
+    /** Region draw/select/edit modes routed through the region overlay. The
+     *  The vertex tools (drawpolygon/addpoint/deletepoint/move) are
+     *  handled by the OpenSeadragon overlay; Plotly's overlay maps them to no-op. */
+    private isRegionMode;
+    /** Live-update the isosurface as the range slider moves. The control is only
+     *  available when the active backend renders isosurfaces (ISOSURFACE mode). */
+    onIsoRangeChange(values: number[] | undefined): void;
+    onWandSensitivityChange(value: number | undefined): void;
+    onBrushSizeChange(value: number | undefined): void;
+    onVertexEraserRadiusChange(value: number | undefined): void;
+    zoomIn(): void;
+    zoomOut(): void;
+    deleteRegion(): void;
+    /** Undo the most recent region action (jit-ui#85). Up to 10 steps back. */
+    undoRegion(): void;
+    /** Redo the most recently undone region action (jit-ui#85). */
+    redoRegion(): void;
+    /** The currently-selected regions (live store instances). */
+    private get selectedRegions();
+    /** Regions eligible for set-ops: closed areas (rect / closed polygon /
+     *  multi-polygon), excluding intensity-profile lines. */
+    private opEligible;
+    /** Image pixel dimensions for the raster ops; falls back to the selection's
+     *  extent when the image size isn't known (keeps clamping sane). */
+    private opImageDims;
+    /** True when ≥2 eligible regions are selected (Merge available). */
+    get canMergeRegions(): boolean;
+    /** True when any selected region is multi-part (Ungroup available). */
+    get canUngroupRegions(): boolean;
+    /** True when ≥1 eligible region is selected (Inverse / Simplify available). */
+    get hasEligibleSelection(): boolean;
+    /** Select every region on the image (excludes intensity-profile lines). */
+    selectAllRegions(): void;
+    /** Merge the selected regions into a single (possibly multi-part) region. */
+    mergeRegions(): void;
+    /** Split each selected multi-part region into one region per part. */
+    ungroupRegions(): void;
+    /** Replace the selection with its inverse inside the image rectangle. */
+    inverseRegions(): void;
+    /** Douglas–Peucker simplify each selected region by `thresholdPx`. */
+    simplifyRegions(thresholdPx: number): void;
+    /** Open the custom-threshold simplify dialog. */
+    openSimplifyDialog(): void;
+    /**
+     * Commit a set-op: drop the `remove` regions, append `add`, and select the
+     * results. Goes through setRegions so it's undo-tracked and re-rendered;
+     * profile lines and unselected regions are preserved.
+     */
+    private replaceRegions;
+    /** Box-prompted SAM segmentation of the drawn rectangles (jit-ui#90). A sticky
+     *  `sam` toast shows live status + a download progress bar (first run pulls the
+     *  encoder, ~170 MB); it stays open until the run finishes (bar hits 100%). */
+    segmentRegions(): Promise<void>;
+    /** Auto-segment cells inside each drawn rectangle with cellpose-SAM, client-side
+     *  (jit-ui#90). Each box is cropped (browser slide-crop) then run through the
+     *  cellpose-js model; the same sticky `sam` toast + progress bar is reused. */
+    segmentCellpose(): Promise<void>;
+    /** Shared driver for the box-prompt segment tools: wires the tool's status +
+     *  download progress into the sticky `sam` toast, runs `op`, and reports the
+     *  region count. Keeps the toast open until the run settles (bar hits 100%). */
+    private runSegmentWithToast;
+    /** Show the shared sticky `sam` toast once (idempotent — re-adding would stack
+     *  a new toast on every point click). */
+    private showSamToast;
+    /** Dismiss the shared `sam` toast and reset its progress/spinner state. */
+    private hideSamToast;
+    /** Pick the SAM model the segment tools use (jit-ui#90 P1). */
+    onSamModelChange(id: string): void;
+    /** Convert the selected region to a smooth bezier curve. */
+    toBezierRegion(): void;
+    /** Convert the selected region back to a straight-edged polygon. */
+    toPolygonRegion(): void;
+    /**
+     * Immediate region actions on the current selection (jit-ui#85): merge,
+     * ungroup, inverse, simplify, the Bézier conversions, and delete — the
+     * one-shot geometry transforms, grouped apart from the tool/mode toggles and
+     * shown only when something is selected. Each item is gated on what the
+     * selection supports.
+     */
+    private buildRegionActionItems;
+    private buildContextMenuItems;
+    toggleSurface3dMode(mode: string): void;
+    resetSurfaceCamera(): void;
+    /** Toggle the napari 3D coordinate-axes / scale gizmo (volume/isosurface). No-op on backends
+     *  that don't render one (the control method is optional). */
+    toggleAxes(): void;
+    /** Toggle the napari surface wireframe (edges vs filled). No-op on backends without a surface. */
+    toggleWireframe(): void;
+    /** Change the napari 3D decimate factor. Decimation changes the fetched/assembled data, so this
+     *  re-plots the current 3D type at the new resolution (unlike axes/wireframe, which are live). */
+    selectResolution(scale: number): void;
+    /**
+     * Switch the active plot type (heatmap, surface, contour, scatter, line,
+     * scatter3d, isosurface). Keeps `isHeatmap` as the 2D-vs-3D flag the rest of
+     * the toolbar/context-menu logic relies on, deactivates 2D-only tools when
+     * moving to a 3D type, then re-plots.
+     */
+    onSelectPlotType(type: PlotType): void;
+    /** Deactivate whatever tool is armed and clear every tool mode. */
+    private deactivateActiveTool;
+    static ɵfac: i0.ɵɵFactoryDeclaration<VisualizerComponent, [null, null, null, null, null, null, null, null, null, null, { optional: true; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<VisualizerComponent, "visualizer", never, { "toolbarTools": { "alias": "toolbarTools"; "required": false; }; "testMode": { "alias": "testMode"; "required": false; }; }, { "isStackEvent": "isStackEvent"; "isGrayscaleEvent": "isGrayscaleEvent"; }, never, ["*"], false, never>;
+}

package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "@jax-data-science/sci-image-visualizer",
+  "version": "0.1.0",
+  "description": "Browser-based scientific image visualization for Angular — gigapixel whole-slide (OpenSeadragon), 2D/3D (Plotly) and WebGPU (napari-js) rendering, with region/annotation editing and in-browser SAM segmentation.",
+  "keywords": [
+    "angular",
+    "image-visualization",
+    "scientific-visualization",
+    "openseadragon",
+    "plotly",
+    "napari",
+    "webgpu",
+    "whole-slide-imaging",
+    "digital-pathology",
+    "microscopy",
+    "segmentation",
+    "sam",
+    "onnxruntime",
+    "annotation",
+    "region-editor"
+  ],
+  "author": "The Jackson Laboratory",
+  "license": "MIT",
+  "homepage": "https://github.com/TheJacksonLaboratory/sci-image-visualizer#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/TheJacksonLaboratory/sci-image-visualizer.git"
+  },
+  "bugs": {
+    "url": "https://github.com/TheJacksonLaboratory/sci-image-visualizer/issues"
+  },
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "fast-png": "^6.4.0",
+    "napari-js": "^0.11.0",
+    "openseadragon": "^6.0.2",
+    "plotly.js-dist-min": "^3.0.1",
+    "tslib": "^2.3.0"
+  },
+  "peerDependencies": {
+    "@angular/animations": "^17.3.0",
+    "@angular/common": "^17.3.0",
+    "@angular/core": "^17.3.0",
+    "@angular/forms": "^17.3.0",
+    "@angular/router": "^17.3.0",
+    "buffer": "^5.7.1",
+    "cellpose-js": "^0.3.0",
+    "file-saver": "^2.0.5",
+    "image-js": "^0.35.6",
+    "onnxruntime-web": "~1.26.0",
+    "primeng": "^17.18.0",
+    "rxjs": "^7.8.0"
+  },
+  "overrides": {
+    "@ngtools/webpack": "17.3.17"
+  },
+  "module": "fesm2022/jax-data-science-sci-image-visualizer.mjs",
+  "typings": "index.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "esm2022": "./esm2022/jax-data-science-sci-image-visualizer.mjs",
+      "esm": "./esm2022/jax-data-science-sci-image-visualizer.mjs",
+      "default": "./fesm2022/jax-data-science-sci-image-visualizer.mjs"
+    }
+  }
+}

package/src/lib/assets/3d-coordinates.svg

@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   version="1.1"
+   x="0px"
+   y="0px"
+   viewBox="0 0 60.002499 51.002498"
+   enable-background="new 0 0 60 51"
+   xml:space="preserve"
+   id="svg5"
+   sodipodi:docname="3d-coordinates.svg"
+   width="60.002499"
+   height="51.002499"
+   inkscape:version="1.4.4 (dcaf3e7, 2026-05-05)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+     id="defs5" /><sodipodi:namedview
+     id="namedview5"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="14.566667"
+     inkscape:cx="30.377574"
+     inkscape:cy="26.121281"
+     inkscape:window-width="1921"
+     inkscape:window-height="1186"
+     inkscape:window-x="639"
+     inkscape:window-y="30"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg5" /><g
+     id="g4"
+     transform="translate(0,0.0025)"><path
+       fill="#000000"
+       d="M 31,30.47 V 12 c 0,-0.55 -0.45,-1 -1,-1 -0.55,0 -1,0.45 -1,1 v 18.49 l -17.59,12.7 c -0.45,0.32 -0.55,0.95 -0.22,1.4 0.32,0.45 0.95,0.55 1.4,0.23 L 30.02,32.23 48.44,44.83 C 48.61,44.94 48.8,45 49,45 c 0.32,0 0.63,-0.15 0.83,-0.44 0.31,-0.46 0.2,-1.08 -0.26,-1.39 z"
+       id="path1" /><path
+       fill="#000000"
+       d="M 29,4.41 V 7 c 0,0.55 0.45,1 1,1 0.55,0 1,-0.45 1,-1 V 4.41 L 33.71,1.7 c 0.39,-0.39 0.39,-1.02 0,-1.41 -0.39,-0.39 -1.02,-0.39 -1.41,0 L 30,2.59 27.71,0.3 c -0.39,-0.39 -1.02,-0.39 -1.41,0 -0.39,0.39 -0.39,1.02 0,1.41 z"
+       id="path2" /><path
+       fill="#000000"
+       d="m 57.41,47 2.29,-2.29 c 0.39,-0.39 0.39,-1.02 0,-1.41 -0.39,-0.39 -1.02,-0.39 -1.41,0 L 56,45.59 53.71,43.3 c -0.39,-0.39 -1.02,-0.39 -1.41,0 -0.39,0.39 -0.39,1.02 0,1.41 L 54.59,47 52.3,49.29 c -0.39,0.39 -0.39,1.02 0,1.41 0.19,0.2 0.44,0.3 0.7,0.3 0.26,0 0.51,-0.1 0.71,-0.29 l 2.29,-2.3 2.29,2.29 c 0.2,0.2 0.45,0.3 0.71,0.3 0.26,0 0.51,-0.1 0.71,-0.29 0.39,-0.39 0.39,-1.02 0,-1.41 z"
+       id="path3" /><path
+       fill="#000000"
+       d="m 7.92,44.38 c 0.1,-0.24 0.1,-0.52 0,-0.76 C 7.82,43.38 7.62,43.18 7.38,43.08 7.26,43.03 7.13,43 7,43 H 1 c -0.55,0 -1,0.45 -1,1 0,0.55 0.45,1 1,1 H 4.59 L 0.3,49.29 c -0.09,0.09 -0.17,0.2 -0.22,0.33 -0.1,0.24 -0.1,0.52 0,0.76 0.1,0.24 0.3,0.44 0.54,0.54 C 0.74,50.97 0.87,51 1,51 H 7 C 7.55,51 8,50.55 8,50 8,49.45 7.55,49 7,49 H 3.41 L 7.7,44.71 C 7.8,44.62 7.87,44.5 7.92,44.38 Z"
+       id="path4" /></g></svg>

package/src/lib/assets/cells.svg

@@ -0,0 +1 @@
+<svg class="svg-icon" style="width: 1.0048828125em; height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1029 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M519.04 2.048c-280.8 0-509.216 228.448-509.216 509.216 0 280.8 228.416 509.216 509.216 509.216 280.832 0 509.248-228.448 509.248-509.216C1028.288 230.496 799.872 2.048 519.04 2.048zM519.04 939.456c-236.128 0-428.16-192.064-428.16-428.192 0-236.064 192.032-428.16 428.16-428.16S947.232 275.2 947.232 511.264C947.232 747.392 755.168 939.456 519.04 939.456z"  /><path d="M692.448 574.464m-123.968 0a3.874 3.874 0 1 0 247.936 0 3.874 3.874 0 1 0-247.936 0Z"  /><path d="M416.192 253.824m-92.064 0a2.877 2.877 0 1 0 184.128 0 2.877 2.877 0 1 0-184.128 0Z"  /><path d="M317.248 561.824m-111.328 0a3.479 3.479 0 1 0 222.656 0 3.479 3.479 0 1 0-222.656 0Z"  /><path d="M512.672 780.704m-46.912 0a1.466 1.466 0 1 0 93.824 0 1.466 1.466 0 1 0-93.824 0Z"  /><path d="M711.936 318.784m-50.656 0a1.583 1.583 0 1 0 101.312 0 1.583 1.583 0 1 0-101.312 0Z"  /><path d="M527.52 446.368m-42.912 0a1.341 1.341 0 1 0 85.824 0 1.341 1.341 0 1 0-85.824 0Z"  /></svg>

package/src/lib/assets/click.svg

@@ -0,0 +1 @@
+<svg class="svg-icon" style="width: 1em; height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M620.48 933.376l86.144-202.752 206.208 193.344L960 873.6l-206.272-193.344 196.864-99.072L436.16 424.256 620.48 933.376zM485.824 224.256c0 24.832-20.032 44.928-44.8 44.928l0 0c-24.832 0-44.928-20.096-44.928-44.928L396.096 108.864C396.032 84.032 416.128 64 441.024 64l0 0c24.768 0 44.8 20.032 44.8 44.864L485.824 224.256zM310.464 261.312c17.536 17.472 17.536 45.888 0 63.424l0 0c-17.472 17.472-45.952 17.472-63.424 0L165.44 243.136c-17.472-17.472-17.472-45.888 0-63.36l0 0c17.536-17.536 45.952-17.536 63.424 0L310.464 261.312zM555.264 244.352c-17.472 17.536-17.472 45.952 0 63.488l0 0c17.472 17.472 45.952 17.472 63.488 0l81.472-81.6c17.536-17.472 17.536-45.952 0-63.424l0 0c-17.472-17.536-45.888-17.536-63.36 0L555.264 244.352zM224.256 400.768c24.768 0 44.864 20.032 44.864 44.864l0 0c0 24.768-20.032 44.864-44.864 44.864L108.864 490.432C84.032 490.432 64 470.4 64 445.568l0 0c0-24.768 20.032-44.8 44.864-44.8L224.256 400.768 224.256 400.768zM278.208 556.8C295.68 539.328 324.096 539.328 341.632 556.928l0 0c17.536 17.408 17.536 45.888 0.064 63.36l-81.6 81.536c-17.472 17.536-45.952 17.536-63.424 0l0 0c-17.536-17.536-17.536-45.952 0-63.424L278.208 556.8z"  /></svg>