From: Thomas Walker Lynch Date: Fri, 16 Jan 2026 05:25:39 +0000 (+0000) Subject: doc X-Git-Url: https://git.reasoningtechnology.com/style/RT_code.js?a=commitdiff_plain;h=0250bfe966bcaa5cbe97b9ada57f8e700d2fdccd;p=Epimetheus%2F.git doc --- diff --git a/developer/document/Epimetheus.html b/developer/document/Epimetheus.html deleted file mode 100644 index 296c665..0000000 --- a/developer/document/Epimetheus.html +++ /dev/null @@ -1,236 +0,0 @@ - - - - - Epimetheus: The Only Primitive - - - - - - - - - - - - -

Introduction

- -

- Epimetheus is a Python library for Higher Order Analysis and Semantic Annotation. A data scientist might say it is a mechanism for Late Binding of ontology, while a programmer will call it a type system. -

- -

- Unlike Prometheus (Forethought), who defines what an object is before it is born (classic class instantiation), Epimetheus allows you to attach meaning, identity, and semantic types to objects after they exist. -

- -

- In standard programming, the primitives are things like - int, float, char, or boolean. These carry inherent meaning and behavior before you ever use them. An integer is a number; it must add and subtract. -

- -

- Epimetheus (Afterthought) rejects this. It allows you to attach meaning (semantics) to objects after they are born. You can decide later that an object behaves like a number, or a string, or a user. -

- -

- If you strip away all pre-defined types and behaviors (no ints, no strings, no classes), what is left? What is the one thing you absolutely cannot add later? -

- -

- Distinctness. -

- -

- You cannot attach meaning to an object if you cannot point to it. You cannot say "This object is a Number" if you cannot distinguish "This object" from "That object." -

- -

- Thus the Symbol (the unique, persistent identity) is the most primitive data entity. Given Symbols, and a Turing Machine for building structure, everything else follows. But this is not an article about constructing mathematics or computer science, rather it is about a type system, so lets not get too carried away with the grand strokes of the pen. -

- -

Assumptions and Terms

- -

Given

- -

- As is apparent while you read this, English prose is a given. The goal in making use of prose is to explain that the code is internally consistent without the English description. Once the formal relations are established, the prose is no longer needed, as the logic permits no dependence on the medium used for its introduction. In other words, code does not read the comments to decide what to do. -

- - -

- The code related to this discussion is implemented in Python; however, issues with other languages are considered. One salient difference involves the fact that Python integers are bignums and are passed by reference. In some other languages, integers are considered primitives, are bounded in magnitude, and are bit-copied. -

- -

Symbol

- -

Instance

- -

- We are given a symbol instance factory. Each time the make function on the factory interface is called, the factory returns an instance of a distinct symbol. -

- -

- In some languages symbols are implemented over primitive integers, and a symbol instance will be an integer. Thus symbol instances can be copied. A common method for making a copy is to use assignment, e.g., x = y, where y is a variable holding a symbol instance. After execution of the assignment, x will hold another instance of the same symbol. -

- -

- In the Python version of Epimetheus symbols are indeed implemented over integers. However, Python integers are non-primitive and thus are passed by reference. The Python Epimetheus symbol instance factory will return a reference to an integer, not the base integer, as the symbol instance. Assignment will then copy the reference. Thus this reference is the symbol instance rather than the integer the symbol is based on. -

- -

- In Epimetheus, we use a dictionary to give a symbol a name. The names need not meet the requirements imposed on a symbol instance, but it can be confusing when they don't. This is avoided in other symbol systems by implementing symbols over character strings, and using the character string as both the name and the instance. -

- -

Required Properties

- -

- Any two, or by transitivity, any number of, symbol instances can be compared for equality, say x == y. A comparison between symbol instances will always return True or False. -

- -

- A symbol instance newly minted using the given symbol factory make function is said to come direct from the factory. A symbol instance direct from the factory is also called an original symbol. -

- -

- Equality over symbol instances is an equivalence relation: x == x is True; x == y implies y == x; and if x == y and y == z then x == z. -

- -

- Any two symbol instances returned directly from the factory using two different make calls will always equality compare to be False. In other words, two distinct originals will always be not equal. -

- -

- Given an original, all copies stemming from it will be equal to each other and to the original. By stemming from we mean to include all direct copies and copies of copies. -

- -

- Given any two originals, say A and B, we know that A is not equal to B, as discussed above. Note also that A is not equal to any copy stemming from B, and B is not equal to any copy stemming from A. -

- -

- Though symbol instances are integer-like in that copy and equality compare can be used with them, symbol instances are disallowed from being used with other integer operators. Symbols cannot be compared for greater-than or less-than; they cannot be incremented, added, nor subtracted, etc. -

- - -

What is a Symbol?

- -

- Only symbol instances exist at runtime, so a symbol is never manipulated directly. -

- -

- Define a relation ~ over instances by x ~ y iff x == y. Since == is an equivalence relation, this partitions instances into equivalence classes. Each such equivalence class is a symbol. -

- -

- The factory’s make returns an original instance that is not equal to any other original. All copies stemming from an original remain in the same equivalence class. Therefore any instance in the class can represent the symbol, and we may choose any one instance as the symbol’s name (a canonical representative), or we could use a dictionary, and use, say, the original instance, to lookup a string as a name, among other possibilities. -

- -

Distinctness Across Contexts

-

- If a symbol persists across contexts (such as across scopes or processes), it must remain distinct from all other symbols as it enters those new environments. -

- -

- In this implementation, we meet this constraint by utilizing a global symbol instance factory and by explicitly disallowing a symbol from being employed outside the process of its creation. As a means of enforcement, there are no permitted methods to serialize a symbol to a string, nor to output one to a console or stream. -

- -

- These constraints do not apply to symbol names, which are text strings. However, a symbol cannot be recovered from its name; the name is a label, not a reconstruction key. -

- -

Object

-

- The term "Python object" refers to anything that can or could appear in legal Python code and could be associated with a symbol. This includes symbols themselves. -

- -

- A symbol is associated with an object using a Python dictionary. The symbol is the key, and the object is that thing which is "looked up" via said key. - One such example is the symbol name dictionary mentioned in the prior section. -

- -

Tape

- -

- In the TTCA, we gave a formal definition for a tape. A tape is an ordered sequence of cells with a leftmost cell, zero or more interior cells, and a rightmost cell. If the tape is infinite, then there is no rightmost cell. The original Turing Machine tape is a symbol tape due to each cell of the tape holding exactly one symbol. The TTCA tape generalizes this by permitting a cell to hold any object. -

- -

- Two tapes, say A and B, are equal if and only if they are the same length and all their cells have equal contents. -

- - A = B \iff \forall i \in \text{indices}, A[i] = B[i] - - -

- If a tape is treated as nothing more than its cells, then deleting the last cell causes the tape to no longer exist. In a system that has a higher level structure that preserves the tape as a distinct entity, deleting the last cell produces an empty tape entity that is said to have zero cells. -

- -
- Consider a web browser. When the last tab is closed, the window disappears, forcing the user to create a new window to continue. Some users don't like this behavior, and would prefer that the window to remain as an empty canvas. Then a mistaken close could be undone by selecting 'reopen closed tab', without having to relaunch the browser and resettle the new window into the workspace. -
- - -

- The tape abstraction is particularly expressive in the Python context, as the language utilizes object references and permits lists to hold objects of any type. Once data within a container is modeled as a tape, structures such as lists, arrays, token streams, argument lists, and sequences all share the same abstract model. -

- - -

Path

- -

The term path is an ontological alias for tape. Adopting the term path brings with it a specialized vocabulary and a semantic framework for discussing traversal. The structure is unchanged, but the interpretation changes, as a tape becomes something to follow.

- -

- The leftmost cell in a path is called the destination. - All cells of the path to the right of the destination - cell are called the way. If the path has two or more - cells, dropping the leftmost cell leaves a tape holding exactly the - way. Hence a path can be viewed as a pair, - (destination ,way), where the destination is a single - cell and the way is a tape (possibly empty). -

- -

- The reader might have expected the path to go from left to right, with the destination being in the rightmost cell. This would be natural because we read characters from a written page going from left to right. However, such a definition would run into a problem for us, as we will need for paths to always have a destination, and tapes can be open on the right, so they do not always have a rightmost cell. -

- -
- Think about it this way: you are sitting in a pub of an inn, and a stranger walks in. Though you know the stranger's current destination, you might not know where he came from. -
- -

Discrete Function

-

- Now consider a tape, say called F, where each cell in F holds a path. As a path is a tape, the structure of F is that of a tape of tapes. -

- -

- Now suppose we traverse F while examining the paths as (destination ,way) pairs. If we find that all equal ways lead to - the same destination, then tape F is a discrete function. We say it is discrete because F is a tape with distinct cells. We say it is a function due to having the property that all paths with equal ways lead to the same destination. -

- -

- Thus a function is more restricted than a tape of paths, and due to this restriction it is possible to adopt the following notation, where a destination is said to be determined by, a function of, the way: -

- - - destination = f(way) - - -

- That the same way always leads to the same destination fits our common experience. If we ever followed the same way twice and landed in a different destination we would think ourselves to be in a Sci-Fi movie. It is also intuitive to us that the function restrictions do not exclude the possibility that multiple ways can lead to the same destination. Because we often compute things that are related to our daily experience it is not surprising that this is a very common pattern. And this is not a coincidence, this is the reason functions are defined as they are. -

