juxscript 1.0.35 → 1.0.37

package/lib/components/container.ts

@@ -4,6 +4,20 @@ import { BaseComponent } from './base/BaseComponent.js';
 const TRIGGER_EVENTS = [] as const;
 const CALLBACK_EVENTS = [] as const;
 
+// Deprecation warning constant
+const DEPRECATION_WARNING = (feature: string) =>
+  `[JUX Deprecation Warning] Container.${feature} will be removed in v1.0.30+ (January 30, 2026). Please use CSS or the .style() method instead. See: https://juxscript.com/docs/migration`;
+
+// Track which warnings we've already shown (to avoid spam)
+const _shownWarnings = new Set<string>();
+
+function warnOnce(feature: string): void {
+  if (!_shownWarnings.has(feature)) {
+    console.warn(DEPRECATION_WARNING(feature));
+    _shownWarnings.add(feature);
+  }
+}
+
 export interface ContainerOptions {
   direction?: 'row' | 'column'; // should deprecate.
   gap?: number | string; // should deprecate.
@@ -28,6 +42,14 @@ type ContainerState = {
 
 export class Container extends BaseComponent<ContainerState> {
   constructor(id: string, options: ContainerOptions = {}) {
+    // Warn for deprecated options
+    if (options.direction !== undefined) warnOnce('direction (option)');
+    if (options.gap !== undefined) warnOnce('gap (option)');
+    if (options.wrap !== undefined) warnOnce('wrap (option)');
+    if (options.align !== undefined) warnOnce('align (option)');
+    if (options.justify !== undefined) warnOnce('justify (option)');
+    if (options.padding !== undefined) warnOnce('padding (option)');
+
     super(id, {
       direction: options.direction ?? 'column',// should deprecate.
       gap: options.gap ?? 0, //should deprecate.
@@ -61,31 +83,37 @@ export class Container extends BaseComponent<ContainerState> {
   // - bind(), sync(), renderTo()
 
   direction(value: 'row' | 'column'): this {
+    warnOnce('direction()');
     this.state.direction = value;
     return this;
   }
 
   gap(value: number | string): this {
+    warnOnce('gap()');
     this.state.gap = value;
     return this;
   }
 
   wrap(value: boolean): this {
+    warnOnce('wrap()');
     this.state.wrap = value;
     return this;
   }
 
   align(value: 'start' | 'center' | 'end' | 'stretch'): this {
+    warnOnce('align()');
     this.state.align = value;
     return this;
   }
 
   justify(value: 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly'): this {
+    warnOnce('justify()');
     this.state.justify = value;
     return this;
   }
 
   padding(value: string): this {
+    warnOnce('padding()');
     this.state.padding = value;
     return this;
   }
@@ -112,28 +140,34 @@ export class Container extends BaseComponent<ContainerState> {
 
       stateObj.subscribe((val: any) => {
         const transformed = transform(val);
-        /*
+
         if (property === 'direction') {
+          warnOnce('direction (sync)');
           this.state.direction = String(transformed);
           wrapper.style.flexDirection = this.state.direction;
         } else if (property === 'gap') {
+          warnOnce('gap (sync)');
           this.state.gap = transformed;
           const gapVal = typeof transformed === 'number' ? `${transformed}px` : transformed;
           wrapper.style.gap = gapVal;
         } else if (property === 'wrap') {
+          warnOnce('wrap (sync)');
           this.state.wrap = Boolean(transformed);
           wrapper.style.flexWrap = this.state.wrap ? 'wrap' : 'nowrap';
         } else if (property === 'align') {
+          warnOnce('align (sync)');
           this.state.align = String(transformed);
           wrapper.style.alignItems = this.state.align;
         } else if (property === 'justify') {
+          warnOnce('justify (sync)');
           this.state.justify = String(transformed);
           wrapper.style.justifyContent = this.state.justify;
         } else if (property === 'padding') {
+          warnOnce('padding (sync)');
           this.state.padding = String(transformed);
           wrapper.style.padding = this.state.padding;
         }
-          */
+
       });
 
     });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "juxscript",
-  "version": "1.0.35",
+  "version": "1.0.37",
   "type": "module",
   "description": "A JavaScript UX authorship platform",
   "main": "lib/jux.js",

package/presets/default/layout.css

@@ -257,4 +257,150 @@ body {
   #appfooter {
     padding: var(--space-md) var(--space-lg);
   }
+}
+
+/* ============================================
+   COMPONENT STYLES
+   ============================================ */
+
+/* Buttons */
+.jux-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 var(--space-lg);
+  height: 36px;
+  font-size: 0.875rem;
+  font-weight: 500;
+  font-family: var(--font-family-base);
+  color: #ffffff;
+  background: #0ea5e9;
+  border: none;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  transition: background-color var(--transition-base), transform 100ms ease;
+  user-select: none;
+  white-space: nowrap;
+}
+
+.jux-button:hover {
+  background: #0284c7;
+}
+
+.jux-button:active {
+  transform: scale(0.98);
+}
+
+.jux-button:focus {
+  outline: 2px solid #0ea5e9;
+  outline-offset: 2px;
+}
+
+.jux-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Button variants */
+.jux-button-secondary {
+  background: var(--color-surface-hover);
+  color: var(--color-text-primary);
+  border: var(--border-width) solid var(--color-border);
+}
+
+.jux-button-secondary:hover {
+  background: var(--color-surface-active);
+  border-color: var(--color-border-hover);
+}
+
+.jux-button-ghost {
+  background: transparent;
+  color: var(--color-text-secondary);
+}
+
+.jux-button-ghost:hover {
+  background: var(--color-surface-hover);
+}
+
+/* Button sizes */
+.jux-button-small {
+  height: 28px;
+  padding: 0 var(--space-md);
+  font-size: 0.8125rem;
+}
+
+.jux-button-large {
+  height: 44px;
+  padding: 0 var(--space-2xl);
+  font-size: 1rem;
+}
+
+/* Code blocks */
+.jux-code {
+  background: var(--color-surface-base);
+  border: var(--border-width) solid var(--color-border);
+  border-radius: var(--radius-lg);
+  padding: var(--space-lg);
+  font-family: var(--font-family-mono);
+  font-size: 0.8125rem;
+  line-height: 1.6;
+  overflow-x: auto;
+  margin: var(--space-xl) 0;
+}
+
+/* Hero */
+.jux-hero {
+  margin-bottom: var(--space-3xl);
+}
+
+.jux-hero h1 {
+  font-size: 2.5rem;
+  font-weight: 700;
+  line-height: 1.2;
+  margin-bottom: var(--space-md);
+  letter-spacing: -0.02em;
+}
+
+.jux-hero p {
+  font-size: 1.125rem;
+  color: var(--color-text-secondary);
+  line-height: 1.6;
+}
+
+/* Dividers */
+.jux-divider {
+  height: 1px;
+  background: var(--color-border);
+  border: none;
+  margin: var(--space-2xl) 0;
+}
+
+/* Headings */
+h1, h2, h3, h4, h5, h6 {
+  font-weight: 600;
+  line-height: 1.3;
+  color: var(--color-text-primary);
+}
+
+h1 { font-size: 2rem; margin: var(--space-2xl) 0 var(--space-lg) 0; }
+h2 { font-size: 1.5rem; margin: var(--space-2xl) 0 var(--space-md) 0; }
+h3 { font-size: 1.25rem; margin: var(--space-xl) 0 var(--space-md) 0; }
+
+/* Paragraphs */
+p {
+  line-height: 1.6;
+  color: var(--color-text-secondary);
+  margin-bottom: var(--space-lg);
+}
+
+/* Lists */
+ul, ol {
+  padding-left: var(--space-2xl);
+  margin-bottom: var(--space-xl);
+}
+
+li {
+  line-height: 1.6;
+  color: var(--color-text-secondary);
+  margin-bottom: var(--space-sm);
 }