kempo 1.0.0

package/kempo/kempo-vars.css

@@ -0,0 +1,154 @@
+:root {
+  --ff_body: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  --ff_heading: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  --ff_mono: Consolas, monaco, monospace;
+  --fs_base: 16px;
+  --fs_small: calc(0.6 * var(--fs_base));
+  --fs_large: calc(1.5 * var(--fs_base));
+  --fs_h6: var(--fs_base);
+  --fs_h5: calc(1.25 * var(--fs_base));
+  --fs_h4: calc(1.5 * var(--fs_base));
+  --fs_h3: calc(1.75 * var(--fs_base));
+  --fs_h2: calc(2 * var(--fs_base));
+  --fs_h1: calc(2.5 * var(--fs_base));
+  --fw_base: 400;
+  --fw_bold: 700;
+  --spacer: 1rem;
+  --spacer_h: calc(0.5 * var(--spacer));
+  --spacer_q: calc(0.25 * var(--spacer));
+  --line-height: 1.35em;
+  --container_width: 90rem;
+  --animation_ms: 256ms;
+  --radius: 0.25rem;
+  --link_decoration: underline;
+  --input_border_width: 2px;
+}
+
+:root,
+[theme="light"] {
+  color-scheme: light;
+  --c_bg: #f9f9f9;
+  --c_bg__inv: #333;
+  --c_bg__alt: #eee;
+  --c_overscroll: white;
+  --c_border: #ccc;
+  --c_border__inv: var(--d_c_bg_border);
+  --c_primary: #36f;
+  --c_primary__hover: #14d;
+  --c_secondary: #93f;
+  --c_secondary__hover: #71d;
+  --c_success: #080;
+  --c_success__hover: #060;
+  --c_warning: #f60;
+  --c_warning__hover: #d40;
+  --c_danger: #f03;
+  --c_danger__hover: #d01;
+  --c_input_accent: #36f;
+  --c_highlight: rgba(41, 100, 210, 0.25);
+  --tc: rgba(0, 0, 0, 0.93);
+  --tc_dark: var(--tc);
+  --tc_light: rgba(255, 255, 255, 0.93);
+  --tc_inv:  var(--tc_light);
+  --tc_muted: rgba(0, 0, 0, 0.5);
+  --tc_on_primary: var(--tc_light);
+  --tc_on_secondary: var(--tc_light);
+  --tc_on_success: var(--tc_light);
+  --tc_on_warning: var(--tc_light);
+  --tc_on_danger: var(--tc_light);
+  --c_overlay: rgba(0, 0, 0, 0.5);
+  --tc_primary: #36f;
+  --tc_secondary: #93f;
+  --tc_success: #080;
+  --tc_warning: #f60;
+  --tc_danger: #f03;
+  --btn_box_shadow: 0 0 0 transparent;
+  --btn_box_shadow__hover: 0 0 0 transparent;
+  --btn_border: transparent;
+  --btn_bg: #ddd;
+  --btn_bg__hover: #ccc;
+  --btn_tc: rgba(0, 0, 0, 0.93);
+  --btn_transparent__hover: rgba(0, 0, 0, 0.05);
+  --tc_link: var(--tc_primary);
+  --tc_link__hover: var(--tc_secondary);
+  --tc_link__inv: var(--tc_primary__inv);
+  --tc_link__inv__hover: var(--tc_secondary__inv);
+  --focus_shadow: 0 0 2px 2px var(--c_primary);
+  --focus_shadow_on_primary: 0 0 2px 2px var(--tc_on_primary);
+  --input_bg: white;
+  --input_tc: rgba(0, 0, 0, 0.93);
+  --drop_shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.333); 
+}
+[theme="dark"] {
+  color-scheme: dark;
+  --c_bg: #333;
+  --c_bg__inv: #f9f9f9;
+  --c_bg__alt: #222;
+  --c_overscroll: black;
+  --c_border: #777;
+  --c_border__inv: #ccc;
+  --c_primary: #36f;
+  --c_primary__hover: #14d;
+  --c_secondary: #93f;
+  --c_secondary__hover: #71d;
+  --c_success: #080;
+  --c_success__hover: #060;
+  --c_warning: #f60;
+  --c_warning__hover: #d40;
+  --c_danger: #f03;
+  --c_danger__hover: #d01;
+  --c_input_accent: #36f;
+  --c_highlight: rgba(0, 89, 255, 0.25);
+  --tc: rgba(255, 255, 255, 0.93);
+  --tc_dark: rgba(0, 0, 0, 0.93);
+  --tc_light: var(--tc);
+  --tc_inv:  var(--tc_dark);
+  --tc_muted: rgba(255, 255, 255, 0.5);
+  --tc_on_primary: var(--tc);
+  --tc_on_secondary: var(--tc);
+  --tc_on_success: var(--tc);
+  --tc_on_warning: var(--tc);
+  --tc_on_danger: var(--tc);
+  --c_overlay: rgba(0, 0, 0, 0.5);
+  --tc_primary: #8ab4f8;
+  --tc_secondary: #b6f;
+  --tc_success: #6b6;
+  --tc_warning: #f93;
+  --tc_danger: #f57;
+  --btn_bg: #aaa;
+  --btn_bg__hover: #bbb;
+  --btn_tc: rgba(0, 0, 0, 0.93);
+  --btn_transparent__hover: rgba(255, 255, 255, 0.05);
+  --btn_box_shadow: 0 0 0 transparent;
+  --btn_box_shadow__hover: 0 0 0 transparent;
+  --btn_border: transparent;
+  --tc_link: var(--tc_primary);
+  --tc_link__hover: var(--tc_secondary);
+  --tc_link__inv: var(--tc_primary__inv);
+  --tc_link__inv__hover: var(--tc_secondary__inv);
+  --focus_shadow: 0 0 2px 2px var(--c_primary);
+  --focus_shadow_on_primary: 0 0 2px 2px var(--tc_on_primary);
+  --input_bg: white;
+  --input_tc: rgba(0, 0, 0, 0.93);
+  --ff_body: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  --ff_heading: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  --ff_mono: Consolas, monaco, monospace;
+  --fs_base: 16px;
+  --fs_h6: var(--fs_base);
+  --fs_h5: calc(1.25 * var(--fs_base));
+  --fs_h4: calc(1.5 * var(--fs_base));
+  --fs_h3: calc(1.75 * var(--fs_base));
+  --fs_h2: calc(2 * var(--fs_base));
+  --fs_h1: calc(2.5 * var(--fs_base));
+  --fw_base: 400;
+  --fw_bold: 700;
+  --spacer: 1rem;
+  --spacer_h: calc(0.5 * var(--spacer));
+  --spacer_q: calc(0.25 * var(--spacer));
+  --line-height: 1.35em;
+  --container_width: 90rem;
+  --animation_ms: 256ms;
+  --radius: 0.25rem;
+  --drop_shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.25); 
+  --link_decoration: underline;
+  --input_border_width: 2px;
+}

