@pie-players/pie-assessment-toolkit 0.3.2 → 0.3.4

package/src/components/SectionToolBar.svelte

@@ -1,58 +0,0 @@
-<svelte:options
-	customElement={{
-		tag: "pie-section-toolbar",
-		shadow: "none",
-		props: {
-			enabledTools: { type: "String", attribute: "enabled-tools" },
-			position: { type: "String", attribute: "position" },
-			sectionId: { type: "String", attribute: "section-id" },
-			size: { type: "String", attribute: "size" },
-			language: { type: "String", attribute: "language" },
-			toolRegistry: { type: "Object", reflect: false },
-			pnpResolver: { type: "Object", reflect: false },
-			assessment: { type: "Object", reflect: false },
-			itemRef: { type: "Object", reflect: false },
-			item: { type: "Object", reflect: false },
-			hostButtons: { type: "Object", reflect: false },
-		},
-	}}
-/>
-
-<script lang="ts">
-	import "./item-toolbar-element.js";
-	import type { ToolRegistry } from "../services/ToolRegistry.js";
-	import type { PNPToolResolver } from "../services/PNPToolResolver.js";
-	import type { AssessmentEntity, AssessmentItemRef, ItemEntity } from "@pie-players/pie-players-shared/types";
-	import type { ToolbarItem } from "../services/toolbar-items.js";
-
-	let {
-		enabledTools = "",
-		position = "bottom",
-		sectionId = "",
-		size = "md" as "sm" | "md" | "lg",
-		language = "en-US",
-		toolRegistry = null as ToolRegistry | null,
-		pnpResolver = null as PNPToolResolver | null,
-		assessment = null as AssessmentEntity | null,
-		itemRef = null as AssessmentItemRef | null,
-		item = null as ItemEntity | null,
-		hostButtons = [] as ToolbarItem[],
-	} = $props();
-</script>
-
-<pie-item-toolbar
-	level="section"
-	scope-id={sectionId}
-	section-id={sectionId}
-	tools={enabledTools}
-	content-kind="section"
-	position={position}
-	{size}
-	{language}
-	{toolRegistry}
-	{pnpResolver}
-	{assessment}
-	{itemRef}
-	{item}
-	{hostButtons}
-></pie-item-toolbar>

package/src/components/ToolButton.svelte

