querysub 0.431.0 → 0.433.0

package/.cursor/rules/css.mdc

@@ -0,0 +1,58 @@
+---
+description: CSS and Styling rules
+globs: *
+alwaysApply: true
+---
+
+# CSS and Styling Rules
+
+- Never use `<h2>`, `<h3>`, etc, they have bad styling.
+- If you want to make a NON-Button feel like a button, you can use `css.button`, which makes the background color change on hover, and make the cursor a pointer. Only use this if the background color is set, otherwise you need to message it's a button in another way. And never use it for `<Button>` which already does this.
+- General use hbox/vbox to set the spacing between elements, instead of using margins.
+- Never use em or rem. Only use px or vw/vh/%.
+- Don't add font colors unless asked to add styling. Don't add any aethetics beyond hbox/vbox/pad2 unless asked to add styling. Don't add fontSize unless asked to add styling. If you believe styling is possible, just tell the user, I can add styling, but won't do it unless you ask me to.
+- css should be set using `className={css.cssPropertyName(cssPropertyValue).anotherPropertyName...}`
+- There are also some special aliases, some of which take parameters, some of which don't (which allows them to be chained like so: `css.vbox0.wrap`):
+
+```typescript
+let nonCallAliases = {
+    relative: (c: CSSHelperTypeBase) => c.position("relative"),
+    absolute: (c: CSSHelperTypeBase) => c.position("absolute"),
+    fixed: (c: CSSHelperTypeBase) => c.position("fixed"),
+    wrap: (c: CSSHelperTypeBase) => c.flexWrap("wrap").display("flex", "soft").alignItems("center", "soft"),
+    marginAuto: (c: CSSHelperTypeBase) => c.margin("auto"),
+    fillBoth: (c: CSSHelperTypeBase) => c.width("100%").height("100%"),
+    fillWidth: (c: CSSHelperTypeBase) => c.width("100%"),
+    fillHeight: (c: CSSHelperTypeBase) => c.height("100%"),
+    flexShrink0: (c: CSSHelperTypeBase) => c.flexShrink(0),
+    ellipsis: (c: CSSHelperTypeBase) => c.overflow("hidden").textOverflow("ellipsis").whiteSpace("nowrap").display("inline-block"),
+    overflowAuto: (c: CSSHelperTypeBase) => c.overflow("auto"),
+    overflowHidden: (c: CSSHelperTypeBase) => c.overflow("hidden"),
+};
+
+let callAliases = {
+    hbox: (c: CSSHelperTypeBase, gap: number, rowGap?: number) => c.display("flex").flexDirection("row").rowGap(rowGap ?? gap).columnGap(gap).alignItems("center", "soft"),
+    vbox: (c: CSSHelperTypeBase, gap: number, columnGap?: number) => c.display("flex").flexDirection("column").rowGap(gap).columnGap(columnGap ?? gap).alignItems("start", "soft"),
+    pad2: (c: CSSHelperTypeBase, value: number, verticalValue?: number): CSSHelperTypeBase => {
+        if (verticalValue !== undefined) return c.padding(`${verticalValue}px ${value}px` as any);
+        return c.padding(value);
+    },
+    hsl: (c: CSSHelperTypeBase, h: number, s: number, l: number): CSSHelperTypeBase => c.background(`hsl(${h}, ${s}%, ${l}%)`),
+    hslhover: (c: CSSHelperTypeBase, h: number, s: number, l: number): CSSHelperTypeBase => c.background(`hsl(${h}, ${s}%, ${l}%)`, "hover"),
+    hsla: (c: CSSHelperTypeBase, h: number, s: number, l: number, a: number): CSSHelperTypeBase => c.background(`hsla(${h}, ${s}%, ${l}%, ${a})`),
+    hslahover: (c: CSSHelperTypeBase, h: number, s: number, l: number, a: number): CSSHelperTypeBase => c.background(`hsla(${h}, ${s}%, ${l}%, ${a})`, "hover"),
+    bord: (c: CSSHelperTypeBase, width: number, color: string | { h: number; s: number; l: number; a?: number; }, style = "solid"): CSSHelperTypeBase => {
+        let colorStr = typeof color === "string" ? color : `hsla(${color.h}, ${color.s}%, ${color.l}%, ${color.a ?? 1})`;
+        return c.border(`${width}px ${style} ${colorStr}`);
+    },
+    bord2: (c: CSSHelperTypeBase, h: number, s: number, l: number, width = 1, style = "solid"): CSSHelperTypeBase => {
+        return c.border(`${width}px ${style} hsla(${h}, ${s}%, ${l}%, 1)`);
+    },
+    hslcolor: (c: CSSHelperTypeBase, h: number, s: number, l: number): CSSHelperTypeBase => c.color(`hsl(${h}, ${s}%, ${l}%)`),
+    colorhsl: (c: CSSHelperTypeBase, h: number, s: number, l: number): CSSHelperTypeBase => c.color(`hsl(${h}, ${s}%, ${l}%)`),
+    hslacolor: (c: CSSHelperTypeBase, h: number, s: number, l: number, a: number): CSSHelperTypeBase => c.color(`hsla(${h}, ${s}%, ${l}%, ${a})`),
+    colorhsla: (c: CSSHelperTypeBase, h: number, s: number, l: number, a: number): CSSHelperTypeBase => c.color(`hsla(${h}, ${s}%, ${l}%, ${a})`),
+    size: (c: CSSHelperTypeBase, width: LengthOrPercentage, height: LengthOrPercentage) => c.width(width).height(height),
+    pos: (c: CSSHelperTypeBase, x: LengthOrPercentage, y: LengthOrPercentage) => c.left(x).top(y),
+};
+```