package/kempo/kempo.js

@@ -0,0 +1,48 @@
+const components = {
+  'k-card': 'Card',
+  'k-code-editor': 'CodeEditor',
+  'k-dialog': 'Dialog',
+  'k-icon': 'Icon',
+  'k-import': 'Import',
+  'k-resize': 'Resize',
+  'k-search': 'Search',
+  'k-show-more': 'ShowMore',
+  'k-side-menu': 'SideMenu',
+  'k-split': 'Split',
+  'k-tabs': 'Tabs',
+  'k-web-snippet-editor': 'WebSnippetEditor'
+}
+const lookFor = new Set(Object.keys(components));
+window.kempo = Object.assign({}, {
+  pathToRoot: './',
+  pathToKempoFromRoot: './kempo/',
+  pathToIconsFromRoot: './kempo/icons/',
+  autoLoadComponents: () => {
+    lookFor.forEach( async component => {
+      if(document.querySelector(component)){
+        const path = `${kempo.pathToRoot}${kempo.pathToKempoFromRoot}components/${components[component]}.js`;
+        console.log(path);
+        import(path);
+        lookFor.delete(component);
+      }
+    });
+  },
+  _darkModeQuery: window.matchMedia('(prefers-color-scheme: dark)'),
+  _theme: 'auto',
+  _themeListener: (e) => {
+    if(window.kempo._theme === 'auto'){
+      document.documentElement.setAttribute('theme', e.matches?'dark':'light');
+    }
+  },
+  setTheme: (theme) => {
+    window.kempo._theme = theme;
+    if(window.kempo._theme === 'auto'){
+      document.documentElement.setAttribute('theme', window.kempo._darkModeQuery.matches?'dark':'light');
+    } else {
+      document.documentElement.setAttribute('theme', theme);
+    }
+  }
+}, window.kempo || {});
+window.kempo.autoLoadComponents();
+window.kempo._darkModeQuery.addEventListener('change', window.kempo._themeListener);
+window.kempo.setTheme(document.documentElement.getAttribute('theme') || 'auto');

