diff --git a/image.png b/image.png new file mode 100644 index 000000000..85d523456 Binary files /dev/null and b/image.png differ diff --git a/pirc4/CONTRIBUTING.md b/pirc4/CONTRIBUTING.md new file mode 100644 index 000000000..35ef11228 --- /dev/null +++ b/pirc4/CONTRIBUTING.md @@ -0,0 +1,41 @@ +# Contributing to Pi Visual Builder + +Thank you for your interest in contributing to the Pi Visual Builder specification. + +## How to Contribute + +### Specification Improvements +1. Open an Issue describing the proposed change +2. Reference the specific document (e.g., "docs/1-components.md: PiCard component") +3. Provide rationale and any supporting research + +### New Component Proposals +1. Open an Issue with the component name and use case +2. Define props, events, and visual behavior +3. Provide a sketch or reference implementation +4. Follow the existing component format in `docs/1-components.md` + +### Plugin Proposals +1. Open an Issue with plugin name and category +2. Define actions, components, and permissions +3. Follow the plugin format in `docs/4-marketplace.md` + +### Documentation Standards +- Use Markdown with proper headings and tables +- Include code examples for all components and blocks +- Reference PiDCTP module names when applicable +- Keep language clear and accessible for non-technical Pioneers + +## Pull Request Process +1. Fork the repository +2. Create a feature branch +3. Make changes following existing document style +4. Submit PR with clear description of changes + +## Reporting Issues +- **Bugs/Errors**: Open an Issue with the document name and section +- **Feature Requests**: Open an Issue with use case and rationale +- **Security vulnerabilities**: Email security@pivisualbuilder.org + +## License +By contributing, you agree that your contributions will be licensed under the MIT License. diff --git a/pirc4/LICENSE b/pirc4/LICENSE new file mode 100644 index 000000000..dc6f08839 --- /dev/null +++ b/pirc4/LICENSE @@ -0,0 +1,56 @@ +Pi Visual Builder β€” Idea & Proposal License + +Original Concept and Idea by: Ayoub (aybvip) +Implementation Rights: Pi Network (PiCore Team) + +This project represents an original idea and proposal created by Ayoub (aybvip) +and submitted to Pi Network for adoption and implementation. + +TERMS AND CONDITIONS: + +1. IDEA OWNERSHIP: The original concept, idea, and proposal for Pi Visual Builder + were created by Ayoub (aybvip). The idea is submitted to Pi Network for the + purpose of enhancing Pi App Studio. + +2. IMPLEMENTATION RIGHTS: Pi Network (PiCore Team) has the exclusive right to + adopt, implement, modify, and integrate this idea into Pi App Studio or any + Pi Network product. Upon adoption by Pi Network, all implementation rights + belong to Pi Network. + +3. ATTRIBUTION: If Pi Network adopts this idea, the original contributor + (Ayoub / aybvip) should be credited as the original idea author in any + official announcement or documentation. + +4. RESTRICTIONS: No person or entity other than Pi Network may: + - Claim ownership of this idea or proposal + - Copy, reproduce, or distribute this project for commercial purposes + - Implement this concept under a different name without permission + - Use any part of this project without explicit written permission + - Modify, adapt, or create derivative works from this project + - Remove or alter this license or the attribution to the original creator + +5. DERIVATIVE WORKS: Any modification, adaptation, or derivative work based + on this project remains subject to this license. Changing the name, + rebranding, or altering parts of the idea does not create a new work + free from this license. The original idea author (Ayoub / aybvip) and + Pi Network retain all rights over any derivative works. + +6. INTELLECTUAL PROPERTY: This project is protected under intellectual + property laws including copyright and trade secret protections. Any + unauthorized use, reproduction, or implementation constitutes a + violation of these rights and may be subject to legal action. + +7. PROPOSAL STATUS: This project is a voluntary proposal submitted to + Pi Network. The original contributor grants Pi Network the right to + adopt and implement this idea. No other entity has this right. + +8. COMMUNITY USE: Community members may view, discuss, and provide feedback + on this project for the purpose of improving Pi Network's ecosystem, + but may not appropriate, fork, or commercialize any part of it. + +THIS PROJECT IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR +ANY CLAIM, DAMAGES OR OTHER LIABILITY. + +For permissions and inquiries, contact Pi Network through official channels +at https://minepi.com diff --git a/pirc4/ReadMe.md b/pirc4/ReadMe.md new file mode 100644 index 000000000..725c03980 --- /dev/null +++ b/pirc4/ReadMe.md @@ -0,0 +1,120 @@ +# Pi Visual Builder β€” PiRC4: The Ultimate AI-Driven No-Code Platform + +![Pi Visual Builder Preview](assets/preview.png) + +> **The Power of Visual Development + The Intelligence of Pi AI** β€” A next-generation visual development platform with a native **AI Agent (Orchestrator)**. Build complex, relational database web apps with step-by-step visual workflows, all powered by natural language prompts. + +## πŸ“š Documentation Index + +| # | Document | Description | +|---|----------|-------------| +| 1 | [Component Specification](docs/1-components.md) | 20+ visual components (Layout, Display, Input, Navigation, Pi-Native) | +| 2 | [Logic Blocks](docs/2-logic-blocks.md) | Event blocks, logic blocks, data blocks, Pi SDK blocks | +| 3 | [Code Generation](docs/3-code-generation.md) | React/TS + HTML/CSS output, Pi SDK API, build pipeline | +| 4 | [Component Marketplace](docs/4-marketplace.md) | Publishing, monetization, verification, discovery | +| 5 | [Example Apps](docs/5-examples.md) | 5 complete app examples (e-commerce, services, community, loyalty, HTML) | +| 6 | [Editor UI Layout](docs/6-editor-ui-layout.md) | Professional editor: canvas, property editor, AI assistant panel, workflow canvas, data tab, styles tab | + +## πŸ“± Interactive Mockups (Mobile-Optimized) + +| Mockup | Preview | +|--------|---------| +| [🎨 Design Tab](mockups/1-design-tab.html) | Visual canvas with elements tree, property editor, and AI assistant | +| [⚑ Workflow Tab](mockups/2-workflow-tab.html) | Step-by-step logic chains with Pi payment & escrow actions | +| [πŸ—„οΈ Data Tab](mockups/3-data-tab.html) | Relational database with PiDCTP-linked fields and privacy rules | +| [🎭 Styles Tab](mockups/4-styles-tab.html) | Color/font variables, element styles, live preview with dark theme AI | + +## πŸ€– The Pi AI Agent (BETA) + +The **Pi AI Agent** is the heart of the platform. It's not just a chatbot; it's an **Active Orchestrator** that performs actions across the environment: + +1. **Instant UI Implementation**: "Build a form so users can apply to jobs" β†’ AI creates popup, adds input fields, styles them to match your theme. +2. **Logic & Workflow Generation**: "When the user clicks apply, save the data and send a confirmation" β†’ AI builds a 3-step visual workflow: `Show Popup` β†’ `Display Data` β†’ `Send Confirmation`. +3. **Real-time Design Reworking**: "Rework the design to be more professional" β†’ AI adjusts padding, typography, and color schemes across the active screen. +4. **Database Auto-Schema**: AI automatically suggests and creates data types (e.g., `Job Application`) based on the form fields it just built. + +## πŸ›οΈ Professional Development Workspace + +### 1. Design Tab (Visual Canvas) +- **Pixel-Perfect Canvas**: Drag-and-drop elements with absolute or flexbox positioning. +- **Elements Tree**: Organize components hierarchically (Groups, Text, Buttons, Icons, Shapes). +- **Responsive Engine**: Toggle between Mobile, Tablet, and Desktop views instantly. +- **Property Editor**: Full control over fonts, colors, animations, and conditional states. + +### 2. Workflow Tab (Step-by-Step Logic) +- **Visual Logic Chains**: A clear, vertical flow of actions triggered by events. +- **Event Triggers**: `Button is clicked`, `Page is loaded`, `Payment is confirmed`. +- **Action Steps**: Show/Hide elements β†’ Data operations β†’ Ecosystem actions (Send Pi, Award Badge, Open Dispute). + +### 3. Data Tab (Relational Manager) +- **Data Types**: Build complex objects like `Merchant`, `EscrowTransaction`, `Job`. +- **Field Mapping**: Link fields directly to PiDCTP on-chain states for verified reputation. +- **Privacy Rules**: Define who can see or modify specific data points. + +### 4. API Connector +- **Visual API Builder**: Connect any external REST API without writing code. +- **Native Pi SDK integration**: Visual blocks for all Pi Network core functions. + +### 5. Plugins & Marketplace +- **Community Plugins**: Discovery of community-built logic blocks and UI components. +- **Monetization**: Authors earn Pi for their premium plugins. + +### 6. Styles Tab +- **Style Variables**: Colors, fonts, spacing β€” define once, apply everywhere. +- **Element Styles**: Reusable style presets (Button-primary, Card-default, etc.). +- **Pi Design System**: Built-in theme tokens for consistent Pi ecosystem branding. + +## πŸ—οΈ Technical Architecture (AI-First) + +``` +β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” +β”‚ PI VISUAL BUILDER (VB) β”‚ +β”œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€ +β”‚ πŸ€– PI AI AGENT (Orchestrator: Generates UI, Logic, Data) β”‚ +β”œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€ +β”‚ DESIGN β”‚ WORKFLOW β”‚ DATA β”‚ API β”‚ PLUGINS β”‚ +β”‚ CANVAS β”‚ ENGINE β”‚ MANAGER β”‚ CONNECTOR β”‚ MARKETPLACE β”‚ +β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”΄β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”΄β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”΄β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”΄β”€β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”€β”€β”˜ + β”‚ β”‚ β”‚ β”‚ + β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β–Όβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β–Όβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β–Όβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β–Όβ”€β”€β”€β” + β”‚ PI SDK & PiDCTP LAYER β”‚ + β”‚ (On-Chain Auth, Payments, Escrow, Reputation) β”‚ + β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ + β”‚ + β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β–Όβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” + β”‚ PI BROWSER RUNTIME β”‚ + β”‚ (React/TS Dynamic Web App) β”‚ + β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ +``` + +## πŸ”— PiRC3 (PiDCTP) Visual Integration + +Pi Visual Builder turns complex smart contract calls into simple visual steps: + +| Visual Workflow Step | PiRC3 Backend Action | +| :--- | :--- | +| `Verify Seller` | `pi.reputation.getEffectiveScore()` | +| `Create Milestone` | `pi.escrow.createMilestoneEscrow()` | +| `Release Payment` | `pi.escrow.confirmReceipt()` | +| `Lodge Complaint` | `pi.dispute.open()` | +| `Award Verified Badge` | `pi.reputation.awardBadge()` | + +## πŸ“… Roadmap + +| Phase | Feature | Status | +|-------|---------|--------| +| **Phase 1** | Visual Foundation (UI Canvas + Basic Workflows) | Proposed | +| **Phase 2** | Data Intelligence (Relational Database + Privacy Rules) | Proposed | +| **Phase 3** | AI Integration (Pi AI Agent for natural language app building) | Proposed | +| **Phase 4** | Global Ecosystem (Plugin Marketplace + Pi App Studio Sync) | Proposed | + +## πŸ“„ License + +Idea & Proposal License β€” Original concept by **Ayoub (aybvip)**. Implementation rights belong exclusively to **Pi Network**. No other entity may claim, copy, or implement this idea. See [LICENSE](LICENSE) for full terms. + +--- + +### Links +- **PiRC3 (PiDCTP)**: [PR #378](https://github.com/PiNetwork/PiRC/pull/378) +- **Platform Discussion**: [Issue #381](https://github.com/PiNetwork/PiRC/issues/381) +- **Pi App Studio**: Available in Pi Browser diff --git a/pirc4/SECURITY.md b/pirc4/SECURITY.md new file mode 100644 index 000000000..8be827763 --- /dev/null +++ b/pirc4/SECURITY.md @@ -0,0 +1,46 @@ +# Security Policy + +## Reporting a Vulnerability + +**Do NOT report security vulnerabilities through public GitHub Issues.** + +Email security@pivisualbuilder.org with: +- Description of the vulnerability +- Steps to reproduce +- Potential impact +- Suggested fix (if any) + +We will acknowledge receipt within 48 hours and provide a detailed response within 7 days. + +## Security Considerations + +### Plugin Security +- All plugins are sandboxed β€” cannot access other plugin state +- External network requests require explicit permission in manifest +- No direct DOM manipulation (use framework APIs only) +- Obfuscated code is rejected during review + +### Data Security +- Privacy rules enforced at runtime β€” no bypass possible +- PiDCTP on-chain state is immutable β€” visual builder cannot alter it +- API keys stored encrypted, never exposed to client-side code + +### AI Agent Security +- AI actions require user confirmation before execution +- AI cannot modify privacy rules without explicit approval +- AI-generated code is reviewed before deployment +- Rate limiting prevents AI abuse + +## Scope + +### In Scope +- Plugin system and sandboxing +- Data privacy rules enforcement +- AI Agent action boundaries +- API connector security +- PiDCTP integration correctness + +### Out of Scope +- Pi Network core protocol (report to Pi team) +- Pi Browser vulnerabilities (report to Pi team) +- Third-party API security (report upstream) diff --git a/pirc4/assets/preview.png b/pirc4/assets/preview.png new file mode 100644 index 000000000..85d523456 Binary files /dev/null and b/pirc4/assets/preview.png differ diff --git a/pirc4/docs/1-components.md b/pirc4/docs/1-components.md new file mode 100644 index 000000000..0c62eb059 --- /dev/null +++ b/pirc4/docs/1-components.md @@ -0,0 +1,267 @@ +# Pi Visual Builder β€” Component Specification + +## Layout Components + +### `` +Vertical layout container. +```tsx + + Title + Description + +``` +| Prop | Type | Default | Description | +|------|------|---------|-------------| +| gap | number | 0 | Spacing between children (px) | +| padding | number | 0 | Inner padding | +| align | "start" \| "center" \| "end" | "start" | Horizontal alignment | +| crossAlign | "start" \| "center" \| "end" | "stretch" | Vertical alignment | +| scrollable | boolean | false | Enable vertical scroll | + +### `` +Horizontal layout container. +```tsx + + + + {product.name} + {product.price} Pi + + + +``` + +### `` +Responsive grid layout. +```tsx + + + + + + +``` + +### `` +Scrollable container with pull-to-refresh. +```tsx + + {items.map(item => )} + +``` + +### `` +Tab navigation container. +```tsx + + + + + +``` + +## Display Components + +### `` +Styled text with Pi Design System typography. +```tsx +Welcome, Pioneer! +Browse trusted merchants +Payment failed +``` +| Style | Size | Weight | +|-------|------|--------| +| display | 32px | Bold | +| headline | 24px | SemiBold | +| title | 20px | SemiBold | +| subtitle | 16px | Medium | +| body | 14px | Regular | +| caption | 12px | Regular | +| overline | 10px | Medium | + +### `` +Image with placeholder and error states. +```tsx + +``` + +### `` +Content container with elevation and radius. +```tsx + + {merchant.name} + + +``` + +### `` +User avatar with online indicator. +```tsx + +``` + +### `` +Status badge (reputation tier, verification level). +```tsx +Gold Seller +Verified Merchant +``` + +### `` +Data visualization (bar, line, pie). +```tsx + +``` + +## Input Components + +### `` +Text input with validation. +```tsx + +``` + +### `` +Action button with variants. +```tsx +Buy Now β€” 10 Pi +Cancel +Open Dispute +Skip +``` + +### `` / `` / `` +Standard input controls. + +## Navigation Components + +### `` +Top navigation bar. +```tsx + +``` + +### `` +Modal bottom sheet. +```tsx + + + +``` + +### `` +Side navigation drawer. +```tsx + + + + {pioneer.name} + + Settings + + +``` + +## Pi-Specific Components + +### `` +One-tap Pi payment button with escrow option. +```tsx + +``` +| Prop | Type | Default | Description | +|------|------|---------|-------------| +| amount | number | required | Payment amount in Pi | +| recipient | Address | required | Seller address | +| escrow | boolean | false | Use PiDCTP escrow protection | +| milestone | boolean | false | Use milestone escrow | +| onSuccess | function | β€” | Called on successful payment | +| onError | function | β€” | Called on payment failure | + +### `` +Pioneer profile card with reputation. +```tsx + +``` + +### `` +Escrow transaction status tracker. +```tsx + +``` + +### `` +Reputation tier visual indicator. +```tsx + +``` +| Tier | Color | Icon | +|------|-------|------| +| Bronze | #CD7F32 | shield | +| Silver | #C0C0C0 | shield | +| Gold | #FFD700 | star | +| Platinum | #E5E4E2 | diamond | +| Diamond | #B9F2FF | diamond | + +### `` +Merchant verification card. +```tsx + +``` + +## Theme System + +### Pi Design Tokens +```json +{ + "colors": { + "primary": "#6B46F5", + "secondary": "#9F7AEA", + "success": "#48BB78", + "warning": "#ECC94B", + "error": "#F56565", + "background": "#FFFFFF", + "surface": "#F7FAFC", + "text": "#1A202C", + "textSecondary": "#718096" + }, + "spacing": { "xs": 4, "sm": 8, "md": 12, "lg": 16, "xl": 24, "2xl": 32 }, + "radius": { "sm": 4, "md": 8, "lg": 12, "xl": 16, "full": 9999 }, + "elevation": { "none": 0, "sm": 1, "md": 2, "lg": 4 } +} +``` diff --git a/pirc4/docs/2-logic-blocks.md b/pirc4/docs/2-logic-blocks.md new file mode 100644 index 000000000..d51c88d66 --- /dev/null +++ b/pirc4/docs/2-logic-blocks.md @@ -0,0 +1,196 @@ +# Pi Visual Builder β€” Logic Blocks Specification + +## Event Blocks + +### UI Events +| Block | Trigger | Properties | +|-------|---------|------------| +| `onTap` | User taps component | target, tapCount | +| `onLongPress` | Long press (500ms) | target | +| `onSwipe` | Swipe gesture | target, direction (left/right/up/down) | +| `onScroll` | Scroll event | target, position, direction | +| `onTextChange` | Text input changes | target, value | +| `onFocus` / `onBlur` | Focus events | target | +| `onSubmit` | Form submission | target, values | + +### Lifecycle Events +| Block | Trigger | Properties | +|-------|---------|------------| +| `onScreenLoad` | Screen enters view | params | +| `onScreenUnload` | Screen leaves view | β€” | +| `onPullRefresh` | Pull-to-refresh triggered | β€” | +| `onTimer` | Periodic timer (ms) | interval, repeat | + +### Pi Events +| Block | Trigger | Properties | +|-------|---------|------------| +| `onPaymentSuccess` | Pi payment completed | txHash, amount | +| `onPaymentError` | Pi payment failed | error, code | +| `onEscrowStateChange` | Escrow state updated | escrowId, newState | +| `onAuthComplete` | Pioneer authenticated | address, profile | +| `onDisputeRuling` | Dispute ruling issued | disputeId, ruling | + +## Logic Blocks + +### Conditional +``` +β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” +β”‚ if/else β”‚ +β”‚ condition β”‚ +β”œβ”€β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”€β”€ +β”‚ then β”‚ else β”‚ +β””β”€β”€β”€β”€β”€β”€β”΄β”€β”€β”€β”€β”€β”€β”˜ +``` +```json +{ "type": "if", "condition": "${cart.total} > 100", "then": [...actions], "else": [...actions] } +``` + +### Loop +``` +β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” +β”‚ forEach β”‚ +β”‚ ${items} β”‚ +β”œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€ +β”‚ item body β”‚ +β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ +``` +```json +{ "type": "forEach", "collection": "${products}", "itemVar": "product", "body": [...actions] } +``` + +### Switch +```json +{ "type": "switch", "value": "${escrow.state}", "cases": { "Funded": [...], "Completed": [...], "Disputed": [...] }, "default": [...] } +``` + +### Try/Catch +```json +{ "type": "try", "body": [...actions], "catch": [{ "type": "showToast", "message": "${error.message}" }] } +``` + +## Data Blocks + +### Variables +| Block | Description | +|-------|-------------| +| `setVar` | Set variable value | +| `getVar` | Get variable value | +| `setList` | Add/remove list items | +| `getList` | Get list item by index | +| `setMap` | Set map key/value | +| `getMap` | Get map value by key | + +### API Calls +```json +{ "type": "apiCall", "method": "GET", "url": "https://api.example.com/products", "headers": {"Authorization": "Bearer ${token}"}, "onSuccess": [...actions], "onError": [...actions] } +``` + +### Local Storage +| Block | Description | +|-------|-------------| +| `storeSave` | Save key/value to Pi Browser storage | +| `storeLoad` | Load value by key | +| `storeDelete` | Delete key | + +## Navigation Blocks + +| Block | Description | +|-------|-------------| +| `navigate` | Go to screen | +| `goBack` | Return to previous screen | +| `openUrl` | Open external URL in Pi Browser | +| `showToast` | Show toast notification | +| `showAlert` | Show alert dialog | +| `closeSheet` | Close bottom sheet | + +## Pi-Specific Blocks + +### Authentication +```json +{ "type": "pi.auth", "action": "login", "onSuccess": [{ "type": "setVar", "name": "pioneer", "value": "${auth.profile}" }], "onError": [{ "type": "showToast", "message": "Login failed" }] } +``` + +### Payments +```json +{ "type": "pi.pay", "amount": "${product.price}", "recipient": "${seller}", "escrow": true, "onSuccess": [{ "type": "navigate", "screen": "receipt" }], "onError": [{ "type": "showToast", "message": "Payment failed" }] } +``` + +### Escrow (PiDCTP) +```json +{ "type": "pi.createEscrow", "buyer": "${pioneer}", "seller": "${merchant}", "amount": "${total}", "token": "PI", "deliveryDeadline": "${deadline}", "onSuccess": [{ "type": "setVar", "name": "escrowId", "value": "${result.escrowId}" }] } +``` + +```json +{ "type": "pi.confirmReceipt", "escrowId": "${escrowId}", "onSuccess": [{ "type": "showToast", "message": "Receipt confirmed!" }] } +``` + +### Milestone Escrow +```json +{ "type": "pi.createMilestoneEscrow", "buyer": "${pioneer}", "seller": "${merchant}", "totalAmount": "${total}", "milestones": [ { "amount": 30, "description": "Design phase" }, { "amount": 40, "description": "Development phase" }, { "amount": 30, "description": "Delivery phase" } ] } +``` + +### Reputation +```json +{ "type": "pi.getReputation", "address": "${seller}", "onSuccess": [{ "type": "setVar", "name": "sellerRep", "value": "${result}" }] } +``` + +### Dispute +```json +{ "type": "pi.openDispute", "escrowId": "${escrowId}", "category": "NotAsDescribed", "evidence": "${evidenceHash}", "onSuccess": [{ "type": "navigate", "screen": "dispute_status" }] } +``` + +### Merchant +```json +{ "type": "pi.verifyMerchant", "address": "${merchant}", "onSuccess": [{ "type": "setVar", "name": "isVerified", "value": "${result.verified}" }] } +``` + +### Loyalty +```json +{ "type": "pi.earnLoyalty", "pioneer": "${pioneer}", "action": "escrow_complete", "amount": 15 } +``` + +### Subscription (PiRC2) +```json +{ "type": "pi.subscribe", "planId": "${plan.id}", "onSuccess": [{ "type": "showToast", "message": "Subscribed!" }] } +``` + +## Full Example: E-Commerce App Logic + +```json +{ + "screen": "product_detail", + "events": [ + { + "trigger": "onScreenLoad", + "actions": [ + { "type": "pi.getReputation", "address": "${product.seller}", "onSuccess": [{ "type": "setVar", "name": "sellerRep", "value": "${result}" }] }, + { "type": "apiCall", "method": "GET", "url": "/api/products/${productId}", "onSuccess": [{ "type": "setVar", "name": "product", "value": "${result}" }] } + ] + }, + { + "trigger": "onTap", + "target": "buyButton", + "actions": [ + { "type": "if", "condition": "${sellerRep.score} >= 200", "then": [ + { "type": "pi.createEscrow", "buyer": "${pioneer}", "seller": "${product.seller}", "amount": "${product.price}", "onSuccess": [ + { "type": "showToast", "message": "Escrow created! Funds protected." }, + { "type": "navigate", "screen": "escrow_status" } + ]} + ], "else": [ + { "type": "showAlert", "title": "Low Reputation", "message": "This seller has low reputation. Continue without escrow?" } + ]} + ] + }, + { + "trigger": "onTap", + "target": "disputeButton", + "actions": [ + { "type": "pi.openDispute", "escrowId": "${escrowId}", "category": "NotAsDescribed", "evidence": "${screenshotHash}", "onSuccess": [ + { "type": "showToast", "message": "Dispute opened. Jurors will review." }, + { "type": "navigate", "screen": "dispute_status" } + ]} + ] + } + ] +} +``` diff --git a/pirc4/docs/3-code-generation.md b/pirc4/docs/3-code-generation.md new file mode 100644 index 000000000..1716a3730 --- /dev/null +++ b/pirc4/docs/3-code-generation.md @@ -0,0 +1,276 @@ +# Pi Visual Builder β€” Code Generation Specification + +## React/TypeScript Output + +### Generated App Structure +``` +dist/pibrowser/ +β”œβ”€β”€ index.html # Pi Browser entry point +β”œβ”€β”€ manifest.json # Pi app metadata +β”œβ”€β”€ assets/ +β”‚ β”œβ”€β”€ index.js # Bundled React app (Vite) +β”‚ β”œβ”€β”€ index.css # Compiled styles +β”‚ └── images/ +└── pi-sdk/ + └── pi.js # Pi SDK bundle +``` + +### Screen Generation Example + +**Visual Design β†’ React/TS Code:** + +```tsx +// screens/ProductDetail.tsx +import React, { useState, useEffect } from 'react'; +import { PiColumn, PiRow, PiText, PiImage, PiCard, PiPayButton, ReputationBadge, EscrowStatus } from '@pi/components'; +import { usePiAuth, usePiPayment, usePiReputation } from '@pi/sdk'; + +interface ProductDetailProps { + productId: string; +} + +export const ProductDetail: React.FC = ({ productId }) => { + const [product, setProduct] = useState(null); + const [escrowId, setEscrowId] = useState(null); + const { pioneer } = usePiAuth(); + const { createEscrow } = usePiPayment(); + const { getReputation } = usePiReputation(); + const [sellerRep, setSellerRep] = useState(null); + + useEffect(() => { + // Generated from onScreenLoad logic block + fetch(`/api/products/${productId}`) + .then(res => res.json()) + .then(data => { + setProduct(data); + getReputation(data.seller).then(setSellerRep); + }); + }, [productId]); + + const handleBuy = async () => { + // Generated from onTap β†’ pi.createEscrow logic block + if (sellerRep && sellerRep.score >= 200) { + const result = await createEscrow({ + buyer: pioneer.address, + seller: product.seller, + amount: product.price, + token: 'PI', + }); + setEscrowId(result.escrowId); + } + }; + + if (!product) return Loading...; + + return ( + + + + + {product.name} + {product.price} Pi + + {sellerRep && } + + + {product.description} + + + {escrowId && } + + ); +}; +``` + +### HTML/CSS Mode Output + +For simple pages, the builder generates pure HTML/CSS: + +```html + + + + + + My Pi Shop + + + + +
+

