freesail 0.0.1 → 0.1.0

package/packages/lit-ui/src/catalogs/standard/catalog.json

@@ -0,0 +1,405 @@
+{
+  "id": "standard_catalog_v1",
+  "version": "1.0.0",
+  "name": "Freesail Standard Catalog",
+  "description": "Standard A2UI components for cross-compatible generative UI",
+  "components": {
+    "Column": {
+      "description": "A vertical flex container that stacks children vertically",
+      "properties": {
+        "gap": {
+          "type": "string",
+          "description": "Gap between child elements (CSS value)",
+          "default": "8px"
+        },
+        "align": {
+          "type": "string",
+          "description": "Alignment of children (start, center, end, stretch)",
+          "default": "stretch",
+          "enum": ["start", "center", "end", "stretch"]
+        },
+        "justify": {
+          "type": "string", 
+          "description": "Justification of children (start, center, end, between, around)",
+          "default": "start",
+          "enum": ["start", "center", "end", "between", "around"]
+        },
+        "padding": {
+          "type": "string",
+          "description": "Padding inside the column (CSS value)",
+          "default": "0"
+        }
+      }
+    },
+    "Row": {
+      "description": "A horizontal flex container that arranges children horizontally",
+      "properties": {
+        "gap": {
+          "type": "string",
+          "description": "Gap between child elements (CSS value)",
+          "default": "8px"
+        },
+        "align": {
+          "type": "string",
+          "description": "Alignment of children (start, center, end, stretch)",
+          "default": "center",
+          "enum": ["start", "center", "end", "stretch"]
+        },
+        "justify": {
+          "type": "string",
+          "description": "Justification of children (start, center, end, between, around)",
+          "default": "start",
+          "enum": ["start", "center", "end", "between", "around"]
+        },
+        "wrap": {
+          "type": "boolean",
+          "description": "Whether children should wrap to next line",
+          "default": false
+        },
+        "padding": {
+          "type": "string",
+          "description": "Padding inside the row (CSS value)",
+          "default": "0"
+        }
+      }
+    },
+    "Text": {
+      "description": "A text display component",
+      "properties": {
+        "text": {
+          "type": "string",
+          "description": "The text content to display",
+          "default": ""
+        },
+        "variant": {
+          "type": "string",
+          "description": "Text style variant",
+          "default": "body",
+          "enum": ["h1", "h2", "h3", "h4", "h5", "h6", "body", "caption", "overline"]
+        },
+        "color": {
+          "type": "string",
+          "description": "Text color (CSS value)",
+          "default": "inherit"
+        },
+        "weight": {
+          "type": "string",
+          "description": "Font weight",
+          "default": "normal",
+          "enum": ["light", "normal", "medium", "semibold", "bold"]
+        },
+        "align": {
+          "type": "string",
+          "description": "Text alignment",
+          "default": "left",
+          "enum": ["left", "center", "right", "justify"]
+        }
+      },
+      "required": ["text"]
+    },
+    "Button": {
+      "description": "An interactive button component",
+      "properties": {
+        "label": {
+          "type": "string",
+          "description": "Button label text",
+          "default": "Button"
+        },
+        "variant": {
+          "type": "string",
+          "description": "Button style variant",
+          "default": "primary",
+          "enum": ["primary", "secondary", "outline", "ghost", "destructive"]
+        },
+        "size": {
+          "type": "string",
+          "description": "Button size",
+          "default": "medium",
+          "enum": ["small", "medium", "large"]
+        },
+        "disabled": {
+          "type": "boolean",
+          "description": "Whether the button is disabled",
+          "default": false
+        },
+        "action": {
+          "type": "string",
+          "description": "Action identifier sent on click"
+        },
+        "fullWidth": {
+          "type": "boolean",
+          "description": "Whether button takes full width",
+          "default": false
+        }
+      },
+      "required": ["label"],
+      "events": {
+        "click": {
+          "description": "Fired when the button is clicked"
+        }
+      }
+    },
+    "Input": {
+      "description": "A text input field",
+      "properties": {
+        "value": {
+          "type": "string",
+          "description": "Current input value",
+          "default": ""
+        },
+        "placeholder": {
+          "type": "string",
+          "description": "Placeholder text",
+          "default": ""
+        },
+        "label": {
+          "type": "string",
+          "description": "Input label"
+        },
+        "type": {
+          "type": "string",
+          "description": "Input type",
+          "default": "text",
+          "enum": ["text", "email", "password", "number", "tel", "url"]
+        },
+        "disabled": {
+          "type": "boolean",
+          "description": "Whether the input is disabled",
+          "default": false
+        },
+        "required": {
+          "type": "boolean",
+          "description": "Whether the input is required",
+          "default": false
+        },
+        "error": {
+          "type": "string",
+          "description": "Error message to display"
+        },
+        "bindPath": {
+          "type": "string",
+          "description": "JSON Pointer path for data binding"
+        }
+      },
+      "events": {
+        "change": {
+          "description": "Fired when the input value changes"
+        }
+      }
+    },
+    "Card": {
+      "description": "A card container with optional header and footer",
+      "properties": {
+        "title": {
+          "type": "string",
+          "description": "Card title"
+        },
+        "subtitle": {
+          "type": "string",
+          "description": "Card subtitle"
+        },
+        "padding": {
+          "type": "string",
+          "description": "Card padding (CSS value)",
+          "default": "16px"
+        },
+        "elevated": {
+          "type": "boolean",
+          "description": "Whether to show elevation shadow",
+          "default": true
+        }
+      }
+    },
+    "Image": {
+      "description": "An image display component",
+      "properties": {
+        "src": {
+          "type": "string",
+          "description": "Image source URL"
+        },
+        "alt": {
+          "type": "string",
+          "description": "Alternative text for accessibility",
+          "default": ""
+        },
+        "width": {
+          "type": "string",
+          "description": "Image width (CSS value)"
+        },
+        "height": {
+          "type": "string",
+          "description": "Image height (CSS value)"
+        },
+        "fit": {
+          "type": "string",
+          "description": "Object fit mode",
+          "default": "cover",
+          "enum": ["contain", "cover", "fill", "none", "scale-down"]
+        },
+        "borderRadius": {
+          "type": "string",
+          "description": "Border radius (CSS value)",
+          "default": "0"
+        }
+      },
+      "required": ["src"]
+    },
+    "Divider": {
+      "description": "A horizontal or vertical divider line",
+      "properties": {
+        "orientation": {
+          "type": "string",
+          "description": "Divider orientation",
+          "default": "horizontal",
+          "enum": ["horizontal", "vertical"]
+        },
+        "thickness": {
+          "type": "string",
+          "description": "Divider thickness (CSS value)",
+          "default": "1px"
+        },
+        "color": {
+          "type": "string",
+          "description": "Divider color (CSS value)",
+          "default": "#e0e0e0"
+        }
+      }
+    },
+    "Spacer": {
+      "description": "A flexible space component for layout",
+      "properties": {
+        "size": {
+          "type": "string",
+          "description": "Fixed size (CSS value), or 'flex' for flexible space",
+          "default": "flex"
+        }
+      }
+    },
+    "Badge": {
+      "description": "A badge/chip component for status or labels",
+      "properties": {
+        "text": {
+          "type": "string",
+          "description": "Badge text"
+        },
+        "variant": {
+          "type": "string",
+          "description": "Badge style variant",
+          "default": "default",
+          "enum": ["default", "primary", "success", "warning", "error", "info"]
+        },
+        "size": {
+          "type": "string",
+          "description": "Badge size",
+          "default": "medium",
+          "enum": ["small", "medium", "large"]
+        }
+      },
+      "required": ["text"]
+    },
+    "Checkbox": {
+      "description": "A checkbox input component",
+      "properties": {
+        "checked": {
+          "type": "boolean",
+          "description": "Whether the checkbox is checked",
+          "default": false
+        },
+        "label": {
+          "type": "string",
+          "description": "Checkbox label"
+        },
+        "disabled": {
+          "type": "boolean",
+          "description": "Whether the checkbox is disabled",
+          "default": false
+        },
+        "bindPath": {
+          "type": "string",
+          "description": "JSON Pointer path for data binding"
+        }
+      },
+      "events": {
+        "change": {
+          "description": "Fired when the checkbox state changes"
+        }
+      }
+    },
+    "Select": {
+      "description": "A dropdown select component",
+      "properties": {
+        "value": {
+          "type": "string",
+          "description": "Currently selected value"
+        },
+        "options": {
+          "type": "array",
+          "description": "Array of options [{value, label}]"
+        },
+        "placeholder": {
+          "type": "string",
+          "description": "Placeholder text",
+          "default": "Select an option"
+        },
+        "label": {
+          "type": "string",
+          "description": "Select label"
+        },
+        "disabled": {
+          "type": "boolean",
+          "description": "Whether the select is disabled",
+          "default": false
+        },
+        "bindPath": {
+          "type": "string",
+          "description": "JSON Pointer path for data binding"
+        }
+      },
+      "events": {
+        "change": {
+          "description": "Fired when selection changes"
+        }
+      }
+    },
+    "Spinner": {
+      "description": "A loading spinner component",
+      "properties": {
+        "size": {
+          "type": "string",
+          "description": "Spinner size",
+          "default": "medium",
+          "enum": ["small", "medium", "large"]
+        },
+        "color": {
+          "type": "string",
+          "description": "Spinner color (CSS value)",
+          "default": "currentColor"
+        }
+      }
+    },
+    "Progress": {
+      "description": "A progress bar component",
+      "properties": {
+        "value": {
+          "type": "number",
+          "description": "Progress value (0-100)",
+          "default": 0
+        },
+        "max": {
+          "type": "number",
+          "description": "Maximum value",
+          "default": 100
+        },
+        "showLabel": {
+          "type": "boolean",
+          "description": "Whether to show percentage label",
+          "default": false
+        },
+        "color": {
+          "type": "string",
+          "description": "Progress bar color (CSS value)"
+        }
+      }
+    }
+  }
+}

