Add hover tooltip and Logic Pro-style ruler to simulation timeline

- Hover tooltip: imperative DOM mounted in u.over (no React renders per
  mousemove). Run mode uses uPlot's nearest-series focus; stacked mode
  walks cumulative bands at the cursor's y to find the hit. Edge-clamps
  and flips above/below the cursor so it always fits in the chart area.
- Top x-axis rendered as a Logic Pro-style ruler with a separator line.
  Playhead is a rounded-top "pin" with a triangular tip and white
  border, drawn in physical pixels with dpr-correct sizes.
- Ruler scrubbing: clicks/drags on the axis area scrub the playhead
  via native pointer events with setPointerCapture.
- Cursor unlocks (lock: false) so the dotted crosshair only shows on
  hover.
- Add SubView.noPadding flag and move BottomPanel padding from the
  outer container into the header and the padded content variant, so
  noPadding subviews are truly full-bleed.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: kube

libs/@hashintel/petrinaut/src/components/sub-view/horizontal/horizontal-tabs-container.tsx

@@ -41,11 +41,21 @@ const tabButtonStyle = cva({
   },
 });
 
-const contentStyle = css({
-  fontSize: "xs",
-  padding: "3",
-  flex: "[1]",
-  overflowY: "auto",
+const contentStyle = cva({
+  base: {
+    fontSize: "xs",
+    flex: "[1]",
+    overflowY: "auto",
+  },
+  variants: {
+    padded: {
+      // Includes the 4px that previously came from the outer panel container,
+      // so padded subviews keep the same visual inset.
+      true: { padding: "[16px]" },
+      false: { padding: "0" },
+    },
+  },
+  defaultVariants: { padded: true },
 });
 
 interface TabButtonProps {
@@ -122,7 +132,7 @@ export const HorizontalTabsContainer: React.FC<
       {/* Content */}
       <div
         id={`tabpanel-${activeTabId}`}
-        className={contentStyle}
+        className={contentStyle({ padded: !activeSubView.noPadding })}
         role="tabpanel"
         aria-labelledby={`tab-${activeTabId}`}
       >
@@ -196,7 +206,7 @@ export const HorizontalTabsContent: React.FC<{
   return (
     <div
       id={tabpanelId}
-      className={contentStyle}
+      className={contentStyle({ padded: !activeSubView.noPadding })}
       role="tabpanel"
       aria-labelledby={tabId}
     >

libs/@hashintel/petrinaut/src/components/sub-view/types.ts

@@ -72,4 +72,11 @@ export interface SubView {
    * Only affects vertical layout. When set, the section can be resized by dragging its bottom edge.
    */
   resizable?: SubViewResizeConfig;
+  /**
+   * When true, the horizontal tab content wrapper renders with no padding,
+   * letting the subview occupy the full width/height of the panel area.
+   * Useful for visualizations like charts that manage their own bounds.
+   * Defaults to false.
+   */
+  noPadding?: boolean;
 }

libs/@hashintel/petrinaut/src/views/Editor/panels/BottomPanel/panel.tsx

@@ -52,7 +52,6 @@ const panelStyle = cva({
 });
 
 const panelContainerStyle = css({
-  padding: "[4px]",
   display: "flex",
   flexDirection: "column",
 });
@@ -61,7 +60,7 @@ const headerStyle = css({
   display: "flex",
   alignItems: "center",
   justifyContent: "space-between",
-  padding: "[2px]",
+  padding: "[6px]",
   flexShrink: 0,
 });