#>electromagnetic_containers
#:layer #!pragmatics
#:conventions #!cognition

^"thesis"{
  claim: "Containers are computational fields, not passive boxes. They embody electromagnetic metaphors (charge, potential, resonance) to enable cognitive computation across conceptions of a single idea."
  grounding: "From conception (abstract idea) through potential (designed, brewing) to kinetic (moving, active) to manifest (realized, expressed). Each container holds relational fields and responds to interaction as an electromagnetic system would."
  visual: "Containers show charge through crease weight, folded-corner bias, braced labels, and bounded outline state. No visual effect should imply energy unless the state is inspectable through data attributes."
}

^"charge_states"{
  ~#note: "Four states along the conception→realization continuum, mapped to electromagnetic charge"

  conception: {
    meaning: "Pure potential, abstract, questioning phase"
    color: "hsl(258 34% 39%) — quiet probe violet"
    energy: "Latent, minimal coherence, low crease weight"
    interaction: "Click to advance to potential"
    visual: "Thin crease, low folded-corner opacity, soft presence"
  }

  potential: {
    meaning: "Energy accumulating, brewing, designing"
    color: "hsl(150 46% 30%) — transformation green"
    energy: "Gathering, growing coherence"
    interaction: "Hover shows resonance, click advances to kinetic"
    visual: "Stronger crease and paper wash, moderate opacity"
  }

  kinetic: {
    meaning: "Energy in motion, implementation active, flowing"
    color: "hsl(342 48% 36%) — kinetic rose"
    energy: "Moving, high coherence"
    interaction: "Field intensifies with focus, click manifests"
    visual: "High-contrast crease, explicit state label if present"
  }

  manifest: {
    meaning: "Energy expressed, realized, complete"
    color: "hsl(180 100% 28%) — expression teal"
    energy: "Established, stable field, maximum coherence"
    interaction: "Stable state, interaction shows field resonance"
    visual: "Stable teal crease, clear folded-corner marker, full opacity"
  }
}

^"subjective_slices"{
  ~#note: "The same concept viewed from four perspectives, each slice a frame of understanding"

  frame_structure: "data-container-slice = 'conception' | 'potential' | 'kinetic' | 'manifest'"

  conception_slice: {
    frame: "Idea—abstract, questioning, exploring"
    visual: "Left crease in probe violet, light background"
    meaning: "What is the question? What are we imagining?"
  }

  potential_slice: {
    frame: "Design—planned, structured, architected"
    visual: "Left crease in transformation green, plain paper wash"
    meaning: "How would this be built? What are the constraints?"
  }

  kinetic_slice: {
    frame: "Implementation—code, systems, active mechanics"
    visual: "Left crease in kinetic rose, stronger presence"
    meaning: "What does this actually do? How does it move?"
  }

  manifest_slice: {
    frame: "Instance—concrete, expressed, in use"
    visual: "Left crease in expression teal, clear presence"
    meaning: "What has been created? What is real?"
  }
}

^"field_effects"{
  ~#note: "Electromagnetic metaphors made visible in interaction"

  charged_crease: {
    metaphor: "Stored charge visible as crease weight"
    visual: "Left edge and folded corner derive from data-charge and coherence"
    behavior: "Changes only when explicit state changes"
    meaning: "What phase of manifestation is the container carrying?"
  }

  field_intensity: {
    range: "0.3 (conception) to 0.9 (manifest)"
    responds_to: ["charge state", "hover", "focus", "semantic density setting"]
    visual: "Crease opacity and folded-corner visibility"
    meaning: "How much cognitive load is available? How active is this container?"
  }

  coherence: {
    range: "0.6 (conception) to 0.95 (manifest)"
    responds_to: ["charge state", "focus", "internal alignment"]
    visual: "Outline strength and edge clarity"
    meaning: "How internally aligned are the elements? How complete is the thought?"
  }

  resonance: {
    metaphor: "Containers influence each other across semantic distance"
    mechanism: "When one container advances charge, nearby related containers can respond"
    visual: "Related containers may update their data-charge and crease state"
    meaning: "How do ideas resonate and amplify through the space?"
  }
}

^"conception_to_realization_progression"{
  ~#note: "Visual and semantic path from abstract thought to realized form"

  mechanism: {
    abstraction: "Idea level is most abstract (lighter, italic)"
    structure: "Design level is structured (bold, clear)"
    concreteness: "Implementation is most concrete (monospace)"
    manifestation: "Instance level is fully expressed (heaviest weight)"
  }

  visual_properties: {
    opacity: "Increases from conception (0.7) to manifest (1.0)"
    scale: "No scale change; manifestation is shown by opacity, color, and edge weight"
    weight: "Lightens from idea → design → implementation → instance"
    style: "italic → normal → monospace → bold"
  }

  semantic_mapping: {
    idea: "Abstract concept, question, possibility"
    design: "Structured plan, architecture, constraints"
    implementation: "Active code, mechanics, behavior"
    instance: "Concrete thing, realized form, visible result"
  }

  interaction: {
    click: "Advance from conception → potential → kinetic → manifest"
    keyboard: "+ or = to advance, - to retreat through states when focus is inside"
    hover: "Crease strengthens, shows where attention is"
    focus: "Coherence increases, internal alignment strengthens"
  }
}

