@citolab/tspci 2.9.9 → 2.9.11-beta.1

package/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.9.11-beta.1](/compare/v2.9.11-beta.0...v2.9.11-beta.1) (2026-03-11)
+
+**Note:** Version bump only for package @citolab/tspci
+
+
+
+
+
+## [2.9.11-beta.0](/compare/v2.9.10...v2.9.11-beta.0) (2026-03-11)
+
+**Note:** Version bump only for package @citolab/tspci
+
+
+
+
+
+## [2.9.10](/compare/v2.9.9...v2.9.10) (2026-03-11)
+
+**Note:** Version bump only for package @citolab/tspci
+
+
+
+
+
 ## [2.9.9](/compare/v2.9.8...v2.9.9) (2026-03-11)
 
 **Note:** Version bump only for package @citolab/tspci

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citolab/tspci",
-  "version": "2.9.9",
+  "version": "2.9.11-beta.1",
   "description": "an opiniated typescript ims-pci builder with tao integration",
   "author": "patrick <patrick.deklein@cito.nl>",
   "repository": "@citolab/tspci",
@@ -42,7 +42,8 @@
     "postcss-load-config": "^6.0.1",
     "rollup": "^4.59.0",
     "rollup-plugin-livereload": "^2.0.5",
-    "tailwindcss": "^4.1.18"
+    "tailwindcss": "^4.1.18",
+    "tslib": "^2.8.1"
   },
   "devDependencies": {
     "@types/node": "^25.1.0",
@@ -53,5 +54,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "38ef762e1e779bfca515394871b5b86f32bc209e"
+  "gitHead": "3ec89a59bacdc7664c059a24918699dd440fd622"
 }

package/preset/preact/src/interaction.tsx

@@ -20,22 +20,26 @@ const Interaction = ({ config, dom, store }: { config: PropTypes; dom: Document
   };
 
   return <div className="pci-container">
-    <h1>{config.title}</h1>
+    <h1 className="title">{config.title}</h1>
     <div className="body">
-      <img width={config.width} height={+config.height} src={procenten} />
+      <img className="body-image" width={config.width} height={+config.height} src={procenten} alt="Percentages visual" />
     </div>
     <div className="interaction">
-      <label htmlFor="tentacles">{config.prompt}</label>
-      <input type="number"
-        value={state.input}
-        onInput={handleInput}
-        onPaste={() => setEventHandled(false)}
-        onKeyDown={() => setEventHandled(false)}
-        min="0" max="100" />%
+      <label className="prompt" htmlFor="percentage-input">{config.prompt}</label>
+      <div className="answer-row">
+        <input className="answer-input"
+          id="percentage-input"
+          type="number"
+          value={state.input}
+          onInput={handleInput}
+          onPaste={() => setEventHandled(false)}
+          onKeyDown={() => setEventHandled(false)}
+          min="0" max="100" />
+        <span className="answer-suffix">%</span>
+      </div>
     </div>
   </div>;
 };
 
 
 export default Interaction;
-

package/preset/tailwind/src/styles.css

@@ -1,10 +1,30 @@
 @import "tailwindcss";
+@source "./**/*.{html,js,ts,jsx,tsx}";
+@source "../*.xml";
 .pci-container {
-  @apply container flex flex-col justify-center items-center;
+  @apply mx-auto flex w-full max-w-xl flex-col items-center gap-5 rounded-2xl border border-slate-200 bg-white p-6 shadow-lg;
 }
