@code0-tech/pictor 0.0.0-mvp.43 → 0.0.0-mvp.44

package/dist/utils/index.js

@@ -1,30 +1,25 @@
-import { ContextStore as o, ContextStoreProvider as t, useService as i, useStore as n } from "./contextStore.js";
-import { InspectionSeverity as v, underlineBySeverity as S } from "./inspection.js";
-import { NonReactiveArrayService as g, createNonReactiveArrayService as p } from "./nonReactiveArrayService.js";
-import { ObjectService as m, createObjectService as x } from "./objectStore.js";
-import { ReactiveArrayService as f, useReactiveArrayService as y } from "./reactiveArrayService.js";
-import { Colors as u } from "./types.js";
-import { getChild as P, getContent as R, getDOMSizeFromCodeZeroSize as l, getPositionAroundTarget as O, getPositioning as b, getWindowPositioning as j, mergeCode0Props as z, parseUnit as N } from "./utils.js";
+import { ContextStore as o, ContextStoreProvider as t, useService as i, useStore as c } from "./contextStore.js";
+import { InspectionSeverity as S, underlineBySeverity as a } from "./inspection.js";
+import { NonReactiveArrayService as p, createNonReactiveArrayService as x } from "./nonReactiveArrayService.js";
+import { ObjectService as f, createObjectService as s } from "./objectStore.js";
+import { ReactiveArrayService as C, useReactiveArrayService as d } from "./reactiveArrayService.js";
+import { Colors as A } from "./types.js";
+import { getDOMSizeFromCodeZeroSize as l, hashToColor as O, mergeCode0Props as b } from "./utils.js";
 export {
-  u as Colors,
+  A as Colors,
   o as ContextStore,
   t as ContextStoreProvider,
-  v as InspectionSeverity,
-  g as NonReactiveArrayService,
-  m as ObjectService,
-  f as ReactiveArrayService,
-  p as createNonReactiveArrayService,
-  x as createObjectService,
-  P as getChild,
-  R as getContent,
+  S as InspectionSeverity,
+  p as NonReactiveArrayService,
+  f as ObjectService,
+  C as ReactiveArrayService,
+  x as createNonReactiveArrayService,
+  s as createObjectService,
   l as getDOMSizeFromCodeZeroSize,
-  O as getPositionAroundTarget,
-  b as getPositioning,
-  j as getWindowPositioning,
-  z as mergeCode0Props,
-  N as parseUnit,
-  S as underlineBySeverity,
-  y as useReactiveArrayService,
+  O as hashToColor,
+  b as mergeCode0Props,
+  a as underlineBySeverity,
+  d as useReactiveArrayService,
   i as useService,
-  n as useStore
+  c as useStore
 };

package/dist/utils/utils.d.ts

@@ -1,14 +1,5 @@
-import { default as React, CSSProperties, ReactNode } from 'react';
+import { CSSProperties } from 'react';
 import { Code0Sizes } from './types';