@@ -1,146 +0,0 @@
-<script lang="ts">
-	/**
-	 * ToolButton
-	 *
-	 * Generic button component for rendering tool buttons in toolbars.
-	 * Uses ToolToolbarButtonDefinition from ToolRegistry for consistent rendering.
-	 */
-
-	import type { ToolToolbarButtonDefinition } from "../services/ToolRegistry.js";
-
-	// Props
-	let {
-		button,
-		class: className = "",
-	}: {
-		button: ToolToolbarButtonDefinition;
-		class?: string;
-	} = $props();
-
-	// Handle button click
-	function handleClick() {
-		if (!button.disabled && button.onClick) {
-			button.onClick();
-		}
-	}
-
-	// Derive button classes
-	const buttonClasses = $derived(
-		[
-			"tool-button",
-			button.className,
-			className,
-			button.disabled ? "tool-button--disabled" : "",
-		]
-			.filter(Boolean)
-			.join(" "),
-	);
-</script>
-
-<button
-	type="button"
-	class={buttonClasses}
-	disabled={button.disabled}
-	aria-label={button.ariaLabel}
-	title={button.tooltip || button.label}
-	onclick={handleClick}
-	data-tool-id={button.toolId}
->
-	{#if button.icon}
-		<span class="tool-button__icon" aria-hidden="true">
-			{#if button.icon.startsWith("<svg")}
-				<!-- Inline SVG -->
-				{@html button.icon}
-			{:else if button.icon.startsWith("http")}
-				<!-- External image URL -->
-				<img src={button.icon} alt="" />
-			{:else}
-				<!-- Icon name/class -->
-				<i class={`icon icon-${button.icon}`}></i>
-			{/if}
-		</span>
-	{/if}
-	<span class="tool-button__label">{button.label}</span>
-</button>
-
-<style>
-	.tool-button {
-		display: inline-flex;
-		align-items: center;
-		gap: 0.5rem;
-		padding: 0.5rem 1rem;
-		background: var(--pie-button-bg, #ffffff);
-		border: 1px solid var(--pie-button-border, #d1d5db);
-		border-radius: 0.375rem;
-		color: var(--pie-button-color, #374151);
-		font-size: 0.875rem;
-		font-weight: 500;
-		cursor: pointer;
-		transition: all 0.15s ease-in-out;
-		white-space: nowrap;
-	}
-
-	.tool-button:hover:not(:disabled) {
-		background: var(--pie-button-hover-bg, #f9fafb);
-		border-color: var(--pie-button-hover-border, #9ca3af);
-		color: var(--pie-button-hover-color, #111827);
-	}
-
-	.tool-button:active:not(:disabled) {
-		background: var(--pie-button-active-bg, #f3f4f6);
-		transform: translateY(1px);
-	}
-
-	.tool-button:focus-visible {
-		outline: 2px solid var(--pie-button-focus-outline, #3b82f6);
-		outline-offset: 2px;
-	}
-
-	.tool-button:disabled,
-	.tool-button--disabled {
-		opacity: 0.5;
-		cursor: not-allowed;
-	}
-
-	.tool-button__icon {
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-		width: 1.25rem;
-		height: 1.25rem;
-		flex-shrink: 0;
-	}
-
-	.tool-button__icon :global(svg) {
-		width: 100%;
-		height: 100%;
-		fill: currentColor;
-	}
-
-	.tool-button__icon img {
-		width: 100%;
-		height: 100%;
-		object-fit: contain;
-	}
-
-	.tool-button__label {
-		line-height: 1.25;
-	}
-
-	/* Compact variant - icon only */
-	.tool-button--compact .tool-button__label {
-		position: absolute;
-		width: 1px;
-		height: 1px;
-		padding: 0;
-		margin: -1px;
-		overflow: hidden;
-		clip: rect(0, 0, 0, 0);
-		white-space: nowrap;
-		border-width: 0;
-	}
-
-	.tool-button--compact {
-		padding: 0.5rem;
-	}
-</style>

package/src/components/ToolButtonGroup.svelte

@@ -1,125 +0,0 @@
-<script lang="ts">
-	/**
-	 * ToolButtonGroup
-	 *
-	 * Generic toolbar component that renders a group of tool buttons.
-	 * Implements the two-pass visibility model:
-	 * - Pass 1: Receives allowedToolIds from orchestrator (PNP/policies)
-	 * - Pass 2: Filters by tool relevance using ToolRegistry
-	 */
-
-	import type {
-		ToolRegistry,
-		ToolToolbarButtonDefinition,
-		ToolbarContext,
-	} from "../services/ToolRegistry.js";
-	import type { ToolContext } from "../services/tool-context.js";
-	import ToolButton from "./ToolButton.svelte";
-
-	// Props
-	let {
-		toolRegistry,
-		allowedToolIds,
-		context,
-		toolbarContext,
-		onToolClick,
-		orientation = "horizontal",
-		compact = false,
-		class: className = "",
-	}: {
-		/** Tool registry for filtering and button creation */
-		toolRegistry: ToolRegistry;
-		/** Tool IDs allowed by orchestrator (Pass 1) */
-		allowedToolIds: string[];
-		/** Context for visibility evaluation (Pass 2) */
-		context: ToolContext;
-		/** Context used for toolbar rendering contract */
-		toolbarContext: ToolbarContext;
-		/** Callback when tool button is clicked */
-		onToolClick?: (toolId: string) => void;
-		/** Layout orientation */
-		orientation?: "horizontal" | "vertical";
-		/** Compact mode (icon only) */
-		compact?: boolean;
-		/** Additional CSS classes */
-		class?: string;
-	} = $props();
-
-	// Two-pass visibility model
-	// Pass 2: Filter by tool relevance
-	const visibleTools = $derived(
-		toolRegistry.filterVisibleInContext(allowedToolIds, context),
-	);
-
-	// Create button definitions for visible tools using the toolbar contract
-	const buttons = $derived.by((): ToolToolbarButtonDefinition[] => {
-		const rendered = visibleTools
-			.map((tool) => toolRegistry.renderForToolbar(tool.toolId, context, toolbarContext))
-			.filter((tool): tool is NonNullable<typeof tool> => Boolean(tool));
-
-		return rendered
-			.map((tool) => tool.button)
-			.filter((button): button is ToolToolbarButtonDefinition => Boolean(button))
-			.map((button) => ({
-				...button,
-				onClick: () => {
-					button.onClick();
-					onToolClick?.(button.toolId);
-				},
-				className: compact
-					? `${button.className ? `${button.className} ` : ""}tool-button--compact`
-					: button.className,
-			}));
-	});
-
-	// Derive container classes
-	const containerClasses = $derived(
-		[
-			"tool-button-group",
-			`tool-button-group--${orientation}`,
-			compact ? "tool-button-group--compact" : "",
-			className,
-		]
-			.filter(Boolean)
-			.join(" "),
-	);
-</script>
-
-{#if buttons.length > 0}
-	<div class={containerClasses} role="toolbar" aria-label="Assessment tools">
-		{#each buttons as button (button.toolId)}
-			<ToolButton {button} />
-		{/each}
-	</div>
-{/if}
-
-<style>
-	.tool-button-group {
-		display: flex;
-		gap: 0.5rem;
-		padding: 0.5rem;
-		background: var(--tool-button-group-bg, transparent);
-		border-radius: 0.5rem;
-	}
-
-	.tool-button-group--horizontal {
-		flex-direction: row;
-		flex-wrap: wrap;
-		align-items: center;
-	}
-
-	.tool-button-group--vertical {
-		flex-direction: column;
-		align-items: stretch;
-	}
-
-	.tool-button-group--compact {
-		gap: 0.25rem;
-		padding: 0.25rem;
-	}
-
-	/* Empty state - hide when no buttons */
-	.tool-button-group:empty {
-		display: none;
-	}
-</style>