85 lines
3.4 KiB
Markdown
85 lines
3.4 KiB
Markdown
# 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)
|
|
```javascript
|
|
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
|