-h1 {
-  @apply text-2xl text-red-500 m-4;
+.title {
+  @apply text-center text-2xl font-semibold tracking-tight text-slate-800;
 }
-input {
-  @apply border border-gray-400 rounded p-2 m-1;
+.body {
+  @apply flex w-full justify-center;
+}
+.body-image {
+  @apply rounded-xl border border-slate-200 bg-slate-50 p-2;
+}
+.interaction {
+  @apply w-full rounded-xl border border-slate-200 bg-slate-50 p-4;
+}
+.prompt {
+  @apply mb-2 block text-sm font-medium text-slate-700;
+}
+.answer-row {
+  @apply flex items-center gap-2;
+}
+.answer-input {
+  @apply w-28 rounded-lg border border-slate-300 bg-white px-3 py-2 text-lg font-medium text-slate-900 shadow-sm outline-none transition focus:border-amber-500 focus:ring-2 focus:ring-amber-200;
+}
+.answer-suffix {
+  @apply text-sm font-semibold uppercase tracking-wide text-slate-500;
 }

package/scripts/test-init-matrix.sh

@@ -110,6 +110,15 @@ assert_file() {
   fi
 }
 
+assert_file_contains() {
+  local file_path="$1"
+  local expected_text="$2"
+  if ! grep -Fq "${expected_text}" "${file_path}"; then
+    echo "ERROR: expected '${expected_text}' in ${file_path}" >&2
+    exit 1
+  fi
+}
+
 run_base_build() {
   local project_dir="$1"
   (cd "${project_dir}" && npm run prod)
@@ -167,7 +176,10 @@ run_dev_start_smoke "${TEST_ROOT}/TypeScriptPci"
 echo "Scenario 3: TypeScript + tailwind PCI creates and builds"
 create_project "TypeScriptTailwindPci" "preact+tailwind" "TypeScript + tailwind PCI matrix test"
 assert_file "${TEST_ROOT}/TypeScriptTailwindPci/src/index.tsx"
+# Tailwind regression guard: ensure content scanning picks up utility classes from TSX.
+echo '<div className="bg-amber-500">Tailwind scan smoke</div>' >> "${TEST_ROOT}/TypeScriptTailwindPci/src/interaction.tsx"
 run_base_build "${TEST_ROOT}/TypeScriptTailwindPci"
+assert_file_contains "${TEST_ROOT}/TypeScriptTailwindPci/dist/index.js" "bg-amber-500"
 
 echo "Scenario 4: add tspci-qbci and export .ci package"
 create_project "QbciPci" "typescript" "QBCI export matrix test"
@@ -187,6 +199,21 @@ echo "Scenario 6: add tspci-tao and export tao zip"
 create_project "TaoPci" "typescript" "TAO export matrix test"
 (cd "${TEST_ROOT}/TaoPci" && npm install --save-dev "file:$(npm_path "${TAO_TGZ}")" --cache "${NPM_CACHE_DIR}" --workspaces=false)
 (cd "${TEST_ROOT}/TaoPci" && npm run tspci -- add --target tao --ci)
+node -e '
+  const fs = require("fs");
+  const pkgPath = process.argv[1];
+  const pkg = JSON.parse(fs.readFileSync(pkgPath, "utf8"));
+  const hasTaoDevDep = Boolean(pkg.devDependencies && pkg.devDependencies["@citolab/tspci-tao"]);
+  if (!hasTaoDevDep) {
+    console.error("ERROR: expected devDependency \"@citolab/tspci-tao\" after tspci add --target tao");
+    process.exit(1);
+  }
+  const hasPackageScript = Boolean(pkg.scripts && pkg.scripts["package:tao"]);
+  if (!hasPackageScript) {
+    console.error("ERROR: expected script \"package:tao\" after tspci add --target tao");
+    process.exit(1);
+  }
+' "${TEST_ROOT}/TaoPci/package.json"
 node -e '
   const fs = require("fs");
   const pkgPath = process.argv[1];

package/src/cli.js

@@ -486,8 +486,8 @@ const run = async () => {
     const version = args.indexOf("--next") !== -1 ? "next" : "latest";
     const passCiFlag = args.indexOf("--ci") !== -1;
     const packageFilePath = path.join(PACKAGE_ROOT_PATH, "package.json");
-    const packageFileContent = fs.readFileSync(packageFilePath, "utf8");
-    const packageJson = JSON.parse(packageFileContent);
+    const readPackageJson = () => JSON.parse(fs.readFileSync(packageFilePath, "utf8"));
+    let packageJson = readPackageJson();
 
     const modifyPci = () => {
       const scriptFile = path.join(path.join(path.join(NODE_MODULES, `${targetName}`), "src"), `init.mjs`);
@@ -517,6 +517,7 @@ const run = async () => {
         cwd: PACKAGE_ROOT_PATH,
         stdio: [0, 1, 2],
       });
+      packageJson = readPackageJson();
     }
 
     // add a package script so users can export with a single command