package/kempo/utils/cli.js

@@ -0,0 +1,54 @@
+const args = {};
+let win = {};
+if(typeof(window) !== 'undefined'){
+  win = window;
+} else if(typeof(global) !== 'undefined'){
+  win = global;
+}
+win.log = (...messages) => {
+  if(args.debug){
+    console.log(...messages);
+  }
+}
+
+export default (shortMap = {
+  d: 'debug'
+}) => {
+  let name = '';
+  let values = [];
+  const save = () => {
+    if(name){
+      if(values.length === 0){ // flag
+        args[name] = true;
+      } else if(values.length === 1){ // single value
+        args[name] = values[0];
+      } else { // multiple values
+        args[name] = values;
+      }
+    }
+  }
+
+  for(let i=2; i<process.argv.length; i++){
+    const arg = process.argv[i];
+    if(arg.startsWith('-')){
+      // new argument, save the last one
+      save()
+      // start a new one
+      if(arg.startsWith('--')){ // long form
+        name = arg.slice(2);
+      } else { // short form
+        name = arg.slice(1);
+        if(shortMap[name]){
+          name = shortMap[name];
+        }
+      }
+      values = [];
+    } else {
+      // value
+      values.push(arg);
+    }
+  }
+  // save last arg
+  save();
+  return args;
+}

package/kempo/utils/cookie.js

@@ -0,0 +1,16 @@
+const saveCookie = (name, value, minutes = 30 * 24 * 60, path = '/') => {
+  const expires = new Date(Date.now() + minutes * 60 * 1000);
+  document.cookie = `${name}=${value};expires=${expires.toUTCString()};path=${path}`;
+};
+
+const getCookie = (name) => {
+  const cookies = document.cookie.split(';').map(cookie => cookie.trim().split('='));
+  const cookie = cookies.find(cookie => cookie[0] === name);
+  return cookie ? cookie[1] : null;
+};
+
+const deleteCookie = (name) => {
+  document.cookie = `${name}=;expires=Thu, 01 Jan 1970 00:00:00 UTC;path=/`;
+};
+
+export { saveCookie, getCookie, deleteCookie };

package/kempo/utils/debounce.js

@@ -0,0 +1,9 @@
+function debounce(func, timeout = 300){
+  let timer;
+  return (...args) => {
+    clearTimeout(timer);
+    timer = setTimeout(() => { func.apply(this, args); }, timeout);
+  };
+}
+
+export default debounce;

package/kempo/utils/drag.js