package/.cursor/rules/general.mdc

@@ -0,0 +1,35 @@
+---
+description: General Typescript and coding rules
+globs: *
+alwaysApply: true
+---
+
+# General Rules
+
+- The code automatically updates on save, so you do not need to ever run commands to run the site.
+- NEVER copy and paste code. Use functions correctly, unless making it a function is more code than not making it a function.
+- Unless schema values use atomic or type they will always be returned as a value (as a proxy). Use "in" to check if a value is in a `t.lookup`.
+- Use double quotes.
+- When running a command in the current project, don't "cd" to it. It's redundant, and won't work.
+- Use the tool calls in order to modify files. Don't try to run terminal commands to modify files.
+- Don't use redundant comments. If it's a single line and the function name says the same thing that the comment is going to say, you don't need the comment.
+- When you're inline passing a lambda as an argument, never specify the type. The type should always be inferred. Specifying the type is bad, and it's hard coding, and we don't like hard coding.
+- Follow the rule of minimum scoping. If something can be a local variable, it should be a local variable, it shouldn't be a class variable. If it can be a class variable, it should be a class variable, not a state variable. Etc, etc. Keep it simple, reference things closer, and write less code.
+- Try not to use "null", and instead always use "undefined".
+- Use square brackets for arrays, not a generic.
+  - USE: `T[]`
+  - NEVER: `Array<T>`
+- Never try to add dynamic pluralization in the UI, just use an s. If you add dynamic pluralization, if the code ever gets localized, all of your changes have to be undone, and you just made localization much harder.
+- Never use the ternary operator. Instead, do this: `x ? y : z` => `x && y || z`.
+- The site automatically builds and hotreloads. Just save the files. DO NOT try to run any build scripts, because it automatically builds on save. DO NOT RUN "npm run build". DO NOT TRY TO RUN UNIT TESTS. DO NOT TRY TO RUN TESTS.
+- When checking for if a value lies within a range, compare like so: `start <= pos && pos < end`. Specifically, making the pos in the middle.
+- Never use non-null assertion operator, instead check the value, and if necessary (because it is accessed in nested functions), use a const variable to preserve the type.
+- Errors should almost always use a template string to include the expected value, and the actual value, as in: `throw new Error(\`Expected X, was ${Y}\`);`
+- Don't use switch statements. Use if statements instead.
+- Don't use `!` when accessing a value from a map. Use the get / if undefined initialize and set, and then use style. It's faster, and more type safe.
+- NEVER use the non-null assertion operator. Null check correctly, using const if required to preserve the assertion.
+- Sort with this function, which takes a single function to map each object to a sortable value:
+  ```typescript
+  import { sort } from "socket-function/src/misc";
+  export function sort<T>(arr: T[], sortKey: (obj: T) => unknown);
+  ```

package/.cursor/rules/react.mdc

@@ -0,0 +1,27 @@
+---
+description: React and State Management rules
+globs: *
+alwaysApply: true
+---
+
+# React and State Rules
+
+- Always directly set the state (`this.state.x = 1`), and never use `setState`.
+- NEVER EVER pass state to `qreact.Component` as a template parameter. It should ALSO be declared like so (inside the class):
+  ```typescript
+  state = t.state({
+      num: t.number,
+      nested: {
+          atomicObj: t.atomic<{ nestedAtomicField: number }>;
+          k: t.string
+      },
+      // All lookups are keyed by string
+      //  (There is no t.array, arrays are not allowed, unless they are inside t.atomic)
+      lookup: t.lookup({
+          userName: t.string
+      })
+  });
+  ```
+- `t.lookup` objects cannot be set with `this.state.someLookup = {}`. You can add keys or remove keys, and keys are added implicitly (`this.state.someLookup["someKey"] = { x: 1, y: 1 }`, always works, the key is automatically added if it doesn't exist). Removal uses delete `delete this.state.someLookup["someKey"]`.
+- If are inside an async Event Handlers, you need to use... `Querysub.onCommitFinished(() => ...)` and put the async code inside the callback. Then when you set state, you need to put the state setting code inside of `Querysub.commit(() => ...)`.
+- Use `<InputLabel />` (from "querysub/src/library-components/InputLabel"), instead of `<input />`. Use `<InputLabel textarea />` instead of `<textarea />`. The input props of this allow you to set a label with "label", to act as a number with "number", as an integer with "integer", as a checkbox with "checkbox", and allow clicking to edit with "edit". There is a callback called "onChangeValue" which returns new values (as opposed to the entire event), which is useful.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "querysub",
-  "version": "0.431.0",
+  "version": "0.433.0",
   "main": "index.js",
   "license": "MIT",
   "note1": "note on node-forge fork, see https://github.com/digitalbazaar/forge/issues/744 for details",
@@ -62,7 +62,7 @@
     "pako": "^2.1.0",
     "peggy": "^5.0.6",
     "querysub": "^0.357.0",
-    "socket-function": "^1.1.19",
+    "socket-function": "^1.1.20",
     "terser": "^5.31.0",
     "typesafecss": "^0.28.0",
     "yaml": "^2.5.0",

package/src/-f-node-discovery/NodeDiscovery.ts

@@ -331,8 +331,7 @@ async function syncArchives() {
         // Make sure we are present
         await writeHeartbeat();
         let nodeIds = await archives().find("");
-        console.log(green(`Syncing node ids from archives`), { nodeIds });
-        console.log(green(`Synced node ids from archives`), { nodeIds });
+        console.info(`Synced node ids from archives`, { nodeIds });
         await setNodeIds(nodeIds);
     } else {
         if (isNoNetwork() || !isNode()) {