To implement Engelbart's "Level Clipping" feature into Seed Hypermedia with a focus on weblinks, the idea is to allow users to view and interact with hierarchical content at a specified depth (level) within a document or across linked documents. Here's how you could implement it:

1. Core Idea for Weblinks

Level Clipping in a web-based system like Seed involves dynamically rendering only the content up to a specified depth of the hierarchy:

Level 1: Top-level headings or nodes.

Level 2: Subsections or children of Level 1.

Level n: Descendants down to the nth depth.

For weblinks, this means:

Links can include a level parameter to specify the clipping depth.

When a user navigates to the linked document, only the specified levels of content are displayed.

2. Storing and Saving State

Document Metadata

The document's metadata should store information about its hierarchical structure:

{
  "title": "Document Title",
  "hierarchy": {
    "levels": 4,
    "defaultClipLevel": 3
  },
  "content": [
    { "id": "1", "level": 1, "text": "Main Heading" },
    { "id": "1.1", "level": 2, "text": "Subsection 1" },
    { "id": "1.1.1", "level": 3, "text": "Detail 1.1" }
  ]
}

Linking System

Links between documents should support the clipLevel parameter:

Example link: https://seedhypermedia.com/doc1?clipLevel=2

This parameter determines the maximum depth of content displayed when the document is rendered.

3. Rendering Logic

The rendering system should:

Parse the clipLevel from the link or use the document's defaultClipLevel.

Traverse the hierarchical structure and only render nodes up to the specified depth.

Provide UI elements (like expand/collapse toggles) to allow users to adjust the clipping level dynamically.

Example Pseudocode

function renderDocument(document, clipLevel) {
  const clippedContent = document.content.filter(item => item.level <= clipLevel);
  renderHierarchy(clippedContent);
}

4. Example UI Implementation

UI Elements

Add a slider or dropdown to adjust the clipping level dynamically.

Display visual cues (e.g., ellipsis ...) to indicate clipped content.

Example Interface

A user opens a link like: https://seedhypermedia.com/doc1?clipLevel=2.

The system shows only Level 1 and Level 2 content:

Main Heading
  Subsection 1
  Subsection 2
...

The user adjusts the clipping level to 3, revealing additional details:

Main Heading
  Subsection 1
    Detail 1.1
  Subsection 2
    Detail 2.1

5. Dynamic Interaction with Links

Expandable Links

Weblinks can also include interactions for clipping:

When hovering over or clicking a link, a dropdown shows a preview of the clipped content.

Example: Hovering over doc2 at clipLevel=1 might show:

Document Title
Section 1
Section 2

Clicking on the link takes the user to the document with content clipped at Level 1.

Bidirectional Linking

The linking system can store clip-level preferences in both the source and destination documents:

Source document metadata stores how the target is displayed when linked.

Destination document metadata stores its default clipping behavior.

6. Benefits and Use Cases

Focused Navigation

Level Clipping allows users to:

See a concise summary of linked documents.

Drill down into details only when necessary.

Collaboration Context

Workers can link to overview-only versions of documents for high-level discussion.

Deep linking enables referencing specific sections with precise depth.

Example Implementation in Practice

Link Format

<a href="https://seedhypermedia.com/doc1?clipLevel=2">
  View Summary of Document
</a>

Dynamic View Update

Allow users to toggle clipping levels without refreshing:

function updateClipLevel(level) {
  renderDocument(document, level);
  history.pushState({}, '', `?clipLevel=${level}`);
}

Would you like to dive into the technical implementation of any part of this (e.g., rendering, metadata structure, or link design)?