cellery 0.0.4 → 1.0.0

package/example.js

@@ -1,258 +0,0 @@
-const { EdgeInsets, Color, Cellery, BoxDecoration, Border, Alignment, HotKey, keys } = require('.')
-const { Container, Text, Center, Pressable, Scrollable } = require('cellery/components')
-const { CelleryRendererTUI } = require('cellery/renderers')
-const fs = require('fs')
-const repos = [
-  'my-first-repo',
-  'cellery',
-  'git-remote-pear-transport',
-  'pear-desktop',
-  'pear-runtime',
-  'bare-kit',
-  'bare-dev',
-  'hypercore',
-  'hyperswarm',
-  'hyperdht',
-  'hypercore-crypto',
-  'compact-encoding',
-  'protomux',
-  'b4a',
-  'random-access-storage',
-  'random-access-file',
-  'brittle',
-  'quickbit',
-  'safety-catch'
-]
-// Load file content once
-const fileContent = fs.readFileSync('./example.js', 'utf8')
-const lines = fileContent.split('\n')
-
-// Create persistent stateful components outside render function
-let selected = 0
-let currentView = 'list' // 'list' or 'file'
-
-// Scrollable for the repo list - maintains its own scroll state
-const listScrollable = new Scrollable({
-  width: '100%',
-  height: 'calc(100% - 1)',
-  scrollOffset: 0,
-  child: new Container({
-    width: '100%',
-    height: '100%',
-    alignment: Alignment.Center,
-    children: [] // Will be populated in render
-  })
-})
-
-// Scrollable for file viewer - maintains its own scroll state
-const fileScrollable = new Scrollable({
-  width: '100%',
-  height: '100%',
-  scrollOffset: 0,
-  child: new Container({
-    width: '100%',
-    height: '100%',
-    children: lines.map(
-      (line) =>
-        new Text({
-          value: line,
-          width: '100%'
-        })
-    )
-  })
-})
-
-// Navigation controls for list view
-const listUpControl = new Pressable({
-  hotkey: new HotKey({ key: keys.ARROW_UP }),
-  onPress: function () {
-    selected = selected === 0 ? repos.length - 1 : selected - 1
-    updateListView()
-    cellery.render()
-  }
-})
-
-const listDownControl = new Pressable({
-  hotkey: new HotKey({ key: keys.ARROW_DOWN }),
-  onPress: function () {
-    selected = selected === repos.length - 1 ? 0 : selected + 1
-    updateListView()
-    cellery.render()
-  }
-})
-
-const listEnterControl = new Pressable({
-  hotkey: new HotKey({ key: keys.ENTER }),
-  onPress: function () {
-    currentView = 'file'
-    fileScrollable.scrollOffset = 0
-    cellery.update(App())
-  }
-})
-
-// Navigation controls for file view
-const fileUpControl = new Pressable({
-  hotkey: new HotKey({ key: keys.ARROW_UP }),
-  onPress: function () {
-    if (fileScrollable.scrollOffset > 0) {
-      fileScrollable.scrollOffset--
-      cellery.render()
-    }
-  }
-})
-
-const fileDownControl = new Pressable({
-  hotkey: new HotKey({ key: keys.ARROW_DOWN }),
-  onPress: function () {
-    const viewport = fileScrollable._renderedViewport
-    if (viewport && fileScrollable.scrollOffset + viewport.itemCount < lines.length) {
-      fileScrollable.scrollOffset++
-      cellery.render()
-    }
-  }
-})
-
-const fileBackControl = new Pressable({
-  hotkey: new HotKey({ key: keys.ESC }),
-  onPress: function () {
-    currentView = 'list'
-    cellery.update(App())
-  }
-})
-
-// Update list view children based on current selection
-function updateListView() {
-  // Auto-scroll to keep selection visible
-  const viewport = listScrollable._renderedViewport
-  if (viewport && viewport.itemCount > 0) {
-    const positionInViewport = selected - listScrollable.scrollOffset
-    const triggerDistance = 1
-    // Scroll down if selection is too close to bottom
-    if (positionInViewport >= viewport.itemCount - triggerDistance) {
-      listScrollable.scrollOffset = Math.min(
-        repos.length - viewport.itemCount,
-        selected - viewport.itemCount + triggerDistance + 1
-      )
-    }
-    // Scroll up if selection is too close to top
-    if (positionInViewport < triggerDistance) {
-      listScrollable.scrollOffset = Math.max(0, selected - triggerDistance)
-    }
-  }
-  // Update list children with current selection highlighting
-  listScrollable.child.children = repos.map(
-    (name, i) =>
-      new Container({
-        width: '50%',
-        height: 3,
-        decoration: new BoxDecoration({
-          border: Border.all({
-            color: selected === i ? Color.from('#fa0') : Color.from('#bade5b')
-          })
-        }),
-        children: [
-          new Text({
-            value: name,
-            color: Color.from('#fff')
-          })
-        ]
-      })
-  )
-}
-
-function App() {
-  // Initialize list on first render
-  if (listScrollable.child.children.length === 0) {
-    updateListView()
-  }
-
-  const header = new Container({
-    width: '100%',
-    height: 3,
-    decoration: new BoxDecoration({
-      border: Border.all({
-        color: Color.from('#bade5b')
-      })
-    }),
-    children: [
-      new Center({
-        width: '100%',
-        height: 3,
-        child: new Text({
-          value: currentView === 'list' ? 'Pear Git' : `Pear Git - ${repos[selected]}`,
-          color: Color.from('#fff')
-        })
-      })
-    ]
-  })
-
-  if (currentView === 'file') {
-    return new Container({
-      width: '100%',
-      height: '100%',
-      margin: EdgeInsets.all(2),
-      alignment: Alignment.Center,
-      decoration: new BoxDecoration({
-        border: Border.all()
-      }),
-      children: [
-        fileUpControl,
-        fileDownControl,
-        fileBackControl,
-        header,
-        new Text({
-          value: 'Use ↑/↓ to scroll, ESC to go back',
-          color: Color.from({ red: 200, green: 200, blue: 200 })
-        }),
-        new Container({
-          width: '100%',
-          height: 'calc(100% - 5)',
-          decoration: new BoxDecoration({
-            border: Border.all({
-              color: Color.from('#bade5b')
-            })
-          }),
-          children: [fileScrollable]
-        })
-      ]
-    })
-  }
-
-  // List view
-  const footer = new Text({
-    value: `${selected + 1}/${repos.length} | scroll: ${listScrollable.scrollOffset}`,
-    color: Color.from({ red: 100, green: 100, blue: 100 })
-  })
-
-  return new Container({
-    width: '100%',
-    height: '100%',
-    margin: EdgeInsets.all(2),
-    alignment: Alignment.Center,
-    decoration: new BoxDecoration({
-      border: Border.all()
-    }),
-    children: [
-      listUpControl,
-      listDownControl,
-      listEnterControl,
-      header,
-      new Text({
-        value: 'Use ↑/↓ to navigate, ENTER to view file',
-        color: Color.from({ red: 200, green: 200, blue: 200 })
-      }),
-      new Container({
-        width: '100%',
-        height: '70%',
-        alignment: Alignment.Center,
-        children: [listScrollable, footer]
-      })
-    ]
-  })
-}
-const cellery = new Cellery({
-  renderer: new CelleryRendererTUI(),
-  child: App()
-})
-
-cellery.render()

