@rettangoli/ui 0.1.2-rc3 → 0.1.2-rc31

package/src/components/sliderInput/sliderInput.handlers.js

@@ -0,0 +1,41 @@
+export const handleBeforeMount = (deps) => {
+  const { store, attrs } = deps;
+  store.setValue(attrs.defaultValue || 0);
+}
+
+export const handleOnUpdate = (changes, deps) => {
+  const { oldAttrs, newAttrs } = changes;
+  const { store, render, attrs } = deps;
+  
+  // Reset when key changes
+  if (oldAttrs?.key !== newAttrs?.key && newAttrs?.key) {
+    const defaultValue = newAttrs?.defaultValue || attrs?.defaultValue || 0;
+    store.setValue(defaultValue);
+    render();
+  } else if (oldAttrs?.defaultValue !== newAttrs?.defaultValue) {
+    // Also reset when defaultValue changes
+    const defaultValue = newAttrs?.defaultValue || 0;
+    store.setValue(defaultValue);
+    render();
+  }
+}
+
+export const handleValueChange = (e, deps) => {
+  const { store, render, dispatchEvent } = deps;
+  const newValue = Number(e.detail.value);
+
+  store.setValue(newValue);
+  
+  // Re-render to sync slider and input
+  render();
+  
+  // Dispatch event for external listeners
+  dispatchEvent(
+    new CustomEvent("slider-input-value-change", {
+      detail: {
+        value: newValue,
+      },
+      bubbles: true,
+    }),
+  );
+};

package/src/components/sliderInput/sliderInput.store.js

@@ -0,0 +1,18 @@
+export const INITIAL_STATE = Object.freeze({
+  value: 0
+});
+
+export const toViewData = ({ state, attrs }) => {
+  return {
+    key: attrs.key,
+    value: state.value,
+    w: attrs.w || '',
+    min: attrs.min || 0,
+    max: attrs.max || 100,
+    step: attrs.step || 1
+  };
+}
+
+export const setValue = (state, newValue) => {
+  state.value = newValue;
+}

package/src/components/sliderInput/sliderInput.view.yaml

@@ -0,0 +1,42 @@
+elementName: rtgl-slider-input
+
+viewDataSchema:
+  type: object
+
+attrsSchema:
+  type: object
+  properties:
+    defaultValue:
+      type: string
+      default: '0'
+    w:
+      type: string
+      default: ''
+    min:
+      type: string
+      default: '0'
+    max:
+      type: string
+      default: '100'
+    step:
+      type: string
+      default: '1'
+
+refs:
+  input:
+    eventListeners:
+      input-change:
+        handler: handleValueChange
+  slider:
+    eventListeners:
+      slider-change:
+        handler: handleValueChange
+
+events:
+  form-change: {}
+
+template:
+  - rtgl-view d=h av=c g=md w=${w}:
+    - rtgl-slider#slider key=${key} w=f type=range min=${min} max=${max} step=${step} value=${value}:
+    - rtgl-view w=84:
+      - rtgl-input#input key=${key} w=f type=number min=${min} max=${max} step=${step} value=${value}:

package/src/components/table/table.handlers.js

