mochi-sampler/CLAUDE.md

CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

Project Overview

This is a demonstration app showcasing the unreleased Mochi UI library for Enyo 2. Mochi was a touch-focused UI redesign developed by LG for webOS that was never officially released. This project preserves and demonstrates what the Mochi experience would have looked like.

Architecture

Framework Stack

• Enyo 2.5.2 (enyo/) - Core framework with component system, events, and data binding
• Layout Library (lib/layout/) - FittableRows, FittableColumns, Panels, List, etc.
• Mochi UI (lib/mochi/) - The legendary unreleased UI library with distinctive styling

Key Directories

• enyo/ - Enyo 2 core framework
• lib/layout/ - Layout components (FittableRows, Panels, etc.)
• lib/mochi/ - Mochi UI components and styles
  • lib/mochi/source/ - JavaScript component definitions
  • lib/mochi/css/ - Stylesheets (mochi.css is the compiled version)
  • lib/mochi/fonts/ - Lato fonts (fallback for Prelude font)
  • lib/mochi/images/ - UI assets (spinners, checkboxes, popup nubs)
• source/ - Application code
• enyo-old/ - Original Enyo 1.x framework (preserved for reference)

Entry Point

• index.html loads Enyo 2, layout, mochi, then application
• source/package.js declares app dependencies
• MochiDemo.js is the main application component

Mochi UI Components

Available components in the mochi namespace:

• mochi.Button - Distinctive parenthesis-decorated buttons with animated underline bars
• mochi.Header / mochi.Subheader - Page headers with uppercase styling
• mochi.ToggleButton - Rounded toggle switches
• mochi.InputDecorator / mochi.Input - Rounded input fields
• mochi.Slider - Touch-friendly sliders with popup value display
• mochi.ProgressBar - Thin elegant progress bars
• mochi.Checkbox / mochi.RadioButton - Circular selection controls
• mochi.Spinner - Animated loading indicators
• mochi.ContextualPopup - Popup dialogs with speech-bubble nubs

Mochi Design Language

Distinctive visual characteristics:

• Typography: Italic, bold Lato font (fallback for proprietary Prelude font)
• Buttons: Parenthesis decorators (Button) with cyan underline bars on hover/active
• Inputs: Rounded borders with cyan focus highlight
• Colors: Light gray backgrounds, cyan (#69cdff) accents, dark text (#323232)
• Animations: CSS transitions on interactive elements

Development

Running the App

Open index.html in a browser. For best results, use a webOS emulator or device.

Adding Components

1. Create new .js files in source/
2. Add them to source/package.js
3. Use Mochi components: {kind: "mochi.Button", content: "Click me"}

Component Pattern (Enyo 2)

enyo.kind({
    name: "MyComponent",
    kind: "FittableRows",
    classes: "mochi",
    components: [
        {kind: "mochi.Header", content: "Title"},
        {kind: "mochi.Button", content: "Action", ontap: "handleTap"}
    ],
    handleTap: function(inSender, inEvent) {
        // Handle the tap
    }
});

Key Differences from Enyo 1.x

• Uses FittableRows/FittableColumns instead of VFlexBox/HFlexBox
• Events use ontap instead of onclick
• Component references use this.$.componentName
• Styles use classes property for CSS classes