-export declare const parseUnit: (str: string) => (number | string)[];
-export declare const getChild: (children: ReactNode | ReactNode[], child: React.FC<any>, required?: boolean, matchingProps?: Object) => React.ReactElement | undefined;
-export declare const getContent: (children: ReactNode | ReactNode[], ...child: React.FC<any>[]) => ReactNode[] | null;
-export interface Positioning {
-    height: number;
-    width: number;
-    x: number;
-    y: number;
-}
 export declare const mergeCode0Props: (cn: string, rest: object) => {
     m?: import('./types').StyleProp<number | `${number}`> | undefined;
     my?: import('./types').StyleProp<number | `${number}`> | undefined;
@@ -57,14 +48,8 @@ export declare const mergeCode0Props: (cn: string, rest: object) => {
     align?: import("csstype").Property.AlignItems | undefined;
     justify?: import("csstype").Property.JustifyContent | undefined;
     tf?: import("csstype").Property.Transform | undefined;
-    style?: React.CSSProperties | undefined;
+    style?: CSSProperties | undefined;
     className: string;
 };
-export declare const getWindowPositioning: () => Omit<Omit<Positioning, "x">, "y">;
-export declare const getPositioning: (node: HTMLElement) => Positioning;
-export declare const getPositionAroundTarget: (target: HTMLElement, element: HTMLElement, position?: "top" | "bottom" | "left" | "right") => {
-    position: string;
-    y: number;
-    x: number;
-};
 export declare const getDOMSizeFromCodeZeroSize: (size: Code0Sizes | CSSProperties["x"]) => CSSProperties["x"];
+export declare const hashToColor: (s: string, from?: number, to?: number) => string;

package/dist/utils/utils.js

@@ -1,211 +1,132 @@
-import p from "react";
-import u from "merge-props";
-const $ = (i) => {
-  const r = /-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/, o = parseFloat(i), n = i.match(r) || [], t = n.length > 0 ? i.substr(n[0]?.length ?? 0).trim() : "";
-  return [o, t];
-}, C = (i, r, o, n) => {
-  let t, a = !1;
-  return p.Children.forEach(i, (m, g) => {
-    let e = !0;
-    if (p.isValidElement(m) && n)
-      for (const c in n) {
-        const h = n[c];
-        if (!m.props[c] || m.props[c] != h) {
-          e = !1;
-          break;
-        }
-      }
-    if (p.isValidElement(m) && m.type == r && e)
-      t = m, a = !0;
-    else if (p.Children.count(i) - 1 == g && !a && !t && o) throw new Error(`${r.name} is required`);
-  }), t;
-}, E = (i, ...r) => {
-  const o = p.Children.toArray(i).filter((n) => p.isValidElement(n) ? !r.find((t) => t == n.type) : !0);
-  return o.length == 0 ? null : o;
-}, b = (i) => ({
-  ...i.m ? {
-    margin: `${i.m}rem`
+import t from "merge-props";
+import { md5 as p } from "js-md5";
+const c = (m) => ({
+  ...m.m ? {
+    margin: `${m.m}rem`
   } : {},
-  ...i.my ? {
-    marginTop: `${i.my}rem`,
-    marginBottom: `${i.my}rem`
+  ...m.my ? {
+    marginTop: `${m.my}rem`,
+    marginBottom: `${m.my}rem`
   } : {},
-  ...i.mx ? {
-    marginLeft: `${i.mx}rem`,
-    marginRight: `${i.mx}rem`
+  ...m.mx ? {
+    marginLeft: `${m.mx}rem`,
+    marginRight: `${m.mx}rem`
   } : {},
-  ...i.mt ? {
-    marginTop: `${i.mt}rem`
+  ...m.mt ? {
+    marginTop: `${m.mt}rem`
   } : {},
-  ...i.mb ? {
-    marginBottom: `${i.mb}rem`
+  ...m.mb ? {
+    marginBottom: `${m.mb}rem`
   } : {},
-  ...i.ml ? {
-    marginLeft: `${i.ml}rem`
+  ...m.ml ? {
+    marginLeft: `${m.ml}rem`
   } : {},
-  ...i.mr ? {
-    marginRight: `${i.mr}rem`
+  ...m.mr ? {
+    marginRight: `${m.mr}rem`
   } : {},
-  ...i.p ? {
-    padding: `${i.p}rem`
+  ...m.p ? {
+    padding: `${m.p}rem`
   } : {},
-  ...i.py ? {
-    paddingTop: `${i.py}rem`,
-    paddingBottom: `${i.py}rem`
+  ...m.py ? {
+    paddingTop: `${m.py}rem`,
+    paddingBottom: `${m.py}rem`
   } : {},
-  ...i.px ? {
-    paddingLeft: `${i.px}rem`,
-    paddingRight: `${i.px}rem`
+  ...m.px ? {
+    paddingLeft: `${m.px}rem`,
+    paddingRight: `${m.px}rem`
   } : {},
-  ...i.pt ? {
-    paddingTop: `${i.pt}rem`
+  ...m.pt ? {
+    paddingTop: `${m.pt}rem`
   } : {},
-  ...i.pb ? {
-    paddingBottom: `${i.pb}rem`
+  ...m.pb ? {
+    paddingBottom: `${m.pb}rem`
   } : {},
-  ...i.pl ? {
-    paddingLeft: `${i.pl}rem`
+  ...m.pl ? {
+    paddingLeft: `${m.pl}rem`
   } : {},
-  ...i.pr ? {
-    paddingRight: `${i.pr}rem`
+  ...m.pr ? {
+    paddingRight: `${m.pr}rem`
   } : {},
-  ...i.bg ? {
-    backgroundColor: i.bg
+  ...m.bg ? {
+    backgroundColor: m.bg
   } : {},
-  ...i.c ? {
-    color: i.c
+  ...m.c ? {
+    color: m.c
   } : {},
-  ...i.opacity ? {
-    opacity: i.opacity
+  ...m.opacity ? {
+    opacity: m.opacity
   } : {},
-  ...i.ff ? {
-    fontFamily: i.ff
+  ...m.ff ? {
+    fontFamily: m.ff
   } : {},
-  ...i.fz ? {
-    fontSize: `${i.fz}rem`
+  ...m.fz ? {
+    fontSize: `${m.fz}rem`
   } : {},
-  ...i.ta ? {
-    textAlign: i.ta
+  ...m.ta ? {
+    textAlign: m.ta
   } : {},
-  ...i.w ? {
-    width: i.w
+  ...m.w ? {
+    width: m.w
   } : {},
-  ...i.miw ? {
-    minWidth: i.miw
+  ...m.miw ? {
+    minWidth: m.miw
   } : {},
-  ...i.maw ? {
-    maxWidth: i.maw
+  ...m.maw ? {
+    maxWidth: m.maw
   } : {},
-  ...i.h ? {
-    height: i.h
+  ...m.h ? {
+    height: m.h
   } : {},
-  ...i.mih ? {
-    minHeight: i.mih
+  ...m.mih ? {
+    minHeight: m.mih
   } : {},
-  ...i.mah ? {
-    maxHeight: i.mah
+  ...m.mah ? {
+    maxHeight: m.mah
   } : {},
-  ...i.pos ? {
-    position: i.pos
+  ...m.pos ? {
+    position: m.pos
   } : {},
-  ...i.top ? {
-    top: i.top
+  ...m.top ? {
+    top: m.top
   } : {},
-  ...i.left ? {
-    left: i.left
+  ...m.left ? {
+    left: m.left
   } : {},
-  ...i.bottom ? {
-    bottom: i.bottom
+  ...m.bottom ? {
+    bottom: m.bottom
   } : {},
-  ...i.right ? {
-    right: i.right
+  ...m.right ? {
+    right: m.right
   } : {},
-  ...i.display ? {
-    display: i.display
+  ...m.display ? {
+    display: m.display
   } : {},
-  ...i.flex ? {
-    flex: i.flex
+  ...m.flex ? {
+    flex: m.flex
   } : {},
-  ...i.align ? {
-    alignItems: i.align
+  ...m.align ? {
+    alignItems: m.align
   } : {},
-  ...i.justify ? {
-    justifyContent: i.justify
+  ...m.justify ? {
+    justifyContent: m.justify
   } : {},
-  ...i.tf ? {
-    transform: i.tf
+  ...m.tf ? {
+    transform: m.tf
   } : {}
-}), F = (i, r) => {
-  const o = b(r), n = {
+}), b = (m, r) => {
+  const i = c(r), o = {
     ...r
   };
   return ["m", "my", "mx", "mt", "mb", "ml", "mr", "p", "py", "px", "pt", "pb", "pl", "pr", "bg", "c", "opacity", "ff", "fz", "fw", "lts", "ta", "lh", "fs", "tt", "td", "w", "miw", "maw", "h", "mih", "mah", "bgsz", "bgp", "bgr", "bga", "pos", "top", "left", "bottom", "right", "inset", "display", "flex", "align", "justify", "tf"].forEach((a) => {
-    delete n[a];
-  }), u(n, {
-    className: i,
-    ...Object.keys(o).length !== 0 ? {
-      style: o
+    delete o[a];
+  }), t(o, {
+    className: m,
+    ...Object.keys(i).length !== 0 ? {
+      style: i
     } : {}
   });
-}, x = () => ({
-  height: window.innerHeight,
-  width: window.innerWidth
-}), f = (i) => ({
-  width: i.offsetWidth,
-  height: i.offsetHeight,
-  x: i.getBoundingClientRect().left,
-  y: i.getBoundingClientRect().top
-}), R = (i, r, o = "bottom") => {
-  const t = f(i), a = f(r), m = x(), g = [{
-    name: "bottom",
-    hierarchy: ["top", "left", "right"],
-    calculationY: t.y + t.height + 8,
-    calculationX: t.x,
-    conditionFit: t.y + t.height + 8 + a.height <= m.height
-  }, {
-    name: "top",
-    hierarchy: ["bottom", "left", "right"],
-    calculationY: t.y - 8 - a.height,
-    calculationX: t.x,
-    conditionFit: t.y - 8 - a.height >= 0
-  }, {
-    name: "left",
-    hierarchy: ["right", "bottom", "top"],
-    calculationY: t.y,
-    calculationX: t.x - 8 - a.width,
-    conditionFit: t.x - 8 - a.width >= 0
-  }, {
-    name: "right",
-    hierarchy: ["left", "bottom", "top"],
-    calculationY: t.y,
-    calculationX: t.x + 8 + t.width,
-    conditionFit: t.x + t.width + 8 + a.width <= m.width
-  }], e = g.find((c) => c.name == o);
-  if (!e) return {
-    position: "bottom",
-    y: g[0].calculationY,
-    x: g[0].calculationX
-  };
-  if (e.conditionFit) return {
-    position: o,
-    y: e.calculationY,
-    x: e.calculationX
-  };
-  for (let c = 0; c < e.hierarchy.length; c++) {
-    const h = g.find((d) => d.name == e.hierarchy[c]);
-    if (h?.conditionFit) return {
-      position: h.name,
-      y: h.calculationY,
-      x: h.calculationX
-    };
-  }
-  return {
-    position: "bottom",
-    y: g[0].calculationY,
-    x: g[0].calculationX
-  };
-}, X = (i) => {
-  switch (i) {
+}, x = (m) => {
+  switch (m) {
     case "xxs":
       return "0.35rem";
     case "xs":
@@ -219,16 +140,20 @@ const $ = (i) => {
     case "xl":
       return "1.3rem";
     default:
-      return i;
+      return m;
   }
+}, f = 137.50776405003785, h = (m) => {
+  const r = m.match(/\/(\d+)\s*$/);
+  return r ? Number(r[1]) : null;
+}, e = (m, r = 25, i = 320) => {
+  const o = i - r, n = h(m);
+  if (n != null)
+    return `hsl(${r + n * f % o}, 100%, 72%)`;
+  const a = p(p(m)), g = parseInt(a.slice(0, 8), 16);
+  return `hsl(${r + g % o}, 100%, 72%)`;
 };
 export {
-  C as getChild,
-  E as getContent,
-  X as getDOMSizeFromCodeZeroSize,
-  R as getPositionAroundTarget,
-  f as getPositioning,
-  x as getWindowPositioning,
-  F as mergeCode0Props,
-  $ as parseUnit
+  x as getDOMSizeFromCodeZeroSize,
+  e as hashToColor,
+  b as mergeCode0Props
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@code0-tech/pictor",
-  "version": "0.0.0-mvp.43",
+  "version": "0.0.0-mvp.44",
   "type": "module",
   "description": "A simple template for a custom React component library",
   "scripts": {
@@ -23,7 +23,12 @@
     "@code0-tech/sagittarius-graphql-types": "^0.0.0-703d578a55a3f0f20be3cb6892418f9e04d25716",
     "@codemirror/autocomplete": "^6.20.0",
     "@codemirror/lang-json": "^6.0.2",
+    "@codemirror/language": "^6.12.1",
+    "@codemirror/lint": "^6.9.4",
+    "@codemirror/state": "^6.5.4",
+    "@codemirror/view": "^6.39.13",
     "@dagrejs/dagre": "^2.0.3",
+    "@lezer/common": "^1.5.1",
     "@mdx-js/react": "^3.1.1",
     "@monaco-editor/react": "^4.7.0",
     "@radix-ui/react-checkbox": "^1.3.3",
@@ -93,11 +98,7 @@
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-lib-inject-css": "^2.2.2",
     "vitest": "^4.0.17",
-    "@codemirror/lint": "^6.9.4",
-    "@codemirror/language": "^6.12.1",
-    "@codemirror/state": "^6.5.4",
-    "@codemirror/view": "^6.39.13",
-    "@lezer/common": "^1.5.1"
+    "avvvatars-react": "^0.4.2"
   },
   "main": "dist/index.js",
   "repository": {
@@ -112,11 +113,11 @@
     "@ariakit/react": "^0.4.17",
     "@code0-tech/sagittarius-graphql-types": "0.0.0-703d578a55a3f0f20be3cb6892418f9e04d25716",
     "@codemirror/autocomplete": "^6.20.0",
-    "@codemirror/lint": "^6.9.4",
-    "@codemirror/view": "^6.39.13",
     "@codemirror/lang-json": "^6.0.2",
-    "@codemirror/state": "^6.5.4",
     "@codemirror/language": "^6.12.1",
+    "@codemirror/lint": "^6.9.4",
+    "@codemirror/state": "^6.5.4",
+    "@codemirror/view": "^6.39.13",
     "@monaco-editor/react": "^4.7.0",
     "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-context-menu": "^2.2.16",
@@ -144,7 +145,8 @@
     "react-resizable-panels": "^4.3.1",
     "react-syntax-highlighter": "^16.1.0",
     "react-zoom-pan-pinch": "^3.7.0",
-    "sonner": "^2.0.7"
+    "sonner": "^2.0.7",
+    "avvvatars-react": "^0.4.2"
   },
   "publishConfig": {
     "access": "public"