handzon-core 0.8.1 → 0.8.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "handzon-core",
3
- "version": "0.8.1",
3
+ "version": "0.8.2",
4
4
  "description": "Core framework for Handzon — layouts, components, content + AI libs, and server runtime (handlers, DB, auth, migration runner) consumed by Handzon scaffolds.",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -120,18 +120,32 @@ const slug = tutorial.id;
120
120
  .sb-steps li + li {
121
121
  border-top: var(--border-default) solid var(--color-border);
122
122
  }
123
+ /* Two-row layout: duration sits flush-right on its own tight row
124
+ * above the title. The checkbox sits in the title row only (not
125
+ * spanning) so it vertically aligns with the name's center,
126
+ * independent of whether a duration row is present above. The first
127
+ * column of the duration row is empty and collapses harmlessly. */
123
128
  .sb-steps a {
124
129
  display: grid;
125
- grid-template-columns: 18px 1fr auto;
130
+ grid-template-columns: 18px 1fr;
131
+ grid-template-areas:
132
+ ". dur"
133
+ "check name";
126
134
  align-items: center;
127
- gap: 0.6rem;
128
- padding: 0.6rem 1rem;
135
+ column-gap: 0.6rem;
136
+ row-gap: 0;
137
+ /* Heavier bottom padding counter-balances the duration row above
138
+ * so the title feels visually centered in the row. */
139
+ padding: 0.5rem 1rem 0.95rem;
129
140
  color: var(--color-fg);
130
141
  text-decoration: none;
131
142
  font-size: 0.92em;
132
143
  font-weight: 500;
133
144
  letter-spacing: -0.005em;
134
145
  }
146
+ .sb-check { grid-area: check; }
147
+ .sb-name { grid-area: name; line-height: 1.25; }
148
+ .sb-dur { grid-area: dur; justify-self: end; line-height: 1; }
135
149
  .sb-steps a:hover {
136
150
  background: var(--color-surface);
137
151
  color: var(--color-fg);