Welcome, Pioneer!

+

Browse trusted merchants on Pi Network

+ +
+ + +``` + +```css +/* styles.css β€” Pi Design System */ +:root { + --pi-primary: #6B46F5; + --pi-secondary: #9F7AEA; + --pi-success: #48BB78; + --pi-error: #F56565; + --pi-bg: #FFFFFF; + --pi-surface: #F7FAFC; + --pi-text: #1A202C; + --pi-text-secondary: #718096; + --pi-radius: 8px; + --pi-spacing: 16px; +} + +.pi-column { display: flex; flex-direction: column; } +.pi-row { display: flex; flex-direction: row; align-items: center; } +.pi-headline { font-size: 24px; font-weight: 600; color: var(--pi-text); } +.pi-body { font-size: 14px; color: var(--pi-text-secondary); } +.pi-button { + padding: 12px 24px; border-radius: var(--pi-radius); border: none; + font-weight: 600; cursor: pointer; transition: all 0.2s; +} +.pi-button--primary { background: var(--pi-primary); color: white; } +.pi-button--primary:active { transform: scale(0.97); } +``` + +## Pi SDK (`@pi/sdk`) + +### Authentication +```tsx +import { usePiAuth } from '@pi/sdk'; + +const { pioneer, login, logout, isAuthenticated } = usePiAuth(); +// pioneer.address, pioneer.name, pioneer.avatar +``` + +### Payments +```tsx +import { usePiPayment } from '@pi/sdk'; + +const { pay, createEscrow, confirmReceipt } = usePiPayment(); + +// Direct payment +await pay({ amount: 10, recipient: sellerAddress }); + +// Escrow payment (PiDCTP) +const escrow = await createEscrow({ + buyer: pioneer.address, + seller: sellerAddress, + amount: 100, + token: 'PI', + deliveryDeadline: Date.now() + 86400000, +}); + +// Confirm receipt +await confirmReceipt({ escrowId: escrow.escrowId }); +``` + +### Reputation +```tsx +import { usePiReputation } from '@pi/sdk'; + +const { getReputation, getEffectiveScore, awardBadge } = usePiReputation(); + +const rep = await getReputation(sellerAddress); +// rep.score, rep.tier, rep.badgeCount, rep.isVerifiedMerchant + +const effective = await getEffectiveScore(sellerAddress); +// Adjusted for Sybil score +``` + +### Dispute +```tsx +import { usePiDispute } from '@pi/sdk'; + +const { openDispute, submitEvidence } = usePiDispute(); + +await openDispute({ + escrowId: '123', + category: 'NotAsDescribed', + evidence: evidenceHash, +}); +``` + +### Merchant +```tsx +import { usePiMerchant } from '@pi/sdk'; + +const { verifyMerchant, getMerchantProfile } = usePiMerchant(); + +const merchant = await getMerchantProfile(address); +// merchant.level, merchant.status, merchant.category, merchant.avgRating +``` + +### Loyalty +```tsx +import { usePiLoyalty } from '@pi/sdk'; + +const { earnPoints, getProfile } = usePiLoyalty(); + +await earnPoints({ pioneer: pioneer.address, action: 'escrow_complete', amount: 15 }); +const loyalty = await getProfile(pioneer.address); +// loyalty.points, loyalty.tier, loyalty.redeemablePoints +``` + +## Build Pipeline + +``` +Visual Design (.ui.json + .logic.json) + β”‚ + β–Ό + AST Generator + β”‚ + β”œβ”€β”€β–Ί React/TS Code (.tsx + .ts) + β”‚ β”‚ + β”‚ β–Ό + β”‚ Vite Bundler + β”‚ β”‚ + β”‚ β–Ό + β”‚ Pi Browser Package (dist/) + β”‚ + └──► HTML/CSS Code (.html + .css) + β”‚ + β–Ό + Pi Browser Package (dist/) +``` + +### Vite Configuration +```ts +// vite.config.ts β€” Auto-generated +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; + +export default defineConfig({ + plugins: [react()], + build: { + outDir: 'dist/pibrowser', + target: 'es2020', + minify: true, + }, + define: { + 'process.env.PI_NETWORK': '"mainnet"', + }, +}); +``` + +### Pi Browser Manifest +```json +{ + "name": "My Pi Shop", + "version": "1.0.0", + "author": "pioneer_address", + "description": "Trusted commerce on Pi Network", + "permissions": ["pi.auth", "pi.pay", "pi.escrow", "pi.reputation"], + "entry": "index.html", + "icon": "assets/icon.png", + "category": "commerce", + "minPiBrowserVersion": "2.0" +} +``` diff --git a/pirc4/docs/4-marketplace.md b/pirc4/docs/4-marketplace.md new file mode 100644 index 000000000..64b51924b --- /dev/null +++ b/pirc4/docs/4-marketplace.md @@ -0,0 +1,194 @@ +# Pi Visual Builder β€” Component Marketplace + +## Overview + +The Component Marketplace enables Pioneers to publish, discover, and monetize custom visual components for Pi Visual Builder. + +## Component Lifecycle + +``` +Create β†’ Test β†’ Publish β†’ Discover β†’ Install β†’ Use β†’ Rate β†’ Update +``` + +## Publishing a Component + +### Component Package Format +``` +my-component/ +β”œβ”€β”€ component.json # Metadata & props definition +β”œβ”€β”€ ui.json # Visual layout template +β”œβ”€β”€ logic.json # Default logic blocks +β”œβ”€β”€ styles.css # Component styles +β”œβ”€β”€ preview.png # 320x180 preview image +β”œβ”€β”€ README.md # Usage documentation +└── tests/ + └── basic.test.json # Visual regression test +``` + +### component.json +```json +{ + "name": "ProductCard", + "version": "1.2.0", + "author": "pioneer:GBCX...XYZ", + "description": "E-commerce product card with Pi payment integration", + "category": "commerce", + "tags": ["product", "card", "payment", "escrow"], + "piVersion": ">=0.1", + "props": { + "title": { "type": "string", "required": true, "default": "" }, + "price": { "type": "number", "required": true, "default": 0 }, + "image": { "type": "uri", "required": false }, + "seller": { "type": "address", "required": true }, + "showReputation": { "type": "boolean", "default": true }, + "escrowEnabled": { "type": "boolean", "default": true }, + "onBuy": { "type": "event" }, + "onDetail": { "type": "event" } + }, + "dependencies": { + "@pi/components": ">=1.0.0" + }, + "license": "MIT", + "price": 0, + "verified": false +} +``` + +## Categories + +| Category | Description | Examples | +|----------|-------------|----------| +| **commerce** | Buying & selling | ProductCard, CartView, OrderTracker | +| **social** | Social features | CommentThread, FollowButton, ShareSheet | +| **finance** | Payments & tracking | PiWalletCard, TransactionList, EscrowTracker | +| **content** | Media & information | ArticleView, VideoPlayer, PodcastPlayer | +| **games** | Gaming | Leaderboard, ScoreCard, AchievementBadge | +| **utility** | Tools & helpers | QrScanner, Calculator, TimerWidget | +| **navigation** | App navigation | SideMenu, TabBar, BreadcrumbNav | +| **data** | Data display | DataTable, ChartWidget, StatCard | + +## Monetization + +### Pricing Models +| Model | Price | Description | +|-------|-------|-------------| +| **Free** | 0 Pi | Open-source, community contribution | +| **One-time** | 1-100 Pi | Single purchase, lifetime updates | +| **Subscription** | 0.5-10 Pi/month | Monthly access with premium support | +| **Freemium** | Free + Premium | Basic free, advanced features paid | + +### Revenue Split +| Party | Percentage | +|-------|-----------| +| Component Author | 85% | +| Pi Network (platform fee) | 10% | +| Pi Visual Builder (maintenance) | 5% | + +### Payment Flow +``` +Pioneer clicks "Install" + β†’ Pi.pay({ amount: component.price, recipient: marketplace }) + β†’ Component unlocked in builder + β†’ Revenue split executed automatically + β†’ Component appears in palette +``` + +## Verification System + +### Pi-Verified Badge +Components can receive a **Pi-Verified** badge after review: + +| Criteria | Requirement | +|----------|------------| +| Security | No malicious code, no data exfiltration | +| Performance | Renders in <100ms, <50KB bundle | +| Compatibility | Works with current Pi Browser version | +| Documentation | Complete README with examples | +| Tests | At least 1 visual regression test | + +### Verification Process +1. Author submits verification request (free) +2. Pi team reviews code & behavior +3. Component tested on Pi Browser +4. Badge awarded or feedback provided +5. Re-verification required on major updates + +## Discovery + +### Search & Filter +``` +Search: "product card" +Filters: category=commerce, verified=true, price=free, rating>=4 +Sort: popular | newest | highest-rated +``` + +### Rankings +| Signal | Weight | +|--------|--------| +| Install count | 40% | +| Average rating | 30% | +| Verification status | 15% | +| Update recency | 10% | +| Author reputation | 5% | + +### Featured Components +Curated by Pi team, rotated weekly. Featured components get: +- Homepage placement +- Pi social media promotion +- 2x visibility in search + +## Rating System + +```json +{ + "rating": 4.5, + "count": 128, + "breakdown": { + "5_star": 72, + "4_star": 38, + "3_star": 12, + "2_star": 4, + "1_star": 2 + }, + "reviews": [ + { + "pioneer": "GBCX...ABC", + "stars": 5, + "comment": "Perfect for my Pi shop! Escrow integration works great.", + "date": "2026-04-15" + } + ] +} +``` + +## Version Management + +### Semantic Versioning +- **Major** (1.x.x): Breaking prop changes +- **Minor** (x.1.x): New props, backward compatible +- **Patch** (x.x.1): Bug fixes, no new props + +### Update Flow +``` +Author publishes v1.2.0 + β†’ Existing users notified: "Update available" + β†’ User clicks "Update" + β†’ Changelog displayed + β†’ Props migration auto-applied + β†’ Component updated in builder +``` + +## Security + +### Code Review +- All published components scanned for: + - External network requests (blocked unless whitelisted) + - Local storage access (sandboxed per component) + - Pi SDK misuse (only declared permissions) + - Obfuscated code (rejected) + +### Sandboxing +- Components run in isolated scope +- Cannot access other component state +- Pi SDK calls require explicit permission in manifest +- No direct DOM manipulation (use framework APIs only) diff --git a/pirc4/docs/5-examples.md b/pirc4/docs/5-examples.md new file mode 100644 index 000000000..ff244ee10 --- /dev/null +++ b/pirc4/docs/5-examples.md @@ -0,0 +1,213 @@ +# Pi Visual Builder β€” Example Apps + +## Example 1: Pi Marketplace (E-Commerce) + +A full marketplace app with escrow protection and merchant reputation. + +### Screens +1. **Home** β€” Featured products, categories, search +2. **Product Detail** β€” Images, price, seller reputation, buy button +3. **Cart** β€” Items list, total, checkout with escrow +4. **Orders** β€” Active escrows, completed purchases +5. **Escrow Status** β€” Milestone tracker, confirm receipt, dispute +6. **Seller Dashboard** β€” My products, sales, reputation score + +### Key Logic Blocks +``` +onTap(buyButton) β†’ + if(sellerRep.score >= 200) β†’ + pi.createEscrow(buyer, seller, amount) β†’ + showToast("Escrow created! Funds protected.") β†’ + navigate(escrow_status) + else β†’ + showAlert("Low Reputation", "Seller has low reputation. Continue?") + +onTap(confirmReceipt) β†’ + pi.confirmReceipt(escrowId) β†’ + pi.earnLoyalty(pioneer, "escrow_complete", 15) β†’ + showToast("Confirmed! +15 loyalty points") β†’ + navigate(orders) + +onTap(disputeButton) β†’ + pi.openDispute(escrowId, "NotAsDescribed", evidence) β†’ + showToast("Dispute opened. Jurors will review.") β†’ + navigate(dispute_status) +``` + +### Generated React Code +```tsx +import { PiColumn, PiRow, PiText, PiImage, PiCard, PiPayButton, ReputationBadge, EscrowStatus } from '@pi/components'; +import { usePiAuth, usePiPayment, usePiReputation, usePiLoyalty } from '@pi/sdk'; + +export const ProductDetail = ({ productId }: { productId: string }) => { + const { pioneer } = usePiAuth(); + const { createEscrow, confirmReceipt } = usePiPayment(); + const { getReputation } = usePiReputation(); + const { earnPoints } = usePiLoyalty(); + const [product, setProduct] = useState(null); + const [sellerRep, setSellerRep] = useState(null); + const [escrowId, setEscrowId] = useState(null); + + const handleBuy = async () => { + if (sellerRep?.score >= 200) { + const result = await createEscrow({ + buyer: pioneer.address, seller: product.seller, amount: product.price, + }); + setEscrowId(result.escrowId); + } + }; + + return ( + + + + + {product.name} + {product.price} Pi + + + + + {escrowId && } + + ); +}; +``` + +--- + +## Example 2: Pi Services Hub + +A platform for booking services (freelance, tutoring, consulting) with milestone escrow. + +### Screens +1. **Home** β€” Service categories, top-rated providers +2. **Service Detail** β€” Provider profile, reputation, booking form +3. **Booking** β€” Milestone escrow creation (design β†’ develop β†’ deliver) +4. **Progress** β€” Milestone tracker with submit/confirm flow +5. **Reviews** β€” Provider reviews and attestations + +### Key Logic Blocks +``` +onTap(bookService) β†’ + pi.createMilestoneEscrow(buyer, provider, total, [ + { amount: 30%, description: "Design phase" }, + { amount: 40%, description: "Development phase" }, + { amount: 30%, description: "Delivery & review" } + ]) β†’ + navigate(progress) + +onTap(submitMilestone) β†’ + pi.submitMilestone(escrowId, milestoneId) β†’ + showToast("Milestone submitted! Awaiting buyer confirmation.") + +onTap(confirmMilestone) β†’ + pi.confirmMilestone(escrowId, milestoneId) β†’ + pi.earnLoyalty(pioneer, "milestone_confirm", 10) β†’ + if(allMilestonesComplete) β†’ + showToast("Project complete! All milestones released.") +``` + +--- + +## Example 3: Pi Community Board + +A community forum with reputation-gated posting and Sybil-resistant voting. + +### Screens +1. **Feed** β€” Posts sorted by reputation-weighted votes +2. **Post Detail** β€” Content, comments, vote buttons +3. **New Post** β€” Create post (min Silver reputation required) +4. **Profile** β€” User reputation, badges, attestation score + +### Key Logic Blocks +``` +onTap(upvote) β†’ + if(pioneer.sybilScore < 3000) β†’ + apiCall("POST", "/api/vote", { post, weight: tierWeight(pioneer.tier) }) + else β†’ + showToast("Vote not counted: Sybil score too high") + +onTap(newPost) β†’ + if(pioneer.tier != "Bronze") β†’ + navigate(new_post_form) + else β†’ + showAlert("Min Silver Required", "You need Silver reputation to post.") + +onTap(attestUser) β†’ + if(pioneer.tier != "Bronze") β†’ + pi.createAttestation(attester, attested, "CommunityVouch") + else β†’ + showToast("Min Silver tier to attest other Pioneers") +``` + +--- + +## Example 4: Pi Loyalty Rewards Store + +A rewards store where Pioneers redeem loyalty points for perks. + +### Screens +1. **Rewards Catalog** β€” Available rewards by tier +2. **My Points** β€” Current points, tier, streak +3. **Redeem** β€” Confirm redemption, points deducted +4. **History** β€” Earned/spent points log + +### Key Logic Blocks +``` +onScreenLoad β†’ + pi.getLoyaltyProfile(pioneer) β†’ + setVar("points", result.redeemablePoints) β†’ + setVar("tier", result.tier) + +onTap(redeemReward) β†’ + if(points >= reward.cost) β†’ + pi.redeemReward(pioneer, reward.type, reward.cost) β†’ + showToast("Reward redeemed! Enjoy your perk.") + else β†’ + showToast("Not enough points. Keep earning!") +``` + +--- + +## Example 5: Simple Pi Landing Page (HTML Mode) + +A basic landing page using HTML/CSS mode β€” no React needed. + +### HTML Output +```html + + + + + + Pi Coffee Shop + + + + +
+

β˜• Pi Coffee

+
+
+ Fresh coffee +

Fresh roasted, Pi-powered

+

Order specialty coffee with Pi. Escrow-protected delivery.

+
+
+

Ethiopian Single

+

5 Pi / bag

+ +
+
+

Colombian Blend

+

4 Pi / bag

+ +
+
+
+ + +``` + +This demonstrates the **HTML mode** for simple pages β€” no build step, no React, just HTML + CSS + Pi SDK. diff --git a/pirc4/docs/6-editor-ui-layout.md b/pirc4/docs/6-editor-ui-layout.md new file mode 100644 index 000000000..10d967b4f --- /dev/null +++ b/pirc4/docs/6-editor-ui-layout.md @@ -0,0 +1,373 @@ +# Pi Visual Builder β€” Editor UI Layout + +## Editor Overview + +The Pi Visual Builder editor provides a professional, intuitive layout adapted for the Pi Browser environment. + +``` +β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” +β”‚ [Pi Logo] My Pi Shop β–Ύ β”‚ Design β”‚ Workflow β”‚ Data β”‚ Styles β”‚ Plugins β”‚ πŸ€– AI β”‚ +β”œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”€β”€β”€β”€ +β”‚ β”‚ β”‚ β”‚ +β”‚ ELEMENTS β”‚ β”‚ PROPS β”‚ +β”‚ TREE β”‚ CANVAS β”‚ EDITOR β”‚ +β”‚ β”‚ (WYSIWYG Preview) β”‚ β”‚ +β”‚ β–Ύ Page β”‚ β”‚ ────── β”‚ +β”‚ β–Ύ Headerβ”‚ β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” β”‚ Layout β”‚ +β”‚ Logo β”‚ β”‚ β˜• Pi Coffee Shop β”‚ β”‚ Appearanceβ”‚ +β”‚ Nav β”‚ β”‚ β”‚ β”‚ Contentβ”‚ +β”‚ β–Ύ Body β”‚ β”‚ β”Œβ”€β”€β”€β”€β”€β” β”Œβ”€β”€β”€β”€β”€β” β”‚ β”‚ Conditionalβ”‚ +β”‚ Hero β”‚ β”‚ β”‚Eth. β”‚ β”‚Col. β”‚ β”‚ β”‚ Custom β”‚ +β”‚ Grid β”‚ β”‚ β”‚ 5Pi β”‚ β”‚ 4Pi β”‚ β”‚ β”‚ β”‚ +β”‚ β–Ύ Footerβ”‚ β”‚ β””β”€β”€β”€β”€β”€β”˜ β””β”€β”€β”€β”€β”€β”˜ β”‚ β”‚ β”‚ +β”‚ Links β”‚ β”‚ β”‚ β”‚ β”‚ +β”‚ β”‚ β”‚ [πŸ›’ Order with Escrow] β”‚ β”‚ β”‚ +β”‚ β”‚ β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ β”‚ β”‚ +β”‚ β”‚ β”‚ β”‚ +β”‚ NEW + β”‚ πŸ“± Mobile πŸ“± Tablet πŸ’» Desktop β–Ά Preview β”‚ β”‚ +β”œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”΄β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”΄β”€β”€β”€β”€β”€β”€β”€β”€β”€ +β”‚ πŸ€– Pi AI Assistant: "How can I help? Type a prompt or ask me to..." β”‚ +β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ +``` + +## Top Navigation Bar + +| Button | Icon | Function | +|--------|------|----------| +| **App Name** | πŸ“± | Dropdown: switch pages, backend workflows, settings | +| **Design** | 🎨 | Switch to visual canvas editor | +| **Workflow** | ⚑ | Switch to event/action logic editor | +| **Data** | πŸ—„οΈ | Switch to database types & privacy rules | +| **Styles** | 🎭 | Switch to style variables & element styles | +| **Plugins** | 🧩 | Switch to plugin marketplace & API connector | +| **πŸ€– AI** | πŸ€– | Toggle AI Assistant panel | +| **β–Ά Preview** | β–Ά | Live preview in Pi Browser simulator | +| **πŸš€ Deploy** | πŸš€ | Publish app to Pi ecosystem | + +## Left Panel: Elements Tree + +### Structure +``` +β–Ύ index (Page) + β–Ύ Header (Group) + Logo (Image) + NavLinks (Group) + Home (Text) + Shop (Text) + Orders (Text) + Profile (Text) + CartBadge (Icon) + β–Ύ Body (Group) + HeroSection (Group) + HeroImage (Image) + HeroTitle (Text) + HeroSubtitle (Text) + ProductGrid (RepeatingGroup) + β–Ύ ProductCard (Group) + ProductImage (Image) + ProductName (Text) + ProductPrice (Text) + BuyButton (PiPayButton) + ReputationBadge (ReputationBadge) + β–Ύ Footer (Group) + Links (Group) + Copyright (Text) +``` + +### Elements Tree Buttons +| Button | Function | +|--------|----------| +| **+ New Element** | Add element to canvas (opens element picker) | +| **⬆ ⬇** | Move element up/down in hierarchy | +| **πŸ‘** | Show/hide element on canvas | +| **πŸ”’** | Lock element position | +| **πŸ“‹** | Duplicate element | +| **πŸ—‘** | Delete element | + +### Element Picker (Popup) +When clicking **+ New Element**, a categorized picker appears: + +| Category | Elements | +|----------|----------| +| **Layout** | Group (Container), Column, Row, RepeatingGroup, TabGroup, ScrollView | +| **Text** | Text, Heading, Paragraph, Link, RichText | +| **Input** | TextInput, TextArea, Dropdown, Checkbox, DatePicker, Slider, FileUpload | +| **Button** | Button, IconButton, PiPayButton, LinkButton | +| **Image** | Image, Icon, Avatar, Logo | +| **Media** | Video, Audio, Map, Chart | +| **Navigation** | NavBar, TabBar, Sidebar, BottomSheet, Modal | +| **Pi-Native** | PioneerCard, ReputationBadge, EscrowStatus, MerchantProfile, LoyaltyCard | +| **Custom** | Your custom components from marketplace | + +## Center: Canvas (WYSIWYG) + +### Canvas Toolbar +| Button | Function | +|--------|----------| +| **πŸ“± Mobile** | Preview at 375px width | +| **πŸ“± Tablet** | Preview at 768px width | +| **πŸ’» Desktop** | Preview at 1280px width | +| **πŸ” Zoom** | Zoom in/out on canvas | +| **↩ β†ͺ** | Undo / Redo | +| **πŸ“ Snap** | Toggle snap-to-grid | +| **πŸ“ Guides** | Show alignment guides | +| **β–Ά Run** | Live preview with working logic | + +### Canvas Interactions +- **Click**: Select element β†’ show Property Editor +- **Double-click**: Select element + open Property Editor focused +- **Drag**: Move element on canvas +- **Drag from panel**: Add new element from Elements Tree +- **Right-click**: Context menu (Copy, Paste, Delete, Move to front/back) +- **Ctrl+Z**: Undo +- **Ctrl+S**: Save (auto-save enabled by default) + +## Right Panel: Property Editor + +### Layout Section +| Field | Type | Description | +|-------|------|-------------| +| **Width** | px / % / fit | Element width | +| **Height** | px / % / fit | Element height | +| **Margin** | top/right/bottom/left | Outer spacing | +| **Padding** | top/right/bottom/left | Inner spacing | +| **Align** | left/center/right/stretch | Horizontal alignment within parent | +| **Float** | none/left/right | Float behavior | +| **Overflow** | visible/hidden/scroll | Content overflow handling | + +### Appearance Section +| Field | Type | Description | +|-------|------|-------------| +| **Background** | color / gradient / image | Element background | +| **Border** | width / style / color / radius | Border properties | +| **Shadow** | offset / blur / spread / color | Box shadow | +| **Opacity** | 0-100% | Element transparency | +| **Font** | family / size / weight / color | Typography | +| **Transition** | property / duration / easing | Animation on state change | + +### Content Section (Dynamic Data) +| Field | Type | Description | +|-------|------|-------------| +| **Static Text** | string | Fixed text content | +| **Dynamic Data** | πŸ“Ž button | Insert data from Data Tab (e.g., `Product's name`) | +| **Conditional** | πŸ”„ button | Show different content based on condition | + +### Conditional Tab +``` +β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” +β”‚ Condition 1: When Product's stock = 0 β”‚ +β”‚ β†’ Background: #FF0000 (Red) β”‚ +β”‚ β†’ Text: "Out of Stock" β”‚ +β”‚ β†’ Button: Hidden β”‚ +β”‚ β”‚ +β”‚ Condition 2: When Product's stock < 5 β”‚ +β”‚ β†’ Text: "Only {stock} left!" β”‚ +β”‚ β†’ Background: #FFA500 (Orange) β”‚ +β”‚ β”‚ +β”‚ [+ Add Condition] β”‚ +β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ +``` + +## πŸ€– AI Assistant Panel (Bottom Bar) + +### Layout +``` +β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” +β”‚ πŸ€– Pi AI Assistant [βœ• Close] β”‚ +β”œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€ +β”‚ β”‚ +β”‚ πŸ€– Hi! I'm your Pi AI Assistant. I can: β”‚ +β”‚ β€’ Build UI elements and pages β”‚ +β”‚ β€’ Create workflows and logic β”‚ +β”‚ β€’ Set up database schemas β”‚ +β”‚ β€’ Connect APIs and plugins β”‚ +β”‚ β€’ Fix bugs and optimize performance β”‚ +β”‚ β”‚ +β”‚ πŸ§‘ "Build a product listing page with escrow payment" β”‚ +β”‚ β”‚ +β”‚ πŸ€– I'll create that for you! Here's what I'm doing: β”‚ +β”‚ βœ… Created RepeatingGroup "ProductGrid" β”‚ +β”‚ βœ… Added ProductCard with Image, Name, Price β”‚ +β”‚ βœ… Added PiPayButton with escrow enabled β”‚ +β”‚ βœ… Created "Product" data type with fields β”‚ +β”‚ βœ… Added "When BuyButton clicked β†’ Create Escrow" workflow β”‚ +β”‚ β”‚ +β”‚ πŸ§‘ "Make it look more professional" β”‚ +β”‚ β”‚ +β”‚ πŸ€– I've updated the design: β”‚ +β”‚ βœ… Applied Pi Design System theme β”‚ +β”‚ βœ… Added card shadows and rounded corners β”‚ +β”‚ βœ… Improved spacing and typography β”‚ +β”‚ βœ… Added ReputationBadge next to each seller β”‚ +β”‚ β”‚ +β”‚ β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” β”‚ +β”‚ β”‚ Type your request here... ➀ Sendβ”‚ β”‚ +β”‚ β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ β”‚ +β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ +``` + +### AI Quick Actions +| Button | Action | +|--------|--------| +| **🎨 Build UI** | "Describe what you want to build" | +| **⚑ Add Logic** | "What should happen when..." | +| **πŸ—„οΈ Create Data** | "What data does your app need?" | +| **πŸ”— Connect API** | "What external service to connect?" | +| **πŸ› Fix Issue** | "Describe the problem you're seeing" | +| **✨ Improve Design** | "Make it look better / more professional" | + +### AI Capabilities by Tab +| Tab | What AI Can Do | +|-----|----------------| +| **Design** | Create elements, apply styles, build responsive layouts, add Pi components | +| **Workflow** | Build event-action chains, add conditional logic, create custom workflows | +| **Data** | Create data types, define fields, set up relations, configure privacy rules | +| **Styles** | Generate theme colors, create style variables, apply consistent branding | +| **Plugins** | Recommend plugins, configure API connections, set up Pi SDK integration | + +## Workflow Tab Layout + +``` +β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” +β”‚ [Pi Logo] My Pi Shop β–Ύ β”‚ Design β”‚ ⚑Workflowβ”‚ Data β”‚ ... β”‚ +β”œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€ +β”‚ β”‚ β”‚ +β”‚ EVENTS β”‚ WORKFLOW CANVAS β”‚ +β”‚ β”‚ β”‚ +β”‚ πŸ“„ Page β”‚ β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” β”‚ +β”‚ Events β”‚ β”‚ When: BuyButton is clicked β”‚ β”‚ +β”‚ β”‚ β”‚ β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” β”‚ β”‚ +β”‚ πŸ–±οΈ Elementβ”‚ β”‚ β”‚ Step 1: Show element "LoadingSpinner" β”‚ β”‚ β”‚ +β”‚ Events β”‚ β”‚ β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ β”‚ β”‚ +β”‚ β”‚ β”‚ β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” β”‚ β”‚ +β”‚ ⏰ Custom β”‚ β”‚ β”‚ Step 2: Pi β†’ Create Escrow β”‚ β”‚ β”‚ +β”‚ Workflows β”‚ β”‚ β”‚ buyer = Current Pioneer β”‚ β”‚ β”‚ +β”‚ β”‚ β”‚ β”‚ seller = Product's owner β”‚ β”‚ β”‚ +β”‚ πŸ“… Sched. β”‚ β”‚ β”‚ amount = Product's price β”‚ β”‚ β”‚ +β”‚ Workflows β”‚ β”‚ β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ β”‚ β”‚ +β”‚ β”‚ β”‚ β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” β”‚ β”‚ +β”‚ πŸ”— API β”‚ β”‚ β”‚ Step 3: Navigate to "EscrowStatus" page β”‚ β”‚ β”‚ +β”‚ Workflows β”‚ β”‚ β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ β”‚ β”‚ +β”‚ β”‚ β”‚ β”‚ β”‚ +β”‚ πŸͺ™ Pi β”‚ β”‚ [+ Add Step] β”‚ β”‚ +β”‚ Workflows β”‚ β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ β”‚ +β”‚ β”‚ β”‚ +β”‚ [+ New] β”‚ ───────────────────────────────────────────────────── β”‚ +β”‚ β”‚ πŸ€– "I need a workflow that handles expired escrows" β”‚ +β”œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”΄β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€ +β”‚ πŸ€– Pi AI: "How can I help with your workflows?" β”‚ +β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ +``` + +### Workflow Step Types +| Category | Steps Available | +|----------|----------------| +| **Element** | Show/Hide, Animate, Scroll to, Set state | +| **Data** | Create record, Update record, Delete record, Make changes to list | +| **Navigation** | Go to page, Go to page with data, Open popup, Close popup | +| **Pi Payments** | Send Pi, Create Escrow, Confirm Receipt, Create Milestone Escrow | +| **Pi Trust** | Get Reputation, Award Badge, Create Attestation, Verify Merchant | +| **Pi Dispute** | Open Dispute, Submit Evidence, Execute Ruling | +| **Pi Loyalty** | Earn Points, Redeem Reward | +| **API** | Call API, Call Pi SDK method | +| **Logic** | If/Else, Custom Event, Pause, Resume, Cancel | +| **Utility** | Set variable, Run JavaScript, Send email, Show toast | + +## Data Tab Layout + +``` +β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” +β”‚ [Pi Logo] My Pi Shop β–Ύ β”‚ Design β”‚ Workflow β”‚ πŸ—„οΈDataβ”‚ ... β”‚ +β”œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€ +β”‚ β”‚ β”‚ +β”‚ DATA β”‚ DATA TYPE: Product β”‚ +β”‚ TYPES β”‚ β”‚ +β”‚ β”‚ Fields: β”‚ +β”‚ πŸ“¦ Productβ”‚ β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” β”‚ +β”‚ πŸ“¦ Order β”‚ β”‚ Field β”‚ Type β”‚ Linked β”‚ Privacy β”‚ β”‚ +β”‚ πŸ“¦ Review β”‚ β”œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”Όβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”Όβ”€β”€β”€β”€β”€β”€β”€β”€β”Όβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€ β”‚ +β”‚ πŸ“¦ Merchantβ”‚ β”‚ name β”‚ text β”‚ β€” β”‚ Public (read) β”‚ β”‚ +β”‚ πŸ“¦ Pioneerβ”‚ β”‚ price β”‚ number β”‚ β€” β”‚ Public (read) β”‚ β”‚ +β”‚ β”‚ β”‚ image β”‚ image β”‚ β€” β”‚ Public (read) β”‚ β”‚ +β”‚ [+ New β”‚ β”‚ stock β”‚ number β”‚ β€” β”‚ Seller (write) β”‚ β”‚ +β”‚ Type] β”‚ β”‚ seller β”‚ Pioneer β”‚ πŸ”— β”‚ Public (read) β”‚ β”‚ +β”‚ β”‚ β”‚ category β”‚ option β”‚ β€” β”‚ Public (read) β”‚ β”‚ +β”‚ β”‚ β”‚ escrow β”‚ Escrow β”‚ πŸ”— β”‚ Owner (read) β”‚ β”‚ +β”‚ β”‚ β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”΄β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”΄β”€β”€β”€β”€β”€β”€β”€β”€β”΄β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ β”‚ +β”‚ β”‚ β”‚ +β”‚ β”‚ [+ Add Field] β”‚ +β”‚ β”‚ β”‚ +β”‚ β”‚ πŸ€– "I need a review system for products" β”‚ +β”œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”΄β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€ +β”‚ πŸ€– Pi AI: "I'll create a Review data type linked to Product" β”‚ +β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ +``` + +### Field Types +| Type | Icon | Description | PiDCTP Link | +|------|------|-------------|-------------| +| **text** | Aa | Short text string | β€” | +| **number** | # | Numeric value | β€” | +| **boolean** | βœ“ | True/false | β€” | +| **date** | πŸ“… | Date/time | β€” | +| **image** | πŸ–ΌοΈ | Image file | β€” | +| **address** | πŸ“ | Pi wallet address | Pioneer/Merchant | +| **option** | πŸ“‹ | Predefined choice | EscrowState, Tier, Category | +| **relation** | πŸ”— | Link to another type | Order β†’ Escrow, Product β†’ Merchant | +| **geographic** | 🌍 | Lat/lng coordinates | β€” | +| **file** | πŸ“Ž | File attachment | β€” | + +## Styles Tab Layout + +``` +β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” +β”‚ [Pi Logo] My Pi Shop β–Ύ β”‚ Design β”‚ ... β”‚ 🎭Stylesβ”‚ ... β”‚ +β”œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€ +β”‚ β”‚ β”‚ +β”‚ STYLE β”‚ STYLE VARIABLES β”‚ +β”‚ VARIABLES β”‚ β”‚ +β”‚ β”‚ 🎨 Colors β”‚ +β”‚ 🎨 Colors β”‚ β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” β”‚ +β”‚ πŸ”€ Fonts β”‚ β”‚ Variable β”‚ Value β”‚ Used By β”‚ β”‚ +β”‚ πŸ“ Spacingβ”‚ β”œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”Όβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”Όβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€ β”‚ +β”‚ πŸ“ Radius β”‚ β”‚ pi-primary β”‚ #6B46F5 β”‚ Buttons, Links β”‚ β”‚ +β”‚ β”‚ β”‚ pi-success β”‚ #48BB78 β”‚ Confirmations β”‚ β”‚ +β”‚ [+ New] β”‚ β”‚ pi-error β”‚ #F56565 β”‚ Errors, Disputes β”‚ β”‚ +β”‚ β”‚ β”‚ pi-bg β”‚ #FFFFFF β”‚ Page backgrounds β”‚ β”‚ +β”‚ β”‚ β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”΄β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”΄β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ β”‚ +β”‚ β”‚ β”‚ +β”‚ ELEMENT β”‚ πŸ”€ Fonts β”‚ +β”‚ STYLES β”‚ β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” β”‚ +β”‚ β”‚ β”‚ Variable β”‚ Value β”‚ Used By β”‚ β”‚ +β”‚ πŸ“¦ Button β”‚ β”œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”Όβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”Όβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€ β”‚ +β”‚ πŸ“¦ Card β”‚ β”‚ pi-heading β”‚ 24px/600 β”‚ Page titles β”‚ β”‚ +β”‚ πŸ“¦ Input β”‚ β”‚ pi-body β”‚ 14px/400 β”‚ Body text β”‚ β”‚ +β”‚ πŸ“¦ Badge β”‚ β”‚ pi-caption β”‚ 12px/400 β”‚ Labels, hints β”‚ β”‚ +β”‚ β”‚ β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”΄β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”΄β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ β”‚ +β”‚ [+ New] β”‚ β”‚ +β”‚ β”‚ πŸ€– "Generate a dark theme for my app" β”‚ +β”œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”΄β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€ +β”‚ πŸ€– Pi AI: "I've created dark theme variables. Apply them?" β”‚ +β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ +``` + +## Keyboard Shortcuts + +| Shortcut | Action | +|----------|--------| +| **Ctrl+Z** | Undo | +| **Ctrl+Y** | Redo | +| **Ctrl+S** | Save | +| **Ctrl+C** | Copy element | +| **Ctrl+V** | Paste element | +| **Delete** | Delete selected | +| **Ctrl+D** | Duplicate element | +| **Ctrl+G** | Group selected elements | +| **Ctrl+Shift+G** | Ungroup | +| **Ctrl+Enter** | Preview app | +| **Ctrl+/ ** | Toggle AI Assistant | +| **Ctrl+1** | Switch to Design tab | +| **Ctrl+2** | Switch to Workflow tab | +| **Ctrl+3** | Switch to Data tab | +| **Ctrl+4** | Switch to Styles tab | +| **Ctrl+5** | Switch to Plugins tab | diff --git a/pirc4/mockups/1-design-tab.html b/pirc4/mockups/1-design-tab.html new file mode 100644 index 000000000..6506a731d --- /dev/null +++ b/pirc4/mockups/1-design-tab.html @@ -0,0 +1,217 @@ + + + + + +Pi Visual Builder β€” Design Tab + + + + + +
+ + Pi Coffee β–Ύ + + + + + +
+ + +
+
+ +
+
+
Elements
+
index
+
Header
+
Logo
+
Nav
+
Cart
+
Body
+
Hero
+
Grid
+
Card
+
Img
+
Name
+
Price
+
Badge
+
Buy
+
Footer
+
New Element
+ +
+
Props β€” Grid
+
Width
+
Cols
+
Gap
+
Conditional
+
+
stock = 0
+ Buy β†’ Hidden, BG β†’ Red +
+
+
stock < 5
+ Text β†’ "Only {n} left!" +
+
+
+ +
+
+ + +
+ + + +
+
+
+
+

Pi Coffee

+ 2 +
+
+
+
+
+
+
Ethiopian
+
5 Pi
+ Gold + +
+
+
+
Colombian
+
4 Pi
+ Gold + +
+
+
+
Matcha
+
3 Pi
+ Silver + +
+
+
+
Mocha
+
4 Pi
+ Gold + +
+
+
+
+
+
+ +
+
+
+
+ Pi AI + ● Online + +
+
+
"Add a search bar above the products"
+
βœ… Created SearchBar above ProductGrid
βœ… Added filter workflow
βœ… Applied Pi Design System
+
+
+ + +
+
+ + + + diff --git a/pirc4/mockups/2-workflow-tab.html b/pirc4/mockups/2-workflow-tab.html new file mode 100644 index 000000000..3069fcad5 --- /dev/null +++ b/pirc4/mockups/2-workflow-tab.html @@ -0,0 +1,235 @@ + + + + + +Pi Visual Builder β€” Workflow Tab + + + + + +
+ + Pi Coffee β–Ύ + + + + + +
+ +
+
+ +
+
Current Event
+
+ WHEN + BuyButton clicked + +
+
+ +
+
+
+ 1 + Show Element + Element + +
+
+
+ Element + LoadingSpinner +
+
+ Action + Show +
+
+
+
+ +
+
+ 2 + Pi β†’ Create Escrow + Pi Payment + +
+
+
+ Buyer + Current Pioneer +
+
+ Seller + Product's seller +
+
+ Amount + Product's price +
+
+ Token + PI +
+
+
+
+ +
+
+ 3 + Update Record + Data + +
+
+
+ Type + Product +
+
+ Field + stock = stock - 1 +
+
+
+
+ +
+
+ 4 + Navigate + Navigation + +
+
+
+ Page + EscrowStatus +
+
+ Data + escrowId +
+
+
+ +
Add Step
+
+ +
+ + + + + + + + +
+ +
+
+
+
+ Pi AI + +
+
+
"When buy clicked, create escrow and go to status"
+
βœ… Built 4-step workflow
βœ… Linked dynamic data
βœ… Added error handling
+
+
+ + +
+
+ + + + diff --git a/pirc4/mockups/3-data-tab.html b/pirc4/mockups/3-data-tab.html new file mode 100644 index 000000000..37c78c764 --- /dev/null +++ b/pirc4/mockups/3-data-tab.html @@ -0,0 +1,274 @@ + + + + + +Pi Visual Builder β€” Data Tab + + + + + +
+ + Pi Coffee β–Ύ + + + + + +
+ +
+
+ +
+ + + + + + + + +
+ +
+
+
Product PiDCTP: Escrow
+ +
+ +
+
+ name + text +
+
+ Public read +
+
+ +
+
+ price + number +
+
+ Public read +
+
+ +
+
+ image + image +
+
+ Public read +
+
+ +
+
+ stock + number +
+
+ Seller write +
+
+ +
+
+ seller + Pioneer +
+
+ Linked + Public read +
+
+ +
+
+ category + option +
+
+ Public read +
+
+ +
+
+ escrow + Escrow +
+
+ Linked + Owner read + Escrow.state +
+
+ +
+
+ reputation + address +
+
+ Public read + Rep.score +
+
+ +
+
Relations
+
+ Product + 1:N + Order +
+
+ Product + N:1 + Pioneer +
+
+ Order + 1:1 + Escrow +
+
+ +
+
Privacy Rules
+
+
Everyone
+
+ βœ“ Read: name, price, image, category
+ βœ— Write: all fields +
+
+
+
Seller (Owner)
+
+ βœ“ Read: all fields
+ βœ“ Write: stock, image, price +
+
+
+
PiDCTP Contract
+
+ βœ“ Write: escrow (state only) +
+
+
+
+ +
+
+
+
+ Pi AI + +
+
+
"I need a review system for products"
+
βœ… Created "Review" data type
βœ… Added relation: Product β†’ 1:N β†’ Review
βœ… Set privacy: Only author can write
+
+
+ + +
+
+ + + + diff --git a/pirc4/mockups/4-styles-tab.html b/pirc4/mockups/4-styles-tab.html new file mode 100644 index 000000000..4b52459a3 --- /dev/null +++ b/pirc4/mockups/4-styles-tab.html @@ -0,0 +1,288 @@ + + + + + +Pi Visual Builder β€” Styles Tab + + + + + +
+ + Pi Coffee β–Ύ + + + + + +
+ +
+
+ +
+
+
Style Variables
+ +
+ + +
+
Colors
+
+
+ pi-primary +
+
+
+ +
+
Used by: Buttons, Links, Active tabs
+
+
+
+ pi-success +
+
+
+ +
+
Used by: Confirmations, Verified badges
+
+
+
+ pi-error +
+
+
+ +
+
Used by: Errors, Disputes, Alerts
+
+
+
+ pi-warning +
+
+
+ +
+
Used by: PiDCTP links, Warnings
+
+
+
+ pi-bg +
+
+
+ +
+
Used by: Page backgrounds, Cards
+
+
+ + +
+
Fonts
+
+
+ pi-heading +
+
+ +
+
Pi Coffee Shop
+
Used by: Page titles, Hero text
+
+
+
+ pi-body +
+
+ +
+
Fresh roasted, Pi-powered coffee
+
Used by: Body text, Descriptions
+
+
+
+ pi-caption +
+
+ +
+
5 Pi per bag Β· Escrow protected
+
Used by: Labels, Hints, Captions
+
+
+ + +
+
+
Element Styles
+ +
+
+
+ Button-primary + base: button +
+
+ pi-primary + 14px/600 + 8px radius + 8px 16px +
+
+
+
+ Button-outline + base: button +
+
+ pi-primary border + 14px/600 + 8px radius +
+
+
+
+ Card-default + base: group +
+
+ #f7f7fc + 10px radius + 10px + shadow-sm +
+
+
+
+ Badge-gold + base: text +
+
+ #FFD700 + 9px/600 + 4px radius +
+
+
+ + +
+
Live Preview
+
+
Pi Coffee Shop
+
Fresh roasted, Pi-powered coffee with escrow protection.
+ + +

+ Gold Seller + Silver +
+
+
+ +
+
+
+
+ Pi AI + +
+
+
"Generate a dark theme for my app"
+
βœ… Created dark theme variables
βœ… pi-bg β†’ #1a1a2e, pi-text β†’ #e0e0e0
βœ… Updated Card-default to dark surface
βœ… Preview updated β€” Apply changes?
+
+
+ + +
+
+ + + +