@adaptive-sm/astro-ui 0.1.0

package/lib/utils/ran/generateId6.ts

@@ -0,0 +1,7 @@
+import { generateReadableId } from "~/utils/ran/generateReadableId"
+
+const gen = generateReadableId(6)
+
+export function generateId6(): string {
+  return gen()
+}

package/lib/utils/ran/generateId7.ts

@@ -0,0 +1,7 @@
+import { generateReadableId } from "~/utils/ran/generateReadableId"
+
+const gen = generateReadableId(7)
+
+export function generateId7(): string {
+  return gen()
+}

package/lib/utils/ran/generateReadableId.ts

@@ -0,0 +1,35 @@
+import { urlAlphabet32 } from "./urlAlphabet32"
+
+/**
+ * * works in browser
+ * * completely random, not sequential as a feature
+ * * 32 chars: url friendly, readable, not disambiguate
+ * * variable length
+ * * uses secure crypto/web-crypto/node:crypto api
+ * * generates in batches of 4 for better perf
+ * @param len - character amount
+ */
+export function generateReadableId(len: number = 16): () => string {
+  const arr = new Uint16Array(Math.ceil(len / 4))
+  return () => {
+    crypto.getRandomValues(arr)
+    let r = ""
+    for (const a of arr) {
+      const n1 = (a >> 9) % 32
+      r += urlAlphabet32[n1]!
+      if (r.length >= len) return r
+
+      const n2 = (a >> 6) % 32
+      r += urlAlphabet32[n2]!
+
+      if (r.length >= len) return r
+      const n3 = (a >> 3) % 32
+      r += urlAlphabet32[n3]!
+
+      if (r.length >= len) return r
+      const n4 = a % 32
+      r += urlAlphabet32[n4]!
+    }
+    return r
+  }
+}

package/lib/utils/ran/urlAlphabet32.ts

@@ -0,0 +1,8 @@
+/**
+ * - calculate strength - https://zelark.github.io/nano-id-cc/
+ * - remove 0, O, i, l for better readability and no disambiguity
+ * - 32 length = 10 (numbers) - 1 (no zero) + 26 (alphabet) - 3 (i,l,o)
+ * - ignores casing
+ * - Crockford's Base32 - https://www.crockford.com/base32.html
+ */
+export const urlAlphabet32 = "123456789abcdefghjkmnpqrstuvwxyz"

package/lib/utils/ui/classArr.ts

@@ -0,0 +1,3 @@
+export function classArr(...list: (false | null | undefined | string | 0)[]): string {
+  return list.filter(Boolean).join(" ")
+}

package/lib/utils/ui/classMerge.ts