- - - - - - diff --git a/developer/document/style/RT_TOC.js b/developer/document/style/RT_TOC.js deleted file mode 100644 index 86ee51a..0000000 --- a/developer/document/style/RT_TOC.js +++ /dev/null @@ -1,102 +0,0 @@ -/* - Processes tags. - Populates each with headings found below it. - - Attributes: - level="N" : Explicitly sets the target heading level (1-6). - e.g., level="1" collects H1s. level="2" collects H2s. - Stops collecting if it hits a heading of (level - 1) or higher. - - Default (No attribute): - Context-Aware. Looks backwards for the nearest heading H(N). - Targets H(N+1). Stops at the next H(N). -*/ -window.StyleRT = window.StyleRT || {}; - -window.StyleRT.RT_TOC = function() { - const debug = window.StyleRT.debug || { log: function(){} }; - const toc_tags = document.querySelectorAll('rt-toc'); - - toc_tags.forEach((container, toc_index) => { - container.style.display = 'block'; - - // 1. Determine Target Level - const attr_level = parseInt(container.getAttribute('level')); - let target_level; - - if (!isNaN(attr_level)) { - // EXPLICIT MODE - target_level = attr_level; - if (debug.log) debug.log('RT_TOC', `TOC #${toc_index} explicit target: H${target_level}`); - } else { - // IMPLICIT / CONTEXT MODE - let context_level = 0; // Default 0 (Root) - let prev = container.previousElementSibling; - while (prev) { - const match = prev.tagName.match(/^H([1-6])$/); - if (match) { - context_level = parseInt(match[1]); - break; - } - prev = prev.previousElementSibling; - } - target_level = context_level + 1; - if (debug.log) debug.log('RT_TOC', `TOC #${toc_index} context implied target: H${target_level}`); - } - - // Stop condition: Stop if we hit a heading that is a "parent" or "sibling" of the context. - // Mathematically: Stop if found_level < target_level. - const stop_threshold = target_level; - - // 2. Setup Container - container.innerHTML = ''; - const title = document.createElement('h1'); - // Title logic: If targeting H1, it's a Main TOC. Otherwise it's a Section TOC. - title.textContent = target_level === 1 ? 'Table of Contents' : 'Section Contents'; - title.style.textAlign = 'center'; - container.appendChild(title); - - const list = document.createElement('ul'); - list.style.listStyle = 'none'; - list.style.paddingLeft = '0'; - container.appendChild(list); - - // 3. Scan Forward - let next_el = container.nextElementSibling; - while (next_el) { - const match = next_el.tagName.match(/^H([1-6])$/); - if (match) { - const found_level = parseInt(match[1]); - - // STOP Logic: - // If we are looking for H2s, we stop if we hit an H1 (level 1). - // If we are looking for H1s, we stop if we hit... nothing (level 0). - if (found_level < target_level) { - break; - } - - // COLLECT Logic: - if (found_level === target_level) { - if (!next_el.id) next_el.id = `toc-ref-${toc_index}-${found_level}-${list.children.length}`; - - const li = document.createElement('li'); - li.style.marginBottom = '0.5rem'; - - const a = document.createElement('a'); - a.href = `#${next_el.id}`; - a.textContent = next_el.textContent; - a.style.textDecoration = 'none'; - a.style.color = 'inherit'; - a.style.display = 'block'; - - a.onmouseover = () => a.style.color = 'var(--rt-brand-primary)'; - a.onmouseout = () => a.style.color = 'inherit'; - - li.appendChild(a); - list.appendChild(li); - } - } - next_el = next_el.nextElementSibling; - } - }); -}; diff --git a/developer/document/style/RT_code.js b/developer/document/style/RT_code.js deleted file mode 100644 index 6c6e232..0000000 --- a/developer/document/style/RT_code.js +++ /dev/null @@ -1,57 +0,0 @@ -/* - Processes tags. - Uses the central config or CSS variables from the theme. -*/ -function RT_code() { - const RT = window.StyleRT; - const U = RT.utility; - const debug = RT.debug; - - debug.log('RT_code', 'Starting render cycle.'); - - const metrics = U.measure_ink_ratio('monospace'); - - // Scoped Selector: find code blocks anywhere, but styling relies on inheritance - document.querySelectorAll('rt-code').forEach((el) => { - el.style.fontFamily = 'monospace'; - - // Check context for accent color (CSS Variable fallback) - const computed = window.getComputedStyle(el); - const accent = computed.getPropertyValue('--rt-accent').trim() || 'gold'; - - const is_block = U.is_block_content(el); - const parentColor = computed.color; - const is_text_light = U.is_color_light(parentColor); - - const alpha = is_block ? 0.08 : 0.15; - const overlay = is_text_light ? `rgba(255,255,255,${alpha})` : `rgba(0,0,0,${alpha})`; - const text_color = is_text_light ? '#ffffff' : '#000000'; - - el.style.backgroundColor = overlay; - - if (is_block) { - el.style.display = 'block'; - el.style.whiteSpace = 'pre'; - el.style.fontSize = (parseFloat(computed.fontSize) * metrics.ratio * 0.95) + 'px'; - el.style.padding = '1.2rem'; - el.style.margin = '1.5rem 0'; - el.style.borderLeft = `4px solid ${accent}`; - el.style.color = 'inherit'; - } else { - el.style.display = 'inline'; - const exactPx = parseFloat(computed.fontSize) * metrics.ratio * 1.0; - el.style.fontSize = exactPx + 'px'; - el.style.padding = '0.1rem 0.35rem'; - el.style.borderRadius = '3px'; - // Vertical align fix for inline code - const offsetPx = metrics.baseline_diff * (exactPx / 100); - el.style.verticalAlign = offsetPx + 'px'; - el.style.color = text_color; - } - }); - - debug.log('RT_code', 'Render cycle complete.'); -} - -window.StyleRT = window.StyleRT || {}; -window.StyleRT.RT_code = RT_code; diff --git a/developer/document/style/RT_math.js b/developer/document/style/RT_math.js deleted file mode 100644 index 2d07cfa..0000000 --- a/developer/document/style/RT_math.js +++ /dev/null @@ -1,35 +0,0 @@ -/* - Processes tags. - JavaScript: RT_math() - HTML Tag: (parsed as rt-math) -*/ -function RT_math(){ - // querySelector treats 'rt-math' as case-insensitive for the tag - document.querySelectorAll('rt-math').forEach(el => { - if (el.textContent.startsWith('$')) return; - - const is_block = el.parentElement.tagName === 'DIV' || - el.textContent.includes('\n') || - el.parentElement.childNodes.length === 1; - - const delimiter = is_block ? '$$' : '$'; - el.style.display = is_block ? 'block' : 'inline'; - el.textContent = `${delimiter}${el.textContent.trim()}${delimiter}`; - }); - - // MathJax must find its config at window.MathJax - window.MathJax = { - tex: { - inlineMath: [['$', '$']], - displayMath: [['$$', '$$']] - } - }; - - const script = document.createElement('script'); - script.src = 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js'; - script.async = true; - document.head.appendChild(script); -} - -window.StyleRT = window.StyleRT || {}; -window.StyleRT.RT_math = RT_math; diff --git a/developer/document/style/RT_term.js b/developer/document/style/RT_term.js deleted file mode 100644 index 1dec8fb..0000000 --- a/developer/document/style/RT_term.js +++ /dev/null @@ -1,107 +0,0 @@ -/* - Processes and tags. - - Styles only the first occurrence of a unique term/neologism. - - The "-em" variants (e.g., ) are always styled. - - Automatically generates IDs for first occurrences for future indexing. -*/ - -window.StyleRT = window.StyleRT || {}; - -window.StyleRT.RT_term = function() { - const RT = window.StyleRT; - - const debug = RT.debug || { - log: function() {} - ,warn: function() {} - ,error: function() {} - }; - - const DEBUG_TOKEN_S = 'term'; - - try { - // Track seen terms so only the first occurrence is decorated - const seen_terms_dpa = new Set(); - - const apply_style = (el, is_neologism_b) => { - el.style.fontStyle = 'italic'; - el.style.fontWeight = is_neologism_b ? '600' : '500'; - el.style.color = is_neologism_b - ? 'var(--rt-brand-secondary)' - : 'var(--rt-brand-primary)'; - el.style.paddingRight = '0.1em'; // Compensation for italic slant - el.style.display = 'inline'; - }; - - const clear_style = (el) => { - el.style.fontStyle = 'normal'; - el.style.color = 'inherit'; - el.style.fontWeight = 'inherit'; - el.style.paddingRight = ''; - el.style.display = ''; - }; - - const selector_s = [ - 'rt-term' - ,'rt-term-em' - ,'rt-neologism' - ,'rt-neologism-em' - ].join(','); - - const tags_dpa = document.querySelectorAll(selector_s); - - debug.log(DEBUG_TOKEN_S, `Scanning ${tags_dpa.length} term tags`); - - tags_dpa.forEach(el => { - const tag_name_s = el.tagName.toLowerCase(); - const is_neologism_b = tag_name_s.includes('neologism'); - const is_explicit_em_b = tag_name_s.endsWith('-em'); - - const term_text_raw_s = (el.textContent || '').trim(); - if (!term_text_raw_s.length) { - debug.warn(DEBUG_TOKEN_S, `Empty term tag encountered: <${tag_name_s}>`); - return; - } - - // Normalize text for uniqueness tracking - const term_norm_s = term_text_raw_s.toLowerCase(); - - // Slug for ID generation (simple + stable) - const slug_s = term_norm_s.replace(/\s+/g, '-'); - - const is_first_occurrence_b = !seen_terms_dpa.has(term_norm_s); - - if (is_explicit_em_b || is_first_occurrence_b) { - apply_style(el, is_neologism_b); - - if (!is_explicit_em_b && is_first_occurrence_b) { - seen_terms_dpa.add(term_norm_s); - - if (!el.id) { - el.id = `def-${is_neologism_b ? 'neo-' : ''}${slug_s}`; - debug.log( - DEBUG_TOKEN_S - ,`First occurrence: "${term_norm_s}" -> id="${el.id}"` - ); - } else { - debug.log( - DEBUG_TOKEN_S - ,`First occurrence: "${term_norm_s}" (existing id="${el.id}")` - ); - } - } else if (is_explicit_em_b) { - debug.log( - DEBUG_TOKEN_S - ,`Emphasized occurrence: "${term_norm_s}" (<${tag_name_s}>)` - ); - } - } else { - // Subsequent mentions render as normal prose - clear_style(el); - } - }); - - debug.log(DEBUG_TOKEN_S, `Unique terms defined: ${seen_terms_dpa.size}`); - } catch (e) { - debug.error('error', `RT_term failed: ${e && e.message ? e.message : String(e)}`); - } -}; diff --git a/developer/document/style/RT_title.js b/developer/document/style/RT_title.js deleted file mode 100644 index 93757f8..0000000 --- a/developer/document/style/RT_title.js +++ /dev/null @@ -1,60 +0,0 @@ -/* - Processes tags. - Generates a standard document header block. - - Usage: - -*/ -window.StyleRT = window.StyleRT || {}; - -window.StyleRT.RT_title = function() { - const debug = window.StyleRT.debug || { log: function(){} }; - - document.querySelectorAll('rt-title').forEach(el => { - const title = el.getAttribute('title') || 'Untitled Document'; - const author = el.getAttribute('author'); - const date = el.getAttribute('date'); - - if (debug.log) debug.log('RT_title', `Generating title block: ${title}`); - - // Container - const container = document.createElement('div'); - container.style.textAlign = 'center'; - container.style.marginBottom = '3rem'; - container.style.marginTop = '2rem'; - container.style.borderBottom = '1px solid var(--rt-border-default)'; - container.style.paddingBottom = '1.5rem'; - - // Main Title (H1) - const h1 = document.createElement('h1'); - h1.textContent = title; - h1.style.margin = '0 0 0.8rem 0'; - h1.style.border = 'none'; // Override standard H1 border - h1.style.padding = '0'; - h1.style.color = 'var(--rt-brand-primary)'; - h1.style.fontSize = '2.5em'; - h1.style.lineHeight = '1.1'; - h1.style.letterSpacing = '-0.03em'; - - container.appendChild(h1); - - // Metadata Row (Author | Date) - if (author || date) { - const meta = document.createElement('div'); - meta.style.color = 'var(--rt-content-muted)'; - meta.style.fontStyle = 'italic'; - meta.style.fontSize = '1.1em'; - meta.style.fontFamily = '"Georgia", "Times New Roman", serif'; // Classy serif - - const parts = []; - if (author) parts.push(`${author}`); - if (date) parts.push(date); - - meta.innerHTML = parts.join('  —  '); - container.appendChild(meta); - } - - // Replace the raw tag with the generated block - el.replaceWith(container); - }); -}; diff --git a/developer/document/style/Rubio.js b/developer/document/style/Rubio.js deleted file mode 100644 index cd21a5a..0000000 --- a/developer/document/style/Rubio.js +++ /dev/null @@ -1,15 +0,0 @@ -/* Style: The "State Department" Override - Description: Restores decorum. -*/ -(function(){ - const RT = window.StyleRT || {}; - - // Force the font regardless of other settings - RT.rubio = function() { - const articles = document.querySelectorAll("rt-article"); - articles.forEach(el => { - el.style.fontFamily = '"Times New Roman", "Times", serif'; - el.style.letterSpacing = "0px"; // No modern spacing allowed - }); - }; -})(); diff --git a/developer/document/style/article_tech_ref.js b/developer/document/style/article_tech_ref.js deleted file mode 100644 index 8ad9dbb..0000000 --- a/developer/document/style/article_tech_ref.js +++ /dev/null @@ -1,170 +0,0 @@ -/* - Article Layout: Technical Reference - Standard: Theme 1.0 - Description: High-readability layout for technical documentation on screens. - Features: Sans-serif, justified text, distinct headers, boxed code. -*/ -(function(){ - const RT = window.StyleRT = window.StyleRT || {}; - - RT.article = function() { - const debug = RT.debug || { log: function(){} }; - debug.log('layout', 'RT.article starting...'); - - RT.config = RT.config || {}; - - // Default Configuration - RT.config.article = { - font_family: '"Noto Sans", "Segoe UI", "Helvetica Neue", sans-serif' - ,line_height: "1.8" - ,font_size: "16px" - ,font_weight: "400" // Default (String) - ,max_width: "820px" - ,margin: "0 auto" - }; - - // SAFE THEME DETECTION - // If the theme is loaded and explicitly Light, bump the weight. - try { - if (RT.config.theme && RT.config.theme.meta_is_dark === false) { - RT.config.article.font_weight = "600"; - debug.log('layout', 'Light theme detected: adjusting font weight to 600.'); - } - } catch(e) { - console.warn("StyleRT: Auto-weight adjustment failed, using default.", e); - } - - const conf = RT.config.article; - const article_seq = document.querySelectorAll("RT-article"); - - if(article_seq.length === 0) { - debug.log('layout', 'No elements found. Exiting.'); - return; - } - - // 1. Apply Container Styles - article_seq.forEach( (article) =>{ - const style = article.style; - style.display = "block"; - style.fontFamily = conf.font_family; - style.fontSize = conf.font_size; - style.lineHeight = conf.line_height; - style.fontWeight = conf.font_weight; - style.maxWidth = conf.max_width; - style.margin = conf.margin; - style.padding = "0 20px"; - style.color = "var(--rt-content-main)"; - }); - - // 2. Inject Child Typography - const style_id = 'rt-article-typography'; - if (!document.getElementById(style_id)) { - debug.log('layout', 'Injecting CSS typography rules.'); - const style_el = document.createElement('style'); - style_el.id = style_id; - - style_el.textContent = ` - /* --- HEADERS --- */ - rt-article h1 { - color: var(--rt-brand-primary); - font-size: 2.0em; - font-weight: 500; - text-align: center; - margin-top: 1.2em; - margin-bottom: 0.6em; - border-bottom: 2px solid var(--rt-border-default); - padding-bottom: 0.3em; - line-height: 1.2; - letter-spacing: -0.02em; - } - - rt-article h2 { - color: var(--rt-brand-secondary); - font-size: 1.5em; - font-weight: 400; - text-align: center; - margin-top: 1.0em; - margin-bottom: 0.5em; - } - - rt-article h2 + h3 { - margin-top: -0.3em; - padding-top: 0; - } - - rt-article h3 { - color: var(--rt-brand-tertiary); - font-size: 1.4em; - font-weight: 400; - margin-top: 1.0em; - margin-bottom: 0.5em; - } - - /* --- DEEP LEVELS (H4-H6) --- */ - rt-article h4, rt-article h5, rt-article h6 { - color: var(--rt-brand-tertiary); - font-weight: bold; - margin-top: 1.2em; - font-style: italic; - } - rt-article h4 { margin-left: 2em; } - rt-article h5 { margin-left: 4em; } - rt-article h6 { margin-left: 6em; } - - /* --- BODY TEXT --- */ - rt-article p { - margin-bottom: 1.4em; - text-align: justify; - hyphens: auto; - color: var(--rt-content-main); - } - - /* --- RICH ELEMENTS --- */ - rt-article blockquote { - border-left: 4px solid var(--rt-brand-secondary); - margin: 1.5em 0; - padding: 0.5em 1em; - font-style: italic; - color: var(--rt-content-muted); - background: var(--rt-surface-1); - border-radius: 0 4px 4px 0; - } - - rt-article ul, rt-article ol { - margin-bottom: 1.4em; - padding-left: 2em; - } - rt-article li { - margin-bottom: 0.4em; - } - rt-article li::marker { - color: var(--rt-brand-secondary); - font-weight: bold; - } - - /* Links */ - rt-article a { - color: var(--rt-brand-link); - text-decoration: none; - border-bottom: 1px dotted var(--rt-border-default); - transition: all 0.2s; - } - rt-article a:hover { - color: var(--rt-brand-primary); - border-bottom: 1px solid var(--rt-brand-primary); - background: var(--rt-surface-1); - } - - /* --- TECHNICAL --- */ - rt-article pre { - background: var(--rt-surface-code); - padding: 1em; - border-radius: 4px; - overflow-x: auto; - border: 1px solid var(--rt-border-default); - } - `; - document.head.appendChild(style_el); - } - }; -})(); diff --git a/developer/document/style/body_visibility_hidden.js b/developer/document/style/body_visibility_hidden.js deleted file mode 100644 index d6a178a..0000000 --- a/developer/document/style/body_visibility_hidden.js +++ /dev/null @@ -1,12 +0,0 @@ -/* - Targets the root element to ensure total blackout during load. -*/ -function body_visibility_hidden(){ - const gate = document.createElement('style'); - gate.id = 'rt-visibility-gate'; - gate.textContent = 'html{visibility:hidden !important; background:black !important;}'; - document.head.appendChild(gate); -} - -window.StyleRT = window.StyleRT || {}; -window.StyleRT.body_visibility_hidden = body_visibility_hidden; diff --git a/developer/document/style/body_visibility_visible.js b/developer/document/style/body_visibility_visible.js deleted file mode 100644 index ff1c4b6..0000000 --- a/developer/document/style/body_visibility_visible.js +++ /dev/null @@ -1,13 +0,0 @@ -/* - Restores visibility by removing the visibility gate. -*/ -function body_visibility_visible(){ - const gate = document.getElementById('rt-visibility-gate'); - if (gate){ - gate.remove(); - } - document.body.style.visibility = 'visible'; -} - -window.StyleRT = window.StyleRT || {}; -window.StyleRT.body_visibility_visible = body_visibility_visible; diff --git a/developer/document/style/custom_tag.txt b/developer/document/style/custom_tag.txt deleted file mode 100644 index 146d3ad..0000000 --- a/developer/document/style/custom_tag.txt +++ /dev/null @@ -1,8 +0,0 @@ - : The root container. - : The page wrapper. - - - - - : For Conventional terms (standard definitions) -: Terms introduced in this article diff --git a/developer/document/style/page_fixed_glow.js b/developer/document/style/page_fixed_glow.js deleted file mode 100644 index 91bd648..0000000 --- a/developer/document/style/page_fixed_glow.js +++ /dev/null @@ -1,88 +0,0 @@ -/* - Page Layout: Fixed Glow - Standard: Theme 1.0 - Description: A fixed-height container with a glowing border effect that matches the active theme. -*/ -(function(){ - const RT = window.StyleRT = window.StyleRT || {}; - - // Function name stays generic so the orchestrator can call RT.page() regardless of file choice - RT.page = function() { - RT.config = RT.config || {}; - - // Default Configuration - // We use CSS Variables here so the Theme controls the actual colors. - const defaults = { - width: "100%" - ,height: "1056px" - ,padding: "3rem" - ,margin: "4rem auto" - - // Dynamic Theme Bindings - ,bg_color: "var(--rt-surface-0)" // Black (Dark) or Cream (Light) - ,border_color: "var(--rt-brand-primary)" // The Main Accent Color - ,text_color: "var(--rt-brand-primary)" // Page Number Color - - // The Glow: Uses the primary brand color for the shadow - ,shadow: "drop-shadow(0px 0px 15px var(--rt-brand-primary))" - }; - - // Merge defaults - RT.config.page = Object.assign({}, defaults, RT.config.page || {}); - - const conf = RT.config.page; - const style_id = 'rt-page-fixed-glow'; - - if (!document.getElementById(style_id)) { - const style_el = document.createElement('style'); - style_el.id = style_id; - - style_el.textContent = ` - /* Reset page counter on the article container */ - rt-article { - counter-reset: rt-page-counter; - } - - rt-page { - display: block; - position: relative; - box-sizing: border-box; - overflow: hidden; - - /* Dimensions */ - width: ${conf.width}; - height: ${conf.height}; - margin: ${conf.margin}; - padding: ${conf.padding}; - - /* Theming */ - background-color: ${conf.bg_color}; - border: 1px solid ${conf.border_color}; - - /* The "Glow" Effect */ - filter: ${conf.shadow}; - - /* Counter Increment */ - counter-increment: rt-page-counter; - } - - /* Page Numbering */ - rt-page::after { - content: "Page " counter(rt-page-counter); - position: absolute; - bottom: 1.5rem; - right: 3rem; - - font-family: "Noto Sans", sans-serif; - font-size: 0.9rem; - font-weight: bold; - - color: ${conf.text_color}; - opacity: 0.8; - pointer-events: none; /* Prevent interference with clicks */ - } - `; - document.head.appendChild(style_el); - } - }; -})(); diff --git a/developer/document/style/paginate_by_element.js b/developer/document/style/paginate_by_element.js deleted file mode 100644 index e085148..0000000 --- a/developer/document/style/paginate_by_element.js +++ /dev/null @@ -1,72 +0,0 @@ -/* - Layout Paginator: paginate_by_element -*/ -window.StyleRT = window.StyleRT || {}; - -window.StyleRT.paginate_by_element = function() { - const RT = window.StyleRT; - - // Fix: Read safely without overwriting the config namespace - const page_conf = (RT.config && RT.config.page) ? RT.config.page : {}; - const page_height_limit = page_conf.height_limit || 1000; - - const article_seq = document.querySelectorAll("RT-article"); - - // HURDLE: Error if no articles found to paginate - if(article_seq.length === 0) { - RT.debug.error('pagination', 'No elements found. Pagination aborted.'); - return; - } - - article_seq.forEach( (article) => { - const raw_elements = Array.from(article.children).filter(el => - !['SCRIPT', 'STYLE', 'RT-PAGE'].includes(el.tagName) - ); - - if(raw_elements.length === 0) return; - - const pages = []; - let current_batch = []; - let current_h = 0; - - const get_el_height = (el) => { - const rect = el.getBoundingClientRect(); - const style = window.getComputedStyle(el); - const margin = parseFloat(style.marginTop) + parseFloat(style.marginBottom); - return (rect.height || 0) + (margin || 0); - }; - - for (let i = 0; i < raw_elements.length; i++) { - const el = raw_elements[i]; - const h = get_el_height(el); - const is_heading = /^H[1-6]/.test(el.tagName); - - let total_required_h = h; - if (is_heading && i + 1 < raw_elements.length) { - total_required_h += get_el_height(raw_elements[i + 1]); - } - - if (current_h + total_required_h > page_height_limit && current_batch.length > 0) { - pages.push(current_batch); - current_batch = []; - current_h = 0; - } - - current_batch.push(el); - current_h += h; - } - - if (current_batch.length > 0) pages.push(current_batch); - - article.innerHTML = ''; - - pages.forEach( (list, index) => { - const page_el = document.createElement('rt-page'); - page_el.id = `page-${index+1}`; - list.forEach(item => page_el.appendChild(item)); - article.appendChild(page_el); - }); - - if (RT.debug) RT.debug.log('pagination', `Article paginated into ${pages.length} pages.`); - }); -}; diff --git a/developer/document/style/style_orchestrator.js b/developer/document/style/style_orchestrator.js deleted file mode 100644 index 755c1c8..0000000 --- a/developer/document/style/style_orchestrator.js +++ /dev/null @@ -1,92 +0,0 @@ -/* - Master Loader & Orchestrator for StyleRT. -*/ - -window.StyleRT = window.StyleRT || {}; - -window.StyleRT.style_orchestrator = function() { - const RT = window.StyleRT; - - const modules = [ - // Theme & Semantics - 'style/RT_title.js', - 'style/theme_dark_gold.js', - 'style/RT_term.js', - 'style/RT_math.js', - 'style/RT_code.js', - 'style/article_tech_ref.js', - 'style/RT_TOC.js', - - // Layout & Pagination - 'style/paginate_by_element.js', - 'style/page_fixed_glow.js', - - // Visibility - 'style/body_visibility_visible.js' - ]; - - // 1. Bootloader - const utility = document.createElement('script'); - utility.src = 'style/utility.js'; - - utility.onload = () => { load_next(0); }; - utility.onerror = () => { console.error("StyleRT: Critical failure - utility.js missing."); }; - document.head.appendChild(utility); - - // 2. The Chain Loader - const load_next = (index) => { - if (index >= modules.length) { - run_style(); - return; - } - const src = modules[index]; - if (RT.debug) RT.debug.log('style', `Loading: ${src}`); - - const script = document.createElement('script'); - script.src = src; - script.onload = () => load_next(index + 1); - script.onerror = () => { - console.error(`StyleRT: Failed load on ${src}`); - load_next(index + 1); - }; - document.head.appendChild(script); - }; - - // 3. Phase 1: Semantics - const run_style = () => { - RT.debug.log('style', 'Starting Phase 1: Setup & Semantics'); - - // Naming Convention: RT. - if(RT.theme) RT.theme(); - if(RT.article) RT.article(); - - // NEW: Trigger the Title Generator - if(RT.RT_title) RT.RT_title(); - - if(RT.RT_term) RT.RT_term(); - if(RT.RT_math) RT.RT_math(); - if(RT.RT_code) RT.RT_code(); - - if (window.MathJax && MathJax.Hub && MathJax.Hub.Queue) { - RT.debug.log('style', 'MathJax detected. Queueing layout tasks...'); - MathJax.Hub.Queue(["Typeset", MathJax.Hub], continue_style); - } else { - continue_style(); - } - }; - - // 4. Phase 2: Layout - const continue_style = () => { - RT.debug.log('style', 'Starting Phase 2: Layout & Reveal'); - - // Debug: Dump the config to see what values we are using - if(RT.debug) RT.debug.log('config', JSON.stringify(RT.config || {}, null, 2)); - - if(RT.RT_TOC) RT.RT_TOC(); - if(RT.paginate_by_element) RT.paginate_by_element(); - if(RT.page) RT.page(); // Defined in page_css_pn.js - if(RT.body_visibility_visible) RT.body_visibility_visible(); - - RT.debug.log('style', 'Style execution complete.'); - }; -}; diff --git a/developer/document/style/theme_dark_gold.js b/developer/document/style/theme_dark_gold.js deleted file mode 100644 index f576147..0000000 --- a/developer/document/style/theme_dark_gold.js +++ /dev/null @@ -1,94 +0,0 @@ -/* - Theme: Inverse Wheat (Dark) - Standard: Theme 1.0 - Description: High contrast Amber on Deep Charcoal. -*/ -( function(){ - const RT = window.StyleRT = window.StyleRT || {}; - - RT.theme = function(){ - RT.config = RT.config || {}; - - // THEME 1.0 DATA CONTRACT - RT.config.theme = { - meta_is_dark: true - ,meta_name: "Inverse Wheat" - - // --- SURFACES (Depth & Container Hierarchy) --- - ,surface_0: "hsl(0, 0%, 5%)" // App Background (Deepest) - ,surface_1: "hsl(0, 0%, 10%)" // Sidebar / Nav / Panels - ,surface_2: "hsl(0, 0%, 14%)" // Cards / Floating Elements - ,surface_3: "hsl(0, 0%, 18%)" // Modals / Dropdowns / Popovers - ,surface_input: "hsl(0, 0%, 12%)" // Form Inputs - ,surface_code: "hsl(0, 0%, 11%)" // Code Block Background - ,surface_select: "hsl(45, 100%, 15%)" // Text Selection Highlight - - // --- CONTENT (Text & Icons) --- - ,content_main: "hsl(50, 60%, 85%)" // Primary Reading Text - ,content_muted: "hsl(36, 15%, 60%)" // Metadata, subtitles - ,content_subtle: "hsl(36, 10%, 40%)" // Placeholders, disabled states - ,content_inverse: "hsl(0, 0%, 5%)" // Text on high-contrast buttons - - // --- BRAND & ACTION (The "Wheat" Identity) --- - ,brand_primary: "hsl(45, 100%, 50%)" // Main Action / H1 / Focus Ring - ,brand_secondary: "hsl(38, 90%, 65%)" // Secondary Buttons / H2 - ,brand_tertiary: "hsl(30, 60%, 70%)" // Accents / H3 - ,brand_link: "hsl(48, 100%, 50%)" // Hyperlinks (High Visibility) - - // --- BORDERS & DIVIDERS --- - ,border_faint: "hsl(36, 20%, 15%)" // Subtle separation - ,border_default: "hsl(36, 20%, 25%)" // Standard Card Borders - ,border_strong: "hsl(36, 20%, 40%)" // Active states / Inputs - - // --- STATE & FEEDBACK (Earth Tones) --- - ,state_success: "hsl(100, 50%, 45%)" // Olive Green - ,state_warning: "hsl(35, 90%, 55%)" // Burnt Orange - ,state_error: "hsl(0, 60%, 55%)" // Brick Red - ,state_info: "hsl(200, 40%, 55%)" // Slate Blue - - // --- SYNTAX HIGHLIGHTING (For Code) --- - ,syntax_keyword: "hsl(35, 100%, 65%)" // Orange - ,syntax_string: "hsl(75, 50%, 60%)" // Sage Green - ,syntax_func: "hsl(45, 90%, 70%)" // Light Gold - ,syntax_comment: "hsl(36, 15%, 45%)" // Brown/Gray - }; - - // --- APPLY THEME --- - const palette = RT.config.theme; - const body = document.body; - const html = document.documentElement; - - // 1. Paint Base - html.style.backgroundColor = palette.surface_0; - body.style.backgroundColor = palette.surface_0; - body.style.color = palette.content_main; - - // 2. Export Variables (Standardization) - const s = body.style; - for (const [key, value] of Object.entries(palette)) { - s.setProperty(`--rt-${key.replace(/_/g, '-')}`, value); - } - - // 3. Global Overrides - const style_id = 'rt-global-overrides'; - if (!document.getElementById(style_id)) { - const style = document.createElement('style'); - style.id = style_id; - style.textContent = ` - ::selection { background: var(--rt-surface-select); color: var(--rt-brand-primary); } - ::-moz-selection { background: var(--rt-surface-select); color: var(--rt-brand-primary); } - - ::-webkit-scrollbar { width: 12px; } - ::-webkit-scrollbar-track { background: var(--rt-surface-0); } - ::-webkit-scrollbar-thumb { - background: var(--rt-border-default); - border: 2px solid var(--rt-surface-0); - border-radius: 8px; - } - ::-webkit-scrollbar-thumb:hover { background: var(--rt-brand-secondary); } - `; - document.head.appendChild(style); - } - }; - -} )(); diff --git a/developer/document/style/theme_light.js b/developer/document/style/theme_light.js deleted file mode 100644 index 4b5eea4..0000000 --- a/developer/document/style/theme_light.js +++ /dev/null @@ -1,70 +0,0 @@ -/* - Theme: Classic Wheat (Light) - Standard: Theme 1.0 - Description: Warm paper tones with Burnt Orange accents. -*/ -( function(){ - const RT = window.StyleRT = window.StyleRT || {}; - - RT.theme_light = function(){ - RT.config = RT.config || {}; - - // THEME 1.0 DATA CONTRACT - RT.config.theme = { - meta_is_dark: false - ,meta_name: "Classic Wheat" - - // --- SURFACES --- - ,surface_0: "hsl(40, 30%, 94%)" // App Background (Cream/Linen) - ,surface_1: "hsl(40, 25%, 90%)" // Sidebar (Slightly darker beige) - ,surface_2: "hsl(40, 20%, 98%)" // Cards (Lighter, almost white) - ,surface_3: "hsl(0, 0%, 100%)" // Modals (Pure White) - ,surface_input: "hsl(40, 20%, 98%)" // Form Inputs - ,surface_code: "hsl(40, 15%, 90%)" // Code Block Background - ,surface_select: "hsl(45, 100%, 85%)" // Text Selection Highlight - - // --- CONTENT --- - ,content_main: "hsl(30, 20%, 20%)" // Deep Umber (Not Black) - ,content_muted: "hsl(30, 15%, 45%)" // Medium Brown - ,content_subtle: "hsl(30, 10%, 65%)" // Light Brown/Gray - ,content_inverse: "hsl(40, 30%, 94%)" // Text on dark buttons - - // --- BRAND & ACTION --- - ,brand_primary: "hsl(30, 90%, 35%)" // Burnt Orange (Action) - ,brand_secondary: "hsl(35, 70%, 45%)" // Rust / Gold - ,brand_tertiary: "hsl(25, 60%, 55%)" // Copper - ,brand_link: "hsl(30, 100%, 35%)" // Link Color - - // --- BORDERS --- - ,border_faint: "hsl(35, 20%, 85%)" - ,border_default: "hsl(35, 20%, 75%)" - ,border_strong: "hsl(35, 20%, 55%)" - - // --- STATE & FEEDBACK --- - ,state_success: "hsl(100, 40%, 40%)" // Forest Green - ,state_warning: "hsl(30, 90%, 50%)" // Persimmon - ,state_error: "hsl(0, 60%, 45%)" // Crimson - ,state_info: "hsl(200, 50%, 45%)" // Navy Blue - - // --- SYNTAX --- - ,syntax_keyword: "hsl(20, 90%, 45%)" // Rust - ,syntax_string: "hsl(100, 35%, 35%)" // Ivy Green - ,syntax_func: "hsl(300, 30%, 40%)" // Muted Purple - ,syntax_comment: "hsl(35, 10%, 60%)" // Light Brown - }; - - // --- APPLY THEME --- - const palette = RT.config.theme; - const body = document.body; - const html = document.documentElement; - - html.style.backgroundColor = palette.surface_0; - body.style.backgroundColor = palette.surface_0; - body.style.color = palette.content_main; - - const s = body.style; - for (const [key, value] of Object.entries(palette)) { - s.setProperty(`--rt-${key.replace(/_/g, '-')}`, value); - } - }; -} )(); diff --git a/developer/document/style/theme_light_gold.js b/developer/document/style/theme_light_gold.js deleted file mode 100644 index 206f3da..0000000 --- a/developer/document/style/theme_light_gold.js +++ /dev/null @@ -1,103 +0,0 @@ -/* - Theme: Golden Wheat (Light) - "Spanish Gold Edition" - File: style/theme-light-gold.js - Standard: Theme 1.0 - Description: Light Parchment background with Oxblood Red ink. -*/ -( function(){ - const RT = window.StyleRT = window.StyleRT || {}; - - RT.theme = function(){ - RT.config = RT.config || {}; - - RT.config.theme = { - meta_is_dark: false - ,meta_name: "Golden Wheat (Yellow)" - - // --- SURFACES (Light Parchment) --- - // Shifted lightness up to 94% for a "whiter" feel that still holds the yellow tint. - ,surface_0: "hsl(48, 50%, 94%)" // Main Page: Fine Parchment - ,surface_1: "hsl(48, 40%, 90%)" // Panels: Slightly darker - ,surface_2: "hsl(48, 30%, 97%)" // Cards: Very light - ,surface_3: "hsl(0, 0%, 100%)" // Popups - ,surface_input: "hsl(48, 20%, 96%)" - ,surface_code: "hsl(48, 25%, 88%)" // Distinct Code BG - ,surface_select: "hsl(10, 70%, 85%)" // Red Highlight - - // --- CONTENT (Deep Ink) --- - ,content_main: "hsl(10, 25%, 7%)" // Deep Warm Black (Ink) - ,content_muted: "hsl(10, 15%, 35%)" // Dark Grey-Red - ,content_subtle: "hsl(10, 10%, 55%)" - ,content_inverse: "hsl(48, 50%, 90%)" - - // --- BRAND & ACTION (The Red Spectrum) --- - ,brand_primary: "hsl(12, 85%, 30%)" // H1 (Deep Oxblood) - ,brand_secondary: "hsl(10, 80%, 35%)" // H2 (Garnet) - ,brand_tertiary: "hsl(8, 70%, 40%)" // H3 (Brick) - ,brand_link: "hsl(12, 90%, 35%)" // Link - - // --- BORDERS --- - ,border_faint: "hsl(45, 30%, 80%)" - ,border_default: "hsl(45, 30%, 70%)" // Pencil Grey - ,border_strong: "hsl(12, 50%, 40%)" - - // --- STATE --- - ,state_success: "hsl(120, 40%, 30%)" - ,state_warning: "hsl(25, 90%, 45%)" - ,state_error: "hsl(0, 75%, 35%)" - ,state_info: "hsl(210, 60%, 40%)" - - // --- SYNTAX --- - ,syntax_keyword: "hsl(0, 75%, 35%)" - ,syntax_string: "hsl(100, 35%, 25%)" - ,syntax_func: "hsl(15, 85%, 35%)" - ,syntax_comment: "hsl(45, 20%, 50%)" - }; - - // --- APPLY THEME --- - const palette = RT.config.theme; - const body = document.body; - const html = document.documentElement; - - html.style.backgroundColor = palette.surface_0; - body.style.backgroundColor = palette.surface_0; - body.style.color = palette.content_main; - - const s = body.style; - for (const [key, value] of Object.entries(palette)) { - s.setProperty(`--rt-${key.replace(/_/g, '-')}`, value); - } - - // Global overrides - const style_id = 'rt-global-overrides'; - if (!document.getElementById(style_id)) { - const style = document.createElement('style'); - style.id = style_id; - style.textContent = ` - ::selection { background: var(--rt-surface-select); color: var(--rt-brand-primary); } - ::-moz-selection { background: var(--rt-surface-select); color: var(--rt-brand-primary); } - - ::-webkit-scrollbar { width: 12px; } - ::-webkit-scrollbar-track { background: var(--rt-surface-0); } - ::-webkit-scrollbar-thumb { - background: var(--rt-border-default); - border: 2px solid var(--rt-surface-0); - border-radius: 8px; - } - ::-webkit-scrollbar-thumb:hover { background: var(--rt-brand-secondary); } - - rt-article p, rt-article li { - text-shadow: 0px 0px 0.5px rgba(0,0,0, 0.2); - } - - .MathJax, .MathJax_Display, .mjx-chtml { - color: var(--rt-content-main) !important; - fill: var(--rt-content-main) !important; - stroke: var(--rt-content-main) !important; - } - `; - document.head.appendChild(style); - } - }; - -} )(); diff --git a/developer/document/style/utility.js b/developer/document/style/utility.js deleted file mode 100644 index 258eb28..0000000 --- a/developer/document/style/utility.js +++ /dev/null @@ -1,109 +0,0 @@ -/* - General utilities for the StyleRT library. -*/ - -window.StyleRT = window.StyleRT || {}; - -// --- DEBUG SYSTEM --- -window.StyleRT.debug = { - - // all debug messages enabled -/* - active_tokens: new Set([ - 'style', 'layout', 'pagination' - ,'selector', 'config', 'error' - ,'term' - ]), -*/ - active_tokens: new Set([ - 'term' - ]), - - log: function(token, message) { - if (this.active_tokens.has(token)) { - console.log(`[StyleRT:${token}]`, message); - } - }, - - warn: function(token, message) { - if (this.active_tokens.has(token)) { - console.warn(`[StyleRT:${token}]`, message); - } - }, - - // New: Always log errors regardless of token, but tag them - error: function(token, message) { - console.error(`[StyleRT:${token}] CRITICAL:`, message); - }, - - enable: function(token) { this.active_tokens.add(token); console.log(`Enabled: ${token}`); }, - disable: function(token) { this.active_tokens.delete(token); console.log(`Disabled: ${token}`); } -}; - -// --- UTILITIES --- -window.StyleRT.utility = { - // --- FONT PHYSICS --- - measure_ink_ratio: function(target_font, ref_font = null) { - const debug = window.StyleRT.debug; - debug.log('layout', `Measuring ink ratio for ${target_font}`); - - const canvas = document.createElement('canvas'); - const ctx = canvas.getContext('2d'); - - if (!ref_font) { - const bodyStyle = window.getComputedStyle(document.body); - ref_font = bodyStyle.fontFamily; - } - - const get_metrics = (font) => { - ctx.font = '100px ' + font; - const metrics = ctx.measureText('M'); - return { - ascent: metrics.actualBoundingBoxAscent, - descent: metrics.actualBoundingBoxDescent - }; - }; - - const ref_m = get_metrics(ref_font); - const target_m = get_metrics(target_font); - - const ratio = ref_m.ascent / target_m.ascent; - // debug.log('layout', `Ink Ratio calculated: ${ratio.toFixed(3)}`); - - return { - ratio: ratio, - baseline_diff: ref_m.descent - target_m.descent - }; - }, - - // --- COLOR PHYSICS --- - is_color_light: function(color_string) { - const debug = window.StyleRT.debug; - - // 1. HSL Check - if (color_string.startsWith('hsl')) { - const numbers = color_string.match(/\d+/g); - if (numbers && numbers.length >= 3) { - const lightness = parseInt(numbers[2]); - return lightness > 50; - } - } - - // 2. RGB Check - const rgb = color_string.match(/\d+/g); - if (!rgb) { - // debug.warn('color_layout', `Failed to parse color: "${color_string}". Defaulting to Light.`); - return true; - } - - const r = parseInt(rgb[0]); - const g = parseInt(rgb[1]); - const b = parseInt(rgb[2]); - const luma = (r * 299 + g * 587 + b * 114) / 1000; - return luma > 128; - }, - - is_block_content: function(element) { - return element.textContent.trim().includes('\n'); - } -}; diff --git a/developer/document/style/version.txt b/developer/document/style/version.txt deleted file mode 100644 index a85e614..0000000 --- a/developer/document/style/version.txt +++ /dev/null @@ -1 +0,0 @@ -v0.3 diff --git a/developer/document/style_manual.html b/developer/document/style_manual.html deleted file mode 100644 index afb7e69..0000000 --- a/developer/document/style_manual.html +++ /dev/null @@ -1,272 +0,0 @@ - - - - - RT Style System: Reference Manual - - - - - - - - - - - - - - - - - - - - - - - -

Architecture Overview

-

- The RT Style System is a client-side, JavaScript-driven publishing framework designed to turn raw HTML into high-readability technical documentation. Unlike standard CSS frameworks, RT uses JavaScript to handle complex layout tasks like ink-ratio balancing and dynamic pagination. -

- -

The Orchestrator

-

- The core of the system is style_orchestrator.js. It is placed at the bottom of the HTML <body>. Its job is to: -

-
    -
  1. Detect which modules are already loaded.
    2. -
  2. Load missing modules (defaulting to Dark Theme if none is specified).
    3. -
  3. Execute the Semantics Phase (styling tags).
    4. -
  4. Wait for MathJax (if present).
    5. -
  5. Execute the Layout Phase (pagination, page rendering).
    6. -
  6. Reveal the document.
    7. -
- -

Semantic Tags

-

- The system relies on a specific set of custom tags in the RT- namespace to separate structure from presentation. -

- -

Terminology

- -

Conventional Terms

-

- Use <RT-term> for standard, industry accepted technical terms. The system decorates only the first occurrence of each unique term so that the first appearance functions as a definition point, and later appearances do not overload the page with styling. -

- - -The Singleton Pattern restricts instantiation... - - -

- Renders as: The Singleton Pattern restricts instantiation... -

- -

Neologisms

-

- Use <RT-neologism> for terms invented specifically for the current document or project. Neologisms are styled more strongly than conventional terms, visually distinguishing "jargon you should know" from "jargon we just made up." -

- - -We define the Hyper Tape as a construct... - - -

- Renders as: We define the Hyper Tape as a construct... -

- -

First Occurrence Rule

-

- The term system is intentionally conservative. For the tags <RT-term> and <RT-neologism>, only the first occurrence of a unique term is decorated. Subsequent mentions are rendered as normal prose. -

- -

- Uniqueness is tracked by normalizing the term text (trimmed, then lowercased). This means that Symbol and symbol count as the same term. -

- -

Forced Emphasis Variants

-

- Sometimes a later mention of a term should be emphasized again. For that purpose, the system provides explicit emphasis tags: -

- -
    -
  • <RT-term-em>
    • -
  • <RT-neologism-em>
    • -
- -

- These variants are always decorated, even if the term appeared earlier. -

- -

Automatic Definition Anchors

-

- For first occurrences, the term module automatically assigns an id attribute if one does not already exist. This creates stable anchors for future indexing and linking. -

- - -We define a Symbol as... - - -

- The first occurrence will be given an id similar to def-symbol. For neologisms, an additional marker is used, for example def-neo-hyper-tape. -

- -

Technical Content

- -

Code

-

- Use <RT-code>. If placed inline, it acts like a span. If placed as a block (with newlines), it acts like a pre formatted block with a theme aware border. -

- - -# Block Code Example -def hello(): - return "World" - - -

Mathematics

-

- Use <RT-math>. The system auto detects if it is a block equation or inline variable and wraps it in MathJax delimiters. -

-

- Inline: Let x be the input. -

-

- Block: -

- - f(x) = \sum_{i=0}^{n} x_i - - -

Navigation & Layout

- -

Automatic Table of Contents

-

- Use <RT-TOC> to insert a generated table of contents. The tag scans the document forward from its current position to collect headings. -

- -

Explicit Mode

-

- Use the level="N" attribute to target a specific heading depth. -

-
    -
  • <RT-TOC level="1">: Collects all <h1> elements until the end of the document. Best for the main document index.
    • -
  • <RT-TOC level="2">: Collects all <h2> elements until it encounters the next <h1>. Best for chapter summaries.
    • -
- -

Implicit Mode

-

- If no level is specified, the TOC scans backwards to find the nearest heading (for example H1) and assumes you want to collect children one level deeper (for example H2). -

-

- Note: Implicit mode can fail if placed before the first heading of a section. Use explicit levels for robust results. -

- -

The Title Block

-

- Use <RT-title> as the first element in your <body> (before the article container). This tag generates a standardized, styled header block with the document title and metadata. -

- -

Attributes

-
    -
  • title (Required): The main heading of the document.
    • -
  • author (Optional): The author's name. Renders in a bold accent color.
    • -
  • date (Optional): The publication or revision date.
    • -
- -

Example

- - - - - -

- Renders as: A centered, high contrast H1 followed by a serif styled metadata row containing the author and date. -

- -

The Article Container

-

- The root element must be <RT-article>. This is the boundary for the pagination logic. -

- -

Pagination

-

- The script paginate_by_element.js scans the article. It calculates the height of every element (including margins) and bundles them into <RT-page> elements. -

-

- Soft Limit Pagination: The system attempts to keep headers with their following paragraphs. It will break a page early rather than stranding a header at the bottom. -

- -

Debugging

- -

Debug Tokens

-

- RT provides a lightweight debug logging system in utility.js. Logging is controlled by a set of active debug tokens. Each log message is assigned a token, and the message prints only if that token is enabled. -

- -

- Examples of common tokens include style, layout, pagination, selector, config, and term. -

- -

How Logging is Gated

-

- Normal log and warning output are gated. The methods debug.log(token,message) and debug.warn(token,message) will print only when the token exists in debug.active_tokens. -

- -

- This prevents the console from being flooded during normal use, while still allowing deep visibility during development. -

- -

Errors are Always Printed

-

- Errors are treated differently. The method debug.error(token,message) always prints, regardless of token state. These messages represent failures that require attention. -

- -

Enabling and Disabling Tokens

-

- Tokens may be enabled or disabled in two ways: by editing the active_tokens set in utility.js, or at runtime by calling: -

- - -window.StyleRT.debug.enable('term') -window.StyleRT.debug.disable('term') - - -

- For example, the term system (RT_term.js) uses the term token. When that token is enabled, the module will print messages describing how terms were detected and which term definitions were assigned IDs. -

- -

Themes

-

- The system supports hot swapping themes by changing the script import in the head. -

-
    -
  • Dark: style/theme_dark_gold.js (Default)
    • -
  • Light: style/theme_light_gold.js
    • -
- -

Manifest

- -1. style_orchestrator.js (Example/default footer script) -2. utility.js (Math/Color physics) -3. article_tech_ref.js (Typography and CSS injection) -4. RT_code.js (Code block logic) -5. RT_math.js (MathJax wrapper) -6. RT_term.js (Term styling) -7. RT_TOC.js (Navigation generator) -8. paginate_by_element.js (Page splitter) -9. page_fixed_glow.js (Visual page container) - - - - - - - diff --git a/developer/document/test.html b/developer/document/test.html deleted file mode 100644 index 5eca533..0000000 --- a/developer/document/test.html +++ /dev/null @@ -1,97 +0,0 @@ - - - - - Test File - - - - - - - -

text before the first heading

- -

Given

-

The English language is a given, apparently.

-

- This discussion happens to appear in the context of a Python implementation. -

- -

Symbol

-

Definition

-

x - We have a symbol instance factory. Each time the make - method is called, we get a unique identity i. - - A symbol instance may be copied as though it were an integer. - Thus, a common method for making a copy is assignment: -

- -x = y -# y is a variable holding a symbol instance - - -

- 1. A symbol instance may be copied as though it were an integer. - Thus, a common method for making a copy is assignment: - 2. A symbol instance may be copied as though it were an integer. - Thus, a common method for making a copy is assignment: - 3. A symbol instance may be copied as though it were an integer. - Thus, a common method for making a copy is assignment: - 4. A symbol instance may be copied as though it were an integer. - Thus, a common method for making a copy is assignment: - 5. A symbol instance may be copied as though it were an integer. - Thus, a common method for making a copy is assignment: - 6. A symbol instance may be copied as though it were an integer. - Thus, a common method for making a copy is assignment: - 7. A symbol instance may be copied as though it were an integer. - Thus, a common method for making a copy is assignment: - 8. A symbol instance may be copied as though it were an integer. - Thus, a common method for making a copy is assignment: - 11. A symbol instance may be copied as though it were an integer. - Thus, a common method for making a copy is assignment: - 12. A symbol instance may be copied as though it were an integer. - Thus, a common method for making a copy is assignment: - 13. A symbol instance may be copied as though it were an integer. - Thus, a common method for making a copy is assignment: - 14. A symbol instance may be copied as though it were an integer. - Thus, a common method for making a copy is assignment: - 15. A symbol instance may be copied as though it were an integer. - Thus, a common method for making a copy is assignment: - 16. A symbol instance may be copied as though it were an integer. - Thus, a common method for making a copy is assignment: - 17. A symbol instance may be copied as though it were an integer. - Thus, a common method for making a copy is assignment: - 18. A symbol instance may be copied as though it were an integer. - Thus, a common method for making a copy is assignment: -

- - -

Path

-

Discrete Function

-

Topologically it gives us a satisfying feeling that a given 'way' never leads to different destinations.

- -

A common notation for a function is:

- - destination = f(way) - - -

- Because the same way always leads to the given destination, - we can represent the mapping as follows: -

- - def resolve_path(way): - return hypergraph.lookup(way) - - - - - - - diff --git a/document/Epimetheus.html b/document/Epimetheus.html new file mode 100644 index 0000000..296c665 --- /dev/null +++ b/document/Epimetheus.html @@ -0,0 +1,236 @@ + + + + + Epimetheus: The Only Primitive + + + + + + + + + + + + +

Introduction

+ +

+ Epimetheus is a Python library for Higher Order Analysis and Semantic Annotation. A data scientist might say it is a mechanism for Late Binding of ontology, while a programmer will call it a type system. +

+ +

+ Unlike Prometheus (Forethought), who defines what an object is before it is born (classic class instantiation), Epimetheus allows you to attach meaning, identity, and semantic types to objects after they exist. +

+ +

+ In standard programming, the primitives are things like + int, float, char, or boolean. These carry inherent meaning and behavior before you ever use them. An integer is a number; it must add and subtract. +

+ +

+ Epimetheus (Afterthought) rejects this. It allows you to attach meaning (semantics) to objects after they are born. You can decide later that an object behaves like a number, or a string, or a user. +

+ +

+ If you strip away all pre-defined types and behaviors (no ints, no strings, no classes), what is left? What is the one thing you absolutely cannot add later? +

+ +

+ Distinctness. +

+ +

+ You cannot attach meaning to an object if you cannot point to it. You cannot say "This object is a Number" if you cannot distinguish "This object" from "That object." +

+ +

+ Thus the Symbol (the unique, persistent identity) is the most primitive data entity. Given Symbols, and a Turing Machine for building structure, everything else follows. But this is not an article about constructing mathematics or computer science, rather it is about a type system, so lets not get too carried away with the grand strokes of the pen. +

+ +

Assumptions and Terms

+ +

Given

+ +

+ As is apparent while you read this, English prose is a given. The goal in making use of prose is to explain that the code is internally consistent without the English description. Once the formal relations are established, the prose is no longer needed, as the logic permits no dependence on the medium used for its introduction. In other words, code does not read the comments to decide what to do. +

+ + +

+ The code related to this discussion is implemented in Python; however, issues with other languages are considered. One salient difference involves the fact that Python integers are bignums and are passed by reference. In some other languages, integers are considered primitives, are bounded in magnitude, and are bit-copied. +

+ +

Symbol

+ +

Instance

+ +

+ We are given a symbol instance factory. Each time the make function on the factory interface is called, the factory returns an instance of a distinct symbol. +

+ +

+ In some languages symbols are implemented over primitive integers, and a symbol instance will be an integer. Thus symbol instances can be copied. A common method for making a copy is to use assignment, e.g., x = y, where y is a variable holding a symbol instance. After execution of the assignment, x will hold another instance of the same symbol. +

+ +

+ In the Python version of Epimetheus symbols are indeed implemented over integers. However, Python integers are non-primitive and thus are passed by reference. The Python Epimetheus symbol instance factory will return a reference to an integer, not the base integer, as the symbol instance. Assignment will then copy the reference. Thus this reference is the symbol instance rather than the integer the symbol is based on. +

+ +

+ In Epimetheus, we use a dictionary to give a symbol a name. The names need not meet the requirements imposed on a symbol instance, but it can be confusing when they don't. This is avoided in other symbol systems by implementing symbols over character strings, and using the character string as both the name and the instance. +

+ +

Required Properties

+ +

+ Any two, or by transitivity, any number of, symbol instances can be compared for equality, say x == y. A comparison between symbol instances will always return True or False. +

+ +

+ A symbol instance newly minted using the given symbol factory make function is said to come direct from the factory. A symbol instance direct from the factory is also called an original symbol. +

+ +

+ Equality over symbol instances is an equivalence relation: x == x is True; x == y implies y == x; and if x == y and y == z then x == z. +

+ +

+ Any two symbol instances returned directly from the factory using two different make calls will always equality compare to be False. In other words, two distinct originals will always be not equal. +

+ +

+ Given an original, all copies stemming from it will be equal to each other and to the original. By stemming from we mean to include all direct copies and copies of copies. +

+ +

+ Given any two originals, say A and B, we know that A is not equal to B, as discussed above. Note also that A is not equal to any copy stemming from B, and B is not equal to any copy stemming from A. +

+ +

+ Though symbol instances are integer-like in that copy and equality compare can be used with them, symbol instances are disallowed from being used with other integer operators. Symbols cannot be compared for greater-than or less-than; they cannot be incremented, added, nor subtracted, etc. +

+ + +

What is a Symbol?

+ +

+ Only symbol instances exist at runtime, so a symbol is never manipulated directly. +

+ +

+ Define a relation ~ over instances by x ~ y iff x == y. Since == is an equivalence relation, this partitions instances into equivalence classes. Each such equivalence class is a symbol. +

+ +

+ The factory’s make returns an original instance that is not equal to any other original. All copies stemming from an original remain in the same equivalence class. Therefore any instance in the class can represent the symbol, and we may choose any one instance as the symbol’s name (a canonical representative), or we could use a dictionary, and use, say, the original instance, to lookup a string as a name, among other possibilities. +

+ +

Distinctness Across Contexts

+

+ If a symbol persists across contexts (such as across scopes or processes), it must remain distinct from all other symbols as it enters those new environments. +

+ +

+ In this implementation, we meet this constraint by utilizing a global symbol instance factory and by explicitly disallowing a symbol from being employed outside the process of its creation. As a means of enforcement, there are no permitted methods to serialize a symbol to a string, nor to output one to a console or stream. +

+ +

+ These constraints do not apply to symbol names, which are text strings. However, a symbol cannot be recovered from its name; the name is a label, not a reconstruction key. +

+ +

Object

+

+ The term "Python object" refers to anything that can or could appear in legal Python code and could be associated with a symbol. This includes symbols themselves. +

+ +

+ A symbol is associated with an object using a Python dictionary. The symbol is the key, and the object is that thing which is "looked up" via said key. + One such example is the symbol name dictionary mentioned in the prior section. +

+ +

Tape

+ +

+ In the TTCA, we gave a formal definition for a tape. A tape is an ordered sequence of cells with a leftmost cell, zero or more interior cells, and a rightmost cell. If the tape is infinite, then there is no rightmost cell. The original Turing Machine tape is a symbol tape due to each cell of the tape holding exactly one symbol. The TTCA tape generalizes this by permitting a cell to hold any object. +

+ +

+ Two tapes, say A and B, are equal if and only if they are the same length and all their cells have equal contents. +

+ + A = B \iff \forall i \in \text{indices}, A[i] = B[i] + + +

+ If a tape is treated as nothing more than its cells, then deleting the last cell causes the tape to no longer exist. In a system that has a higher level structure that preserves the tape as a distinct entity, deleting the last cell produces an empty tape entity that is said to have zero cells. +

+ +
+ Consider a web browser. When the last tab is closed, the window disappears, forcing the user to create a new window to continue. Some users don't like this behavior, and would prefer that the window to remain as an empty canvas. Then a mistaken close could be undone by selecting 'reopen closed tab', without having to relaunch the browser and resettle the new window into the workspace. +
+ + +

+ The tape abstraction is particularly expressive in the Python context, as the language utilizes object references and permits lists to hold objects of any type. Once data within a container is modeled as a tape, structures such as lists, arrays, token streams, argument lists, and sequences all share the same abstract model. +

+ + +

Path

+ +

The term path is an ontological alias for tape. Adopting the term path brings with it a specialized vocabulary and a semantic framework for discussing traversal. The structure is unchanged, but the interpretation changes, as a tape becomes something to follow.

+ +

+ The leftmost cell in a path is called the destination. + All cells of the path to the right of the destination + cell are called the way. If the path has two or more + cells, dropping the leftmost cell leaves a tape holding exactly the + way. Hence a path can be viewed as a pair, + (destination ,way), where the destination is a single + cell and the way is a tape (possibly empty). +

+ +

+ The reader might have expected the path to go from left to right, with the destination being in the rightmost cell. This would be natural because we read characters from a written page going from left to right. However, such a definition would run into a problem for us, as we will need for paths to always have a destination, and tapes can be open on the right, so they do not always have a rightmost cell. +

+ +
+ Think about it this way: you are sitting in a pub of an inn, and a stranger walks in. Though you know the stranger's current destination, you might not know where he came from. +
+ +

Discrete Function

+

+ Now consider a tape, say called F, where each cell in F holds a path. As a path is a tape, the structure of F is that of a tape of tapes. +

+ +

+ Now suppose we traverse F while examining the paths as (destination ,way) pairs. If we find that all equal ways lead to + the same destination, then tape F is a discrete function. We say it is discrete because F is a tape with distinct cells. We say it is a function due to having the property that all paths with equal ways lead to the same destination. +

+ +

+ Thus a function is more restricted than a tape of paths, and due to this restriction it is possible to adopt the following notation, where a destination is said to be determined by, a function of, the way: +

+ + + destination = f(way) + + +

+ That the same way always leads to the same destination fits our common experience. If we ever followed the same way twice and landed in a different destination we would think ourselves to be in a Sci-Fi movie. It is also intuitive to us that the function restrictions do not exclude the possibility that multiple ways can lead to the same destination. Because we often compute things that are related to our daily experience it is not surprising that this is a very common pattern. And this is not a coincidence, this is the reason functions are defined as they are. +

+ + + + + + diff --git a/document/style/RT_TOC.js b/document/style/RT_TOC.js new file mode 100644 index 0000000..86ee51a --- /dev/null +++ b/document/style/RT_TOC.js @@ -0,0 +1,102 @@ +/* + Processes tags. + Populates each with headings found below it. + + Attributes: + level="N" : Explicitly sets the target heading level (1-6). + e.g., level="1" collects H1s. level="2" collects H2s. + Stops collecting if it hits a heading of (level - 1) or higher. + + Default (No attribute): + Context-Aware. Looks backwards for the nearest heading H(N). + Targets H(N+1). Stops at the next H(N). +*/ +window.StyleRT = window.StyleRT || {}; + +window.StyleRT.RT_TOC = function() { + const debug = window.StyleRT.debug || { log: function(){} }; + const toc_tags = document.querySelectorAll('rt-toc'); + + toc_tags.forEach((container, toc_index) => { + container.style.display = 'block'; + + // 1. Determine Target Level + const attr_level = parseInt(container.getAttribute('level')); + let target_level; + + if (!isNaN(attr_level)) { + // EXPLICIT MODE + target_level = attr_level; + if (debug.log) debug.log('RT_TOC', `TOC #${toc_index} explicit target: H${target_level}`); + } else { + // IMPLICIT / CONTEXT MODE + let context_level = 0; // Default 0 (Root) + let prev = container.previousElementSibling; + while (prev) { + const match = prev.tagName.match(/^H([1-6])$/); + if (match) { + context_level = parseInt(match[1]); + break; + } + prev = prev.previousElementSibling; + } + target_level = context_level + 1; + if (debug.log) debug.log('RT_TOC', `TOC #${toc_index} context implied target: H${target_level}`); + } + + // Stop condition: Stop if we hit a heading that is a "parent" or "sibling" of the context. + // Mathematically: Stop if found_level < target_level. + const stop_threshold = target_level; + + // 2. Setup Container + container.innerHTML = ''; + const title = document.createElement('h1'); + // Title logic: If targeting H1, it's a Main TOC. Otherwise it's a Section TOC. + title.textContent = target_level === 1 ? 'Table of Contents' : 'Section Contents'; + title.style.textAlign = 'center'; + container.appendChild(title); + + const list = document.createElement('ul'); + list.style.listStyle = 'none'; + list.style.paddingLeft = '0'; + container.appendChild(list); + + // 3. Scan Forward + let next_el = container.nextElementSibling; + while (next_el) { + const match = next_el.tagName.match(/^H([1-6])$/); + if (match) { + const found_level = parseInt(match[1]); + + // STOP Logic: + // If we are looking for H2s, we stop if we hit an H1 (level 1). + // If we are looking for H1s, we stop if we hit... nothing (level 0). + if (found_level < target_level) { + break; + } + + // COLLECT Logic: + if (found_level === target_level) { + if (!next_el.id) next_el.id = `toc-ref-${toc_index}-${found_level}-${list.children.length}`; + + const li = document.createElement('li'); + li.style.marginBottom = '0.5rem'; + + const a = document.createElement('a'); + a.href = `#${next_el.id}`; + a.textContent = next_el.textContent; + a.style.textDecoration = 'none'; + a.style.color = 'inherit'; + a.style.display = 'block'; + + a.onmouseover = () => a.style.color = 'var(--rt-brand-primary)'; + a.onmouseout = () => a.style.color = 'inherit'; + + li.appendChild(a); + list.appendChild(li); + } + } + next_el = next_el.nextElementSibling; + } + }); +}; diff --git a/document/style/RT_code.js b/document/style/RT_code.js new file mode 100644 index 0000000..6c6e232 --- /dev/null +++ b/document/style/RT_code.js @@ -0,0 +1,57 @@ +/* + Processes tags. + Uses the central config or CSS variables from the theme. +*/ +function RT_code() { + const RT = window.StyleRT; + const U = RT.utility; + const debug = RT.debug; + + debug.log('RT_code', 'Starting render cycle.'); + + const metrics = U.measure_ink_ratio('monospace'); + + // Scoped Selector: find code blocks anywhere, but styling relies on inheritance + document.querySelectorAll('rt-code').forEach((el) => { + el.style.fontFamily = 'monospace'; + + // Check context for accent color (CSS Variable fallback) + const computed = window.getComputedStyle(el); + const accent = computed.getPropertyValue('--rt-accent').trim() || 'gold'; + + const is_block = U.is_block_content(el); + const parentColor = computed.color; + const is_text_light = U.is_color_light(parentColor); + + const alpha = is_block ? 0.08 : 0.15; + const overlay = is_text_light ? `rgba(255,255,255,${alpha})` : `rgba(0,0,0,${alpha})`; + const text_color = is_text_light ? '#ffffff' : '#000000'; + + el.style.backgroundColor = overlay; + + if (is_block) { + el.style.display = 'block'; + el.style.whiteSpace = 'pre'; + el.style.fontSize = (parseFloat(computed.fontSize) * metrics.ratio * 0.95) + 'px'; + el.style.padding = '1.2rem'; + el.style.margin = '1.5rem 0'; + el.style.borderLeft = `4px solid ${accent}`; + el.style.color = 'inherit'; + } else { + el.style.display = 'inline'; + const exactPx = parseFloat(computed.fontSize) * metrics.ratio * 1.0; + el.style.fontSize = exactPx + 'px'; + el.style.padding = '0.1rem 0.35rem'; + el.style.borderRadius = '3px'; + // Vertical align fix for inline code + const offsetPx = metrics.baseline_diff * (exactPx / 100); + el.style.verticalAlign = offsetPx + 'px'; + el.style.color = text_color; + } + }); + + debug.log('RT_code', 'Render cycle complete.'); +} + +window.StyleRT = window.StyleRT || {}; +window.StyleRT.RT_code = RT_code; diff --git a/document/style/RT_math.js b/document/style/RT_math.js new file mode 100644 index 0000000..2d07cfa --- /dev/null +++ b/document/style/RT_math.js @@ -0,0 +1,35 @@ +/* + Processes tags. + JavaScript: RT_math() + HTML Tag: (parsed as rt-math) +*/ +function RT_math(){ + // querySelector treats 'rt-math' as case-insensitive for the tag + document.querySelectorAll('rt-math').forEach(el => { + if (el.textContent.startsWith('$')) return; + + const is_block = el.parentElement.tagName === 'DIV' || + el.textContent.includes('\n') || + el.parentElement.childNodes.length === 1; + + const delimiter = is_block ? '$$' : '$'; + el.style.display = is_block ? 'block' : 'inline'; + el.textContent = `${delimiter}${el.textContent.trim()}${delimiter}`; + }); + + // MathJax must find its config at window.MathJax + window.MathJax = { + tex: { + inlineMath: [['$', '$']], + displayMath: [['$$', '$$']] + } + }; + + const script = document.createElement('script'); + script.src = 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js'; + script.async = true; + document.head.appendChild(script); +} + +window.StyleRT = window.StyleRT || {}; +window.StyleRT.RT_math = RT_math; diff --git a/document/style/RT_term.js b/document/style/RT_term.js new file mode 100644 index 0000000..1dec8fb --- /dev/null +++ b/document/style/RT_term.js @@ -0,0 +1,107 @@ +/* + Processes and tags. + - Styles only the first occurrence of a unique term/neologism. + - The "-em" variants (e.g., ) are always styled. + - Automatically generates IDs for first occurrences for future indexing. +*/ + +window.StyleRT = window.StyleRT || {}; + +window.StyleRT.RT_term = function() { + const RT = window.StyleRT; + + const debug = RT.debug || { + log: function() {} + ,warn: function() {} + ,error: function() {} + }; + + const DEBUG_TOKEN_S = 'term'; + + try { + // Track seen terms so only the first occurrence is decorated + const seen_terms_dpa = new Set(); + + const apply_style = (el, is_neologism_b) => { + el.style.fontStyle = 'italic'; + el.style.fontWeight = is_neologism_b ? '600' : '500'; + el.style.color = is_neologism_b + ? 'var(--rt-brand-secondary)' + : 'var(--rt-brand-primary)'; + el.style.paddingRight = '0.1em'; // Compensation for italic slant + el.style.display = 'inline'; + }; + + const clear_style = (el) => { + el.style.fontStyle = 'normal'; + el.style.color = 'inherit'; + el.style.fontWeight = 'inherit'; + el.style.paddingRight = ''; + el.style.display = ''; + }; + + const selector_s = [ + 'rt-term' + ,'rt-term-em' + ,'rt-neologism' + ,'rt-neologism-em' + ].join(','); + + const tags_dpa = document.querySelectorAll(selector_s); + + debug.log(DEBUG_TOKEN_S, `Scanning ${tags_dpa.length} term tags`); + + tags_dpa.forEach(el => { + const tag_name_s = el.tagName.toLowerCase(); + const is_neologism_b = tag_name_s.includes('neologism'); + const is_explicit_em_b = tag_name_s.endsWith('-em'); + + const term_text_raw_s = (el.textContent || '').trim(); + if (!term_text_raw_s.length) { + debug.warn(DEBUG_TOKEN_S, `Empty term tag encountered: <${tag_name_s}>`); + return; + } + + // Normalize text for uniqueness tracking + const term_norm_s = term_text_raw_s.toLowerCase(); + + // Slug for ID generation (simple + stable) + const slug_s = term_norm_s.replace(/\s+/g, '-'); + + const is_first_occurrence_b = !seen_terms_dpa.has(term_norm_s); + + if (is_explicit_em_b || is_first_occurrence_b) { + apply_style(el, is_neologism_b); + + if (!is_explicit_em_b && is_first_occurrence_b) { + seen_terms_dpa.add(term_norm_s); + + if (!el.id) { + el.id = `def-${is_neologism_b ? 'neo-' : ''}${slug_s}`; + debug.log( + DEBUG_TOKEN_S + ,`First occurrence: "${term_norm_s}" -> id="${el.id}"` + ); + } else { + debug.log( + DEBUG_TOKEN_S + ,`First occurrence: "${term_norm_s}" (existing id="${el.id}")` + ); + } + } else if (is_explicit_em_b) { + debug.log( + DEBUG_TOKEN_S + ,`Emphasized occurrence: "${term_norm_s}" (<${tag_name_s}>)` + ); + } + } else { + // Subsequent mentions render as normal prose + clear_style(el); + } + }); + + debug.log(DEBUG_TOKEN_S, `Unique terms defined: ${seen_terms_dpa.size}`); + } catch (e) { + debug.error('error', `RT_term failed: ${e && e.message ? e.message : String(e)}`); + } +}; diff --git a/document/style/RT_title.js b/document/style/RT_title.js new file mode 100644 index 0000000..93757f8 --- /dev/null +++ b/document/style/RT_title.js @@ -0,0 +1,60 @@ +/* + Processes tags. + Generates a standard document header block. + + Usage: + +*/ +window.StyleRT = window.StyleRT || {}; + +window.StyleRT.RT_title = function() { + const debug = window.StyleRT.debug || { log: function(){} }; + + document.querySelectorAll('rt-title').forEach(el => { + const title = el.getAttribute('title') || 'Untitled Document'; + const author = el.getAttribute('author'); + const date = el.getAttribute('date'); + + if (debug.log) debug.log('RT_title', `Generating title block: ${title}`); + + // Container + const container = document.createElement('div'); + container.style.textAlign = 'center'; + container.style.marginBottom = '3rem'; + container.style.marginTop = '2rem'; + container.style.borderBottom = '1px solid var(--rt-border-default)'; + container.style.paddingBottom = '1.5rem'; + + // Main Title (H1) + const h1 = document.createElement('h1'); + h1.textContent = title; + h1.style.margin = '0 0 0.8rem 0'; + h1.style.border = 'none'; // Override standard H1 border + h1.style.padding = '0'; + h1.style.color = 'var(--rt-brand-primary)'; + h1.style.fontSize = '2.5em'; + h1.style.lineHeight = '1.1'; + h1.style.letterSpacing = '-0.03em'; + + container.appendChild(h1); + + // Metadata Row (Author | Date) + if (author || date) { + const meta = document.createElement('div'); + meta.style.color = 'var(--rt-content-muted)'; + meta.style.fontStyle = 'italic'; + meta.style.fontSize = '1.1em'; + meta.style.fontFamily = '"Georgia", "Times New Roman", serif'; // Classy serif + + const parts = []; + if (author) parts.push(`${author}`); + if (date) parts.push(date); + + meta.innerHTML = parts.join('  —  '); + container.appendChild(meta); + } + + // Replace the raw tag with the generated block + el.replaceWith(container); + }); +}; diff --git a/document/style/Rubio.js b/document/style/Rubio.js new file mode 100644 index 0000000..cd21a5a --- /dev/null +++ b/document/style/Rubio.js @@ -0,0 +1,15 @@ +/* Style: The "State Department" Override + Description: Restores decorum. +*/ +(function(){ + const RT = window.StyleRT || {}; + + // Force the font regardless of other settings + RT.rubio = function() { + const articles = document.querySelectorAll("rt-article"); + articles.forEach(el => { + el.style.fontFamily = '"Times New Roman", "Times", serif'; + el.style.letterSpacing = "0px"; // No modern spacing allowed + }); + }; +})(); diff --git a/document/style/article_tech_ref.js b/document/style/article_tech_ref.js new file mode 100644 index 0000000..8ad9dbb --- /dev/null +++ b/document/style/article_tech_ref.js @@ -0,0 +1,170 @@ +/* + Article Layout: Technical Reference + Standard: Theme 1.0 + Description: High-readability layout for technical documentation on screens. + Features: Sans-serif, justified text, distinct headers, boxed code. +*/ +(function(){ + const RT = window.StyleRT = window.StyleRT || {}; + + RT.article = function() { + const debug = RT.debug || { log: function(){} }; + debug.log('layout', 'RT.article starting...'); + + RT.config = RT.config || {}; + + // Default Configuration + RT.config.article = { + font_family: '"Noto Sans", "Segoe UI", "Helvetica Neue", sans-serif' + ,line_height: "1.8" + ,font_size: "16px" + ,font_weight: "400" // Default (String) + ,max_width: "820px" + ,margin: "0 auto" + }; + + // SAFE THEME DETECTION + // If the theme is loaded and explicitly Light, bump the weight. + try { + if (RT.config.theme && RT.config.theme.meta_is_dark === false) { + RT.config.article.font_weight = "600"; + debug.log('layout', 'Light theme detected: adjusting font weight to 600.'); + } + } catch(e) { + console.warn("StyleRT: Auto-weight adjustment failed, using default.", e); + } + + const conf = RT.config.article; + const article_seq = document.querySelectorAll("RT-article"); + + if(article_seq.length === 0) { + debug.log('layout', 'No elements found. Exiting.'); + return; + } + + // 1. Apply Container Styles + article_seq.forEach( (article) =>{ + const style = article.style; + style.display = "block"; + style.fontFamily = conf.font_family; + style.fontSize = conf.font_size; + style.lineHeight = conf.line_height; + style.fontWeight = conf.font_weight; + style.maxWidth = conf.max_width; + style.margin = conf.margin; + style.padding = "0 20px"; + style.color = "var(--rt-content-main)"; + }); + + // 2. Inject Child Typography + const style_id = 'rt-article-typography'; + if (!document.getElementById(style_id)) { + debug.log('layout', 'Injecting CSS typography rules.'); + const style_el = document.createElement('style'); + style_el.id = style_id; + + style_el.textContent = ` + /* --- HEADERS --- */ + rt-article h1 { + color: var(--rt-brand-primary); + font-size: 2.0em; + font-weight: 500; + text-align: center; + margin-top: 1.2em; + margin-bottom: 0.6em; + border-bottom: 2px solid var(--rt-border-default); + padding-bottom: 0.3em; + line-height: 1.2; + letter-spacing: -0.02em; + } + + rt-article h2 { + color: var(--rt-brand-secondary); + font-size: 1.5em; + font-weight: 400; + text-align: center; + margin-top: 1.0em; + margin-bottom: 0.5em; + } + + rt-article h2 + h3 { + margin-top: -0.3em; + padding-top: 0; + } + + rt-article h3 { + color: var(--rt-brand-tertiary); + font-size: 1.4em; + font-weight: 400; + margin-top: 1.0em; + margin-bottom: 0.5em; + } + + /* --- DEEP LEVELS (H4-H6) --- */ + rt-article h4, rt-article h5, rt-article h6 { + color: var(--rt-brand-tertiary); + font-weight: bold; + margin-top: 1.2em; + font-style: italic; + } + rt-article h4 { margin-left: 2em; } + rt-article h5 { margin-left: 4em; } + rt-article h6 { margin-left: 6em; } + + /* --- BODY TEXT --- */ + rt-article p { + margin-bottom: 1.4em; + text-align: justify; + hyphens: auto; + color: var(--rt-content-main); + } + + /* --- RICH ELEMENTS --- */ + rt-article blockquote { + border-left: 4px solid var(--rt-brand-secondary); + margin: 1.5em 0; + padding: 0.5em 1em; + font-style: italic; + color: var(--rt-content-muted); + background: var(--rt-surface-1); + border-radius: 0 4px 4px 0; + } + + rt-article ul, rt-article ol { + margin-bottom: 1.4em; + padding-left: 2em; + } + rt-article li { + margin-bottom: 0.4em; + } + rt-article li::marker { + color: var(--rt-brand-secondary); + font-weight: bold; + } + + /* Links */ + rt-article a { + color: var(--rt-brand-link); + text-decoration: none; + border-bottom: 1px dotted var(--rt-border-default); + transition: all 0.2s; + } + rt-article a:hover { + color: var(--rt-brand-primary); + border-bottom: 1px solid var(--rt-brand-primary); + background: var(--rt-surface-1); + } + + /* --- TECHNICAL --- */ + rt-article pre { + background: var(--rt-surface-code); + padding: 1em; + border-radius: 4px; + overflow-x: auto; + border: 1px solid var(--rt-border-default); + } + `; + document.head.appendChild(style_el); + } + }; +})(); diff --git a/document/style/body_visibility_hidden.js b/document/style/body_visibility_hidden.js new file mode 100644 index 0000000..d6a178a --- /dev/null +++ b/document/style/body_visibility_hidden.js @@ -0,0 +1,12 @@ +/* + Targets the root element to ensure total blackout during load. +*/ +function body_visibility_hidden(){ + const gate = document.createElement('style'); + gate.id = 'rt-visibility-gate'; + gate.textContent = 'html{visibility:hidden !important; background:black !important;}'; + document.head.appendChild(gate); +} + +window.StyleRT = window.StyleRT || {}; +window.StyleRT.body_visibility_hidden = body_visibility_hidden; diff --git a/document/style/body_visibility_visible.js b/document/style/body_visibility_visible.js new file mode 100644 index 0000000..ff1c4b6 --- /dev/null +++ b/document/style/body_visibility_visible.js @@ -0,0 +1,13 @@ +/* + Restores visibility by removing the visibility gate. +*/ +function body_visibility_visible(){ + const gate = document.getElementById('rt-visibility-gate'); + if (gate){ + gate.remove(); + } + document.body.style.visibility = 'visible'; +} + +window.StyleRT = window.StyleRT || {}; +window.StyleRT.body_visibility_visible = body_visibility_visible; diff --git a/document/style/custom_tag.txt b/document/style/custom_tag.txt new file mode 100644 index 0000000..146d3ad --- /dev/null +++ b/document/style/custom_tag.txt @@ -0,0 +1,8 @@ + : The root container. + : The page wrapper. + + + + + : For Conventional terms (standard definitions) +: Terms introduced in this article diff --git a/document/style/page_fixed_glow.js b/document/style/page_fixed_glow.js new file mode 100644 index 0000000..91bd648 --- /dev/null +++ b/document/style/page_fixed_glow.js @@ -0,0 +1,88 @@ +/* + Page Layout: Fixed Glow + Standard: Theme 1.0 + Description: A fixed-height container with a glowing border effect that matches the active theme. +*/ +(function(){ + const RT = window.StyleRT = window.StyleRT || {}; + + // Function name stays generic so the orchestrator can call RT.page() regardless of file choice + RT.page = function() { + RT.config = RT.config || {}; + + // Default Configuration + // We use CSS Variables here so the Theme controls the actual colors. + const defaults = { + width: "100%" + ,height: "1056px" + ,padding: "3rem" + ,margin: "4rem auto" + + // Dynamic Theme Bindings + ,bg_color: "var(--rt-surface-0)" // Black (Dark) or Cream (Light) + ,border_color: "var(--rt-brand-primary)" // The Main Accent Color + ,text_color: "var(--rt-brand-primary)" // Page Number Color + + // The Glow: Uses the primary brand color for the shadow + ,shadow: "drop-shadow(0px 0px 15px var(--rt-brand-primary))" + }; + + // Merge defaults + RT.config.page = Object.assign({}, defaults, RT.config.page || {}); + + const conf = RT.config.page; + const style_id = 'rt-page-fixed-glow'; + + if (!document.getElementById(style_id)) { + const style_el = document.createElement('style'); + style_el.id = style_id; + + style_el.textContent = ` + /* Reset page counter on the article container */ + rt-article { + counter-reset: rt-page-counter; + } + + rt-page { + display: block; + position: relative; + box-sizing: border-box; + overflow: hidden; + + /* Dimensions */ + width: ${conf.width}; + height: ${conf.height}; + margin: ${conf.margin}; + padding: ${conf.padding}; + + /* Theming */ + background-color: ${conf.bg_color}; + border: 1px solid ${conf.border_color}; + + /* The "Glow" Effect */ + filter: ${conf.shadow}; + + /* Counter Increment */ + counter-increment: rt-page-counter; + } + + /* Page Numbering */ + rt-page::after { + content: "Page " counter(rt-page-counter); + position: absolute; + bottom: 1.5rem; + right: 3rem; + + font-family: "Noto Sans", sans-serif; + font-size: 0.9rem; + font-weight: bold; + + color: ${conf.text_color}; + opacity: 0.8; + pointer-events: none; /* Prevent interference with clicks */ + } + `; + document.head.appendChild(style_el); + } + }; +})(); diff --git a/document/style/paginate_by_element.js b/document/style/paginate_by_element.js new file mode 100644 index 0000000..e085148 --- /dev/null +++ b/document/style/paginate_by_element.js @@ -0,0 +1,72 @@ +/* + Layout Paginator: paginate_by_element +*/ +window.StyleRT = window.StyleRT || {}; + +window.StyleRT.paginate_by_element = function() { + const RT = window.StyleRT; + + // Fix: Read safely without overwriting the config namespace + const page_conf = (RT.config && RT.config.page) ? RT.config.page : {}; + const page_height_limit = page_conf.height_limit || 1000; + + const article_seq = document.querySelectorAll("RT-article"); + + // HURDLE: Error if no articles found to paginate + if(article_seq.length === 0) { + RT.debug.error('pagination', 'No elements found. Pagination aborted.'); + return; + } + + article_seq.forEach( (article) => { + const raw_elements = Array.from(article.children).filter(el => + !['SCRIPT', 'STYLE', 'RT-PAGE'].includes(el.tagName) + ); + + if(raw_elements.length === 0) return; + + const pages = []; + let current_batch = []; + let current_h = 0; + + const get_el_height = (el) => { + const rect = el.getBoundingClientRect(); + const style = window.getComputedStyle(el); + const margin = parseFloat(style.marginTop) + parseFloat(style.marginBottom); + return (rect.height || 0) + (margin || 0); + }; + + for (let i = 0; i < raw_elements.length; i++) { + const el = raw_elements[i]; + const h = get_el_height(el); + const is_heading = /^H[1-6]/.test(el.tagName); + + let total_required_h = h; + if (is_heading && i + 1 < raw_elements.length) { + total_required_h += get_el_height(raw_elements[i + 1]); + } + + if (current_h + total_required_h > page_height_limit && current_batch.length > 0) { + pages.push(current_batch); + current_batch = []; + current_h = 0; + } + + current_batch.push(el); + current_h += h; + } + + if (current_batch.length > 0) pages.push(current_batch); + + article.innerHTML = ''; + + pages.forEach( (list, index) => { + const page_el = document.createElement('rt-page'); + page_el.id = `page-${index+1}`; + list.forEach(item => page_el.appendChild(item)); + article.appendChild(page_el); + }); + + if (RT.debug) RT.debug.log('pagination', `Article paginated into ${pages.length} pages.`); + }); +}; diff --git a/document/style/style_orchestrator.js b/document/style/style_orchestrator.js new file mode 100644 index 0000000..755c1c8 --- /dev/null +++ b/document/style/style_orchestrator.js @@ -0,0 +1,92 @@ +/* + Master Loader & Orchestrator for StyleRT. +*/ + +window.StyleRT = window.StyleRT || {}; + +window.StyleRT.style_orchestrator = function() { + const RT = window.StyleRT; + + const modules = [ + // Theme & Semantics + 'style/RT_title.js', + 'style/theme_dark_gold.js', + 'style/RT_term.js', + 'style/RT_math.js', + 'style/RT_code.js', + 'style/article_tech_ref.js', + 'style/RT_TOC.js', + + // Layout & Pagination + 'style/paginate_by_element.js', + 'style/page_fixed_glow.js', + + // Visibility + 'style/body_visibility_visible.js' + ]; + + // 1. Bootloader + const utility = document.createElement('script'); + utility.src = 'style/utility.js'; + + utility.onload = () => { load_next(0); }; + utility.onerror = () => { console.error("StyleRT: Critical failure - utility.js missing."); }; + document.head.appendChild(utility); + + // 2. The Chain Loader + const load_next = (index) => { + if (index >= modules.length) { + run_style(); + return; + } + const src = modules[index]; + if (RT.debug) RT.debug.log('style', `Loading: ${src}`); + + const script = document.createElement('script'); + script.src = src; + script.onload = () => load_next(index + 1); + script.onerror = () => { + console.error(`StyleRT: Failed load on ${src}`); + load_next(index + 1); + }; + document.head.appendChild(script); + }; + + // 3. Phase 1: Semantics + const run_style = () => { + RT.debug.log('style', 'Starting Phase 1: Setup & Semantics'); + + // Naming Convention: RT. + if(RT.theme) RT.theme(); + if(RT.article) RT.article(); + + // NEW: Trigger the Title Generator + if(RT.RT_title) RT.RT_title(); + + if(RT.RT_term) RT.RT_term(); + if(RT.RT_math) RT.RT_math(); + if(RT.RT_code) RT.RT_code(); + + if (window.MathJax && MathJax.Hub && MathJax.Hub.Queue) { + RT.debug.log('style', 'MathJax detected. Queueing layout tasks...'); + MathJax.Hub.Queue(["Typeset", MathJax.Hub], continue_style); + } else { + continue_style(); + } + }; + + // 4. Phase 2: Layout + const continue_style = () => { + RT.debug.log('style', 'Starting Phase 2: Layout & Reveal'); + + // Debug: Dump the config to see what values we are using + if(RT.debug) RT.debug.log('config', JSON.stringify(RT.config || {}, null, 2)); + + if(RT.RT_TOC) RT.RT_TOC(); + if(RT.paginate_by_element) RT.paginate_by_element(); + if(RT.page) RT.page(); // Defined in page_css_pn.js + if(RT.body_visibility_visible) RT.body_visibility_visible(); + + RT.debug.log('style', 'Style execution complete.'); + }; +}; diff --git a/document/style/theme_dark_gold.js b/document/style/theme_dark_gold.js new file mode 100644 index 0000000..f576147 --- /dev/null +++ b/document/style/theme_dark_gold.js @@ -0,0 +1,94 @@ +/* + Theme: Inverse Wheat (Dark) + Standard: Theme 1.0 + Description: High contrast Amber on Deep Charcoal. +*/ +( function(){ + const RT = window.StyleRT = window.StyleRT || {}; + + RT.theme = function(){ + RT.config = RT.config || {}; + + // THEME 1.0 DATA CONTRACT + RT.config.theme = { + meta_is_dark: true + ,meta_name: "Inverse Wheat" + + // --- SURFACES (Depth & Container Hierarchy) --- + ,surface_0: "hsl(0, 0%, 5%)" // App Background (Deepest) + ,surface_1: "hsl(0, 0%, 10%)" // Sidebar / Nav / Panels + ,surface_2: "hsl(0, 0%, 14%)" // Cards / Floating Elements + ,surface_3: "hsl(0, 0%, 18%)" // Modals / Dropdowns / Popovers + ,surface_input: "hsl(0, 0%, 12%)" // Form Inputs + ,surface_code: "hsl(0, 0%, 11%)" // Code Block Background + ,surface_select: "hsl(45, 100%, 15%)" // Text Selection Highlight + + // --- CONTENT (Text & Icons) --- + ,content_main: "hsl(50, 60%, 85%)" // Primary Reading Text + ,content_muted: "hsl(36, 15%, 60%)" // Metadata, subtitles + ,content_subtle: "hsl(36, 10%, 40%)" // Placeholders, disabled states + ,content_inverse: "hsl(0, 0%, 5%)" // Text on high-contrast buttons + + // --- BRAND & ACTION (The "Wheat" Identity) --- + ,brand_primary: "hsl(45, 100%, 50%)" // Main Action / H1 / Focus Ring + ,brand_secondary: "hsl(38, 90%, 65%)" // Secondary Buttons / H2 + ,brand_tertiary: "hsl(30, 60%, 70%)" // Accents / H3 + ,brand_link: "hsl(48, 100%, 50%)" // Hyperlinks (High Visibility) + + // --- BORDERS & DIVIDERS --- + ,border_faint: "hsl(36, 20%, 15%)" // Subtle separation + ,border_default: "hsl(36, 20%, 25%)" // Standard Card Borders + ,border_strong: "hsl(36, 20%, 40%)" // Active states / Inputs + + // --- STATE & FEEDBACK (Earth Tones) --- + ,state_success: "hsl(100, 50%, 45%)" // Olive Green + ,state_warning: "hsl(35, 90%, 55%)" // Burnt Orange + ,state_error: "hsl(0, 60%, 55%)" // Brick Red + ,state_info: "hsl(200, 40%, 55%)" // Slate Blue + + // --- SYNTAX HIGHLIGHTING (For Code) --- + ,syntax_keyword: "hsl(35, 100%, 65%)" // Orange + ,syntax_string: "hsl(75, 50%, 60%)" // Sage Green + ,syntax_func: "hsl(45, 90%, 70%)" // Light Gold + ,syntax_comment: "hsl(36, 15%, 45%)" // Brown/Gray + }; + + // --- APPLY THEME --- + const palette = RT.config.theme; + const body = document.body; + const html = document.documentElement; + + // 1. Paint Base + html.style.backgroundColor = palette.surface_0; + body.style.backgroundColor = palette.surface_0; + body.style.color = palette.content_main; + + // 2. Export Variables (Standardization) + const s = body.style; + for (const [key, value] of Object.entries(palette)) { + s.setProperty(`--rt-${key.replace(/_/g, '-')}`, value); + } + + // 3. Global Overrides + const style_id = 'rt-global-overrides'; + if (!document.getElementById(style_id)) { + const style = document.createElement('style'); + style.id = style_id; + style.textContent = ` + ::selection { background: var(--rt-surface-select); color: var(--rt-brand-primary); } + ::-moz-selection { background: var(--rt-surface-select); color: var(--rt-brand-primary); } + + ::-webkit-scrollbar { width: 12px; } + ::-webkit-scrollbar-track { background: var(--rt-surface-0); } + ::-webkit-scrollbar-thumb { + background: var(--rt-border-default); + border: 2px solid var(--rt-surface-0); + border-radius: 8px; + } + ::-webkit-scrollbar-thumb:hover { background: var(--rt-brand-secondary); } + `; + document.head.appendChild(style); + } + }; + +} )(); diff --git a/document/style/theme_light.js b/document/style/theme_light.js new file mode 100644 index 0000000..4b5eea4 --- /dev/null +++ b/document/style/theme_light.js @@ -0,0 +1,70 @@ +/* + Theme: Classic Wheat (Light) + Standard: Theme 1.0 + Description: Warm paper tones with Burnt Orange accents. +*/ +( function(){ + const RT = window.StyleRT = window.StyleRT || {}; + + RT.theme_light = function(){ + RT.config = RT.config || {}; + + // THEME 1.0 DATA CONTRACT + RT.config.theme = { + meta_is_dark: false + ,meta_name: "Classic Wheat" + + // --- SURFACES --- + ,surface_0: "hsl(40, 30%, 94%)" // App Background (Cream/Linen) + ,surface_1: "hsl(40, 25%, 90%)" // Sidebar (Slightly darker beige) + ,surface_2: "hsl(40, 20%, 98%)" // Cards (Lighter, almost white) + ,surface_3: "hsl(0, 0%, 100%)" // Modals (Pure White) + ,surface_input: "hsl(40, 20%, 98%)" // Form Inputs + ,surface_code: "hsl(40, 15%, 90%)" // Code Block Background + ,surface_select: "hsl(45, 100%, 85%)" // Text Selection Highlight + + // --- CONTENT --- + ,content_main: "hsl(30, 20%, 20%)" // Deep Umber (Not Black) + ,content_muted: "hsl(30, 15%, 45%)" // Medium Brown + ,content_subtle: "hsl(30, 10%, 65%)" // Light Brown/Gray + ,content_inverse: "hsl(40, 30%, 94%)" // Text on dark buttons + + // --- BRAND & ACTION --- + ,brand_primary: "hsl(30, 90%, 35%)" // Burnt Orange (Action) + ,brand_secondary: "hsl(35, 70%, 45%)" // Rust / Gold + ,brand_tertiary: "hsl(25, 60%, 55%)" // Copper + ,brand_link: "hsl(30, 100%, 35%)" // Link Color + + // --- BORDERS --- + ,border_faint: "hsl(35, 20%, 85%)" + ,border_default: "hsl(35, 20%, 75%)" + ,border_strong: "hsl(35, 20%, 55%)" + + // --- STATE & FEEDBACK --- + ,state_success: "hsl(100, 40%, 40%)" // Forest Green + ,state_warning: "hsl(30, 90%, 50%)" // Persimmon + ,state_error: "hsl(0, 60%, 45%)" // Crimson + ,state_info: "hsl(200, 50%, 45%)" // Navy Blue + + // --- SYNTAX --- + ,syntax_keyword: "hsl(20, 90%, 45%)" // Rust + ,syntax_string: "hsl(100, 35%, 35%)" // Ivy Green + ,syntax_func: "hsl(300, 30%, 40%)" // Muted Purple + ,syntax_comment: "hsl(35, 10%, 60%)" // Light Brown + }; + + // --- APPLY THEME --- + const palette = RT.config.theme; + const body = document.body; + const html = document.documentElement; + + html.style.backgroundColor = palette.surface_0; + body.style.backgroundColor = palette.surface_0; + body.style.color = palette.content_main; + + const s = body.style; + for (const [key, value] of Object.entries(palette)) { + s.setProperty(`--rt-${key.replace(/_/g, '-')}`, value); + } + }; +} )(); diff --git a/document/style/theme_light_gold.js b/document/style/theme_light_gold.js new file mode 100644 index 0000000..206f3da --- /dev/null +++ b/document/style/theme_light_gold.js @@ -0,0 +1,103 @@ +/* + Theme: Golden Wheat (Light) - "Spanish Gold Edition" + File: style/theme-light-gold.js + Standard: Theme 1.0 + Description: Light Parchment background with Oxblood Red ink. +*/ +( function(){ + const RT = window.StyleRT = window.StyleRT || {}; + + RT.theme = function(){ + RT.config = RT.config || {}; + + RT.config.theme = { + meta_is_dark: false + ,meta_name: "Golden Wheat (Yellow)" + + // --- SURFACES (Light Parchment) --- + // Shifted lightness up to 94% for a "whiter" feel that still holds the yellow tint. + ,surface_0: "hsl(48, 50%, 94%)" // Main Page: Fine Parchment + ,surface_1: "hsl(48, 40%, 90%)" // Panels: Slightly darker + ,surface_2: "hsl(48, 30%, 97%)" // Cards: Very light + ,surface_3: "hsl(0, 0%, 100%)" // Popups + ,surface_input: "hsl(48, 20%, 96%)" + ,surface_code: "hsl(48, 25%, 88%)" // Distinct Code BG + ,surface_select: "hsl(10, 70%, 85%)" // Red Highlight + + // --- CONTENT (Deep Ink) --- + ,content_main: "hsl(10, 25%, 7%)" // Deep Warm Black (Ink) + ,content_muted: "hsl(10, 15%, 35%)" // Dark Grey-Red + ,content_subtle: "hsl(10, 10%, 55%)" + ,content_inverse: "hsl(48, 50%, 90%)" + + // --- BRAND & ACTION (The Red Spectrum) --- + ,brand_primary: "hsl(12, 85%, 30%)" // H1 (Deep Oxblood) + ,brand_secondary: "hsl(10, 80%, 35%)" // H2 (Garnet) + ,brand_tertiary: "hsl(8, 70%, 40%)" // H3 (Brick) + ,brand_link: "hsl(12, 90%, 35%)" // Link + + // --- BORDERS --- + ,border_faint: "hsl(45, 30%, 80%)" + ,border_default: "hsl(45, 30%, 70%)" // Pencil Grey + ,border_strong: "hsl(12, 50%, 40%)" + + // --- STATE --- + ,state_success: "hsl(120, 40%, 30%)" + ,state_warning: "hsl(25, 90%, 45%)" + ,state_error: "hsl(0, 75%, 35%)" + ,state_info: "hsl(210, 60%, 40%)" + + // --- SYNTAX --- + ,syntax_keyword: "hsl(0, 75%, 35%)" + ,syntax_string: "hsl(100, 35%, 25%)" + ,syntax_func: "hsl(15, 85%, 35%)" + ,syntax_comment: "hsl(45, 20%, 50%)" + }; + + // --- APPLY THEME --- + const palette = RT.config.theme; + const body = document.body; + const html = document.documentElement; + + html.style.backgroundColor = palette.surface_0; + body.style.backgroundColor = palette.surface_0; + body.style.color = palette.content_main; + + const s = body.style; + for (const [key, value] of Object.entries(palette)) { + s.setProperty(`--rt-${key.replace(/_/g, '-')}`, value); + } + + // Global overrides + const style_id = 'rt-global-overrides'; + if (!document.getElementById(style_id)) { + const style = document.createElement('style'); + style.id = style_id; + style.textContent = ` + ::selection { background: var(--rt-surface-select); color: var(--rt-brand-primary); } + ::-moz-selection { background: var(--rt-surface-select); color: var(--rt-brand-primary); } + + ::-webkit-scrollbar { width: 12px; } + ::-webkit-scrollbar-track { background: var(--rt-surface-0); } + ::-webkit-scrollbar-thumb { + background: var(--rt-border-default); + border: 2px solid var(--rt-surface-0); + border-radius: 8px; + } + ::-webkit-scrollbar-thumb:hover { background: var(--rt-brand-secondary); } + + rt-article p, rt-article li { + text-shadow: 0px 0px 0.5px rgba(0,0,0, 0.2); + } + + .MathJax, .MathJax_Display, .mjx-chtml { + color: var(--rt-content-main) !important; + fill: var(--rt-content-main) !important; + stroke: var(--rt-content-main) !important; + } + `; + document.head.appendChild(style); + } + }; + +} )(); diff --git a/document/style/utility.js b/document/style/utility.js new file mode 100644 index 0000000..258eb28 --- /dev/null +++ b/document/style/utility.js @@ -0,0 +1,109 @@ +/* + General utilities for the StyleRT library. +*/ + +window.StyleRT = window.StyleRT || {}; + +// --- DEBUG SYSTEM --- +window.StyleRT.debug = { + + // all debug messages enabled +/* + active_tokens: new Set([ + 'style', 'layout', 'pagination' + ,'selector', 'config', 'error' + ,'term' + ]), +*/ + active_tokens: new Set([ + 'term' + ]), + + log: function(token, message) { + if (this.active_tokens.has(token)) { + console.log(`[StyleRT:${token}]`, message); + } + }, + + warn: function(token, message) { + if (this.active_tokens.has(token)) { + console.warn(`[StyleRT:${token}]`, message); + } + }, + + // New: Always log errors regardless of token, but tag them + error: function(token, message) { + console.error(`[StyleRT:${token}] CRITICAL:`, message); + }, + + enable: function(token) { this.active_tokens.add(token); console.log(`Enabled: ${token}`); }, + disable: function(token) { this.active_tokens.delete(token); console.log(`Disabled: ${token}`); } +}; + +// --- UTILITIES --- +window.StyleRT.utility = { + // --- FONT PHYSICS --- + measure_ink_ratio: function(target_font, ref_font = null) { + const debug = window.StyleRT.debug; + debug.log('layout', `Measuring ink ratio for ${target_font}`); + + const canvas = document.createElement('canvas'); + const ctx = canvas.getContext('2d'); + + if (!ref_font) { + const bodyStyle = window.getComputedStyle(document.body); + ref_font = bodyStyle.fontFamily; + } + + const get_metrics = (font) => { + ctx.font = '100px ' + font; + const metrics = ctx.measureText('M'); + return { + ascent: metrics.actualBoundingBoxAscent, + descent: metrics.actualBoundingBoxDescent + }; + }; + + const ref_m = get_metrics(ref_font); + const target_m = get_metrics(target_font); + + const ratio = ref_m.ascent / target_m.ascent; + // debug.log('layout', `Ink Ratio calculated: ${ratio.toFixed(3)}`); + + return { + ratio: ratio, + baseline_diff: ref_m.descent - target_m.descent + }; + }, + + // --- COLOR PHYSICS --- + is_color_light: function(color_string) { + const debug = window.StyleRT.debug; + + // 1. HSL Check + if (color_string.startsWith('hsl')) { + const numbers = color_string.match(/\d+/g); + if (numbers && numbers.length >= 3) { + const lightness = parseInt(numbers[2]); + return lightness > 50; + } + } + + // 2. RGB Check + const rgb = color_string.match(/\d+/g); + if (!rgb) { + // debug.warn('color_layout', `Failed to parse color: "${color_string}". Defaulting to Light.`); + return true; + } + + const r = parseInt(rgb[0]); + const g = parseInt(rgb[1]); + const b = parseInt(rgb[2]); + const luma = (r * 299 + g * 587 + b * 114) / 1000; + return luma > 128; + }, + + is_block_content: function(element) { + return element.textContent.trim().includes('\n'); + } +}; diff --git a/document/style/version.txt b/document/style/version.txt new file mode 100644 index 0000000..a85e614 --- /dev/null +++ b/document/style/version.txt @@ -0,0 +1 @@ +v0.3 diff --git a/document/style_manual.html b/document/style_manual.html new file mode 100644 index 0000000..afb7e69 --- /dev/null +++ b/document/style_manual.html @@ -0,0 +1,272 @@ + + + + + RT Style System: Reference Manual + + + + + + + + + + + + + + + + + + + + + + + +

Architecture Overview

+

+ The RT Style System is a client-side, JavaScript-driven publishing framework designed to turn raw HTML into high-readability technical documentation. Unlike standard CSS frameworks, RT uses JavaScript to handle complex layout tasks like ink-ratio balancing and dynamic pagination. +

+ +

The Orchestrator

+

+ The core of the system is style_orchestrator.js. It is placed at the bottom of the HTML <body>. Its job is to: +

+
    +
  1. Detect which modules are already loaded.
    2. +
  2. Load missing modules (defaulting to Dark Theme if none is specified).
    3. +
  3. Execute the Semantics Phase (styling tags).
    4. +
  4. Wait for MathJax (if present).
    5. +
  5. Execute the Layout Phase (pagination, page rendering).
    6. +
  6. Reveal the document.
    7. +
+ +

Semantic Tags

+

+ The system relies on a specific set of custom tags in the RT- namespace to separate structure from presentation. +

+ +

Terminology

+ +

Conventional Terms

+

+ Use <RT-term> for standard, industry accepted technical terms. The system decorates only the first occurrence of each unique term so that the first appearance functions as a definition point, and later appearances do not overload the page with styling. +

+ + +The Singleton Pattern restricts instantiation... + + +

+ Renders as: The Singleton Pattern restricts instantiation... +

+ +

Neologisms

+

+ Use <RT-neologism> for terms invented specifically for the current document or project. Neologisms are styled more strongly than conventional terms, visually distinguishing "jargon you should know" from "jargon we just made up." +

+ + +We define the Hyper Tape as a construct... + + +

+ Renders as: We define the Hyper Tape as a construct... +

+ +

First Occurrence Rule

+

+ The term system is intentionally conservative. For the tags <RT-term> and <RT-neologism>, only the first occurrence of a unique term is decorated. Subsequent mentions are rendered as normal prose. +

+ +

+ Uniqueness is tracked by normalizing the term text (trimmed, then lowercased). This means that Symbol and symbol count as the same term. +

+ +

Forced Emphasis Variants

+

+ Sometimes a later mention of a term should be emphasized again. For that purpose, the system provides explicit emphasis tags: +

+ +
    +
  • <RT-term-em>
    • +
  • <RT-neologism-em>
    • +
+ +

+ These variants are always decorated, even if the term appeared earlier. +

+ +

Automatic Definition Anchors

+

+ For first occurrences, the term module automatically assigns an id attribute if one does not already exist. This creates stable anchors for future indexing and linking. +

+ + +We define a Symbol as... + + +

+ The first occurrence will be given an id similar to def-symbol. For neologisms, an additional marker is used, for example def-neo-hyper-tape. +

+ +

Technical Content

+ +

Code

+

+ Use <RT-code>. If placed inline, it acts like a span. If placed as a block (with newlines), it acts like a pre formatted block with a theme aware border. +

+ + +# Block Code Example +def hello(): + return "World" + + +

Mathematics

+

+ Use <RT-math>. The system auto detects if it is a block equation or inline variable and wraps it in MathJax delimiters. +

+

+ Inline: Let x be the input. +

+

+ Block: +

+ + f(x) = \sum_{i=0}^{n} x_i + + +

Navigation & Layout

+ +

Automatic Table of Contents

+

+ Use <RT-TOC> to insert a generated table of contents. The tag scans the document forward from its current position to collect headings. +

+ +

Explicit Mode

+

+ Use the level="N" attribute to target a specific heading depth. +

+
    +
  • <RT-TOC level="1">: Collects all <h1> elements until the end of the document. Best for the main document index.
    • +
  • <RT-TOC level="2">: Collects all <h2> elements until it encounters the next <h1>. Best for chapter summaries.
    • +
+ +

Implicit Mode

+

+ If no level is specified, the TOC scans backwards to find the nearest heading (for example H1) and assumes you want to collect children one level deeper (for example H2). +

+

+ Note: Implicit mode can fail if placed before the first heading of a section. Use explicit levels for robust results. +

+ +

The Title Block

+

+ Use <RT-title> as the first element in your <body> (before the article container). This tag generates a standardized, styled header block with the document title and metadata. +

+ +

Attributes

+
    +
  • title (Required): The main heading of the document.
    • +
  • author (Optional): The author's name. Renders in a bold accent color.
    • +
  • date (Optional): The publication or revision date.
    • +
+ +

Example

+ + + + + +

+ Renders as: A centered, high contrast H1 followed by a serif styled metadata row containing the author and date. +

+ +

The Article Container

+

+ The root element must be <RT-article>. This is the boundary for the pagination logic. +

+ +

Pagination

+

+ The script paginate_by_element.js scans the article. It calculates the height of every element (including margins) and bundles them into <RT-page> elements. +

+

+ Soft Limit Pagination: The system attempts to keep headers with their following paragraphs. It will break a page early rather than stranding a header at the bottom. +

+ +

Debugging

+ +

Debug Tokens

+

+ RT provides a lightweight debug logging system in utility.js. Logging is controlled by a set of active debug tokens. Each log message is assigned a token, and the message prints only if that token is enabled. +

+ +

+ Examples of common tokens include style, layout, pagination, selector, config, and term. +

+ +

How Logging is Gated

+

+ Normal log and warning output are gated. The methods debug.log(token,message) and debug.warn(token,message) will print only when the token exists in debug.active_tokens. +

+ +

+ This prevents the console from being flooded during normal use, while still allowing deep visibility during development. +

+ +

Errors are Always Printed

+

+ Errors are treated differently. The method debug.error(token,message) always prints, regardless of token state. These messages represent failures that require attention. +

+ +

Enabling and Disabling Tokens

+

+ Tokens may be enabled or disabled in two ways: by editing the active_tokens set in utility.js, or at runtime by calling: +

+ + +window.StyleRT.debug.enable('term') +window.StyleRT.debug.disable('term') + + +

+ For example, the term system (RT_term.js) uses the term token. When that token is enabled, the module will print messages describing how terms were detected and which term definitions were assigned IDs. +

+ +

Themes

+

+ The system supports hot swapping themes by changing the script import in the head. +

+
    +
  • Dark: style/theme_dark_gold.js (Default)
    • +
  • Light: style/theme_light_gold.js
    • +
+ +

Manifest

+ +1. style_orchestrator.js (Example/default footer script) +2. utility.js (Math/Color physics) +3. article_tech_ref.js (Typography and CSS injection) +4. RT_code.js (Code block logic) +5. RT_math.js (MathJax wrapper) +6. RT_term.js (Term styling) +7. RT_TOC.js (Navigation generator) +8. paginate_by_element.js (Page splitter) +9. page_fixed_glow.js (Visual page container) + + + + + + + diff --git a/document/test.html b/document/test.html new file mode 100644 index 0000000..5eca533 --- /dev/null +++ b/document/test.html @@ -0,0 +1,97 @@ + + + + + Test File + + + + + + + +

text before the first heading

+ +

Given

+

The English language is a given, apparently.

+

+ This discussion happens to appear in the context of a Python implementation. +

+ +

Symbol

+

Definition

+

x + We have a symbol instance factory. Each time the make + method is called, we get a unique identity i. + + A symbol instance may be copied as though it were an integer. + Thus, a common method for making a copy is assignment: +

+ +x = y +# y is a variable holding a symbol instance + + +

+ 1. A symbol instance may be copied as though it were an integer. + Thus, a common method for making a copy is assignment: + 2. A symbol instance may be copied as though it were an integer. + Thus, a common method for making a copy is assignment: + 3. A symbol instance may be copied as though it were an integer. + Thus, a common method for making a copy is assignment: + 4. A symbol instance may be copied as though it were an integer. + Thus, a common method for making a copy is assignment: + 5. A symbol instance may be copied as though it were an integer. + Thus, a common method for making a copy is assignment: + 6. A symbol instance may be copied as though it were an integer. + Thus, a common method for making a copy is assignment: + 7. A symbol instance may be copied as though it were an integer. + Thus, a common method for making a copy is assignment: + 8. A symbol instance may be copied as though it were an integer. + Thus, a common method for making a copy is assignment: + 11. A symbol instance may be copied as though it were an integer. + Thus, a common method for making a copy is assignment: + 12. A symbol instance may be copied as though it were an integer. + Thus, a common method for making a copy is assignment: + 13. A symbol instance may be copied as though it were an integer. + Thus, a common method for making a copy is assignment: + 14. A symbol instance may be copied as though it were an integer. + Thus, a common method for making a copy is assignment: + 15. A symbol instance may be copied as though it were an integer. + Thus, a common method for making a copy is assignment: + 16. A symbol instance may be copied as though it were an integer. + Thus, a common method for making a copy is assignment: + 17. A symbol instance may be copied as though it were an integer. + Thus, a common method for making a copy is assignment: + 18. A symbol instance may be copied as though it were an integer. + Thus, a common method for making a copy is assignment: +

+ + +

Path

+

Discrete Function

+

Topologically it gives us a satisfying feeling that a given 'way' never leads to different destinations.

+ +

A common notation for a function is:

+ + destination = f(way) + + +

+ Because the same way always leads to the given destination, + we can represent the mapping as follows: +

+ + def resolve_path(way): + return hypergraph.lookup(way) + + + + + + +