^"computational_field_properties"{
  ~#note: "What makes a container a computational space, not just a display"

  holds_relations: "Container doesn't just show content, it holds relational fields"
  responds_to_attention: "Charge and coherence respond to interaction and focus"
  influences_neighbors: "Field resonance propagates to related containers"
  tracks_state: "Current charge state persists across navigation"
  emits_events: "Changes trigger events for other systems to respond"
  exposes_perspective: "Multiple slices show different framings of the same idea"
  manifests_potential: "Progressive states show idea becoming real"
}

^"usage_in_markup"{
  basic_container: {
    markup: "<div data-container-type='frame-card' data-charge='potential' data-container-slice='design'>",
    meaning: "This container starts in potential state (brewing), shows the design perspective"
  }

  with_charge_indicator: {
    markup: "<div data-container-type='section' data-charge='kinetic' data-charge-indicator='kinetic'>",
    meaning: "Shows current charge state as a label"
  }

  with_field_coherence: {
    markup: "<article data-container-type='frame' data-field-coherence>",
    meaning: "Display coherence level as outline strength"
  }

  conception_level_content: {
    markup: "<h3 data-conception-level='idea'>What if we could think about frames as fields?</h3>",
    meaning: "This heading represents the abstract idea level, styled lightly and italicized"
  }

  automatic_upgrade: {
    markup: "<div class='frame-card'> ... </div>",
    description: "JavaScript automatically adds data-container-type to all .frame-card elements and initializes electromagnetic behavior"
  }
}

^"api_and_control"{
  global_access: "window.ElectromagneticField.containers, .setCharge(), .advanceCharge(), .getContainer()"

  setCharge: {
    usage: "window.ElectromagneticField.setCharge(element, 'manifest')"
    effect: "Jump container directly to specified charge state"
  }

  advanceCharge: {
    usage: "window.ElectromagneticField.advanceCharge(element)"
    effect: "Move from current state to next (conception → potential → kinetic → manifest)"
  }

  events: [
    "electromagnetic:charge-change — fired when container charge changes",
    "electromagnetic:slice-change — fired when perspective slice changes",
    "electromagnetic:initialized — fired when system initializes"
  ]
}

^"accessibility"{
  keyboard_navigation: "+ or = advances, - retreats; arrow keys remain reserved for native controls and roving tabindex widgets"
  reduced_motion: "No decorative motion; transitions disabled under prefers-reduced-motion"
  contrast: "High contrast mode increases border widths for visibility"
  semantics: "data-charge, data-container-slice attributes provide semantic meaning"
  aria: "Controls that change charge should expose current state through aria-pressed, aria-expanded, or adjacent visible text; passive surfaces expose state through data-charge and data-charge-label"
}

^"dark_mode_and_contrast"{
  ~#note: "Field colors adjusted for visibility in dark mode and high contrast"

  light_mode: "Plain paper wash and readable creases"
  dark_mode: "Higher-contrast creases and the same state model"
  high_contrast: "Thicker borders, stronger color differentiation"
  all_phases: "Works correctly across all spirit phases"
}

^"cognitive_principles"{
  "Containers are not just visual—they're computational spaces."
  "Charge represents cognitive potential energy."
  "Coherence shows internal alignment and clarity."
  "Slices allow the same idea to be understood from multiple angles."
  "Resonance makes relationships between ideas tangible."
  "Conception → Realization progression is always visible."
  "Interaction is explicit: state should not change through hidden arrow shortcuts or decorative motion."
  "Crease effects make the invisible (relationships, potential, energy) inspectable."
  "Electromagnetic metaphor is not decorative—it's semantic."
}

^"future_extensions"{
  "Field entanglement: linked containers that maintain synchronized state"
  "Coherence harmonics: containers emit observable 'frequencies' when in harmony"
  "Charge cascading: advancing one container cascades through dependent containers"
  "Field opacity: semantic distance affects field strength visibility"
  "Dimensional coupling: containers in different phases emit different field colors"
  "Resonance visualization: draw lines showing field coupling between containers"
  "Conception maps: visualize entire idea space as an electromagnetic field"
}

^"technical_implementation"{
  @system: ~"../../../public/js/electromagnetic-containers.js"
  @styles: ~"../../../public/css/effects/electromagnetic-container.css"

  init: "initElectromagneticContainers() runs on DOMContentLoaded"
  class: "ElectromagneticContainer manages individual container state"
  resonance: "FieldResonance manages relationships between containers"
  integration: "Hooks to spw:settings-change for semantic-density aware field intensity"
}