package/lib/components/base.js

@@ -1,165 +0,0 @@
-const { Cell } = require('../base')
-
-class Center extends Cell {
-  constructor(opts = {}) {
-    super(opts)
-
-    this.child = opts.child
-  }
-}
-
-/**
- * Base container class for holding and aligning multiple children
- */
-class Container extends Cell {
-  static observedAttributes = ['width', 'height']
-
-  constructor(opts = {}) {
-    super(opts)
-    this.width = opts.width
-    this.height = opts.height
-    this.alignment = opts.alignment
-    this.margin = opts.margin
-    this.padding = opts.padding
-    this.decoration = opts.decoration
-    this.color = opts.color
-    this.children = opts.children || []
-  }
-
-  attributeChangedCallback(name, oldValue, newValue) {
-    // console.log('attributeChangedCallback', name, oldValue, newValue)
-  }
-}
-
-const TextAlign = {
-  Left: 'left',
-  Right: 'right',
-  Center: 'center'
-}
-
-class Text extends Cell {
-  constructor(opts = {}) {
-    super(opts)
-
-    this.value = opts.value || ''
-    this.color = opts.color
-    this.textAlign = opts.textAlign
-  }
-}
-
-class Pressable extends Cell {
-  hotkey = null
-  #onPress = null
-
-  constructor(opts = {}) {
-    super(opts)
-
-    this.child = opts.child
-    this.#onPress = opts.onPress
-    this.hotkey = opts.hotkey
-  }
-
-  async onPress() {
-    if (!this.#onPress) return
-
-    await this.#onPress()
-  }
-}
-
-/**
- * Scrollable component - manages viewport and scroll offset
- *
- * The framework keeps it simple: this component just tracks scroll state.
- * Renderers implement their own scroll triggering logic while maintaining
- * consistent UX.
- *
- * Takes a single child (typically a Container with children array)
- */
-class Scrollable extends Cell {
-  constructor(opts = {}) {
-    super(opts)
-
-    this.width = opts.width
-    this.height = opts.height
-    this.child = opts.child // Single child, not children array
-
-    // Scroll state - managed by the component consumer (e.g., your app logic)
-    this.scrollOffset = opts.scrollOffset || 0
-
-    // Optional: callback when scroll would be useful (renderer can trigger this)
-    this.onScrollRequest = opts.onScrollRequest || null
-
-    // Renderer will populate this after rendering
-    this._renderedViewport = null
-  }
-
-  /**
-   * Get viewport info from last render
-   * Renderer populates this during render
-   */
-  getViewportInfo() {
-    return this._renderedViewport || { itemCount: 0, height: 0 }
-  }
-
-  /**
-   * Request scroll by delta
-   * This is called by renderers or application logic to update scroll position
-   */
-  requestScroll(delta) {
-    const newOffset = this.scrollOffset + delta
-
-    if (this.onScrollRequest) {
-      this.onScrollRequest(newOffset, delta)
-    }
-
-    return newOffset
-  }
-
-  /**
-   * Scroll to make a specific child index visible
-   * Returns the new scroll offset
-   */
-  scrollToIndex(index, viewportHeight) {
-    if (index < this.scrollOffset) {
-      // Scroll up to show this item
-      return index
-    } else if (index >= this.scrollOffset + viewportHeight) {
-      // Scroll down to show this item
-      return index - viewportHeight + 1
-    }
-
-    return this.scrollOffset
-  }
-
-  /**
-   * Check if we can scroll in a direction
-   * childCount is the number of items in the scrollable content
-   */
-  canScroll(direction, viewportHeight, childCount) {
-    if (direction < 0) {
-      return this.scrollOffset > 0
-    } else {
-      return this.scrollOffset + viewportHeight < childCount
-    }
-  }
-
-  /**
-   * Get the visible range of children for current scroll position
-   * childCount is the total number of items
-   */
-  getVisibleRange(viewportHeight, childCount) {
-    const start = Math.max(0, this.scrollOffset)
-    const end = Math.min(childCount, start + viewportHeight)
-
-    return { start, end }
-  }
-}
-
-module.exports = {
-  Center,
-  Container,
-  Pressable,
-  Scrollable,
-  Text,
-  TextAlign
-}

package/lib/components/index.js

@@ -1,7 +0,0 @@
-const base = require('./base')
-const List = require('./list')
-
-module.exports = {
-  ...base,
-  List
-}

package/lib/components/list.js

@@ -1,107 +0,0 @@
-const { Cell, HotKey, Alignment } = require('../base')
-const keys = require('../keys')
-const { Scrollable, Pressable, Container } = require('./base')
-
-class List extends Cell {
-  constructor(opts = {}) {
-    super(opts)
-
-    this.children = opts.children || []
-    this.selected = opts.selected
-    this.scrollOffset = opts.scrollOffset || 0
-    this.triggerDistance = opts.triggerDistance || 0
-    this.viewportItemCount = opts.viewportItemCount || 0
-  }
-
-  render() {
-    // Calculate new scroll offset based on viewport info from last render
-    let newScrollOffset = this.scrollOffset
-
-    if (this.selected >= 0 && this.viewportItemCount) {
-      if (this.viewportItemCount > 0) {
-        const positionInViewport = this.selected - this.scrollOffset
-
-        // Scroll down if we're too close to bottom
-        if (positionInViewport >= this.viewportItemCount - this.triggerDistance) {
-          newScrollOffset = Math.min(
-            this.children.length - this.viewportItemCount,
-            this.selected - this.viewportItemCount + this.triggerDistance + 1
-          )
-        }
-
-        // Scroll up if we're too close to top
-        if (positionInViewport < this.triggerDistance) {
-          newScrollOffset = Math.max(0, this.selected - this.triggerDistance)
-        }
-
-        // Clamp to valid range
-        newScrollOffset = Math.max(
-          0,
-          Math.min(Math.max(0, this.children.length - this.viewportItemCount), newScrollOffset)
-        )
-      }
-    }
-
-    // Navigation controls (invisible, just for hotkeys)
-    const upControl = new Pressable({
-      hotkey: new HotKey({ key: keys.ARROW_UP }),
-      onPress: () => {
-        const newSelected = this.selected === 0 ? this.children.length - 1 : this.selected - 1
-        this.emit('navigate', {
-          selected: newSelected,
-          scrollOffset: newScrollOffset,
-          viewportItemCount: this._scrollableRef._renderedViewport.itemCount
-        })
-      }
-    })
-
-    const downControl = new Pressable({
-      hotkey: new HotKey({ key: keys.ARROW_DOWN }),
-      onPress: () => {
-        const newSelected = this.selected === this.children.length - 1 ? 0 : this.selected + 1
-        this.emit('navigate', {
-          selected: newSelected,
-          scrollOffset: newScrollOffset,
-          viewportItemCount: this._scrollableRef._renderedViewport.itemCount
-        })
-      }
-    })
-
-    // Create container with all children and their pressables
-    const listContainer = new Container({
-      width: '100%',
-      height: '100%', // Use full height available from Scrollable
-      alignment: Alignment.Center,
-      children: this.children.map(
-        (child, i) =>
-          new Pressable({
-            hotkey: i === this.selected ? new HotKey({ key: keys.ENTER }) : null,
-            onPress: () => {
-              this.emit('select', { selected: this.selected })
-            },
-            child
-          })
-      )
-    })
-
-    // Wrap container in scrollable
-    const scrollable = new Scrollable({
-      width: '100%',
-      height: 'calc(100% - 1)', // Reserve 1 row for footer
-      scrollOffset: newScrollOffset,
-      child: listContainer
-    })
-
-    // Store ref for next render
-    this._scrollableRef = scrollable
-
-    return new Container({
-      width: '100%',
-      height: '70%',
-      alignment: Alignment.Center,
-      children: [upControl, downControl, scrollable]
-    })
-  }
-}
-
-module.exports = List

package/lib/index.js

@@ -1,7 +0,0 @@
-const base = require('./base')
-const keys = require('./keys')
-
-module.exports = {
-  ...base,
-  keys
-}

package/lib/keys.js

@@ -1,9 +0,0 @@
-module.exports = {
-  CTRL_C: '\u0003',
-  ESC: '\u001b',
-  ENTER: '\r',
-  ARROW_UP: '\u001b[A',
-  ARROW_DOWN: '\u001b[B',
-  ARROW_LEFT: '\u001b[C',
-  ARROW_RIGHT: '\u001b[D'
-}

package/lib/renderers/html-renderer.js

@@ -1,133 +0,0 @@
-function escapeHTML(str) {
-  return str
-    .replace(/&/g, '&')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;')
-    .replace(/"/g, '&quot;')
-    .replace(/'/g, '&#039;')
-}
-
-class CelleryRendererHTML {
-  components = {
-    Container: function () {
-      const width = this.width
-      const height = this.height
-
-      // Calculate margins (outside everything)
-      const margin = this.margin || { left: 0, top: 0, right: 0, bottom: 0 }
-      const marginLeft = margin.left
-      const marginTop = margin.top
-      const marginRight = margin.right
-      const marginBottom = margin.bottom
-
-      // Check if border exists
-      const hasBorder = this.decoration && this.decoration.border
-      const borderWidth = hasBorder ? 1 : 0
-
-      // Calculate padding (inside decoration/border)
-      const padding = this.padding || { left: 0, top: 0, right: 0, bottom: 0 }
-      const paddingLeft = padding.left
-      const paddingTop = padding.top
-      const paddingRight = padding.right
-      const paddingBottom = padding.bottom
-
-      // Build styles
-      const styles = {
-        width: `${width}px`,
-        height: `${height}px`,
-        margin: `${marginTop}px ${marginRight}px ${marginBottom}px ${marginLeft}px`,
-        padding: `${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px`,
-        boxSizing: 'border-box',
-        display: 'flex',
-        flexDirection: 'column'
-      }
-
-      if (hasBorder) {
-        const borderColor = this.decoration.border.color?.toRGBA() || '#000'
-        styles.border = `${borderWidth}px solid ${borderColor}`
-      }
-
-      if (this.color) {
-        styles.backgroundColor = this.color.toRGBA()
-      }
-
-      // Render children
-      let childrenHTML = ''
-      if (this.children && this.children.length > 0) {
-        for (const child of this.children) {
-          childrenHTML += this.renderer._renderComponent(child)
-        }
-      }
-
-      const styleStr = Object.entries(styles)
-        .map(([k, v]) => `${k.replace(/([A-Z])/g, '-$1').toLowerCase()}: ${v}`)
-        .join('; ')
-
-      return `<div style="${styleStr}">${childrenHTML}</div>`
-    },
-
-    Center: function () {
-      const width = this.width
-      const height = this.height
-
-      const styles = {
-        width: `${width}px`,
-        height: `${height}px`,
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center'
-      }
-
-      // Render child if exists
-      let childHTML = ''
-      if (this.child) {
-        childHTML = this.renderer._renderComponent(this.child)
-      }
-
-      const styleStr = Object.entries(styles)
-        .map(([k, v]) => `${k.replace(/([A-Z])/g, '-$1').toLowerCase()}: ${v}`)
-        .join('; ')
-
-      return `<div style="${styleStr}">${childHTML}</div>`
-    },
-
-    Text: function () {
-      const text = String(this.value)
-      const color = this.color
-      const colorStr = color
-        ? `rgba(${color.red}, ${color.green}, ${color.blue}, ${color.alpha || 1})`
-        : 'inherit'
-
-      return `<span style="color: ${colorStr}; textAlign: ${this.textAlign || 'left'}">${escapeHTML(text)}</span>`
-    }
-  }
-
-  _renderComponent(component) {
-    component.renderer = this
-    const rendererFn = this.components[component.constructor.name]
-    return rendererFn.call(component)
-  }
-
-  render(component) {
-    const html = this._renderComponent(component)
-    return `<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="UTF-8">
-  <style>
-    body {
-      margin: 0;
-      padding: 20px;
-      font-family: monospace;
-      background: #f0f0f0;
-    }
-  </style>
-</head>
-<body>
-  ${html}
-</body>
-</html>`
-  }
-}
-
-module.exports = { CelleryRendererHTML }

package/lib/renderers/index.js

@@ -1,4 +0,0 @@
-const html = require('./html-renderer')
-const tui = require('./tui-renderer')
-
-module.exports = { ...html, ...tui }