@blorkfield/blork-tabs 0.4.0 → 0.5.0

package/dist/index.cjs

@@ -32,6 +32,7 @@ __export(index_exports, {
   createPanelElement: () => createPanelElement,
   createPanelState: () => createPanelState,
   createPresetAnchor: () => createPresetAnchor,
+  createTagButton: () => createTagButton,
   detachFromGroup: () => detachFromGroup,
   findSnapTarget: () => findSnapTarget,
   getConnectedGroup: () => getConnectedGroup,
@@ -1633,6 +1634,80 @@ var TabManager = class {
     this.debugPanelElements.clear();
   }
 };
+
+// src/TagButton.ts
+function createTagButton(label, config = {}) {
+  const { defaultActive = false, inputs = [], onChange } = config;
+  const hasInputs = inputs.length > 0;
+  const el = document.createElement(hasInputs ? "div" : "button");
+  el.className = "blork-tabs-tag-btn";
+  if (hasInputs) {
+    el.setAttribute("role", "button");
+    el.setAttribute("tabindex", "0");
+  }
+  el.appendChild(document.createTextNode(label));
+  const inputElements = [];
+  if (hasInputs) {
+    const inputsContainer = document.createElement("span");
+    inputsContainer.className = "blork-tabs-tag-inputs";
+    for (const inputConfig of inputs) {
+      if (inputConfig.label) {
+        const labelSpan = document.createElement("span");
+        labelSpan.textContent = inputConfig.label;
+        inputsContainer.appendChild(labelSpan);
+      }
+      if (inputConfig.type === "select") {
+        const select = document.createElement("select");
+        select.className = "blork-tabs-tag-select";
+        for (const opt of inputConfig.options ?? []) {
+          const option = document.createElement("option");
+          option.value = opt.value;
+          option.textContent = opt.label;
+          select.appendChild(option);
+        }
+        select.addEventListener("click", (e) => e.stopPropagation());
+        select.addEventListener("mousedown", (e) => e.stopPropagation());
+        inputsContainer.appendChild(select);
+        inputElements.push(select);
+      } else {
+        const input = document.createElement("input");
+        input.type = "number";
+        input.className = "blork-tabs-tag-input";
+        if (inputConfig.defaultValue !== void 0) input.value = String(inputConfig.defaultValue);
+        if (inputConfig.step !== void 0) input.step = String(inputConfig.step);
+        if (inputConfig.min !== void 0) input.min = String(inputConfig.min);
+        if (inputConfig.max !== void 0) input.max = String(inputConfig.max);
+        input.addEventListener("click", (e) => e.stopPropagation());
+        inputsContainer.appendChild(input);
+        inputElements.push(input);
+      }
+    }
+    el.appendChild(inputsContainer);
+  }
+  let active = defaultActive;
+  if (active) el.classList.add("active");
+  const setActive = (value) => {
+    active = value;
+    el.classList.toggle("active", active);
+    onChange?.(active);
+  };
+  el.addEventListener("click", () => setActive(!active));
+  el.addEventListener("keydown", (e) => {
+    const ke = e;
+    if (ke.key === "Enter" || ke.key === " ") {
+      ke.preventDefault();
+      setActive(!active);
+    }
+  });
+  return {
+    element: el,
+    isActive: () => active,
+    setActive,
+    toggle: () => setActive(!active),
+    getValue: (index) => inputElements[index]?.value ?? "",
+    getInput: (index) => inputElements[index]
+  };
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AnchorManager,
@@ -1647,6 +1722,7 @@ var TabManager = class {
   createPanelElement,
   createPanelState,
   createPresetAnchor,
+  createTagButton,
   detachFromGroup,
   findSnapTarget,
   getConnectedGroup,

package/dist/index.d.cts

@@ -823,6 +823,67 @@ interface HoverEnlargeConfig {
  */
 declare function setupHoverEnlarge(config: HoverEnlargeConfig): void;
 
+/**
+ * Tag button: a toggleable pill-shaped button that optionally reveals
+ * inline inputs (numbers, selects) when active.
+ *
+ * @example
+ * ```typescript
+ * // Simple toggle
+ * const staticBtn = createTagButton('static');
+ * container.appendChild(staticBtn.element);
+ *
+ * // Toggle with parameterized inputs
+ * const govBtn = createTagButton('gravity_override', {
+ *   inputs: [
+ *     { label: 'x', defaultValue: 0, step: 0.1 },
+ *     { label: 'y', defaultValue: -1, step: 0.1 },
+ *   ],
+ * });
+ * container.appendChild(govBtn.element);
+ *
+ * // Read state when needed
+ * if (govBtn.isActive()) {
+ *   const gx = parseFloat(govBtn.getValue(0));
+ *   const gy = parseFloat(govBtn.getValue(1));
+ * }
+ * ```
+ */
+interface TagButtonNumberInputConfig {
+    type?: 'number';
+    /** Short label rendered before the input (e.g. 'x', 'y') */
+    label?: string;
+    defaultValue?: number;
+    step?: number;
+    min?: number;
+    max?: number;
+}
+interface TagButtonSelectInputConfig {
+    type: 'select';
+    label?: string;
+    options?: Array<{
+        value: string;
+        label: string;
+    }>;
+}
+type TagButtonInputConfig = TagButtonNumberInputConfig | TagButtonSelectInputConfig;
+interface TagButtonConfig {
+    defaultActive?: boolean;
+    inputs?: TagButtonInputConfig[];
+    onChange?: (active: boolean) => void;
+}
+interface TagButton {
+    element: HTMLElement;
+    isActive(): boolean;
+    setActive(active: boolean): void;
+    toggle(): void;
+    /** Get the string value of the input at position index */
+    getValue(index: number): string;
+    /** Direct access to the underlying input or select element */
+    getInput(index: number): HTMLInputElement | HTMLSelectElement | undefined;
+}
+declare function createTagButton(label: string, config?: TagButtonConfig): TagButton;
+
 /**
  * @blorkfield/blork-tabs - Panel
  * Individual panel component with collapse/expand functionality
@@ -955,4 +1016,4 @@ declare function getMovingGroupRespectingPins(grabbedPanel: PanelState, panels:
  */
 declare function unsnap(leftPanel: PanelState, rightPanel: PanelState): void;
 
-export { type AnchorConfig, AnchorManager, type AnchorPreset, type AnchorSnapEvent, type AnchorSnapResult, type AnchorState, type AutoHideCallbacks, AutoHideManager, type Bounds, type CSSClasses, type DebugLog, type DebugLogConfig, type DebugLogLevel, type DebugPanel, type DebugPanelConfig, type DragEndEvent, DragManager, type DragMode, type DragMoveEvent, type DragStartEvent, type DragState, type EventListener, type PanelAddedEvent, type PanelCollapseEvent, type PanelConfig, type PanelDetachedEvent, type PanelHideEvent, type PanelPinEvent, type PanelRemovedEvent, type PanelShowEvent, type PanelSnapEvent, type PanelState, type Position, type ResolvedTabManagerConfig, SnapPreview, type SnapSide, type SnapTarget, TabManager, type TabManagerConfig, type TabManagerEvents, areInSameChain, createDebugLog, createDebugPanelContent, createDebugPanelInterface, createPanelElement, createPanelState, createPresetAnchor, detachFromGroup, findSnapTarget, getConnectedGroup, getDefaultAnchorConfigs, getDefaultZIndex, getDragZIndex, getLeftmostPanel, getMovingGroupRespectingPins, getPanelDimensions, getPanelPosition, getRightmostPanel, hidePanel, setPanelPosition, setPanelZIndex, setupHoverEnlarge, showPanel, snapPanels, snapPanelsToTarget, toggleCollapse, togglePin, unsnap, updateSnappedPositions };
+export { type AnchorConfig, AnchorManager, type AnchorPreset, type AnchorSnapEvent, type AnchorSnapResult, type AnchorState, type AutoHideCallbacks, AutoHideManager, type Bounds, type CSSClasses, type DebugLog, type DebugLogConfig, type DebugLogLevel, type DebugPanel, type DebugPanelConfig, type DragEndEvent, DragManager, type DragMode, type DragMoveEvent, type DragStartEvent, type DragState, type EventListener, type PanelAddedEvent, type PanelCollapseEvent, type PanelConfig, type PanelDetachedEvent, type PanelHideEvent, type PanelPinEvent, type PanelRemovedEvent, type PanelShowEvent, type PanelSnapEvent, type PanelState, type Position, type ResolvedTabManagerConfig, SnapPreview, type SnapSide, type SnapTarget, TabManager, type TabManagerConfig, type TabManagerEvents, type TagButton, type TagButtonConfig, type TagButtonInputConfig, type TagButtonNumberInputConfig, type TagButtonSelectInputConfig, areInSameChain, createDebugLog, createDebugPanelContent, createDebugPanelInterface, createPanelElement, createPanelState, createPresetAnchor, createTagButton, detachFromGroup, findSnapTarget, getConnectedGroup, getDefaultAnchorConfigs, getDefaultZIndex, getDragZIndex, getLeftmostPanel, getMovingGroupRespectingPins, getPanelDimensions, getPanelPosition, getRightmostPanel, hidePanel, setPanelPosition, setPanelZIndex, setupHoverEnlarge, showPanel, snapPanels, snapPanelsToTarget, toggleCollapse, togglePin, unsnap, updateSnappedPositions };

package/dist/index.d.ts

@@ -823,6 +823,67 @@ interface HoverEnlargeConfig {
  */
 declare function setupHoverEnlarge(config: HoverEnlargeConfig): void;
 
+/**
+ * Tag button: a toggleable pill-shaped button that optionally reveals
+ * inline inputs (numbers, selects) when active.
+ *
+ * @example
+ * ```typescript
+ * // Simple toggle
+ * const staticBtn = createTagButton('static');
+ * container.appendChild(staticBtn.element);
+ *
+ * // Toggle with parameterized inputs
+ * const govBtn = createTagButton('gravity_override', {
+ *   inputs: [
+ *     { label: 'x', defaultValue: 0, step: 0.1 },
+ *     { label: 'y', defaultValue: -1, step: 0.1 },
+ *   ],
+ * });
+ * container.appendChild(govBtn.element);
+ *
+ * // Read state when needed
+ * if (govBtn.isActive()) {
+ *   const gx = parseFloat(govBtn.getValue(0));
+ *   const gy = parseFloat(govBtn.getValue(1));
+ * }
+ * ```
+ */
+interface TagButtonNumberInputConfig {
+    type?: 'number';
+    /** Short label rendered before the input (e.g. 'x', 'y') */
+    label?: string;
+    defaultValue?: number;
+    step?: number;
+    min?: number;
+    max?: number;
+}
+interface TagButtonSelectInputConfig {
+    type: 'select';
+    label?: string;
+    options?: Array<{
+        value: string;
+        label: string;
+    }>;
+}
+type TagButtonInputConfig = TagButtonNumberInputConfig | TagButtonSelectInputConfig;
+interface TagButtonConfig {
+    defaultActive?: boolean;
+    inputs?: TagButtonInputConfig[];
+    onChange?: (active: boolean) => void;
+}
+interface TagButton {
+    element: HTMLElement;
+    isActive(): boolean;
+    setActive(active: boolean): void;
+    toggle(): void;
+    /** Get the string value of the input at position index */
+    getValue(index: number): string;
+    /** Direct access to the underlying input or select element */
+    getInput(index: number): HTMLInputElement | HTMLSelectElement | undefined;
+}
+declare function createTagButton(label: string, config?: TagButtonConfig): TagButton;
+
 /**
  * @blorkfield/blork-tabs - Panel
  * Individual panel component with collapse/expand functionality
@@ -955,4 +1016,4 @@ declare function getMovingGroupRespectingPins(grabbedPanel: PanelState, panels:
  */
 declare function unsnap(leftPanel: PanelState, rightPanel: PanelState): void;
 
-export { type AnchorConfig, AnchorManager, type AnchorPreset, type AnchorSnapEvent, type AnchorSnapResult, type AnchorState, type AutoHideCallbacks, AutoHideManager, type Bounds, type CSSClasses, type DebugLog, type DebugLogConfig, type DebugLogLevel, type DebugPanel, type DebugPanelConfig, type DragEndEvent, DragManager, type DragMode, type DragMoveEvent, type DragStartEvent, type DragState, type EventListener, type PanelAddedEvent, type PanelCollapseEvent, type PanelConfig, type PanelDetachedEvent, type PanelHideEvent, type PanelPinEvent, type PanelRemovedEvent, type PanelShowEvent, type PanelSnapEvent, type PanelState, type Position, type ResolvedTabManagerConfig, SnapPreview, type SnapSide, type SnapTarget, TabManager, type TabManagerConfig, type TabManagerEvents, areInSameChain, createDebugLog, createDebugPanelContent, createDebugPanelInterface, createPanelElement, createPanelState, createPresetAnchor, detachFromGroup, findSnapTarget, getConnectedGroup, getDefaultAnchorConfigs, getDefaultZIndex, getDragZIndex, getLeftmostPanel, getMovingGroupRespectingPins, getPanelDimensions, getPanelPosition, getRightmostPanel, hidePanel, setPanelPosition, setPanelZIndex, setupHoverEnlarge, showPanel, snapPanels, snapPanelsToTarget, toggleCollapse, togglePin, unsnap, updateSnappedPositions };
+export { type AnchorConfig, AnchorManager, type AnchorPreset, type AnchorSnapEvent, type AnchorSnapResult, type AnchorState, type AutoHideCallbacks, AutoHideManager, type Bounds, type CSSClasses, type DebugLog, type DebugLogConfig, type DebugLogLevel, type DebugPanel, type DebugPanelConfig, type DragEndEvent, DragManager, type DragMode, type DragMoveEvent, type DragStartEvent, type DragState, type EventListener, type PanelAddedEvent, type PanelCollapseEvent, type PanelConfig, type PanelDetachedEvent, type PanelHideEvent, type PanelPinEvent, type PanelRemovedEvent, type PanelShowEvent, type PanelSnapEvent, type PanelState, type Position, type ResolvedTabManagerConfig, SnapPreview, type SnapSide, type SnapTarget, TabManager, type TabManagerConfig, type TabManagerEvents, type TagButton, type TagButtonConfig, type TagButtonInputConfig, type TagButtonNumberInputConfig, type TagButtonSelectInputConfig, areInSameChain, createDebugLog, createDebugPanelContent, createDebugPanelInterface, createPanelElement, createPanelState, createPresetAnchor, createTagButton, detachFromGroup, findSnapTarget, getConnectedGroup, getDefaultAnchorConfigs, getDefaultZIndex, getDragZIndex, getLeftmostPanel, getMovingGroupRespectingPins, getPanelDimensions, getPanelPosition, getRightmostPanel, hidePanel, setPanelPosition, setPanelZIndex, setupHoverEnlarge, showPanel, snapPanels, snapPanelsToTarget, toggleCollapse, togglePin, unsnap, updateSnappedPositions };

package/dist/index.js

@@ -1574,6 +1574,80 @@ var TabManager = class {
     this.debugPanelElements.clear();
   }
 };
+
+// src/TagButton.ts
+function createTagButton(label, config = {}) {
+  const { defaultActive = false, inputs = [], onChange } = config;
+  const hasInputs = inputs.length > 0;
+  const el = document.createElement(hasInputs ? "div" : "button");
+  el.className = "blork-tabs-tag-btn";
+  if (hasInputs) {
+    el.setAttribute("role", "button");
+    el.setAttribute("tabindex", "0");
+  }
+  el.appendChild(document.createTextNode(label));
+  const inputElements = [];
+  if (hasInputs) {
+    const inputsContainer = document.createElement("span");
+    inputsContainer.className = "blork-tabs-tag-inputs";
+    for (const inputConfig of inputs) {
+      if (inputConfig.label) {
+        const labelSpan = document.createElement("span");
+        labelSpan.textContent = inputConfig.label;
+        inputsContainer.appendChild(labelSpan);
+      }
+      if (inputConfig.type === "select") {
+        const select = document.createElement("select");
+        select.className = "blork-tabs-tag-select";
+        for (const opt of inputConfig.options ?? []) {
+          const option = document.createElement("option");
+          option.value = opt.value;
+          option.textContent = opt.label;
+          select.appendChild(option);
+        }
+        select.addEventListener("click", (e) => e.stopPropagation());
+        select.addEventListener("mousedown", (e) => e.stopPropagation());
+        inputsContainer.appendChild(select);
+        inputElements.push(select);
+      } else {
+        const input = document.createElement("input");
+        input.type = "number";
+        input.className = "blork-tabs-tag-input";
+        if (inputConfig.defaultValue !== void 0) input.value = String(inputConfig.defaultValue);
+        if (inputConfig.step !== void 0) input.step = String(inputConfig.step);
+        if (inputConfig.min !== void 0) input.min = String(inputConfig.min);
+        if (inputConfig.max !== void 0) input.max = String(inputConfig.max);
+        input.addEventListener("click", (e) => e.stopPropagation());
+        inputsContainer.appendChild(input);
+        inputElements.push(input);
+      }
+    }
+    el.appendChild(inputsContainer);
+  }
+  let active = defaultActive;
+  if (active) el.classList.add("active");
+  const setActive = (value) => {
+    active = value;
+    el.classList.toggle("active", active);
+    onChange?.(active);
+  };
+  el.addEventListener("click", () => setActive(!active));
+  el.addEventListener("keydown", (e) => {
+    const ke = e;
+    if (ke.key === "Enter" || ke.key === " ") {
+      ke.preventDefault();
+      setActive(!active);
+    }
+  });
+  return {
+    element: el,
+    isActive: () => active,
+    setActive,
+    toggle: () => setActive(!active),
+    getValue: (index) => inputElements[index]?.value ?? "",
+    getInput: (index) => inputElements[index]
+  };
+}
 export {
   AnchorManager,
   AutoHideManager,
@@ -1587,6 +1661,7 @@ export {
   createPanelElement,
   createPanelState,
   createPresetAnchor,
+  createTagButton,
   detachFromGroup,
   findSnapTarget,
   getConnectedGroup,

package/dist/styles.css

@@ -220,6 +220,88 @@
   transition: none !important;
 }
 
+/* Tag Button */
+.blork-tabs-tag-btn {
+  padding: 4px 10px;
+  background: var(--blork-tabs-panel-bg, #1a1a2e);
+  border: 1px solid #3a3a5a;
+  border-radius: 4px;
+  color: #aaa;
+  cursor: pointer;
+  font-size: 11px;
+  font-family: monospace;
+  transition: all 0.15s;
+  user-select: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.blork-tabs-tag-btn:hover {
+  border-color: #5a5a7a;
+  color: #ccc;
+}
+
+.blork-tabs-tag-btn.active {
+  border-color: var(--blork-tabs-accent, #4a90d9);
+  color: var(--blork-tabs-accent, #4a90d9);
+  box-shadow: 0 0 8px rgba(74, 144, 217, 0.5), 0 0 2px rgba(74, 144, 217, 0.8);
+  text-shadow: 0 0 8px rgba(74, 144, 217, 0.9);
+}
+
+/* Tag inputs (hidden until button is active) */
+.blork-tabs-tag-inputs {
+  display: none;
+  align-items: center;
+  gap: 3px;
+  font-size: 10px;
+}
+
+.blork-tabs-tag-btn.active .blork-tabs-tag-inputs {
+  display: inline-flex;
+}
+
+.blork-tabs-tag-input {
+  width: 36px;
+  background: transparent;
+  border: none;
+  border-bottom: 1px solid #555;
+  color: inherit;
+  font-size: 10px;
+  font-family: monospace;
+  text-align: center;
+  padding: 0 2px;
+  outline: none;
+  -moz-appearance: textfield;
+}
+
+.blork-tabs-tag-input::-webkit-outer-spin-button,
+.blork-tabs-tag-input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.blork-tabs-tag-btn.active .blork-tabs-tag-input {
+  border-bottom-color: rgba(74, 144, 217, 0.6);
+}
+
+.blork-tabs-tag-select {
+  background: var(--blork-tabs-panel-bg, #1a1a2e);
+  border: none;
+  border-bottom: 1px solid #555;
+  color: #ccc;
+  font-size: 10px;
+  font-family: monospace;
+  outline: none;
+  cursor: pointer;
+  max-width: 80px;
+}
+
+.blork-tabs-tag-btn.active .blork-tabs-tag-select {
+  border-bottom-color: rgba(74, 144, 217, 0.6);
+  color: var(--blork-tabs-accent, #4a90d9);
+}
+
 /* Debug Panel Log */
 .blork-tabs-debug-log {
   min-height: 100px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blorkfield/blork-tabs",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "A framework-agnostic tab/panel management system with snapping and docking",
   "packageManager": "pnpm@10.28.2",
   "type": "module",

package/src/TagButton.ts

@@ -0,0 +1,145 @@
+/**
+ * Tag button: a toggleable pill-shaped button that optionally reveals
+ * inline inputs (numbers, selects) when active.
+ *
+ * @example
+ * ```typescript
+ * // Simple toggle
+ * const staticBtn = createTagButton('static');
+ * container.appendChild(staticBtn.element);
+ *
+ * // Toggle with parameterized inputs
+ * const govBtn = createTagButton('gravity_override', {
+ *   inputs: [
+ *     { label: 'x', defaultValue: 0, step: 0.1 },
+ *     { label: 'y', defaultValue: -1, step: 0.1 },
+ *   ],
+ * });
+ * container.appendChild(govBtn.element);
+ *
+ * // Read state when needed
+ * if (govBtn.isActive()) {
+ *   const gx = parseFloat(govBtn.getValue(0));
+ *   const gy = parseFloat(govBtn.getValue(1));
+ * }
+ * ```
+ */
+
+export interface TagButtonNumberInputConfig {
+  type?: 'number';
+  /** Short label rendered before the input (e.g. 'x', 'y') */
+  label?: string;
+  defaultValue?: number;
+  step?: number;
+  min?: number;
+  max?: number;
+}
+
+export interface TagButtonSelectInputConfig {
+  type: 'select';
+  label?: string;
+  options?: Array<{ value: string; label: string }>;
+}
+
+export type TagButtonInputConfig = TagButtonNumberInputConfig | TagButtonSelectInputConfig;
+
+export interface TagButtonConfig {
+  defaultActive?: boolean;
+  inputs?: TagButtonInputConfig[];
+  onChange?: (active: boolean) => void;
+}
+
+export interface TagButton {
+  element: HTMLElement;
+  isActive(): boolean;
+  setActive(active: boolean): void;
+  toggle(): void;
+  /** Get the string value of the input at position index */
+  getValue(index: number): string;
+  /** Direct access to the underlying input or select element */
+  getInput(index: number): HTMLInputElement | HTMLSelectElement | undefined;
+}
+
+export function createTagButton(label: string, config: TagButtonConfig = {}): TagButton {
+  const { defaultActive = false, inputs = [], onChange } = config;
+
+  const hasInputs = inputs.length > 0;
+  const el = document.createElement(hasInputs ? 'div' : 'button') as HTMLElement;
+  el.className = 'blork-tabs-tag-btn';
+  if (hasInputs) {
+    el.setAttribute('role', 'button');
+    el.setAttribute('tabindex', '0');
+  }
+
+  el.appendChild(document.createTextNode(label));
+
+  const inputElements: Array<HTMLInputElement | HTMLSelectElement> = [];
+
+  if (hasInputs) {
+    const inputsContainer = document.createElement('span');
+    inputsContainer.className = 'blork-tabs-tag-inputs';
+
+    for (const inputConfig of inputs) {
+      if (inputConfig.label) {
+        const labelSpan = document.createElement('span');
+        labelSpan.textContent = inputConfig.label;
+        inputsContainer.appendChild(labelSpan);
+      }
+
+      if (inputConfig.type === 'select') {
+        const select = document.createElement('select');
+        select.className = 'blork-tabs-tag-select';
+        for (const opt of (inputConfig.options ?? [])) {
+          const option = document.createElement('option');
+          option.value = opt.value;
+          option.textContent = opt.label;
+          select.appendChild(option);
+        }
+        select.addEventListener('click', e => e.stopPropagation());
+        select.addEventListener('mousedown', e => e.stopPropagation());
+        inputsContainer.appendChild(select);
+        inputElements.push(select);
+      } else {
+        const input = document.createElement('input');
+        input.type = 'number';
+        input.className = 'blork-tabs-tag-input';
+        if (inputConfig.defaultValue !== undefined) input.value = String(inputConfig.defaultValue);
+        if (inputConfig.step !== undefined) input.step = String(inputConfig.step);
+        if (inputConfig.min !== undefined) input.min = String(inputConfig.min);
+        if (inputConfig.max !== undefined) input.max = String(inputConfig.max);
+        input.addEventListener('click', e => e.stopPropagation());
+        inputsContainer.appendChild(input);
+        inputElements.push(input);
+      }
+    }
+
+    el.appendChild(inputsContainer);
+  }
+
+  let active = defaultActive;
+  if (active) el.classList.add('active');
+
+  const setActive = (value: boolean) => {
+    active = value;
+    el.classList.toggle('active', active);
+    onChange?.(active);
+  };
+
+  el.addEventListener('click', () => setActive(!active));
+  el.addEventListener('keydown', (e: Event) => {
+    const ke = e as KeyboardEvent;
+    if (ke.key === 'Enter' || ke.key === ' ') {
+      ke.preventDefault();
+      setActive(!active);
+    }
+  });
+
+  return {
+    element: el,
+    isActive: () => active,
+    setActive,
+    toggle: () => setActive(!active),
+    getValue: (index: number) => inputElements[index]?.value ?? '',
+    getInput: (index: number) => inputElements[index],
+  };
+}

package/src/index.ts

@@ -43,6 +43,8 @@ export { DragManager } from './DragManager';
 export { SnapPreview } from './SnapPreview';
 export { AutoHideManager } from './AutoHideManager';
 export { createDebugPanelContent, createDebugPanelInterface, createDebugLog, setupHoverEnlarge } from './DebugPanel';
+export { createTagButton } from './TagButton';
+export type { TagButtonConfig, TagButtonInputConfig, TagButtonNumberInputConfig, TagButtonSelectInputConfig, TagButton } from './TagButton';
 export type { AutoHideCallbacks } from './AutoHideManager';
 export {
   createPanelElement,