@@ -1,4 +1,4 @@
-export const handleOnMount = (deps) => {
+export const handleBeforeMount = (deps) => {
   // No special initialization needed for basic table
 };
 

package/src/components/tabs/tabs.handlers.js

@@ -0,0 +1,10 @@
+export const handleClickItem = (e, deps) => {
+  const { dispatchEvent } = deps;
+  const id = e.currentTarget.dataset.id;
+  
+  dispatchEvent(new CustomEvent('item-click', {
+    detail: {
+      id
+    }
+  }));
+}

package/src/components/tabs/tabs.store.js

@@ -0,0 +1,29 @@
+export const INITIAL_STATE = Object.freeze({});
+
+const blacklistedAttrs = ['id', 'class', 'style', 'slot'];
+
+const stringifyAttrs = (attrs) => {
+  return Object.entries(attrs).filter(([key]) => !blacklistedAttrs.includes(key)).map(([key, value]) => `${key}=${value}`).join(' ');
+}
+
+export const toViewData = ({ state, props, attrs }) => {
+  const containerAttrString = stringifyAttrs(attrs);
+
+  const items = props.items || [];
+  const selectedTab = attrs['selected-tab'];
+
+  // Mark selected tab with styling
+  const itemsWithSelection = items.map(item => ({
+    ...item,
+    isSelected: item.id === selectedTab,
+    bgColor: item.id === selectedTab ? 'ac' : '',
+    borderColor: item.id === selectedTab ? '' : 'tr',
+    textColor: item.id === selectedTab ? '' : 'mu-fg'
+  }));
+
+  return {
+    containerAttrString,
+    items: itemsWithSelection,
+    selectedTab
+  };
+}

package/src/components/tabs/tabs.view.yaml

@@ -0,0 +1,64 @@
+elementName: rtgl-tabs
+
+viewDataSchema:
+  type: object
+  properties:
+    containerAttrString:
+      type: string
+    items:
+      type: array
+      items:
+        type: object
+        properties:
+          label:
+            type: string
+          id:
+            type: string
+          isSelected:
+            type: boolean
+          bgColor:
+            type: string
+          textColor:
+            type: string
+          borderColor:
+            type: string
+    selectedTab:
+      type: string
+
+propsSchema:
+  type: object
+  properties:
+    items:
+      type: array
+      items:
+        type: object
+        properties:
+          label:
+            type: string
+          id:
+            type: string
+
+attrsSchema:
+  type: object
+  properties:
+    selected-tab:
+      type: string
+
+refs:
+  tab-*:
+    eventListeners:
+      click:
+        handler: handleClickItem
+
+events:
+  item-click:
+    type: object
+    properties:
+      id:
+        type: string
+
+template:
+  - rtgl-view d=h g=sm bgc=mu p=sm br=lg ${containerAttrString}:
+    - $for item in items:
+        - rtgl-view#tab-${item.id} data-id=${item.id} cur=p bgc=${item.bgColor} bw=xs bc=${item.borderColor} pv=md ph=lg br=lg:
+          - rtgl-text s=sm c=${item.textColor}: "${item.label}"

package/src/components/tooltip/tooltip.store.js

@@ -0,0 +1,12 @@
+export const INITIAL_STATE = Object.freeze({
+});
+
+export const toViewData = ({ attrs }) => {
+  return {
+    open: !!attrs.open,
+    x: attrs.x || 0,
+    y: attrs.y || 0,
+    placement: attrs.placement || 'top',
+    content: attrs.content || ''
+  };
+}

package/src/components/tooltip/tooltip.view.yaml

@@ -0,0 +1,27 @@
+elementName: rtgl-tooltip
+
+viewDataSchema:
+  type: object
+
+attrsSchema:
+  type: object
+  properties:
+    open:
+      type: string
+    x:
+      type: string
+    y:
+      type: string
+    placement:
+      type: string
+    content:
+      type: string
+
+refs:
+  popover:
+
+template:
+  - rtgl-popover#popover ?open=${open} x=${x} y=${y} placement=${placement} no-overlay:
+      - rtgl-view slot=content bgc=background bc=border br=md p=sm ah=c av=c:
+          - rtgl-text ta=c s=sm c=foreground: ${content}
+

package/src/components/waveform/waveform.handlers.js

@@ -0,0 +1,92 @@
+export const handleAfterMount = async (deps) => {
+  const { props, store, render, getRefIds, } = deps;
+  const { waveformData } = props;
+
+  store.setWaveformData(waveformData);
+  render();
+
+  const canvas = getRefIds().canvas?.elm;
+  if (canvas) {
+    renderWaveform(waveformData, canvas);
+  }
+};
+
+export const handleOnUpdate = async (changes, deps) => {
+  const { store, render, getRefIds, props } = deps;
+  const { waveformData } = props;
+
+  if (!waveformData) {
+    console.log('waveform handleOnUpdate: no waveformData provided');
+    return;
+  }
+
+  store.setWaveformData(waveformData);
+  render();
+
+  const canvas = getRefIds().canvas?.elm;
+  if (canvas) {
+    renderWaveform(waveformData, canvas);
+  }
+};
+
+async function renderWaveform(waveformData, canvas) {
+  const ctx = canvas.getContext("2d");
+
+  // Get the actual display size of the canvas
+  const rect = canvas.getBoundingClientRect();
+  const displayWidth = rect.width;
+  const displayHeight = rect.height;
+
+  // Set canvas internal resolution to match display size
+  canvas.width = displayWidth;
+  canvas.height = displayHeight;
+
+  const width = canvas.width;
+  const height = canvas.height;
+
+  // Clear canvas
+  ctx.clearRect(0, 0, width, height);
+
+  // Dark theme background
+  ctx.fillStyle = "#1a1a1a";
+  ctx.fillRect(0, 0, width, height);
+
+  if (!waveformData || !waveformData.data) {
+    return;
+  }
+
+  const data = waveformData.data;
+  const centerY = height / 2;
+
+  // Create gradient for waveform
+  const gradient = ctx.createLinearGradient(0, 0, 0, height);
+  gradient.addColorStop(0, "#404040");
+  gradient.addColorStop(0.5, "#A1A1A1");
+  gradient.addColorStop(1, "#404040");
+
+  // Draw waveform bars
+  const barWidth = Math.max(1, width / data.length);
+  const barSpacing = 0.2; // 20% spacing between bars
+
+  for (let i = 0; i < data.length; i++) {
+    const amplitude = data[i];
+    const barHeight = amplitude * (height * 0.85);
+    const x = i * barWidth;
+    const y = centerY - barHeight / 2;
+
+    ctx.fillStyle = gradient;
+    ctx.fillRect(x, y, Math.max(1, barWidth * (1 - barSpacing)), barHeight);
+  }
+
+  // Draw subtle center line
+  ctx.strokeStyle = "rgba(255, 255, 255, 0.1)";
+  ctx.lineWidth = 1;
+  ctx.beginPath();
+  ctx.moveTo(0, centerY);
+  ctx.lineTo(width, centerY);
+  ctx.stroke();
+
+  // Add subtle glow effect
+  ctx.shadowBlur = 10;
+  ctx.shadowColor = "#2196F3";
+}

package/src/components/waveform/waveform.store.js

@@ -0,0 +1,17 @@
+export const INITIAL_STATE = Object.freeze({
+  waveformData: null,
+});
+
+export const setWaveformData = (state, data) => {
+  state.waveformData = data;
+};
+
+export const toViewData = ({ state, attrs, props }) => {
+  return {
+    isLoading: props.isLoading,
+    w: attrs.w || "250",
+    h: attrs.h || "150",
+    cur: attrs.cur,
+    waveformData: props.waveformData,
+  };
+};

package/src/components/waveform/waveform.view.yaml

@@ -0,0 +1,38 @@
+elementName: rtgl-waveform
+
+attrsSchema:
+  type: object
+  properties:
+    w:
+      type: string
+      description: Width of the waveform visualizer
+      default: '250'
+    h:
+      type: string
+      description: Height of the waveform visualizer
+      default: '150'
+    cur:
+      type: string
+      description: cursor
+
+propsSchema:
+  type: object
+  properties:
+    waveformData:
+      type: object
+      description: File ID of the waveform data in object storage
+    isLoading:
+      type: boolean
+      description: Whether the waveform data is currently being loaded
+
+refs:
+  canvas:
+    selector: canvas
+
+template:
+  - rtgl-view w=f h=f pos=rel w=${w} h=${h} cur=${cur}:
+    - $if isLoading:
+        - rtgl-view w=f h=f av=c ah=c:
+          - rtgl-text c=mu-fg: ...
+      $else:
+        - 'canvas#canvas style="width:100%; height:100%;"':

package/src/entry-iife-layout.js

@@ -5,6 +5,8 @@ import RettangoliImage from './primitives/image.js';
 import RettangoliSvg from './primitives/svg.js';
 import RettangoliInput from './primitives/input.js';
 import RettangoliTextArea from './primitives/textarea.js';
+import RettangoliDialog from './primitives/dialog.js';
+
 
 customElements.define("rtgl-button", RettangoliButton({}));
 customElements.define("rtgl-view", RettangoliView({}));
@@ -13,3 +15,4 @@ customElements.define("rtgl-image", RettangoliImage({}));
 customElements.define("rtgl-svg", RettangoliSvg({}));
 customElements.define("rtgl-input", RettangoliInput({}));
 customElements.define("rtgl-textarea", RettangoliTextArea({}));
+customElements.define("rtgl-dialog", RettangoliDialog({}));

package/src/entry-iife-ui.js

@@ -7,6 +7,8 @@ import RettangoliInput from './primitives/input.js';
 import RettangoliTextArea from './primitives/textarea.js';
 import RettangoliColorPicker from './primitives/colorPicker.js';
 import RettangoliSlider from './primitives/slider.js';
+import RettangoliDialog from './primitives/dialog.js';
+import RettangoliPopover from './primitives/popover.js';
 
 customElements.define("rtgl-button", RettangoliButton({}));
 customElements.define("rtgl-view", RettangoliView({}));
@@ -17,6 +19,8 @@ customElements.define("rtgl-input", RettangoliInput({}));
 customElements.define("rtgl-textarea", RettangoliTextArea({}));
 customElements.define("rtgl-color-picker", RettangoliColorPicker({}));
 customElements.define("rtgl-slider", RettangoliSlider({}));
+customElements.define("rtgl-dialog", RettangoliDialog({}));
+customElements.define("rtgl-popover", RettangoliPopover({}));
 
 // built from rettangoli cli fe
 import '../.temp/dynamicImport.js'

package/src/index.js

@@ -5,6 +5,8 @@ import RettangoliImage from './primitives/image.js';
 import RettangoliSvg from './primitives/svg.js';
 import RettangoliInput from './primitives/input.js';
 import RettangoliTextArea from './primitives/textarea.js';
+import RettangoliDialog from './primitives/dialog.js';
+import RettangoliPopover from './primitives/popover.js';
 
 export {
     RettangoliButton,
@@ -14,4 +16,6 @@ export {
     RettangoliSvg,
     RettangoliInput,
     RettangoliTextArea,
-}
+    RettangoliDialog,
+    RettangoliPopover,
+}

package/src/primitives/button.js

@@ -296,6 +296,16 @@ class RettangoliButtonElement extends HTMLElement {
       this._buttonElement.style.maxWidth = "";
     }
   }
+  
+  // Public method to get the actual button's bounding rect
+  // This is needed because the host element has display: contents
+  getBoundingClientRect() {
+    if (this._buttonElement) {
+      return this._buttonElement.getBoundingClientRect();
+    }
+    // Fallback to host element
+    return super.getBoundingClientRect();
+  }
 }
 
 // Export factory function to maintain API compatibility

package/src/primitives/colorPicker.js

@@ -114,6 +114,15 @@ class RettangoliColorPickerElement extends HTMLElement {
   };
 
   attributeChangedCallback(name, oldValue, newValue) {
+    // Handle key attribute change - reset value
+    if (name === "key" && oldValue !== newValue) {
+      requestAnimationFrame(() => {
+        const value = this.getAttribute("value");
+        this._inputElement.value = value ?? "#000000";
+      });
+      return;
+    }
+
     // Handle input-specific attributes first
     if (["value", "disabled"].includes(name)) {
       this._updateInputAttributes();