@@ -0,0 +1,74 @@
+export default (options = {}) => {
+  let startX, startY, timeoutId;
+
+  const {
+    element = () => {},
+    callback = () => {},
+    startCallback = () => {},
+    moveCallback = () => {},
+    endCallback = () => {},
+    preventScroll = false
+  } = options;
+
+  const dragMove = (event) => {
+    if (preventScroll) {
+      event.preventDefault(); // prevent drag scrolling
+    }
+    clearTimeout(timeoutId);
+    const pageX = event.pageX || event.touches[0].pageX;
+    const pageY = event.pageY || event.touches[0].pageY;
+    const diff = {
+      x: pageX - startX,
+      y: pageY - startY,
+      ...options
+    };
+    callback(diff);
+    moveCallback(diff);
+  };
+
+  const dragEnd = ({ pageX, pageY }) => {
+    clearTimeout(timeoutId);
+    const diff = {
+      x: pageX - startX,
+      y: pageY - startY,
+      ...options
+    };
+    callback(diff);
+    endCallback(diff);
+    removeListeners();
+  };
+
+  const dragStart = (event) => {
+    clearTimeout(timeoutId);
+    startX = event.pageX || event.touches[0].pageX;;
+    startY = event.pageY || event.touches[0].pageY;;
+    const diff = {
+      x: 0,
+      y: 0,
+      ...options
+    };
+    startCallback(diff);
+    window.addEventListener('mousemove', dragMove, {passive:!preventScroll});
+    window.addEventListener('mouseup', dragEnd, {passive:!preventScroll});
+    window.addEventListener('touchmove', dragMove, {passive:!preventScroll});
+    window.addEventListener('touchend', dragEnd, {passive:!preventScroll});
+    // window.addEventListener('mouseout', dragEnd);
+  };
+
+  const removeListeners = () => {
+    window.removeEventListener('mousemove', dragMove);
+    window.removeEventListener('mouseup', dragEnd);
+    window.removeEventListener('touchmove', dragMove);
+    window.removeEventListener('touchend', dragEnd);
+    // window.removeEventListener('mouseout', dragEnd);
+  };
+
+  element.addEventListener('mousedown', dragStart, {passive:!preventScroll});
+  element.addEventListener('touchstart', dragStart, {passive:!preventScroll});
+
+  // Return removeListeners for cleanup
+  return ()=>{
+    element.removeEventListener('mousedown', dragStart);
+    removeListeners();
+  }
+};

package/kempo/utils/element.js

@@ -0,0 +1,69 @@
+import waitFrames from './waitFrames.js';
+
+export const onEvent = (element, events, handler, scope = document) => {
+  if(element instanceof EventTarget){
+    events.toLowerCase().split(' ').forEach( event => {
+      element.addEventListener(event, handler);
+    });
+  } else if(element instanceof NodeList || element instanceof Array){
+    element.forEach( el => onEvent(el, events, handler));
+  } else if(typeof(element) == 'string'){
+    scope.querySelectorAll(element).forEach( el => onEvent(el, events, handler));
+  }
+}
+export const offEvent = (element, events, handler, scope = document) => {
+  if(element instanceof EventTarget){
+    events.toLowerCase().split(' ').forEach( event => {
+      element.removeEventListener(event, handler);
+    });
+  } else if(element instanceof NodeList || element instanceof Array){
+    element.forEach( el => offEvent(el, events, handler));
+  } else if(typeof(element) == 'string'){
+    scope.querySelectorAll(element).forEach( el => offEvent(el, events, handler));
+  }
+}
+export const dispatchEvent = (element, events, detail, scope = document) => {
+  if(element instanceof EventTarget){
+    events.toLowerCase().split(' ').forEach( event => {
+      element.dispatchEvent(new CustomEvent(event, { detail } ));
+    });
+  } else if(element instanceof NodeList || element instanceof Array){
+    element.forEach( el => dispatchEvent(el, events, handler));
+  } else if(typeof(element) == 'string'){
+    scope.querySelectorAll(element).forEach( el => dispatchEvent(el, events, handler));
+  }
+}
+export const isInView = async (element) => {
+  await waitFrames(2);
+  const rect = element.getBoundingClientRect();
+  const windowHeight = window.innerHeight || document.documentElement.clientHeight;
+  const windowWidth = window.innerWidth || document.documentElement.clientWidth;
+  if (
+    rect.bottom < 0 ||
+    rect.top > windowHeight ||
+    rect.right < 0 ||
+    rect.left > windowWidth
+  ) {
+    return false;
+  }
+  while (element) {
+    const style = getComputedStyle(element);
+    if (style.display === 'none' || style.visibility === 'hidden') {
+      return false;
+    }
+    element = element.parentElement;
+  }
+  return true;
+}
+export const firstFocusable = (scope) => {
+  return scope.querySelector('a[href]:not([disabled]), button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([disabled]):not([tabindex="-1"])');
+}
+export const setProp = (element, prop, value, scope = document) => {
+	if(element instanceof HTMLElement){
+		element[prop] = value;
+	} else if(element instanceof NodeList || element instanceof Array){
+		[...element].forEach(element => dispatchEvent(element, prop, value));
+	} else if(typeof(element) === 'string'){
+		dispatchEvent(scope.querySelectorAll(element), prop, value);
+	}
+}

