juxscript 1.0.34 → 1.0.36

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "juxscript",
-  "version": "1.0.34",
+  "version": "1.0.36",
   "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);
 }

package/presets/jux.jux

@@ -58,7 +58,7 @@ const count = state(0);
 
 jux.button('increment')
   .label('Click me!')
-  .bind('click', () => count.value++)
+  .bind('click', () => count.set(count.value + 1))
   .render('#app');
 
 jux.paragraph('counter')
@@ -71,7 +71,7 @@ const count = state(0);
 
 jux.button('increment')
     .label('Click me!')
-    .bind('click', () => count.value++)
+    .bind('click', () => count.set(count.value + 1))
     .style('margin: 1rem 0;')
     .render('#appmain-content');