c0ckp1t 1.0.0

package/core/sfc/md-toc.vue

@@ -0,0 +1,346 @@
+<script setup>
+/*
+  This component displays the Table of Contents for a Markdown document.
+  
+  Usage:
+    <MdToc :v="markdownText" />
+  
+  Features:
+    - Automatically extracts headings from markdown
+    - Supports nested hierarchy (H1-H6)
+    - Collapsible TOC with smooth animations
+    - Smooth scroll to sections with normalized anchor IDs
+    - Visual hierarchy with different markers per level
+*/
+// ________________________________________________________________________________
+// IMPORTS
+// ________________________________________________________________________________
+import {reactive, watch, onMounted} from 'vue'
+import {getLogger} from "Logging";
+import {slugify} from "../../components/MarkdownUtils.mjs"
+import TocList from "./toc-list.vue";
+
+// !# C0CKP1T_START imports
+import { store as storeMain, api as apiMain } from 'GlobalStore'
+
+const maximumTileTextLength = 32 
+const props = defineProps({
+  v: {
+    type: String,
+    required: true,
+  },
+  // Determines how deep to parse headings
+  //  The more levels the more complex the TOC
+  maxLevel: {
+    type: Number,
+    default: 3,
+  }
+})
+// !# C0CKP1T_END
+
+
+
+// ________________________________________________________________________________
+// LOGGING
+// ________________________________________________________________________________
+const LOG_HEADER = "md-toc.vue"
+const logger = getLogger(LOG_HEADER)
+logger.debug("[INIT]")
+
+// !# C0CKP1T_START script
+const local = reactive({
+  id: LOG_HEADER,
+  toc: [],
+  isCollapsed: false,
+  isEmpty: true
+})
+
+/**
+ * Create hierarchical TOC structure from markdown text
+ * Extracts headings and builds nested structure based on heading levels
+ * 
+ * IMPORTANT: Skips headings inside code blocks (``` or ~~~)
+ * This prevents bash comments (#) and other code from being treated as headings
+ * 
+ * @param {string} markdownText - Raw markdown text
+ * @returns {Array} Hierarchical TOC structure
+ */
+function createTOCFromMarkdown(markdownText) {
+  if (!markdownText || markdownText.trim() === '') {
+    return []
+  }
+
+  const lines = markdownText.split('\n')
+  const toc = []
+  const stack = [toc]
+  let inCodeBlock = false
+  let codeBlockDelimiter = null
+
+  lines.forEach(line => {
+    const trimmedLine = line.trim()
+    
+    // Check for code block boundaries (``` or ~~~)
+    // Match opening: ```bash, ```javascript, ``` (any or no language)
+    // Match closing: ``` or ~~~ (must match the opening delimiter)
+    if (trimmedLine.startsWith('```') || trimmedLine.startsWith('~~~')) {
+      if (!inCodeBlock) {
+        // Entering code block
+        inCodeBlock = true
+        codeBlockDelimiter = trimmedLine.startsWith('```') ? '```' : '~~~'
+      } else if (trimmedLine.startsWith(codeBlockDelimiter)) {
+        // Exiting code block (delimiter must match)
+        inCodeBlock = false
+        codeBlockDelimiter = null
+      }
+      return // Skip the code block delimiter line itself
+    }
+
+    // Skip lines inside code blocks
+    if (inCodeBlock) {
+      return
+    }
+
+    // Match markdown headings: ## Heading Text
+    // Must be at start of line (after trimming leading spaces)
+    const match = line.match(/^(#{1,6})\s+(.*)/)
+    if (match) {
+      const level = match[1].length
+      
+      // Skip headings deeper than maxLevel
+      if (level > props.maxLevel) {
+        return
+      }
+      
+      // const text = match[2].trim()
+      const fullText = match[2].trim()
+      const text = fullText.length > maximumTileTextLength ? fullText.substring(0, maximumTileTextLength) + "..." : fullText
+      
+      // Use slugify for consistent anchor generation (matches markdown-it-anchor)
+      const anchor = slugify(text)
+
+      const entry = {text, anchor, fullText, children: []}
+
+      // Adjust stack to current level
+      while (stack.length > level) {
+        stack.pop()
+      }
+      
+      // Add entry at current level
+      stack[stack.length - 1].push(entry)
+      stack.push(entry.children)
+    }
+  })
+
+  return toc
+}
+
+/**
+ * Scroll to a section by anchor ID
+ * Uses same normalization as xmarkdown.vue for consistency
+ * 
+ * @param {string} anchor - Anchor ID (with or without #)
+ */
+function scrollToSection(anchor) {
+  // Remove # if present
+  let id = anchor.startsWith('#') ? anchor.slice(1) : anchor
+  
+  // Normalize the ID to match header IDs
+  const normalizedId = slugify(id)
+  
+  // Try normalized ID first
+  let target = document.getElementById(normalizedId)
+  
+  // Fallback: try original ID
+  if (!target && normalizedId !== id) {
+    target = document.getElementById(id)
+    logger.debug(`Trying original ID: ${id}`)
+  }
+
+  if (target) {
+    target.scrollIntoView({
+      behavior: 'smooth',
+      block: 'start'
+    })
+    logger.debug(`Scrolled to section: ${anchor} (normalized: ${normalizedId})`)
+  } else {
+    logger.warn(`Section not found: ${anchor} (tried IDs: ${normalizedId}, ${id})`)
+  }
+}
+
+/**
+ * Toggle TOC collapsed state
+ */
+function toggleCollapse() {
+  storeMain.isCollapsedTOC = !storeMain.isCollapsedTOC
+  logger.debug(`TOC collapsed: ${storeMain.isCollapsedTOC}`)
+}
+
+/**
+ * Update TOC when markdown text changes
+ */
+function updateTOC() {
+  const newToc = createTOCFromMarkdown(props.v)
+  local.toc = newToc
+  local.isEmpty = newToc.length === 0
+  
+  logger.debug(`TOC updated: ${newToc.length} top-level items`)
+}
+
+// Watch for prop changes
+watch(() => props.v, () => {
+  updateTOC()
+}, { immediate: true })
+
+// !# C0CKP1T_END
+
+// ________________________________________________________________________________
+// INIT
+// ________________________________________________________________________________
+async function init() {
+  // !# C0CKP1T_START init
+  updateTOC()
+  // !# C0CKP1T_END init
+}
+
+onMounted(async () => {
+  init()
+})
+</script>
+
+<template>
+  <!--  !# C0CKP1T_START template -->
+  <div v-if="!local.isEmpty" class="md-toc" :class="{'toc-collapsed': storeMain.isCollapsedTOC}">
+    <!-- TOC Header with collapse button -->
+    <div class="toc-header" @click="toggleCollapse" style="cursor: pointer;">
+      <h3 class="toc-title">
+
+       {{ storeMain.isCollapsedTOC ? 'TOC' : 'Table of Contents' }} 
+      </h3>
+
+      <button 
+        class="toc-toggle-btn ms-2"
+        :aria-label="storeMain.isCollapsedTOC ? 'Expand table of contents' : 'Collapse table of contents'"
+      > {{ storeMain.isCollapsedTOC ? '▶' : '▼' }} </button>
+
+    </div>
+
+    <!-- TOC Navigation - recursive list -->
+    <nav v-show="!storeMain.isCollapsedTOC" class="toc-nav">
+      <TocList :items="local.toc" :level="0" @scroll-to="scrollToSection" />
+    </nav>
+  </div>
+  <!--  !# C0CKP1T_END template -->
+</template>
+
+<style scoped>
+/* !# C0CKP1T_START style */
+
+/* ============================================================================
+   TOC Container
+   ============================================================================ */
+.md-toc {
+  background-color: var(--color4);  /* #2d333b - component bg */
+  border-left: 3px solid var(--color6);  /* #82b1ff - blue accent */
+  border-radius: 6px;
+  padding: 0.75rem;
+  margin: 1.5rem 0;
+  max-width: 100%;
+  transition: all 0.3s ease;
+}
+
+.md-toc:hover {
+  border-left-color: var(--color5);  /* Gold on hover */
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+
+/* ============================================================================
+   TOC Header
+   ============================================================================ */
+.toc-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 0.5rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid rgba(130, 177, 255, 0.2);
+}
+
+.toc-title {
+  color: var(--color6);  /* Blue */
+  font-size: 0.95rem;
+  font-weight: 600;
+  margin: 0;
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+}
+
+.toc-title i {
+  font-size: 0.85rem;
+}
+
+.toc-toggle-btn {
+  background: none;
+  border: none;
+  color: var(--color6);
+  cursor: pointer;
+  padding: 0.2rem 0.4rem;
+  border-radius: 4px;
+  transition: all 0.2s ease;
+  font-size: 0.85rem;
+}
+
+.toc-toggle-btn:hover {
+  background-color: rgba(130, 177, 255, 0.1);
+  color: var(--color5);  /* Gold */
+}
+
+.toc-toggle-btn:active {
+  background-color: rgba(130, 177, 255, 0.2);
+}
+
+/* ============================================================================
+   TOC Navigation
+   ============================================================================ */
+.toc-nav {
+  animation: fadeIn 0.3s ease-in-out;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* ============================================================================
+   Collapsed State
+   ============================================================================ */
+.toc-collapsed .toc-nav {
+  display: none;
+}
+
+.toc-collapsed {
+  padding-bottom: 0.75rem;
+}
+
+/* ============================================================================
+   Responsive Design
+   ============================================================================ */
+@media (max-width: 768px) {
+  .md-toc {
+    padding: 0.75rem;
+    margin: 1rem 0;
+  }
+
+  .toc-title {
+    font-size: 0.9rem;
+  }
+}
+
+/* !# C0CKP1T_END style */
+</style>

package/core/sfc/scroll-to-top.vue

@@ -0,0 +1,69 @@
+<script setup>
+import {onBeforeUnmount, onMounted} from "vue";
+import {api as apiMain} from "@/GlobalStore.mjs";
+
+onMounted(() => {
+  apiMain.init()
+  // Add scroll listener
+  window.addEventListener('scroll', handleScroll)
+})
+
+
+onBeforeUnmount(() => {
+  // Clean up scroll listener
+  window.removeEventListener('scroll', handleScroll)
+})
+// ________________________________________________________________________________
+// SCROLL TO TOP
+// ________________________________________________________________________________
+function scrollToTop() {
+  window.scrollTo({ top: 0, behavior: 'smooth' })
+}
+
+function handleScroll() {
+  // Show button when user scrolls down 300px
+  local.showScrollToTop = window.scrollY > 300
+}
+</script>
+
+<template>
+  <!-- Scroll to Top Button -->
+  <button
+      v-if="local.showScrollToTop"
+      @click="scrollToTop"
+      class="scroll-to-top-btn"
+      title="Scroll to top"
+  > ↑ </button>
+</template>
+
+<style scoped>
+.scroll-to-top-btn {
+  position: fixed;
+  bottom: 30px;
+  right: 30px;
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  background-color: #0d6efd;
+  color: white;
+  border: none;
+  cursor: pointer;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+  font-size: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s ease;
+  z-index: 1000;
+}
+
+.scroll-to-top-btn:hover {
+  background-color: #0b5ed7;
+  transform: translateY(-3px);
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
+}
+
+.scroll-to-top-btn:active {
+  transform: translateY(-1px);
+}
+</style>

package/core/sfc/task.vue

@@ -0,0 +1,98 @@
+<script setup>
+/*
+ <Task :event="task"></Task>
+*/
+// ________________________________________________________________________________
+// IMPORTS
+// ________________________________________________________________________________
+// { "endpoint": "/wf/20", "type": "TASK_CREATED", "message": "36", "kv": {}, "createdMs": 1745387413063 }
+const props = defineProps({
+  event: Object
+})
+
+// ________________________________________________________________________________
+// STATE
+// ________________________________________________________________________________
+
+function formatDate(createdMs) {
+  if (!createdMs) return ''
+  const date = new Date(createdMs)
+  return date.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})
+}
+
+</script>
+
+<template>
+  <div v-if="props.event" class="task-item">
+    <div class="task-header">
+      <span
+          class="task-type"
+          :class="[
+          props.event.type.toLowerCase().includes('error') || props.event.type.toLowerCase().includes('fail')
+            ? 'type-error'
+            : 'type-complete'
+        ]"
+      >
+        {{ props.event.type }}
+      </span>
+      <span class="task-time">{{ formatDate(props.event.createdMs) }}</span>
+    </div>
+    <div class="task-message">{{ props.event?.message }}</div>
+  </div>
+</template>
+
+<style scoped>
+.task-item {
+  padding: 0.5rem;
+  margin-bottom: 0.5rem;
+  border-left: 3px solid #8a8a8a;
+  border-radius: 0 4px 4px 0;
+  background-color: rgba(255, 255, 255, 0.08);
+  font-size: 0.85rem;
+  transition: background-color 0.2s;
+  color: #e0e0e0;
+}
+
+.task-item:hover {
+  background-color: rgba(255, 255, 255, 0.12);
+}
+
+.task-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.25rem;
+}
+
+.task-type {
+  font-weight: bold;
+  padding: 0.15rem 0.4rem;
+  border-radius: 3px;
+  font-size: 0.7rem;
+  text-transform: uppercase;
+  background-color: #5a5a5a;
+  color: #e0e0e0;
+}
+
+.type-error, .type-failed {
+  background-color: #b71c1c;
+  color: white;
+}
+
+.type-complete, .type-success {
+  background-color: #2e7d32;
+  color: white;
+}
+
+.task-time {
+  color: #aaa;
+  font-size: 0.7rem;
+}
+
+.task-message {
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+</style>

package/core/sfc/text-to-md.vue

@@ -0,0 +1,25 @@
+<script setup>
+/**
+ * Recursive TOC List Component
+ * Renders a hierarchical list of table of contents items
+ */
+const props = defineProps({
+  items: {
+    type: Array,
+    required: true
+  },
+  level: {
+    type: Number,
+    default: 0
+  }
+})
+
+const emit = defineEmits(['scroll-to'])
+</script>
+
+<template>
+
+</template>
+
+<style scoped>
+</style>

package/core/sfc/toc-list.vue

@@ -0,0 +1,175 @@
+<script setup>
+/**
+ * Recursive TOC List Component
+ * Renders a hierarchical list of table of contents items
+ */
+const props = defineProps({
+  items: {
+    type: Array,
+    required: true
+  },
+  level: {
+    type: Number,
+    default: 0
+  }
+})
+
+const emit = defineEmits(['scroll-to'])
+</script>
+
+<template>
+  <ul :class="['toc-list', `toc-level-${level}`]">
+    <li v-for="item in items" :key="item.anchor" class="toc-item">
+      <a 
+        :href="`#${item.anchor}`" 
+        @click.prevent="emit('scroll-to', item.anchor)"
+        class="toc-link"
+        :title="`Jump to: ${item.fullText}`"
+      >
+        {{ item.text }}
+      </a>
+      <!-- Recursive: render children if they exist -->
+      <TocList 
+        v-if="item.children && item.children.length > 0"
+        :items="item.children"
+        :level="level + 1"
+        @scroll-to="emit('scroll-to', $event)"
+      />
+    </li>
+  </ul>
+</template>
+
+<style scoped>
+/* ============================================================================
+   TOC Lists - Base Styles
+   ============================================================================ */
+.toc-list {
+  list-style: none;
+  padding-left: 0;
+  margin: 0;
+}
+
+/* Indent nested levels */
+.toc-level-1,
+.toc-level-2,
+.toc-level-3,
+.toc-level-4,
+.toc-level-5 {
+  padding-left: 1rem;
+}
+
+/* ============================================================================
+   TOC Items
+   ============================================================================ */
+.toc-item {
+  margin: 0.25rem 0;
+}
+
+/* Level-specific font styling */
+.toc-level-0 > .toc-item {
+  font-weight: 600;  /* Bold for top-level (H1/H2) */
+  font-size: 0.9rem;
+}
+
+.toc-level-1 > .toc-item {
+  font-weight: 500;
+  font-size: 0.85rem;
+}
+
+.toc-level-2 > .toc-item {
+  font-weight: 400;
+  font-size: 0.8rem;
+}
+
+.toc-level-3 > .toc-item,
+.toc-level-4 > .toc-item,
+.toc-level-5 > .toc-item {
+  font-weight: 400;
+  font-size: 0.75rem;
+  opacity: 0.9;
+}
+
+/* ============================================================================
+   TOC Links
+   ============================================================================ */
+.toc-link {
+  color: var(--bs-body-color);  /* Default text color */
+  text-decoration: none;
+  display: block;
+  padding: 0.25rem 0.5rem;
+  border-radius: 4px;
+  transition: all 0.2s ease;
+  position: relative;
+}
+
+.toc-link:hover {
+  background-color: rgba(130, 177, 255, 0.1);  /* Subtle blue highlight */
+  color: var(--color6);  /* Blue text on hover */
+  padding-left: 0.75rem;  /* Slide in effect */
+  transform: translateX(2px);
+}
+
+.toc-link:active {
+  background-color: rgba(130, 177, 255, 0.2);
+}
+
+/* ============================================================================
+   Level Markers - Visual Hierarchy
+   ============================================================================ */
+/* Level 0 (H1/H2) - Triangle marker in gold */
+.toc-level-0 > .toc-item > .toc-link::before {
+  content: "▸ ";
+  color: var(--color5);  /* Gold */
+  font-weight: bold;
+  margin-right: 0.25rem;
+}
+
+/* Level 1 (H3) - Bullet marker in blue */
+.toc-level-1 > .toc-item > .toc-link::before {
+  content: "• ";
+  color: var(--color6);  /* Blue */
+  margin-right: 0.25rem;
+}
+
+/* Level 2 (H4) - Small triangle in gray */
+.toc-level-2 > .toc-item > .toc-link::before {
+  content: "‣ ";
+  color: var(--color3);  /* Gray */
+  margin-right: 0.25rem;
+}
+
+/* Level 3+ (H5+) - Dash marker */
+.toc-level-3 > .toc-item > .toc-link::before,
+.toc-level-4 > .toc-item > .toc-link::before,
+.toc-level-5 > .toc-item > .toc-link::before {
+  content: "− ";
+  color: var(--color3);  /* Gray */
+  margin-right: 0.25rem;
+  opacity: 0.7;
+}
+
+/* ============================================================================
+   Responsive Design
+   ============================================================================ */
+@media (max-width: 768px) {
+  .toc-level-0 > .toc-item {
+    font-size: 0.85rem;
+  }
+
+  .toc-level-1 > .toc-item {
+    font-size: 0.8rem;
+  }
+
+  .toc-level-2 > .toc-item,
+  .toc-level-3 > .toc-item {
+    font-size: 0.75rem;
+  }
+  
+  /* Reduce indentation on mobile */
+  .toc-level-1,
+  .toc-level-2,
+  .toc-level-3 {
+    padding-left: 0.75rem;
+  }
+}
+</style>