feat: publish HoloLake model-native living system source

product-source/hololake-platform/e2e/zero-shift-closeup.spec.ts

@@ -0,0 +1,77 @@
+import { test, expect } from '@playwright/test'
+
+test('closeup: heading marker in gutter', async ({ page }) => {
+  await page.goto('http://localhost:5173')
+  await page.waitForTimeout(800)
+
+  const noteItem = page.locator('.note-list__item', { hasText: 'Build Laputa App' })
+  await noteItem.click()
+  await page.waitForTimeout(800)
+
+  // Find "Overview" heading and take a tight crop around it
+  const heading = page.locator('.cm-header-2', { hasText: 'Overview' }).first()
+  await expect(heading).toBeVisible()
+  const hBox = await heading.boundingBox()
+  if (!hBox) throw new Error('heading not found')
+
+  // Crop: include gutter area to the left (extra 80px) and a small vertical band
+  const clip = {
+    x: Math.max(0, hBox.x - 80),
+    y: hBox.y - 10,
+    width: hBox.width + 120,
+    height: hBox.height + 20,
+  }
+
+  // Before click — preview mode, no marker visible
+  await page.screenshot({ path: 'test-results/closeup-heading-inactive.png', clip })
+
+  // Click on heading to activate
+  await page.mouse.click(hBox.x + hBox.width / 2, hBox.y + hBox.height / 2)
+  await page.waitForTimeout(500)
+
+  // After click — ## marker should appear in gutter
+  await page.screenshot({ path: 'test-results/closeup-heading-active.png', clip })
+
+  // Verify the marker is visible (opacity > 0)
+  const marker = page.locator('.cm-heading-line .cm-formatting-block.cm-formatting-block-visible').first()
+  if (await marker.count() > 0) {
+    const opacity = await marker.evaluate(el => window.getComputedStyle(el).opacity)
+    console.log(`Heading marker opacity when active: ${opacity}`)
+    expect(parseFloat(opacity)).toBeGreaterThan(0)
+
+    const mBox = await marker.boundingBox()
+    console.log(`Heading marker bounding box: ${JSON.stringify(mBox)}`)
+
+    // The marker should be to the LEFT of the heading text
+    if (mBox && hBox) {
+      console.log(`Marker right edge: ${mBox.x + mBox.width}, Heading left edge: ${hBox.x}`)
+      expect(mBox.x + mBox.width).toBeLessThanOrEqual(hBox.x + 5) // marker is left of heading
+    }
+  }
+
+  // Now check bullet closeup
+  const bulletLine = page.locator('.cm-line', { hasText: 'Four-panel layout working' }).first()
+  const bBox = await bulletLine.boundingBox()
+  if (!bBox) throw new Error('bullet not found')
+
+  // First click elsewhere to deactivate
+  await page.mouse.click(hBox.x + 10, hBox.y - 40)
+  await page.waitForTimeout(300)
+
+  const bulletClip = {
+    x: Math.max(0, bBox.x - 20),
+    y: bBox.y - 5,
+    width: Math.min(400, bBox.width + 40),
+    height: bBox.height + 60, // include next line too
+  }
+
+  // Inactive bullets
+  await page.screenshot({ path: 'test-results/closeup-bullet-inactive.png', clip: bulletClip })
+
+  // Click on bullet line
+  await page.mouse.click(bBox.x + bBox.width / 2, bBox.y + bBox.height / 2)
+  await page.waitForTimeout(500)
+
+  // Active bullet
+  await page.screenshot({ path: 'test-results/closeup-bullet-active.png', clip: bulletClip })
+})