lazycodex-ai 5.1.34 → 5.1.38

package/packages/shared-skills/skills/frontend/scripts/perfection/fixtures/accent-stripes/positive/border-top-card.css

@@ -0,0 +1,5 @@
+.feature-card {
+  padding: 24px;
+  border-radius: 12px;
+  border-top: 4px solid #6366f1;
+}

package/packages/shared-skills/skills/frontend/scripts/perfection/fixtures/accent-stripes/positive/cva-variant.ts

@@ -0,0 +1 @@
+export const card = cva("rounded-xl bg-white p-6 border-l-4 border-rose-500")

package/packages/shared-skills/skills/frontend/scripts/perfection/fixtures/accent-stripes/positive/gradient-edges.css

@@ -0,0 +1,26 @@
+.hard-stop {
+  border-radius: 12px;
+  background: linear-gradient(to right, #6366f1 4px, #fff 4px);
+}
+
+.image-border {
+  border-radius: 12px;
+  border-left: 4px solid;
+  border-image: linear-gradient(#6366f1, #a855f7) 1;
+}
+
+.glow { position: relative; border-radius: 12px; }
+.glow::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 3px;
+  background: linear-gradient(to bottom, #6366f1, #a855f7);
+}
+
+.end-band {
+  border-radius: 12px;
+  background-image: linear-gradient(to right, #fff calc(100% - 4px), #f43f5e calc(100% - 4px));
+}

package/packages/shared-skills/skills/frontend/scripts/perfection/fixtures/accent-stripes/positive/inline-styles.tsx

@@ -0,0 +1,6 @@
+export const Tip = () => (
+  <>
+    <div style={{ borderRadius: 12, borderLeft: "4px solid #ef4444" }}>Careful</div>
+    <div className="rounded-lg" style={{ borderTop: '3px solid var(--brand)' }}>New</div>
+  </>
+)

package/packages/shared-skills/skills/frontend/scripts/perfection/fixtures/accent-stripes/positive/inset-shadow.css

@@ -0,0 +1,4 @@
+.note {
+  border-radius: 8px;
+  box-shadow: inset 4px 0 0 0 oklch(0.65 0.2 250), 0 1px 2px rgb(0 0 0 / 0.06);
+}

package/packages/shared-skills/skills/frontend/scripts/perfection/fixtures/accent-stripes/positive/non-visible-focus-and-nested.tsx

@@ -0,0 +1,6 @@
+const css = css`
+  .card:focus-within { border-radius: 12px; border-left: 3px solid #6366f1; }
+  td .promo-card { border-radius: 8px; border-left: 4px solid #f43f5e; }
+`
+
+export const Focused = () => <div className="rounded-xl focus:border-l-4 focus:border-indigo-500">Card</div>

package/packages/shared-skills/skills/frontend/scripts/perfection/fixtures/accent-stripes/positive/pseudo-bar.css

@@ -0,0 +1,13 @@
+.stat {
+  position: relative;
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+.stat::before {
+  content: "";
+  position: absolute;
+  inset: 0 auto 0 0;
+  width: 4px;
+  background: #10b981;
+}

package/packages/shared-skills/skills/frontend/scripts/perfection/fixtures/accent-stripes/positive/split-rule-and-token.scss

@@ -0,0 +1,14 @@
+.callout {
+  border-radius: 0.75rem;
+  border-left: 3px solid var(--color-accent);
+}
+
+.tile {
+  border-radius: 16px;
+  background: var(--surface);
+  &.is-featured {
+    border-left-width: 4px;
+    border-left-style: solid;
+    border-left-color: hsl(262 83% 58%);
+  }
+}

package/packages/shared-skills/skills/frontend/scripts/perfection/fixtures/accent-stripes/positive/styled-components.tsx

@@ -0,0 +1,14 @@
+import styled, { createGlobalStyle } from "styled-components"
+
+export const Banner = styled.div`
+  padding: ${({ theme }) => theme.space[4]}px;
+  border-radius: 12px;
+  border-left: 4px solid #2563eb;
+`
+
+export const Global = createGlobalStyle`
+  .promo-card {
+    border-radius: 8px;
+    border-top: 3px solid var(--color-brand);
+  }
+`

package/packages/shared-skills/skills/frontend/scripts/perfection/fixtures/accent-stripes/positive/tailwind-cards.tsx

@@ -0,0 +1,8 @@
+export function Cards({ featured }: { featured: boolean }) {
+  return (
+    <section>
+      <div className="rounded-xl border-l-4 border-indigo-500 bg-white p-6">Fast</div>
+      <article className={cn("rounded-2xl p-4", featured && "border-t-4 border-t-primary")}>Plans</article>
+    </section>
+  )
+}

package/packages/shared-skills/skills/frontend/scripts/perfection/fixtures/accent-stripes/positive/tailwind-inset-and-style.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="rounded-md p-4 shadow-[inset_3px_0_0_0_#f59e0b]">Heads up</div>
+  <div class="quote">Quote</div>
+</template>
+
+<style scoped>
+.quote {
+  border-radius: 10px;
+  border-left: 5px solid rebeccapurple;
+}
+</style>

package/packages/shared-skills/skills/frontend/scripts/perfection/fixtures/accent-stripes/positive/tailwind-pseudo.html

@@ -0,0 +1,3 @@
+<div class="relative overflow-hidden rounded-lg p-6 before:absolute before:inset-y-0 before:left-0 before:w-1 before:bg-emerald-500">
+  Uptime 99.99%
+</div>

package/packages/shared-skills/skills/ulw-research/references/report-gates.md

@@ -19,7 +19,7 @@ This reference catalogs every defect code the report gates (`static`, `layout`,
 | `chart_without_figure` | major | false | An image or chart lacks a figure wrapper with a caption. Uncaptioned charts isolate visuals from narrative flow. | Wrap the image or chart in a figure container with a caption. |
 | `chart_svg_no_text` | major | false | An SVG chart or diagram lacks a title, axis labels, units, or value labels. Visuals cannot stand alone without text guidance. | Give the chart a title, axis labels, units, and value labels as SVG text. |
 | `chart_svg_missing_labels` | minor | false | An SVG chart has some labels (e.g., title) but is missing others (e.g., axis ticks or unit). | Add the missing title, axis ticks, or unit label to the chart. |
-| `report_without_visual` | major | false | The report body has no chart, diagram, or figure image at all (header logos, icons, and images marked decorative do not count; only rendered output counts, so a Mermaid source block or a zero-size image does not). A text-only report hides structure and trends the reader would see at a glance. | Add at least one captioned visual of the findings: a chart from the data table, a rendered Mermaid diagram, or a figure image (references/report-visualization.md). |
+| `report_without_visual` | major | false | The report body has no chart, diagram, or figure image at all (header logos, icons, and images marked decorative do not count; only rendered output counts, so a Mermaid source block or an image with any zero dimension (attribute, inline style, or viewBox) does not; an element with no declared size counts, because the browser sizes it, and the layout gate is where rendering is proven). A text-only report hides structure and trends the reader would see at a glance. | Add at least one captioned visual of the findings: a chart from the data table, a rendered Mermaid diagram, or a figure image (references/report-visualization.md). |
 | `image_missing_alt` | minor | false | A figure image has a missing or empty `alt` and is not marked decorative. Screen readers and failed image loads leave the reader with nothing. An image is decorative only with an empty `alt` plus `role="presentation"` (or `role="none"`, or `aria-hidden="true"`): it raises nothing here and does not count as a visual. | Give the image an alt attribute that states what it shows, not its file name; mark a purely decorative image alt="" with role="presentation". |
 | `korean_serif_font` | major | false | A serif or brush Korean font family is applied to Korean text. The design spec mandates gothic (sans) Korean typefaces. | Use a gothic (sans) Korean family; serif and brush families are banned by the design spec. |
 | `section_without_citation` | major | false | A major section or subsection contains no in-text citations or reference marks. Source attribution is missing. | Cite at least one source inside this section or merge it into a cited one. |

package/packages/shared-skills/skills/ulw-research/scripts/gates-figures.mjs

@@ -27,14 +27,30 @@ function pixels(value) {
 	return match ? Number(match[1]) : null
 }
 
+function fromStyle(node, prop) {
+	return pixels(new RegExp(`(?:^|;)\\s*${prop}\\s*:\\s*([^;]+)`, "i").exec(node.attrs.style ?? "")?.[1])
+}
+
+function viewBoxSize(node) {
+	const box = String(node.attrs.viewbox ?? "").trim().split(/[\s,]+/).map(Number)
+	return box.length === 4 && box.every(Number.isFinite) ? { width: box[2], height: box[3] } : null
+}
+
 /** Largest declared dimension: width/height attributes or style, else the viewBox. */
 function declaredSize(node) {
-	const style = node.attrs.style ?? ""
-	const fromStyle = (prop) => pixels(new RegExp(`(?:^|;)\\s*${prop}\\s*:\\s*([^;]+)`, "i").exec(style)?.[1])
-	const sizes = [pixels(node.attrs.width), pixels(node.attrs.height), fromStyle("width"), fromStyle("height")].filter((n) => n !== null)
+	const sizes = [pixels(node.attrs.width), pixels(node.attrs.height), fromStyle(node, "width"), fromStyle(node, "height")].filter((n) => n !== null)
 	if (sizes.length) return Math.max(...sizes)
-	const box = String(node.attrs.viewbox ?? "").trim().split(/[\s,]+/).map(Number)
-	return box.length === 4 && box.every(Number.isFinite) ? Math.max(box[2], box[3]) : null
+	const box = viewBoxSize(node)
+	return box ? Math.max(box.width, box.height) : null
+}
+
+/**
+ * True when any declared dimension is zero, so the element cannot render visibly. Each axis reads its inline
+ * style first, then its attribute, then the viewBox. An undeclared axis is not zero: the browser sizes it.
+ */
+function hasZeroDimension(node) {
+	const box = viewBoxSize(node)
+	return ["width", "height"].some((axis) => (fromStyle(node, axis) ?? pixels(node.attrs[axis]) ?? box?.[axis] ?? null) === 0)
 }
 
 function isIcon(ctx, node) {
@@ -174,7 +190,7 @@ export const figureGates = [
 	{
 		codes: ["report_without_visual"],
 		run(ctx) {
-			if (visuals(ctx).some((node) => declaredSize(node) !== 0 && !isDecorative(node))) return []
+			if (visuals(ctx).some((node) => !hasZeroDimension(node) && !isDecorative(node))) return []
 			return [ctx.defect("report_without_visual", ctx.body, "the report has no chart, diagram, or figure image")]
 		},
 	},

package/packages/shared-skills/skills/ulw-research/scripts/gates-static.test.ts

@@ -263,6 +263,19 @@ describe("report-level visuals", () => {
 		expect(chartCodes(htmlLabels)).toEqual(["chart_svg_no_text"])
 	})
 
+	test("#given a single visual with one zero dimension #when checked #then report_without_visual is raised; viewBox-only and unsized visuals still count", () => {
+		// given
+		const only = (el: string) => `<figure>${el}<figcaption>c</figcaption></figure>`
+		const flat = only('<img src="data:image/png;base64,iVBORw0KGgo=" alt="chart" width="600" height="0">')
+		const narrow = only('<svg width="0" height="300"><text>A</text></svg>')
+		const styled = only('<img src="data:image/png;base64,iVBORw0KGgo=" alt="chart" width="600" height="300" style="height: 0">')
+		const viewBoxOnly = only('<svg viewBox="0 0 600 300" aria-roledescription="flowchart-v2"><text>A</text></svg>')
+		const unsized = only('<img src="data:image/png;base64,iVBORw0KGgo=" alt="Deploys per week">')
+		// when / then
+		for (const html of [flat, narrow, styled]) expect(has(html, "report_without_visual")).toBe(true)
+		for (const html of [viewBoxOnly, unsized]) expect(has(html, "report_without_visual")).toBe(false)
+	})
+
 	test("#given figure images with no alt, a bare empty alt, role- and aria-marked decorative alts and a descriptive alt #when checked #then only the unmarked two raise image_missing_alt", () => {
 		// given
 		const img = (alt: string) => `<figure><img src="data:image/png;base64,iVBORw0KGgo=" ${alt} width="480" height="240"><figcaption>c</figcaption></figure>`