juxscript 1.0.57 → 1.0.59

package/package.json

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

package/presets/default/all.jux

@@ -1,76 +1,229 @@
 import { jux, state } from 'juxscript';
-jux.include('layout.css');
+import { initializeGrid } from 'layout.jux';
+
+// Initialize the grid layout - this executes the rendering
+const grid = initializeGrid();
 
 // ═══════════════════════════════════════════════════════════════════
 // ALL COMPONENTS SHOWCASE - Maximum DOM nodes per component
 // ═══════════════════════════════════════════════════════════════════
 
 // Hero - All DOM-generating options
+jux.heading('hero-heading').level(3).text('jux.hero').render("#appmain-content");
 jux.hero('all-hero', {
   title: 'Hero Title',
   subtitle: 'Hero Subtitle',
   content: 'Hero body content goes here',
   cta: 'Call to Action',
   ctaLink: '#',
-  backgroundImage: 'https://via.placeholder.com/1200x400',
   backgroundOverlay: true,
   centered: true
-}).render();
-
-jux.alert('all-alert').render();
-jux.badge('all-badge').render();
-jux.button('all-button').render();
-jux.card('all-card').render();
-jux.checkbox('all-checkbox').render();
-jux.code('all-code').render();
-jux.container('all-container').render();
-jux.datepicker('all-datepicker').render();
+}).render("#appmain-content");
+jux.divider().render("#appmain-content");
+
+jux.heading('chart-heading').level(3).text('jux.chart').render("#appmain-content");
+jux.element('all-element')
+.text('Need Charts!')
+.render("#appmain-content");
+jux.divider().render("#appmain-content");
+
+jux.heading('alert-heading').level(3).text('jux.alert').render("#appmain-content");
+jux.alert('all-alert')
+.message('this is it - .message').render("#appmain-content");
+jux.divider().render("#appmain-content");
+
+jux.heading('badge-heading').level(3).text('jux.badge').render("#appmain-content");
+jux.badge('all-badge')
+.text('Badge Text - .text').render("#appmain-content");
+jux.divider().render("#appmain-content");
+
+jux.heading('button-heading').level(3).text('jux.button').render("#appmain-content");
+jux.button('all-button')
+.label('Button Label - .label').render("#appmain-content");
+jux.divider().render("#appmain-content");
+
+jux.heading('card-heading').level(3).text('jux.card').render("#appmain-content");
+jux.card('all-card')
+.title('Card Title - .title')
+.content('Card content goes here - .content')
+.footer('Card Footer - .footer')
+.render("#appmain-content");
+jux.divider().render("#appmain-content");
+
+jux.heading('checkbox-heading').level(3).text('jux.checkbox').render("#appmain-content");
+jux.checkbox('all-checkbox')
+.label('Checkbox Label - .label')
+.render("#appmain-content");
+jux.divider().render("#appmain-content");
+
+jux.heading('code-heading').level(3).text('jux.code').render("#appmain-content");
+jux.code('all-code')
+.code(`// Sample code - .code`)
+.language('javascript')
+.render("#appmain-content");
+jux.divider().render("#appmain-content");
+
+jux.heading('container-heading').level(3).text('jux.container').render("#appmain-content");
+jux.container('all-container')
+.render("#appmain-content");
+jux.divider().render("#appmain-content");
+
+jux.heading('datepicker-heading').level(3).text('jux.datepicker').render("#appmain-content");
+jux.datepicker('all-datepicker')
+.label('Select Date - .label')
+.render("#appmain-content");
+jux.divider().render("#appmain-content");
+
+jux.heading('dropdown-heading').level(3).text('jux.dropdown').render("#appmain-content");
 jux.dropdown('all-dropdown', {
   items: [{ label: 'Item 1', value: '1' }, { label: 'Item 2', value: '2' }]
-}).render();
-jux.fileupload('all-fileupload').render();
-jux.heading('all-h1').render();
-// jux.icon('all-icon').render();
-jux.input('all-input').render();
-jux.kpicard('all-kpicard').render();
+})
+.render("#appmain-content");
+jux.divider().render("#appmain-content");
+
+jux.heading('fileupload-heading').level(3).text('jux.fileupload').render("#appmain-content");
+jux.fileupload('all-fileupload')
+.label('File Upload - .label')
+.render("#appmain-content");
+jux.divider().render("#appmain-content");
+
+jux.heading('heading-heading').level(3).text('jux.heading').render("#appmain-content");
+jux.heading('all-h1')
+.text('Heading Level 1 - .text')
+.level(1)
+.render("#appmain-content");
+jux.divider().render("#appmain-content");
+
+// jux.heading('icon-heading').level(3).text('jux.icon').render("#appmain-content");
+// jux.icon('all-icon').render("#appmain-content");
+// jux.divider().render("#appmain-content");
+
+jux.heading('input-heading').level(3).text('jux.input').render("#appmain-content");
+jux.input('all-input')
+.label('Input Label - .label')
+.render("#appmain-content");
+jux.divider().render("#appmain-content");
+
+jux.heading('kpicard-heading').level(3).text('jux.kpicard').render("#appmain-content");
+jux.kpicard('all-kpicard')
+.delta('+5% - .delta')
+.prefix('$ - .prefix')
+.value('1,000 - .value')
+.title('KPI Card Title - .title')
+.render("#appmain-content");
+jux.divider().render("#appmain-content");
+
+jux.heading('list-heading').level(3).text('jux.list').render("#appmain-content");
 jux.list('all-list', {
   items: ['Item 1', 'Item 2', 'Item 3']
-}).render();
-jux.loading('all-loading').render();
+})
+.render("#appmain-content");
+jux.divider().render("#appmain-content");
+
+jux.heading('loading-heading').level(3).text('jux.loading').render("#appmain-content");
+jux.loading('all-loading')
+.variant('spinner')
+.size('lg')
+.render("#appmain-content");
+jux.divider().render("#appmain-content");
+
+jux.heading('sidebar-heading').level(3).text('jux.sidebar').render("#appaside");
+jux.sidebar('all-sidebar')
+.collapsible(true)
+.render("#appaside");
+jux.divider().render("#appaside");
+
+jux.heading('menu-heading').level(3).text('jux.menu').render("#appaside");
 jux.menu('all-menu', {
   items: [{ label: 'Home', path: '/' }, { label: 'About', path: '/about' }]
-}).render();
+})
+.render("#appaside");
+jux.divider().render("#appaside");
+
+jux.heading('nav-heading').level(3).text('jux.nav').render("#appmain-content");
 jux.nav('all-nav', {
   items: [{ label: 'Home', path: '/' }, { label: 'About', path: '/about' }]
-}).render();
-jux.paragraph('all-paragraph').render();
-jux.progress('all-progress').render();
+}).render("#appmain-content");
+jux.divider().render("#appmain-content");
+
+jux.heading('paragraph-heading').level(3).text('jux.paragraph').render("#appmain-content");
+jux.paragraph('all-paragraph')
+.text('This is a sample paragraph created with jux.paragraph - .text')
+.render("#appmain-content");
+jux.divider().render("#appmain-content");
+
+jux.heading('progress-heading').level(3).text('jux.progress').render("#appmain-content");
+jux.progress('all-progress')
+.value(70)
+.max(100)
+.variant('success')
+.render("#appmain-content");
+jux.divider().render("#appmain-content");
+
+jux.heading('radio-heading').level(3).text('jux.radio').render("#appmain-content");
 jux.radio('all-radio', {
   options: [{ label: 'Option 1', value: '1' }, { label: 'Option 2', value: '2' }]
-}).render();
+})
+.label('Radio Label - .label')
+.render("#appmain-content");
+jux.divider().render("#appmain-content");
+
+jux.heading('select-heading').level(3).text('jux.select').render("#appmain-content");
 jux.select('all-select', {
   options: [{ label: 'Option 1', value: '1' }, { label: 'Option 2', value: '2' }]
-}).render();
-jux.sidebar('all-sidebar').render();
-jux.switch('all-switch').render();
+})
+.label('Select Label - .label')
+.render("#appmain-content");
+jux.divider().render("#appmain-content");
+
+
+
+jux.heading('switch-heading').level(3).text('jux.switch').render("#appmain-content");
+jux.switch('all-switch')
+.label('Switch Label - .label')
+.render("#appmain-content");
+jux.divider().render("#appmain-content");
+
+jux.heading('table-heading').level(3).text('jux.table').render("#appmain-content");
 jux.table('all-table', {
     columns: ['Name', 'Age'],
     rows: [
         { Name: 'John', Age: '25' },
+        { Name: 'Jane', Age: '30' },
+        { Name: 'Jane', Age: '30' },
+        { Name: 'Jane', Age: '30' },
         { Name: 'Jane', Age: '30' }
     ]
-}).render();
+})
+.bordered(true)
+.selectable(true)
+.filterable(true)
+.paginated(true)
+.rowsPerPage(2)
+.render("#appmain-content");
+jux.divider().render("#appmain-content");
+
+jux.heading('tabs-heading').level(3).text('jux.tabs').render("#appmain-content");
 jux.tabs('all-tabs', {
-  tabs: [{ label: 'Tab 1', content: 'Content 1' }, { label: 'Tab 2', content: 'Content 2' }]
-}).render();
+  tabs: [{ id: 1, label: 'Tab 1', content: 'Content 1' }, { id: 2, label: 'Tab 2', content: 'Content 2' }]
+})
+.activeTab('1')
+.render("#appmain-content");
+jux.divider().render("#appmain-content");
 
-jux.button('tooltip-trigger').label('Hover for tooltip').render();
+jux.heading('tooltip-heading').level(3).text('jux.tooltip').render("#appmain-content");
+jux.button('tooltip-trigger').label('Hover for tooltip').render("#appmain-content");
 jux.tooltip('all-tooltip', {
   text: 'Tooltip content',
   position: 'top'
 }).render('#tooltip-trigger');
+jux.divider().render("#appmain-content");
 
-jux.view('all-view').render();
+jux.heading('view-heading').level(3).text('jux.view').render("#appmain-content");
+jux.view('all-view')
+.title('View Title - Need to Rethink - this is for nesting! - .title')
+.render("#appmain-content");
+jux.divider().render("#appmain-content");
 
 // ═══════════════════════════════════════════════════════════════════
 // SELF-ANALYSIS: Build component tree from #app
@@ -167,7 +320,7 @@ setTimeout(() => {
   // Create analysis display
   jux.container('analysis-container')
     .style('margin-top: 3rem; padding: 2rem; background: #1e1e1e; border-radius: 8px;')
-    .render();
+    .render("#appmain-content");
   
   jux.heading('analysis-title')
     .level(2)