@signosoft/signpad-js 0.2.3 → 0.3.1

package/package.json

@@ -1,14 +1,9 @@
 {
   "name": "@signosoft/signpad-js",
   "private": false,
-  "version": "0.2.3",
+  "version": "0.3.1",
   "browser": {
-    "fs": false,
-    "path": false,
-    "url": false,
-    "node:process": false,
-    "node:readline/promises": false,
-    "chalk": false
+    "fs": false
   },
   "type": "module",
   "main": "./dist/signosoft-signpad.umd.cjs",
@@ -25,12 +20,8 @@
       "default": "./dist/angular/fesm2022/signpad-js-angular.mjs"
     }
   },
-  "bin": {
-    "getSignpadTheme": "src/scripts/generate-theme.js"
-  },
   "files": [
     "dist",
-    "src/scripts/generate-theme.js",
     "src/styles/styles-variables.css",
     "src/styles/signosoft-signpad.css",
     "docsVideo.gif",
@@ -47,7 +38,6 @@
     "lit": "^3.3.1"
   },
   "devDependencies": {
-    "chalk": "^5.6.2",
     "@rollup/plugin-replace": "^6.0.3",
     "@types/node": "^25.0.9",
     "typescript": "~5.9.3",

package/src/styles/signosoft-signpad.css

@@ -1,4 +1,4 @@
-@import "./styles-variables.css"; 
+@import "./styles-variables.css";
 
 html {
   font-family: var(--sign-font-family) !important;
@@ -19,6 +19,10 @@ html {
   background-color: var(--sign-top-bar-bg-base);
   color: var(--sign-top-bar-text-base);
   align-items: center;
+  border-top-left-radius: var(--sign-top-bar-border-top-left-radius);
+  border-top-right-radius: var(--sign-top-bar-border-top-right-radius);
+  border-bottom-left-radius: var(--sign-top-bar-border-bottom-left-radius);
+  border-bottom-right-radius: var(--sign-top-bar-border-bottom-right-radius);
 }
 
 .signpad-top-left-actions,
@@ -44,11 +48,39 @@ html {
   background-color: var(--sign-canvas-bg-base);
   box-sizing: border-box;
   overflow: hidden;
+  border-top-left-radius: var(--sign-canvas-wrapper-border-top-left-radius);
+  border-top-right-radius: var(--sign-canvas-wrapper-border-top-right-radius);
+  border-bottom-left-radius: var(
+    --sign-canvas-wrapper-border-bottom-left-radius
+  );
+  border-bottom-right-radius: var(
+    --sign-canvas-wrapper-border-bottom-right-radius
+  );
+}
+
+.signpad-canvas-container > .signpad-canvas-wrapper:first-child {
+  --sign-canvas-wrapper-border-top-left-radius: var(
+    --sign-common-border-radius
+  );
+  --sign-canvas-wrapper-border-top-right-radius: var(
+    --sign-common-border-radius
+  );
+}
+
+.signpad-canvas-container > .signpad-canvas-wrapper:last-child {
+  --sign-canvas-wrapper-border-bottom-left-radius: var(
+    --sign-common-border-radius
+  );
+  --sign-canvas-wrapper-border-bottom-right-radius: var(
+    --sign-common-border-radius
+  );
 }
 .signpad-canvas {
   position: absolute;
   width: 100%;
-  height: calc(100% - var(--sign-canvas-height-offset));
+  height: calc(
+    100% - (var(--sign-canvas-height-offset) + var(--sign-line-margin-bottom))
+  );
   left: 0;
   top: 0;
 }
@@ -93,17 +125,20 @@ html {
   padding: var(--sign-bottom-bar-padding);
   min-height: var(--sign-bottom-bar-min-height);
   background-color: var(--sign-bottom-bar-bg-base);
+  border-top-left-radius: var(--sign-bottom-bar-border-top-left-radius);
+  border-top-right-radius: var(--sign-bottom-bar-border-top-right-radius);
+  border-bottom-left-radius: var(--sign-bottom-bar-border-bottom-left-radius);
+  border-bottom-right-radius: var(--sign-bottom-bar-border-bottom-right-radius);
 }
 .btn {
   font-family: var(--sign-font-family);
   min-height: var(--sign-button-min-height);
   padding: var(--sign-button-padding);
   margin: 0;
-  border: none;
-  font-weight: 500;
+  font-weight: var(--sign-button-font-weight);
   width: 100%;
   font-size: var(--sign-button-font-size);
-  border-radius: 8px;
+  border-radius: var(--sign-button-border-radius);
   transition:
     background-color 0.3s ease,
     color 0.3s ease,
@@ -119,14 +154,17 @@ html {
 .btn-primary {
   background-color: var(--sign-button-primary-bg-base);
   color: var(--sign-button-primary-text-base);
+  border: var(--sign-button-primary-border-base);
 }
 .btn-primary:hover:not(:disabled) {
   background-color: var(--sign-button-primary-bg-hover);
   color: var(--sign-button-primary-text-hover);
+  border: var(--sign-button-primary-border-hover);
 }
 .btn-primary:disabled {
   background-color: var(--sign-button-primary-bg-disabled);
   color: var(--sign-button-primary-text-disabled);
+  border: var(--sign-button-primary-border-disabled);
 }
 .btn-link {
   background-color: var(--sign-button-link-bg-base);

package/src/styles/styles-variables.css

@@ -12,25 +12,34 @@
   --min-height: 48px;
   --spacing-constraints: 16px 24px;
 
-
   /* CSS Variables */
   --sign-font-family: Arial, Helvetica, sans-serif;
+  --sign-common-border-radius: 8px;
 
   /* Top Bar */
   --sign-top-bar-bg-base: var(--background-color-10);
   --sign-top-bar-text-base: var(--primary-color-0);
   --sign-top-bar-padding: var(--spacing-constraints);
   --sign-top-bar-min-height: var(--min-height);
+  --sign-top-bar-border-top-left-radius: var(--sign-common-border-radius);
+  --sign-top-bar-border-top-right-radius: var(--sign-common-border-radius);
+  --sign-top-bar-border-bottom-left-radius: 0;
+  --sign-top-bar-border-bottom-right-radius: 0;
 
   /* Canvas Area */
   --sign-canvas-bg-base: var(--background-color-0);
+  --sign-canvas-wrapper-border-top-left-radius: 0;
+  --sign-canvas-wrapper-border-top-right-radius: 0;
+  --sign-canvas-wrapper-border-bottom-left-radius: 0;
+  --sign-canvas-wrapper-border-bottom-right-radius: 0;
 
   /* Line */
   --sign-line-height: 22px;
+  --sign-line-margin-bottom: 16px;
   --sign-line-border-base: var(--primary-color-10);
   --sign-line-additional-text-color: var(--text-color-0);
-  --sign-line-margin: var(--spacing-constraints);
-  --sign-canvas-line-text-font-size: clamp(6px, 1.5vw, 12px);
+  --sign-line-margin: 0px 24px var(--sign-line-margin-bottom) 24px;
+  --sign-canvas-line-text-font-size: 12px;
   --sign-canvas-height-offset: var(--sign-line-height);
 
   /* Bottom Bar */
@@ -38,28 +47,39 @@
   --sign-bottom-bar-padding: var(--spacing-constraints);
   --sign-bottom-bar-min-height: var(--min-height);
   --sign-bottom-bar-gap: 12px;
+  --sign-bottom-bar-border-top-left-radius: 0;
+  --sign-bottom-bar-border-top-right-radius: 0;
+  --sign-bottom-bar-border-bottom-left-radius: var(--sign-common-border-radius);
+  --sign-bottom-bar-border-bottom-right-radius: var(
+    --sign-common-border-radius
+  );
 
   /* Button general settings */
-  --sign-button-font-size: clamp(12px, 1.5vw, 16px);
+  --sign-button-font-size: 16px;
   --sign-button-padding: 14px 16px;
   --sign-button-min-height: var(--min-height);
+  --sign-button-border-radius: var(--sign-common-border-radius);
+  --sign-button-font-weight: 500;
 
   /* Primary Buttons (OK, Clear, Cancel) */
-  --sign-button-primary-bg-base:  var(--primary-color-0);
+  --sign-button-primary-bg-base: var(--primary-color-0);
   --sign-button-primary-bg-hover: var(--primary-color-10);
   --sign-button-primary-bg-disabled: var(--grey-color);
   --sign-button-primary-text-base: var(--white-color);
   --sign-button-primary-text-hover: var(--white-color);
   --sign-button-primary-text-disabled: var(--white-color);
+  --sign-button-primary-border-base: 1px solid var(--primary-color-0);
+  --sign-button-primary-border-hover: 1px solid var(--primary-color-10);
+  --sign-button-primary-border-disabled: 1px solid var(--grey-color);
 
   /* Link Buttons (Connect signpad) */
   --sign-button-link-bg-base: transparent;
   --sign-button-link-bg-hover: var(--background-color-10);
   --sign-button-link-bg-disabled: transparent;
-  --sign-button-link-text-base:  var(--primary-color-0);
+  --sign-button-link-text-base: var(--primary-color-0);
   --sign-button-link-text-hover: var(--primary-color-10);
   --sign-button-link-text-disabled: var(--grey-color);
-  --sign-button-link-border-base: 1px solid  var(--primary-color-0);
+  --sign-button-link-border-base: 1px solid var(--primary-color-0);
   --sign-button-link-border-hover: 1px solid var(--primary-color-10);
   --sign-button-link-border-disabled: 1px solid var(--grey-color);
 
@@ -70,7 +90,7 @@
   /* Loading Overlay */
   --sign-loading-overlay-bg-color: rgba(255, 255, 255, 0.8);
   --sign-loading-overlay-text-color: var(--text-color-0);
-  --sign-loading-overlay-spinner-color:  var(--primary-color-0);
+  --sign-loading-overlay-spinner-color: var(--primary-color-0);
   --sign-loading-overlay-spinner-border-color: rgba(78, 86, 234, 0.1);
   --sign-loading-overlay-spinner-size: 30px;
-}
+}

package/src/scripts/generate-theme.js

@@ -1,340 +0,0 @@
-#!/usr/bin/env node
-import fs from "fs";
-import path from "path";
-import { fileURLToPath } from "url";
-import { stdin as stdinStream, stdout as stdoutStream } from "node:process";
-import { createInterface } from "node:readline/promises";
-import chalk from "chalk";
-
-// Define your brand color using chalk's hex method
-const brandPrimary = chalk.hex("#4e56ea");
-
-const args = process.argv.slice(2);
-
-const getArg = (name, fallback = undefined) => {
-  const idx = args.indexOf(name);
-  if (idx === -1) return fallback;
-
-  // Check if the argument is a flag without a value (e.g., --force)
-  if (idx + 1 >= args.length || args[idx + 1].startsWith("--")) {
-    return true; // If it's just a flag, return true
-  }
-  return args[idx + 1];
-};
-
-// --- Utility function to convert a string to PascalCase for JS identifiers ---
-// This will allow names like 'MyCustomTheme'. It also returns a flag if it made changes.
-const toPascalCase = (str) => {
-  let changed = false;
-  let result = str;
-
-  // 1. Remove non-alphanumeric characters (keeping hyphens/underscores for splitting)
-  const cleanedAlphaNum = result.replace(/[^a-zA-Z0-9_-]/g, "");
-  if (cleanedAlphaNum !== result) changed = true;
-  result = cleanedAlphaNum;
-
-  // 2. Convert after separators (e.g., my-theme -> MyTheme, another_name -> AnotherName)
-  const pascalSeparators = result.replace(
-    /([_-])([a-zA-Z0-9])/g,
-    (_, separator, char) => {
-      if (separator) changed = true; // A separator was found and will be replaced
-      return char.toUpperCase();
-    },
-  );
-  if (pascalSeparators !== result) changed = true;
-  result = pascalSeparators;
-
-  // 3. prepended with an underscore if it's a number
-  if (result.length > 0) {
-    const firstChar = result.charAt(0);
-    if (/[0-9]/.test(firstChar)) {
-      // If starts with a number, prepend underscore
-      result = `_${result}`;
-      changed = true;
-    }
-  }
-
-  return { value: result, changed: changed };
-};
-
-// --- Utility function to make a string safe for filenames (preserves initial casing) ---
-// This will allow names like 'My-Custom-Theme.ts' or 'AnotherName.js'
-const toFilenameSafe = (str) => {
-  return str
-    .replace(/[^a-zA-Z0-9\s-_\.]/g, "") // Keep letters, numbers, spaces, hyphens, underscores, dots
-    .replace(/\s+/g, "-") // Replace spaces with single hyphens
-    .replace(/([_-])([_-])+/g, "$1") // Replace multiple _ or - with a single one (e.g., __ to _, -- to -)
-    .replace(/^-+|-+$/g, ""); // Trim leading/trailing hyphens/underscores
-};
-// -----------------------------------------------------------------------------
-
-// Determine the path to the CSS variables file within your library
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-const packageRoot = path.resolve(__dirname, "..");
-
-// --- CORRECTED PATH HERE ---
-// Based on your provided library structure, 'styles-variables.css' is inside the 'src' folder.
-const defaultCssPathInLibrary = path.join(
-  packageRoot,
-  "styles",
-  "styles-variables.css",
-);
-// ---------------------------
-
-const input = getArg("--in", defaultCssPathInLibrary);
-let out = getArg("--out"); // Required
-let rawNameInput = getArg("--name"); // Capture the user's raw input for --name
-let lang = getArg("--lang", "ts"); // New: Optional, defaults to 'ts'. Can be 'ts' or 'js'.
-
-const shouldPrompt = !out || !rawNameInput || (lang !== "ts" && lang !== "js");
-
-const selectOption = async (title, options, defaultIndex = 0) => {
-  if (!stdinStream.isTTY) {
-    return options[defaultIndex].value;
-  }
-
-  let index = defaultIndex;
-  let linesRendered = 0;
-
-  const buildLines = () => {
-    const lines = [title];
-    for (let i = 0; i < options.length; i++) {
-      const isActive = i === index;
-      const prefix = isActive ? brandPrimary("❯") : " ";
-      const label = isActive
-        ? brandPrimary.bold(options[i].label)
-        : options[i].label;
-      lines.push(` ${prefix} ${label}`);
-    }
-    return lines;
-  };
-
-  const writeLines = (lines, replace = false) => {
-    if (replace && linesRendered > 0) {
-      stdoutStream.write(`\u001b[${linesRendered}A`);
-    }
-    for (let i = 0; i < lines.length; i++) {
-      stdoutStream.write("\r\u001b[2K");
-      stdoutStream.write(lines[i]);
-      stdoutStream.write("\n");
-    }
-    linesRendered = lines.length;
-  };
-
-  const render = () => writeLines(buildLines(), false);
-  const rerender = () => writeLines(buildLines(), true);
-
-  return new Promise((resolve) => {
-    const onData = (buf) => {
-      const key = buf.toString();
-      if (key === "\u0003") {
-        stdinStream.setRawMode(false);
-        stdinStream.off("data", onData);
-        process.exit(1);
-      }
-      if (key === "\u001b[A") {
-        index = (index - 1 + options.length) % options.length;
-        rerender();
-      } else if (key === "\u001b[B") {
-        index = (index + 1) % options.length;
-        rerender();
-      } else if (key === "\r") {
-        stdinStream.setRawMode(false);
-        stdinStream.off("data", onData);
-        stdinStream.pause();
-        stdoutStream.write("\u001b[?25h");
-        stdoutStream.write("\n");
-        resolve(options[index].value);
-      } else {
-        // Ignore any other input and keep the selector clean
-        rerender();
-      }
-    };
-
-    stdinStream.setRawMode(true);
-    stdinStream.resume();
-    stdoutStream.write("\u001b[?25l");
-    render();
-    stdinStream.on("data", onData);
-  });
-};
-
-if (shouldPrompt) {
-  const rl = createInterface({ input: stdinStream, output: stdoutStream });
-  try {
-    if (!out) {
-      out = (
-        await rl.question(
-          `Where should be theme generated? (default = current directory):`,
-        )
-      ).trim();
-      if (!out) {
-        out = process.cwd();
-      }
-    }
-    if (!rawNameInput) {
-      rawNameInput = (
-        await rl.question("Theme name (exported const): ")
-      ).trim();
-    }
-  } finally {
-    rl.close();
-  }
-
-  if (lang !== "ts" && lang !== "js") {
-    lang = "ts";
-  }
-  lang = await selectOption(
-    "Select output language:",
-    [
-      { label: "TypeScript (ts)", value: "ts" },
-      { label: "JavaScript (js)", value: "js" },
-    ],
-    lang === "js" ? 1 : 0,
-  );
-}
-
-// --- Validation for required arguments ---
-if (!out) {
-  console.error(
-    chalk.red("❌ Error:") +
-      ` The ${brandPrimary("--out")} argument is required. Please specify the output file path or directory (e.g., ${brandPrimary("--out src/app/")} or ${brandPrimary("--out src/app/MyTheme.ts")})`,
-  );
-  process.exit(1);
-}
-
-if (!rawNameInput) {
-  console.error(
-    chalk.red("❌ Error:") +
-      ` The ${brandPrimary("--name")} argument is required. Please specify the name for the exported object (e.g., ${brandPrimary("--name MyCustomTheme")})`,
-  );
-  process.exit(1);
-}
-
-// --- Process the name for both purposes ---
-const { value: pascalCaseConstName, changed: nameWasTransformed } =
-  toPascalCase(rawNameInput);
-const safeFilenameBase = toFilenameSafe(rawNameInput); // For constructing filename if --out is a directory
-
-// Only display a warning if the name was actually transformed by toPascalCase
-if (nameWasTransformed) {
-  console.log(
-    chalk.yellow("⚠️ Warning:") +
-      ` The provided object name '${chalk.cyan(rawNameInput)}' has been transformed to '${brandPrimary.bold(pascalCaseConstName)}' for valid JavaScript variable naming.`,
-  );
-}
-
-// Final check for valid JS identifier for the exported const name
-if (!/^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(pascalCaseConstName)) {
-  console.error(
-    chalk.red("❌ Error:") +
-      ` The generated object name '${brandPrimary(pascalCaseConstName)}' is not a valid JavaScript identifier. Please choose a different ${brandPrimary("--name")} that can be converted.`,
-  );
-  process.exit(1);
-}
-
-// Validate --lang argument
-if (lang !== "ts" && lang !== "js") {
-  console.error(
-    chalk.red("❌ Error:") +
-      ` Invalid value for ${brandPrimary("--lang")}. It must be either '${chalk.yellow("ts")}' or '${chalk.yellow("js")}'.`,
-  );
-  process.exit(1);
-}
-
-// --- Determine final output file path and extension ---
-let finalOutputPath;
-let finalExtension;
-
-const outProvidedExtension = path.extname(out); // e.g., '.ts', '.js', or ''
-
-if (outProvidedExtension) {
-  // User provided a full file path with an extension (e.g., "src/app/MyTheme.js")
-  finalOutputPath = out;
-  finalExtension = outProvidedExtension.substring(1); // Remove the leading dot (e.g., "js")
-} else {
-  // User provided a directory path (e.g., "src/app/"), so we construct the filename
-  finalExtension = lang; // Use the --lang argument for the extension (e.g., "ts" or "js")
-  // Use the filename-safe version of the name for the file name, preserving its original casing intent
-  finalOutputPath = path.join(out, `${safeFilenameBase}.${finalExtension}`);
-}
-
-// --- Input File Existence Check ---
-if (!fs.existsSync(input)) {
-  console.error(
-    chalk.red("❌ Error:") +
-      ` Input file '${chalk.yellow(input)}' not found.
-  Please ensure that '${brandPrimary("src/styles-variables.css")}' is included in your ${brandPrimary("package.json")}'s ${brandPrimary("files")} array and is present in the installed library.
-  If you want to use a custom file, specify its path using ${brandPrimary("--in <path/to/file.css>")}`,
-  );
-  process.exit(1);
-}
-
-const cssText = fs.readFileSync(input, "utf8");
-
-const lines = cssText.split(/\r?\n/);
-const output = [];
-output.push(`export const ${pascalCaseConstName} = {`); // Use pascalCaseConstName here
-
-// Initialize this flag *before* the loop
-let lastItemWasVariable = false; // Moved 'let' to define it outside the loop, if it's not already.
-
-for (const rawLine of lines) {
-  const line = rawLine.trim();
-  if (!line) {
-    // If we encounter an empty line in the input, and the last item was a variable,
-    // we can use this as an opportunity to add a blank line, similar to how comments do.
-    // This helps break up variables if the source CSS itself uses blank lines for grouping.
-    if (lastItemWasVariable) {
-      output.push("");
-      lastItemWasVariable = false; // Reset to avoid multiple blank lines
-    }
-    continue; // Skip processing actual empty lines in input
-  }
-
-  if (line.startsWith(":host")) continue; // Assuming you want to ignore this
-  if (line === "}") continue; // Assuming you want to ignore this
-
-  if (line.startsWith("/*") && line.endsWith("*/")) {
-    const comment = line.replace(/^\/\*\s*/, "").replace(/\s*\*\/$/, "");
-
-    // Add a blank line before a grouping comment, if the previous item added was a variable.
-    // This creates visual separation between groups.
-    if (lastItemWasVariable) {
-      output.push("");
-    }
-    output.push(`  // ${comment}`);
-    lastItemWasVariable = false; // Reset the flag, as the last item added was a comment
-    continue;
-  }
-
-  if (line.startsWith("--")) {
-    const match = line.match(/^(--[^:]+):\s*(.+?);\s*$/);
-    if (!match) {
-      console.warn(
-        chalk.yellow("⚠️ Warning:") +
-          ` Line '${chalk.cyan(line)}' looks like a CSS variable but could not be parsed correctly. Skipping.`,
-      );
-      continue;
-    }
-    const [, varName, value] = match;
-    output.push(`  "${varName}": "${value.replace(/"/g, '\\"')}",`);
-    lastItemWasVariable = true; // Mark that a variable was just added
-    continue;
-  }
-}
-
-output.push("};");
-output.push("");
-
-// Create directories for the final output path
-fs.mkdirSync(path.dirname(finalOutputPath), { recursive: true });
-// Write the file
-fs.writeFileSync(finalOutputPath, output.join("\n"), "utf8");
-
-// Success message
-console.log(
-  brandPrimary("✨ Success!") +
-    ` Generated '${chalk.cyan(finalOutputPath)}' from '${chalk.cyan(input)}' as '${brandPrimary.bold(pascalCaseConstName)}' (${finalExtension.toUpperCase()} file).`,
-);