Add Manage Columns interface with proper structure and permalink (#380)

Copilot · cubap · web-flow · commit 4df611ee0e41 · 2025-12-23T13:46:34.000-06:00
* Initial plan

* Create manage-columns interface with proper structure and CSS variables

Co-authored-by: cubap &lt;1119165+cubap@users.noreply.github.com&gt;

* Address code review feedback - remove duplicate indexOf calls and use constants

Co-authored-by: cubap &lt;1119165+cubap@users.noreply.github.com&gt;

* Add README documentation for manage-columns interface

Co-authored-by: cubap &lt;1119165+cubap@users.noreply.github.com&gt;

---------

Co-authored-by: copilot-swe-agent[bot] &lt;198982749+Copilot@users.noreply.github.com&gt;
Co-authored-by: cubap &lt;1119165+cubap@users.noreply.github.com&gt;
diff --git a/interfaces/manage-columns/README.md b/interfaces/manage-columns/README.md
@@ -0,0 +1,47 @@
+# Manage Columns Interface
+
+This interface provides core functionality for managing columns on a page, which is essential for setting up Lines on a Page in TPEN.
+
+## Access
+
+The interface is available at `/manage-columns` with the following required URL parameters:
+
+- `projectID` - The ID of the project
+- `pageID` - The ID of the annotation page (without the RERUM URL prefix)
+
+Example:
+```
+/manage-columns?projectID=12345&pageID=abc123def456
+```
+
+## Features
+
+### Create New Column
+1. Click on annotations in the image to select them
+2. Use Shift+Click to select a range of annotations
+3. Use Ctrl/Cmd+Click to toggle individual annotations
+4. Enter a column title
+5. Click "Create Column" to save
+
+### Merge Columns
+1. Check the "Merge Columns Mode" checkbox
+2. Select the columns you want to merge by clicking their buttons
+3. Enter a new column label
+4. Click "Merge Columns"
+
+### Extend Column
+1. Check the "Extend Column Mode" checkbox
+2. Select the column you want to extend
+3. Click on annotations to add to the column
+4. Click "Extend Column"
+
+### Clear All
+Click "Clear All" to remove all columns from the page.
+
+## Technical Details
+
+- Custom element: `<tpen-manage-columns>`
+- Uses TPEN authentication
+- Integrates with TPEN services API
+- Uses CSS variables for theming
+- Stores selection state in localStorage for convenience
diff --git a/interfaces/manage-columns/index.html b/interfaces/manage-columns/index.html
@@ -0,0 +1,20 @@
+---
+title: Manage Columns
+permalink: /manage-columns
+---
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Manage Columns</title>
+    <script type="module" src="/components/gui/site/index.js"></script>
+    <script type="module" src="/interfaces/manage-columns/index.js"></script>
+</head>
+<body>
+    <tpen-page>
+        <tpen-manage-columns></tpen-manage-columns>
+    </tpen-page>
+</body>
+</html>
diff --git a/interfaces/manage-columns/index.js b/interfaces/manage-columns/index.js
