@pie-players/pie-tool-line-reader 0.3.4 → 0.3.5

package/dist/tool-line-reader.js

@@ -4630,10 +4630,10 @@ var mn;
 (function(t) {
   t.IDLE = "idle", t.LOADING = "loading", t.PLAYING = "playing", t.PAUSED = "paused", t.ERROR = "error";
 })(mn || (mn = {}));
-var ol = /* @__PURE__ */ dr('<div class="pie-tool-line-reader__mask pie-tool-line-reader__mask--top svelte-1a3d6dx" aria-hidden="true"></div> <div class="pie-tool-line-reader__mask pie-tool-line-reader__mask--bottom svelte-1a3d6dx" aria-hidden="true"></div> <div class="pie-tool-line-reader__mask pie-tool-line-reader__mask--left svelte-1a3d6dx" aria-hidden="true"></div> <div class="pie-tool-line-reader__mask pie-tool-line-reader__mask--right svelte-1a3d6dx" aria-hidden="true"></div>', 1), sl = /* @__PURE__ */ dr('<div class="pie-sr-only svelte-1a3d6dx" role="status" aria-live="polite" aria-atomic="true"> </div> <!>  <div role="application" tabindex="0" aria-roledescription="Draggable and resizable reading guide overlay"><div class="pie-tool-line-reader__container svelte-1a3d6dx"></div> <div class="pie-tool-line-reader__resize-handle pie-tool-line-reader__resize-handle--bottom svelte-1a3d6dx" title="Drag to resize height" role="button" tabindex="-1" aria-label="Resize handle - drag to adjust height"><svg width="20" height="8" viewBox="0 0 20 8" aria-hidden="true"><rect x="8" y="3" width="4" height="2" fill="var(--pie-primary, #4CAF50)" rx="1"></rect></svg></div></div>', 1);
+var ol = /* @__PURE__ */ dr('<div class="pie-tool-line-reader__mask pie-tool-line-reader__mask--top svelte-1a3d6dx" aria-hidden="true"></div> <div class="pie-tool-line-reader__mask pie-tool-line-reader__mask--bottom svelte-1a3d6dx" aria-hidden="true"></div> <div class="pie-tool-line-reader__mask pie-tool-line-reader__mask--left svelte-1a3d6dx" aria-hidden="true"></div> <div class="pie-tool-line-reader__mask pie-tool-line-reader__mask--right svelte-1a3d6dx" aria-hidden="true"></div>', 1), sl = /* @__PURE__ */ dr('<div class="pie-sr-only svelte-1a3d6dx" role="status" aria-live="polite" aria-atomic="true"> </div> <!>  <div role="group" tabindex="0" aria-roledescription="Draggable and resizable reading guide overlay"><div class="pie-tool-line-reader__container svelte-1a3d6dx"></div> <div class="pie-tool-line-reader__resize-handle pie-tool-line-reader__resize-handle--bottom svelte-1a3d6dx" title="Drag to resize height" role="button" tabindex="-1" aria-label="Resize handle - drag to adjust height"><svg width="20" height="8" viewBox="0 0 20 8" aria-hidden="true"><rect x="8" y="3" width="4" height="2" fill="var(--pie-primary, #4CAF50)" rx="1"></rect></svg></div></div>', 1);
 const ll = {
   hash: "svelte-1a3d6dx",
-  code: `.pie-sr-only.svelte-1a3d6dx {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0;}.pie-tool-line-reader.svelte-1a3d6dx {border:none;cursor:move;overflow:visible;position:absolute;transform:translate(-50%, -50%);user-select:none;pointer-events:auto;touch-action:none;}.pie-tool-line-reader.svelte-1a3d6dx:focus {outline:3px solid var(--pie-button-focus-outline, var(--pie-primary, #4A90E2));outline-offset:2px;}.pie-tool-line-reader.svelte-1a3d6dx:focus-visible {outline:3px solid var(--pie-button-focus-outline, var(--pie-primary, #4A90E2));outline-offset:2px;}.pie-tool-line-reader__container.svelte-1a3d6dx {width:100%;height:100%;position:relative;transition:background-color 0.2s ease;}.pie-tool-line-reader__resize-handle.svelte-1a3d6dx {position:absolute;cursor:ns-resize;z-index:10;display:flex;align-items:center;justify-content:center;}.pie-tool-line-reader__resize-handle--bottom.svelte-1a3d6dx {bottom:-10px;left:50%;transform:translateX(-50%);width:40px;height:16px;background-color:color-mix(in srgb, var(--pie-background, #fff) 90%, transparent);border-radius:8px;border:2px solid var(--pie-primary, #4caf50);}.pie-tool-line-reader__resize-handle.svelte-1a3d6dx:hover {background-color:color-mix(in srgb, var(--pie-primary, #4caf50) 20%, transparent);}.pie-tool-line-reader__resize-handle.svelte-1a3d6dx:active {cursor:ns-resize;}.pie-tool-line-reader.svelte-1a3d6dx:active {cursor:grabbing;}
+  code: `.pie-sr-only.svelte-1a3d6dx {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0;}.pie-tool-line-reader.svelte-1a3d6dx {border:none;cursor:move;overflow:visible;position:absolute;transform:translate(-50%, -50%);user-select:none;pointer-events:auto;touch-action:none;}.pie-tool-line-reader.svelte-1a3d6dx:focus {outline:3px solid var(--pie-button-focus-outline, var(--pie-primary, #4A90E2));outline-offset:2px;}.pie-tool-line-reader.svelte-1a3d6dx:focus-visible {outline:3px solid var(--pie-button-focus-outline, var(--pie-primary, #4A90E2));outline-offset:2px;}.pie-tool-line-reader__container.svelte-1a3d6dx {width:100%;height:100%;position:relative;transition:background-color 0.2s ease;}.pie-tool-line-reader__resize-handle.svelte-1a3d6dx {position:absolute;cursor:ns-resize;z-index:10;display:flex;align-items:center;justify-content:center;}.pie-tool-line-reader__resize-handle--bottom.svelte-1a3d6dx {bottom:-12px;left:50%;transform:translateX(-50%);width:44px;height:24px;background-color:color-mix(in srgb, var(--pie-background, #fff) 90%, transparent);border-radius:12px;border:2px solid var(--pie-primary, #4caf50);}.pie-tool-line-reader__resize-handle.svelte-1a3d6dx:hover {background-color:color-mix(in srgb, var(--pie-primary, #4caf50) 20%, transparent);}.pie-tool-line-reader__resize-handle.svelte-1a3d6dx:active {cursor:ns-resize;}.pie-tool-line-reader.svelte-1a3d6dx:active {cursor:grabbing;}
 
 	/* Masking overlays for obscure mode - 4 rectangles covering all areas except line reader window */.pie-tool-line-reader__mask.svelte-1a3d6dx {position:fixed;background:color-mix(in srgb, var(--pie-text, #000) 85%, transparent);z-index:999;pointer-events:none;}.pie-tool-line-reader__mask--top.svelte-1a3d6dx {top:0;left:0;right:0;
 		/* Height set via inline style */}.pie-tool-line-reader__mask--bottom.svelte-1a3d6dx {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@pie-players/pie-tool-line-reader",
-	"version": "0.3.4",
+	"version": "0.3.5",
 	"type": "module",
 	"description": "Reading guide overlay tool for PIE assessment player",
 	"repository": {
@@ -38,9 +38,9 @@
 	"unpkg": "./dist/tool-line-reader.js",
 	"jsdelivr": "./dist/tool-line-reader.js",
 	"dependencies": {
-		"@pie-players/pie-assessment-toolkit": "0.3.4",
-		"@pie-players/pie-context": "0.3.4",
-		"@pie-players/pie-players-shared": "0.3.4"
+		"@pie-players/pie-assessment-toolkit": "0.3.5",
+		"@pie-players/pie-context": "0.3.5",
+		"@pie-players/pie-players-shared": "0.3.5"
 	},
 	"types": "./dist/index.d.ts",
 	"scripts": {

package/tool-line-reader.svelte

@@ -312,7 +312,7 @@ import { onMount } from 'svelte';
 		style="left: {position.x}px; top: {position.y}px; width: {size.width}px; height: {size.height}px;"
 		onpointerdown={handlePointerDown}
 		onkeydown={handleKeyDown}
-		role="application"
+		role="group"
 		tabindex="0"
 		aria-label="Line Reader tool. Mode: {maskingMode === 'highlight' ? 'Highlight' : 'Masking'}. Use arrow keys to move, +/- to resize height, C to change color, [ and ] to adjust opacity, M to toggle mode. Current color: {colors.find(c => c.value === currentColor)?.name}, Opacity: {Math.round(currentOpacity * 100)}%"
 		aria-roledescription="Draggable and resizable reading guide overlay"
@@ -388,13 +388,13 @@ import { onMount } from 'svelte';
 	}
 
 	.pie-tool-line-reader__resize-handle--bottom {
-		bottom: -10px;
+		bottom: -12px;
 		left: 50%;
 		transform: translateX(-50%);
-		width: 40px;
-		height: 16px;
+		width: 44px;
+		height: 24px;
 		background-color: color-mix(in srgb, var(--pie-background, #fff) 90%, transparent);
-		border-radius: 8px;
+		border-radius: 12px;
 		border: 2px solid var(--pie-primary, #4caf50);
 	}