package/packages/lit-ui/src/catalogs/standard/elements/Badge.ts

@@ -0,0 +1,96 @@
+/**
+ * Badge Component
+ * 
+ * A badge/chip component for status or labels.
+ */
+
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+type BadgeVariant = 'default' | 'primary' | 'success' | 'warning' | 'error' | 'info';
+type BadgeSize = 'small' | 'medium' | 'large';
+
+@customElement('fs-badge')
+export class FreesailBadge extends LitElement {
+  static override styles = css`
+    :host {
+      display: inline-block;
+    }
+
+    .badge {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 9999px;
+      font-weight: 500;
+      white-space: nowrap;
+    }
+
+    /* Sizes */
+    .size-small {
+      padding: 2px 8px;
+      font-size: 0.75rem;
+    }
+
+    .size-medium {
+      padding: 4px 12px;
+      font-size: 0.875rem;
+    }
+
+    .size-large {
+      padding: 6px 16px;
+      font-size: 1rem;
+    }
+
+    /* Variants */
+    .variant-default {
+      background: #e5e7eb;
+      color: #374151;
+    }
+
+    .variant-primary {
+      background: #dbeafe;
+      color: #1d4ed8;
+    }
+
+    .variant-success {
+      background: #dcfce7;
+      color: #15803d;
+    }
+
+    .variant-warning {
+      background: #fef3c7;
+      color: #b45309;
+    }
+
+    .variant-error {
+      background: #fee2e2;
+      color: #b91c1c;
+    }
+
+    .variant-info {
+      background: #e0f2fe;
+      color: #0369a1;
+    }
+  `;
+
+  @property({ type: String }) text = '';
+  @property({ type: String }) variant: BadgeVariant = 'default';
+  @property({ type: String }) size: BadgeSize = 'medium';
+
+  override render() {
+    const classes = `badge variant-${this.variant} size-${this.size}`;
+
+    return html`
+      <span class=${classes}>
+        ${this.text}
+      </span>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'fs-badge': FreesailBadge;
+  }
+}

package/packages/lit-ui/src/catalogs/standard/elements/Button.ts

@@ -0,0 +1,147 @@
+/**
+ * Button Component
+ * 
+ * An interactive button component with variants.
+ */
+
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive';
+type ButtonSize = 'small' | 'medium' | 'large';
+
+@customElement('fs-button')
+export class FreesailButton extends LitElement {
+  static override styles = css`
+    :host {
+      display: inline-block;
+    }
+
+    :host([fullWidth]) {
+      display: block;
+      width: 100%;
+    }
+
+    button {
+      font-family: inherit;
+      font-weight: 500;
+      border: none;
+      border-radius: 6px;
+      cursor: pointer;
+      transition: all 0.2s ease;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+      width: 100%;
+    }
+
+    button:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    /* Sizes */
+    .size-small {
+      padding: 6px 12px;
+      font-size: 0.875rem;
+    }
+
+    .size-medium {
+      padding: 10px 20px;
+      font-size: 1rem;
+    }
+
+    .size-large {
+      padding: 14px 28px;
+      font-size: 1.125rem;
+    }
+
+    /* Variants */
+    .variant-primary {
+      background: #2563eb;
+      color: white;
+    }
+
+    .variant-primary:hover:not(:disabled) {
+      background: #1d4ed8;
+    }
+
+    .variant-secondary {
+      background: #6b7280;
+      color: white;
+    }
+
+    .variant-secondary:hover:not(:disabled) {
+      background: #4b5563;
+    }
+
+    .variant-outline {
+      background: transparent;
+      color: #2563eb;
+      border: 2px solid #2563eb;
+    }
+
+    .variant-outline:hover:not(:disabled) {
+      background: #eff6ff;
+    }
+
+    .variant-ghost {
+      background: transparent;
+      color: #374151;
+    }
+
+    .variant-ghost:hover:not(:disabled) {
+      background: #f3f4f6;
+    }
+
+    .variant-destructive {
+      background: #dc2626;
+      color: white;
+    }
+
+    .variant-destructive:hover:not(:disabled) {
+      background: #b91c1c;
+    }
+  `;
+
+  @property({ type: String }) label = 'Button';
+  @property({ type: String }) variant: ButtonVariant = 'primary';
+  @property({ type: String }) size: ButtonSize = 'medium';
+  @property({ type: Boolean }) disabled = false;
+  @property({ type: String }) action = '';
+  @property({ type: Boolean, reflect: true }) fullWidth = false;
+
+  private handleClick() {
+    if (this.disabled) return;
+
+    this.dispatchEvent(new CustomEvent('fs-action', {
+      bubbles: true,
+      composed: true,
+      detail: {
+        action: this.action || 'button_click',
+        componentId: this.id,
+      }
+    }));
+  }
+
+  override render() {
+    const classes = `variant-${this.variant} size-${this.size}`;
+
+    return html`
+      <button 
+        class=${classes}
+        ?disabled=${this.disabled}
+        @click=${this.handleClick}
+      >
+        ${this.label}
+      </button>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'fs-button': FreesailButton;
+  }
+}