package/kempo/utils/formatTimestamp.js

@@ -0,0 +1,11 @@
+export default (timestamp, forceLocale) => {
+  return Intl.DateTimeFormat(forceLocale || navigator.language, {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+    millisecond: '3-digit'
+  }).format(new Date(parseInt(timestamp)));
+}

package/kempo/utils/fuzzyMatch.js

@@ -0,0 +1,55 @@
+/*
+  This module was created by Chat GPT using the following prompts:
+  Write me a function in JS, that takes two strings, and does a fuzzy match to see if the first string contains the second string, this way if the second string has a typo or misspelling in it we still get a partial match. Make it return a score between 0 and 10 that indicates the strength of the match, with a perfect 10 being a perfect match, and a 0 being no characters match with the threashold greater than 3. Give  a higher score if the match is towards the beginning of the first string.
+*/
+
+export const fuzzyMatch = (str1, str2) => {
+  const levenshteinDistance = (s1, s2) => {
+      const m = s1.length;
+      const n = s2.length;
+      const dp = Array.from({ length: m + 1 }, () => Array(n + 1).fill(0));
+
+      for (let i = 0; i <= m; i++) {
+          for (let j = 0; j <= n; j++) {
+              if (i === 0) dp[i][j] = j;
+              else if (j === 0) dp[i][j] = i;
+              else dp[i][j] = Math.min(
+                  dp[i - 1][j - 1] + (s1.charAt(i - 1) === s2.charAt(j - 1) ? 0 : 1),
+                  dp[i][j - 1] + 1,
+                  dp[i - 1][j] + 1
+              );
+          }
+      }
+
+      return dp[m][n];
+  };
+
+  const fuzzyThreshold = 3;
+
+  const distance = levenshteinDistance(str1.toLowerCase(), str2.toLowerCase());
+  
+  if (distance === 0) {
+      return 10; // Perfect match
+  }
+
+  const score = Math.max(0, 10 - distance / fuzzyThreshold);
+  
+  const positionScore = Math.min((str1.length - distance) / str1.length, 1);
+  
+  return Math.round(score * 5 + positionScore * 5); // Scale to 0-10
+};
+
+/*
+  Chat GPT Prompt
+  Can you write another function that takes an array of strings, and a string, creates a score based on how well the second string matches each of the function you created above. Then find the average non-zero match of the second string to the items in the array
+*/
+export const fuzzyMatchArray = (array, targetString) => {
+  const nonZeroScores = array
+      .map(currentString => fuzzyMatch(currentString, targetString))
+      .filter(score => score !== 0);
+  if (nonZeroScores.length === 0) {
+      return 0; // Return 0 if there are no non-zero scores
+  }
+  const averageScore = nonZeroScores.reduce((sum, score) => sum + score, 0) / nonZeroScores.length;
+  return averageScore;
+};

package/kempo/utils/getPreferredTheme.js

@@ -0,0 +1 @@
+export default () => window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';

package/kempo/utils/loadCss.js

@@ -0,0 +1,10 @@
+export default (url, type = 'stylesheet') => {
+  return new Promise((resolve, reject) => {
+    const link = document.createElement('link');
+    link.rel = type;
+    link.href = url;
+    link.onload = resolve;
+    link.onerror = reject;
+    document.head.appendChild(link);
+  });
+}

package/kempo/utils/loadScript.js

@@ -0,0 +1,10 @@
+export default (scriptUrl, type = 'module') => {
+  return new Promise((resolve, reject) => {
+    const script = document.createElement('script');
+    script.type = type;
+    script.src = scriptUrl;
+    script.onload = resolve;
+    script.onerror = reject;
+    document.head.appendChild(script);
+  });
+}