@@ -0,0 +1,10 @@
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+/**
+ * https://github.com/dcastil/tailwind-merge
+ * @param inputs
+ */
+export function classMerge(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/lib/utils/ui/isDevEnv.ts

@@ -0,0 +1,7 @@
+export function isDevEnv() {
+  return import.meta.env.DEV
+}
+
+export function isProdEnv() {
+  return !isDevEnv()
+}

package/lib/utils/ui/tailwindBreakpoint.ts

@@ -0,0 +1,83 @@
+export type TailwindBreakpoint = keyof typeof tailwindBreakpoint
+
+/**
+ * https://tailwindcss.com/docs/responsive-design
+ */
+export const tailwindBreakpoint = {
+  // sm - 640px = 40rem
+  sm: "sm",
+
+  // md - 768px = 48rem
+  md: "md",
+
+  // lg - 1024px = 64rem
+  lg: "lg",
+
+  // xl - 1280px = 80rem
+  xl: "xl",
+
+  // 2xl - 2560px = 160rem
+  "2xl": "2xl",
+
+  // 3xl - 3840px = 240rem
+  "3xl": "3xl",
+} as const
+
+export const tailwindBreakpointW = {
+  sm: "40rem",
+  md: "48rem",
+  lg: "64rem",
+  xl: "80rem",
+  "2xl": "160rem",
+  "3xl": "240rem",
+} as const satisfies Record<TailwindBreakpoint, string>
+
+export const tailwindBreakpointWidthClass = {
+  sm: "xl",
+  md: "3xl",
+  lg: "5xl",
+  xl: "7xl",
+  "2xl": "",
+  "3xl": "",
+} as const satisfies Record<TailwindBreakpoint, string>
+
+/**
+ * assume: 1 column = 200px
+ * xs ~= 400-500
+ * sm - 640px = 40rem -> 4 columns
+ * md - 768px = 48rem -> 5 columns
+ * lg - 1024px = 64rem -> 6 columns
+ * xl - 1280px = 80rem -> 7 columns
+ * https://tailwindcss.com/docs/responsive-design
+ * @param columns - amount of columns
+ * @param sm - amount of columns fit inside tailwind xs/sm (640px)
+ * @param columnsStepSize - amount of columns fit inside an increase in tailwind breakpoint (around 200px)
+ */
+export function tableColumnAmountToTailwindBreakpoint(
+  columns: number,
+  sm = 3,
+  columnsStepSize = 1,
+): TailwindBreakpoint {
+  const v = columns - sm
+  if (v === columnsStepSize) return tailwindBreakpoint.md
+  if (v === columnsStepSize * 2) return tailwindBreakpoint.lg
+  if (v >= columnsStepSize * 3) return tailwindBreakpoint.xl
+  return tailwindBreakpoint.sm
+}
+
+// max-w-3xs - 16rem - 256px
+// max-w-2xs - 18rem - 288px
+// max-w-xs - 20rem - 320px
+// max-w-sm - 24rem - 384px
+// max-w-md - 28rem - 448px
+// max-w-lg - 32rem - 512px
+// max-w-xl - 36rem - 576px
+// max-w-2xl - 42rem - 672px
+// max-w-3xl - 48rem - 768px
+// max-w-4xl - 56rem - 896px
+// max-w-5xl - 64rem - 1024px
+// max-w-6xl - 72rem - 1152px
+// max-w-7xl - 80rem - 1280px
+// max-w-min
+// max-w-max
+// max-w-fit

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@adaptive-sm/astro-ui",
+  "version": "0.1.0",
+  "type": "module",
+  "private": false,
+  "scripts": {
+    "astro": "astro",
+    "dev": "nice -5 astro dev",
+    "check": "clear && nice -15 astro check --minimumSeverity error",
+    "build": "nice -15 astro build",
+    "deploy": "bun run build && bun run upload && bun run tag",
+    "upload": "bun run wrangler pages deploy ./dist --project-name=adaptive-astro-ui --commit-dirty",
+    "tag": "git branch -f deployed",
+    "generateDemoList": "bun run ./src/pages/demos/generateDemoList.cli.ts",
+    "generateImageList": "bun run ./src/pages/images/generateImageList.cli.ts",
+    "generateAiRulesLib": "bash ./lib/generate_ai_rules/generate_agent_rules_1_lib.bash",
+    "update": "nice -15 bun x npm-check-updates -u && bun i",
+    "update:commit": "bun x npm-check-updates -u && bun i && git add package.json && bun run tsc && git commit -m \"update dependencies\" && git push",
+    "clean": "rm -rf ./dist",
+    "reset": "rm -rf ./node_modules"
+  },
+  "devDependencies": {
+    "@astrojs/check": "^0.9.4",
+    "@biomejs/biome": "^2.2.4",
+    "@mdi/js": "^7.4.47",
+    "@tailwindcss/vite": "^4.1.13",
+    "@types/bun": "latest",
+    "astro": "^5.13.9",
+    "dayjs": "^1.11.18",
+    "image-size": "^2.0.2",
+    "prettier": "^3.6.2",
+    "prettier-plugin-astro": "^0.14.1",
+    "rehype-autolink-headings": "^7.1.0",
+    "rehype-slug": "^6.0.0",
+    "remark-toc": "^9.0.0",
+    "rollup-plugin-visualizer": "^6.0.3",
+    "tailwind-merge": "^3.3.1",
+    "tailwindcss": "^4.1.13",
+    "typescript": "^5.9.2",
+    "wrangler": "^4.38.0"
+  },
+  "prettier": {
+    "semi": false,
+    "printWidth": 120,
+    "trailingComma": "all",
+    "plugins": [
+      "prettier-plugin-astro"
+    ]
+  },
+  "files": [
+    "lib"
+  ],
+  "exports": {
+    "./*": "./lib/*"
+  }
+}