@roxyapi/ui 0.8.1 → 0.10.0

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.
Files changed (194) hide show
  1. package/AGENTS.md +54 -13
  2. package/README.md +33 -22
  3. package/THEMING.md +7 -5
  4. package/dist/cdn/components/angel-number-card.js +45 -0
  5. package/dist/cdn/components/angel-number-card.js.map +7 -0
  6. package/dist/cdn/components/angel-number-lookup.js +45 -0
  7. package/dist/cdn/components/angel-number-lookup.js.map +7 -0
  8. package/dist/cdn/components/ashtakavarga-grid.js +3 -3
  9. package/dist/cdn/components/ashtakavarga-grid.js.map +3 -3
  10. package/dist/cdn/components/biorhythm-chart.js +3 -3
  11. package/dist/cdn/components/biorhythm-chart.js.map +3 -3
  12. package/dist/cdn/components/bodygraph.js +8 -8
  13. package/dist/cdn/components/bodygraph.js.map +3 -3
  14. package/dist/cdn/components/choghadiya-grid.js +3 -3
  15. package/dist/cdn/components/choghadiya-grid.js.map +3 -3
  16. package/dist/cdn/components/compatibility-card.js +2 -2
  17. package/dist/cdn/components/compatibility-card.js.map +3 -3
  18. package/dist/cdn/components/crystal-grid.js +45 -0
  19. package/dist/cdn/components/crystal-grid.js.map +7 -0
  20. package/dist/cdn/components/dasha-timeline.js +2 -2
  21. package/dist/cdn/components/dasha-timeline.js.map +3 -3
  22. package/dist/cdn/components/data.js +2 -2
  23. package/dist/cdn/components/data.js.map +3 -3
  24. package/dist/cdn/components/divisional-chart.js +7 -7
  25. package/dist/cdn/components/divisional-chart.js.map +3 -3
  26. package/dist/cdn/components/dosha-card.js +3 -3
  27. package/dist/cdn/components/dosha-card.js.map +3 -3
  28. package/dist/cdn/components/dream-card.js +45 -0
  29. package/dist/cdn/components/dream-card.js.map +7 -0
  30. package/dist/cdn/components/forecast-timeline.js +3 -3
  31. package/dist/cdn/components/forecast-timeline.js.map +3 -3
  32. package/dist/cdn/components/guna-milan.js +3 -3
  33. package/dist/cdn/components/guna-milan.js.map +3 -3
  34. package/dist/cdn/components/hexagram.js +2 -2
  35. package/dist/cdn/components/hexagram.js.map +3 -3
  36. package/dist/cdn/components/horoscope-card.js +3 -3
  37. package/dist/cdn/components/horoscope-card.js.map +3 -3
  38. package/dist/cdn/components/kp-chart.js +2 -2
  39. package/dist/cdn/components/kp-chart.js.map +3 -3
  40. package/dist/cdn/components/kp-planets-table.js +3 -3
  41. package/dist/cdn/components/kp-planets-table.js.map +3 -3
  42. package/dist/cdn/components/kp-ruling-planets.js +3 -3
  43. package/dist/cdn/components/kp-ruling-planets.js.map +3 -3
  44. package/dist/cdn/components/moon-phase.js +3 -3
  45. package/dist/cdn/components/moon-phase.js.map +3 -3
  46. package/dist/cdn/components/nakshatra-card.js +3 -3
  47. package/dist/cdn/components/nakshatra-card.js.map +3 -3
  48. package/dist/cdn/components/natal-chart.js +2 -2
  49. package/dist/cdn/components/natal-chart.js.map +3 -3
  50. package/dist/cdn/components/numerology-card.js +3 -3
  51. package/dist/cdn/components/numerology-card.js.map +3 -3
  52. package/dist/cdn/components/panchang-table.js +2 -2
  53. package/dist/cdn/components/panchang-table.js.map +3 -3
  54. package/dist/cdn/components/shadbala-table.js +3 -3
  55. package/dist/cdn/components/shadbala-table.js.map +3 -3
  56. package/dist/cdn/components/synastry-chart.js +5 -5
  57. package/dist/cdn/components/synastry-chart.js.map +3 -3
  58. package/dist/cdn/components/tarot-card.js.map +3 -3
  59. package/dist/cdn/components/tarot-spread.js +3 -3
  60. package/dist/cdn/components/tarot-spread.js.map +3 -3
  61. package/dist/cdn/components/transits-table.js +3 -3
  62. package/dist/cdn/components/transits-table.js.map +3 -3
  63. package/dist/cdn/components/vedic-kundli.js +16 -16
  64. package/dist/cdn/components/vedic-kundli.js.map +3 -3
  65. package/dist/cdn/components/vedic-planets-table.js +3 -3
  66. package/dist/cdn/components/vedic-planets-table.js.map +3 -3
  67. package/dist/cdn/components/western-planets-table.js +2 -2
  68. package/dist/cdn/components/western-planets-table.js.map +3 -3
  69. package/dist/cdn/components/yoga-list.js +2 -2
  70. package/dist/cdn/components/yoga-list.js.map +3 -3
  71. package/dist/cdn/roxy-ui.js +289 -66
  72. package/dist/cdn/roxy-ui.js.map +4 -4
  73. package/dist/cdn.d.ts +8 -0
  74. package/dist/cdn.d.ts.map +1 -0
  75. package/dist/components/angel-number-card.d.ts +18 -0
  76. package/dist/components/angel-number-card.d.ts.map +1 -0
  77. package/dist/components/angel-number-card.js +2 -0
  78. package/dist/components/angel-number-card.js.map +7 -0
  79. package/dist/components/angel-number-lookup.d.ts +18 -0
  80. package/dist/components/angel-number-lookup.d.ts.map +1 -0
  81. package/dist/components/angel-number-lookup.js +2 -0
  82. package/dist/components/angel-number-lookup.js.map +7 -0
  83. package/dist/components/ashtakavarga-grid.js +1 -1
  84. package/dist/components/ashtakavarga-grid.js.map +3 -3
  85. package/dist/components/biorhythm-chart.js +1 -1
  86. package/dist/components/biorhythm-chart.js.map +3 -3
  87. package/dist/components/bodygraph.js +4 -4
  88. package/dist/components/bodygraph.js.map +3 -3
  89. package/dist/components/choghadiya-grid.js +1 -1
  90. package/dist/components/choghadiya-grid.js.map +3 -3
  91. package/dist/components/compatibility-card.js +1 -1
  92. package/dist/components/compatibility-card.js.map +3 -3
  93. package/dist/components/crystal-grid.d.ts +27 -0
  94. package/dist/components/crystal-grid.d.ts.map +1 -0
  95. package/dist/components/crystal-grid.js +2 -0
  96. package/dist/components/crystal-grid.js.map +7 -0
  97. package/dist/components/dasha-timeline.js +1 -1
  98. package/dist/components/dasha-timeline.js.map +3 -3
  99. package/dist/components/data.js +1 -1
  100. package/dist/components/data.js.map +3 -3
  101. package/dist/components/divisional-chart.js +34 -34
  102. package/dist/components/divisional-chart.js.map +3 -3
  103. package/dist/components/dosha-card.js +1 -1
  104. package/dist/components/dosha-card.js.map +3 -3
  105. package/dist/components/dream-card.d.ts +17 -0
  106. package/dist/components/dream-card.d.ts.map +1 -0
  107. package/dist/components/dream-card.js +2 -0
  108. package/dist/components/dream-card.js.map +7 -0
  109. package/dist/components/forecast-timeline.js.map +3 -3
  110. package/dist/components/guna-milan.js +1 -1
  111. package/dist/components/guna-milan.js.map +3 -3
  112. package/dist/components/hexagram.js +1 -1
  113. package/dist/components/hexagram.js.map +3 -3
  114. package/dist/components/horoscope-card.js +1 -1
  115. package/dist/components/horoscope-card.js.map +3 -3
  116. package/dist/components/kp-chart.js +1 -1
  117. package/dist/components/kp-chart.js.map +3 -3
  118. package/dist/components/kp-planets-table.js +1 -1
  119. package/dist/components/kp-planets-table.js.map +3 -3
  120. package/dist/components/kp-ruling-planets.js +1 -1
  121. package/dist/components/kp-ruling-planets.js.map +3 -3
  122. package/dist/components/moon-phase.js +1 -1
  123. package/dist/components/moon-phase.js.map +3 -3
  124. package/dist/components/nakshatra-card.js +1 -1
  125. package/dist/components/nakshatra-card.js.map +3 -3
  126. package/dist/components/natal-chart.js +5 -5
  127. package/dist/components/natal-chart.js.map +3 -3
  128. package/dist/components/numerology-card.d.ts +7 -3
  129. package/dist/components/numerology-card.d.ts.map +1 -1
  130. package/dist/components/numerology-card.js +1 -1
  131. package/dist/components/numerology-card.js.map +3 -3
  132. package/dist/components/panchang-table.js +1 -1
  133. package/dist/components/panchang-table.js.map +3 -3
  134. package/dist/components/shadbala-table.js +1 -1
  135. package/dist/components/shadbala-table.js.map +3 -3
  136. package/dist/components/synastry-chart.js +4 -4
  137. package/dist/components/synastry-chart.js.map +3 -3
  138. package/dist/components/tarot-card.js +1 -1
  139. package/dist/components/tarot-card.js.map +3 -3
  140. package/dist/components/tarot-spread.js +1 -1
  141. package/dist/components/tarot-spread.js.map +3 -3
  142. package/dist/components/transits-table.js +1 -1
  143. package/dist/components/transits-table.js.map +3 -3
  144. package/dist/components/vedic-kundli.d.ts +18 -0
  145. package/dist/components/vedic-kundli.d.ts.map +1 -1
  146. package/dist/components/vedic-kundli.js +62 -62
  147. package/dist/components/vedic-kundli.js.map +3 -3
  148. package/dist/components/vedic-planets-table.js +1 -1
  149. package/dist/components/vedic-planets-table.js.map +3 -3
  150. package/dist/components/western-planets-table.js +1 -1
  151. package/dist/components/western-planets-table.js.map +3 -3
  152. package/dist/components/yoga-list.js +1 -1
  153. package/dist/components/yoga-list.js.map +3 -3
  154. package/dist/index.cjs +74 -74
  155. package/dist/index.cjs.map +4 -4
  156. package/dist/index.d.ts +5 -0
  157. package/dist/index.d.ts.map +1 -1
  158. package/dist/index.js +74 -74
  159. package/dist/index.js.map +4 -4
  160. package/dist/manifest.d.ts.map +1 -1
  161. package/dist/manifest.json +28 -24
  162. package/dist/styles/tokens-css.d.ts +2 -0
  163. package/dist/styles/tokens-css.d.ts.map +1 -0
  164. package/dist/styles/tokens.css +26 -11
  165. package/dist/types/index.d.ts +1 -1
  166. package/dist/types/index.d.ts.map +1 -1
  167. package/dist/types/types.gen.d.ts +43 -26
  168. package/dist/types/types.gen.d.ts.map +1 -1
  169. package/dist/utils/inject-tokens.d.ts +16 -0
  170. package/dist/utils/inject-tokens.d.ts.map +1 -0
  171. package/dist/utils/kundli-render.d.ts +2 -1
  172. package/dist/utils/kundli-render.d.ts.map +1 -1
  173. package/dist/utils/markup-data.d.ts +34 -0
  174. package/dist/utils/markup-data.d.ts.map +1 -1
  175. package/dist/version.d.ts +1 -1
  176. package/dist/version.d.ts.map +1 -1
  177. package/package.json +1 -1
  178. package/src/cdn.ts +15 -0
  179. package/src/components/angel-number-card.ts +234 -0
  180. package/src/components/angel-number-lookup.ts +208 -0
  181. package/src/components/crystal-grid.ts +191 -0
  182. package/src/components/dream-card.ts +98 -0
  183. package/src/components/numerology-card.ts +22 -10
  184. package/src/components/vedic-kundli.ts +37 -2
  185. package/src/index.ts +14 -0
  186. package/src/manifest.ts +57 -5
  187. package/src/styles/tokens-css.ts +225 -0
  188. package/src/styles/tokens.css +26 -11
  189. package/src/types/index.ts +1 -1
  190. package/src/types/types.gen.ts +43 -26
  191. package/src/utils/inject-tokens.ts +27 -0
  192. package/src/utils/kundli-render.ts +9 -2
  193. package/src/utils/markup-data.ts +45 -0
  194. package/src/version.ts +1 -1
package/dist/utils/inject-tokens.d.ts ADDED
@@ -0,0 +1,16 @@
1
+ /** Element id of the injected token stylesheet. Stable so injection is idempotent and so a host page can find, inspect, or remove it. */
2
+ export declare const ROXY_UI_TOKENS_STYLE_ID = "roxy-ui-tokens";
3
+ /**
4
+ * Inject the Roxy UI design tokens (light + dark, all theme triggers) into the document head as the cascade's lowest-priority source, so a single CDN script tag yields full theming and dark mode with no separate stylesheet link.
5
+ *
6
+ * @remarks
7
+ * Three invariants hold this safe for every consumer:
8
+ *
9
+ * - SSR-safe: a missing `document` (Node, Lit-SSR, Bun) is a no-op. Only the CDN bundle calls this; the npm/ESM entry (`src/index.ts`) never touches the document, so bundler and server consumers are unaffected.
10
+ * - Idempotent: a second call (two script tags, HMR, re-registration) finds the existing `#roxy-ui-tokens` and returns without duplicating.
11
+ * - Lowest priority: the style is PREPENDED to `<head>`, so it is the earliest source-order rule. Any consumer `:root { --roxy-* }` brand override or linked `tokens.css` appears later and wins ties. This preserves backwards compatibility: existing pages that already link `tokens.css` and set overrides keep their exact behaviour.
12
+ *
13
+ * @returns The injected (or pre-existing) style element, or `null` under SSR.
14
+ */
15
+ export declare function injectRoxyTokens(): HTMLStyleElement | null;
16
+ //# sourceMappingURL=inject-tokens.d.ts.map
package/dist/utils/inject-tokens.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"inject-tokens.d.ts","sourceRoot":"","sources":["../../src/utils/inject-tokens.ts"],"names":[],"mappings":"AAEA,yIAAyI;AACzI,eAAO,MAAM,uBAAuB,mBAAmB,CAAC;AAExD;;;;;;;;;;;GAWG;AACH,wBAAgB,gBAAgB,IAAI,gBAAgB,GAAG,IAAI,CAS1D"}
package/dist/utils/kundli-render.d.ts CHANGED
@@ -43,6 +43,7 @@ export type ChartStyle = 'south' | 'north' | 'east';
43
43
  *
44
44
  * @param meta - Graha-keyed map; missing rashi entries are skipped.
45
45
  * @param divisionLabel - Optional title written inside the chart centre.
46
+ * @param lagnaOverride - Optional rashi/sign name (case-insensitive, e.g. `"cancer"`) that replaces the `meta.Lagna`-derived ascendant. Drives the Chandra Lagna (Moon-as-ascendant) and other reference-point views: the `meta` of a `/birth-chart` response always carries the Janma Lagna as its `Lagna` key, so this is the only way to pivot the houses without a second request. Ignored when it does not resolve to a known sign.
46
47
  */
47
48
  export declare function toKundliViewModel(meta: Record<string, {
48
49
  graha?: string;
@@ -55,7 +56,7 @@ export declare function toKundliViewModel(meta: Record<string, {
55
56
  };
56
57
  isRetrograde?: boolean;
57
58
  awastha?: string;
58
- }>, divisionLabel?: string): KundliViewModel;
59
+ }>, divisionLabel?: string, lagnaOverride?: string): KundliViewModel;
59
60
  /**
60
61
  * Render the kundli body for the requested style. Returns the SVG inner
61
62
  * content; the caller wraps it in an `<svg>` element with the canonical
package/dist/utils/kundli-render.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"kundli-render.d.ts","sourceRoot":"","sources":["../../src/utils/kundli-render.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAgC1C;;;;;GAKG;AACH,MAAM,WAAW,WAAW;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC5D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;;GAQG;AACH,MAAM,WAAW,eAAe;IAC/B,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,EAAE,CAAC,CAAC;IAC1C,aAAa,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;GAGG;AACH,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,OAAO,GAAG,MAAM,CAAC;AAsGpD;;;;;;;;GAQG;AACH,wBAAgB,iBAAiB,CAChC,IAAI,EAAE,MAAM,CACX,MAAM,EACN;IACC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC5D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB,CACD,EACD,aAAa,CAAC,EAAE,MAAM,GACpB,eAAe,CAoBjB;AA8dD;;;;GAIG;AACH,wBAAgB,eAAe,CAC9B,EAAE,EAAE,eAAe,EACnB,KAAK,EAAE,UAAU,GACf,cAAc,CAShB;AAED;;;;;;;;GAQG;AACH,wBAAgB,wBAAwB,CACvC,MAAM,EAAE,UAAU,EAClB,QAAQ,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,IAAI,GAClC,cAAc,CAQhB"}
1
+ {"version":3,"file":"kundli-render.d.ts","sourceRoot":"","sources":["../../src/utils/kundli-render.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAgC1C;;;;;GAKG;AACH,MAAM,WAAW,WAAW;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC5D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;;GAQG;AACH,MAAM,WAAW,eAAe;IAC/B,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,EAAE,CAAC,CAAC;IAC1C,aAAa,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;GAGG;AACH,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,OAAO,GAAG,MAAM,CAAC;AAsGpD;;;;;;;;;GASG;AACH,wBAAgB,iBAAiB,CAChC,IAAI,EAAE,MAAM,CACX,MAAM,EACN;IACC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC5D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB,CACD,EACD,aAAa,CAAC,EAAE,MAAM,EACtB,aAAa,CAAC,EAAE,MAAM,GACpB,eAAe,CAyBjB;AA8dD;;;;GAIG;AACH,wBAAgB,eAAe,CAC9B,EAAE,EAAE,eAAe,EACnB,KAAK,EAAE,UAAU,GACf,cAAc,CAShB;AAED;;;;;;;;GAQG;AACH,wBAAgB,wBAAwB,CACvC,MAAM,EAAE,UAAU,EAClB,QAAQ,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,IAAI,GAClC,cAAc,CAQhB"}
package/dist/utils/markup-data.d.ts CHANGED
@@ -1,4 +1,38 @@
1
1
  import type { ReactiveController, ReactiveControllerHost } from 'lit';
2
+ /**
3
+ * Serialize a RoxyAPI response for embedding inside an inline `<script type="application/json" class="roxy-data">`. This is the safe writer counterpart to {@link MarkupDataController}, the reader: server-rendered and cached consumers (WordPress, JSX SSR, static HTML) emit the script with this, and the component hydrates `data` from it on connect.
4
+ *
5
+ * @remarks
6
+ * Use this instead of a bare `JSON.stringify`. A raw stringify of a response that contains the literal text `</script>` (common in long interpretation prose) closes the script element early, corrupting the page and creating an HTML-injection vector. This escapes the script-unsafe characters to their `\uXXXX` JSON escapes, which `JSON.parse` restores to the original characters, so the value the component receives is identical to the response you passed.
7
+ *
8
+ * `<` is the load-bearing escape (it defeats `</script>` and `<!--`). `>` and `&` are escaped for defence in depth, and U+2028 / U+2029 because they are valid in JSON yet are line terminators in a `<script>` context and break some parsers. The escapes introduce only `\uXXXX` sequences, so the replacements never feed each other and order is irrelevant.
9
+ *
10
+ * Pass the unwrapped RoxyAPI response, the same shape you would assign to `element.data`. Do not pass the SDK envelope (`{ data, error, request, response }`).
11
+ *
12
+ * @example
13
+ * ```ts
14
+ * import { serializeRoxyData } from '@roxyapi/ui';
15
+ *
16
+ * const { data } = await roxy.dreams.getDreamSymbol({ path: { id: 'water' } });
17
+ * const html = `<roxy-dream-card><script type="application/json" class="roxy-data">${serializeRoxyData(data)}</script></roxy-dream-card>`;
18
+ * ```
19
+ */
20
+ export declare function serializeRoxyData(data: unknown): string;
21
+ /**
22
+ * Build the complete `<script type="application/json" class="roxy-data">…</script>` element a server nests inside a `roxy-*` component for the no-JavaScript hydration path. The payload is escaped via {@link serializeRoxyData}, so it is safe to drop straight into HTML output.
23
+ *
24
+ * @remarks
25
+ * The element carries both `type="application/json"` and `class="roxy-data"` because {@link MarkupDataController} reads only a direct-child script that has both. Emit one of these inside the target component; the JavaScript `data` property still wins if it is later assigned.
26
+ *
27
+ * @example
28
+ * ```ts
29
+ * import { roxyDataScript } from '@roxyapi/ui';
30
+ *
31
+ * const { data } = await roxy.crystals.getCrystal({ path: { id: 'amethyst' } });
32
+ * const html = `<roxy-crystal-grid>${roxyDataScript(data)}</roxy-crystal-grid>`;
33
+ * ```
34
+ */
35
+ export declare function roxyDataScript(data: unknown): string;
2
36
  /**
3
37
  * Host shape the controller drives: any reactive element that exposes a public `data` slot. The controller only writes `data` when the host left it unset, so the JavaScript property path always wins.
4
38
  */
package/dist/utils/markup-data.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"markup-data.d.ts","sourceRoot":"","sources":["../../src/utils/markup-data.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,KAAK,CAAC;AAuBtE;;GAEG;AACH,UAAU,QAAS,SAAQ,sBAAsB,EAAE,WAAW;IAC7D,IAAI,CAAC,EAAE,OAAO,CAAC;CACf;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,qBAAa,oBAAoB,CAAC,CAAC,GAAG,OAAO,CAAE,YAAW,kBAAkB;IAC3E,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAW;gBAEpB,IAAI,EAAE,QAAQ;IAK1B,aAAa;IAYb;;OAEG;IACH,OAAO,CAAC,IAAI;IAKZ;;OAEG;IACH,OAAO,CAAC,gBAAgB;IASxB,OAAO,CAAC,KAAK;CAUb"}
1
+ {"version":3,"file":"markup-data.d.ts","sourceRoot":"","sources":["../../src/utils/markup-data.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,KAAK,CAAC;AActE;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,OAAO,GAAG,MAAM,CAOvD;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,cAAc,CAAC,IAAI,EAAE,OAAO,GAAG,MAAM,CAEpD;AAWD;;GAEG;AACH,UAAU,QAAS,SAAQ,sBAAsB,EAAE,WAAW;IAC7D,IAAI,CAAC,EAAE,OAAO,CAAC;CACf;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,qBAAa,oBAAoB,CAAC,CAAC,GAAG,OAAO,CAAE,YAAW,kBAAkB;IAC3E,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAW;gBAEpB,IAAI,EAAE,QAAQ;IAK1B,aAAa;IAYb;;OAEG;IACH,OAAO,CAAC,IAAI;IAKZ;;OAEG;IACH,OAAO,CAAC,gBAAgB;IASxB,OAAO,CAAC,KAAK;CAUb"}
package/dist/version.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- export declare const ROXY_UI_VERSION = "0.8.1";
1
+ export declare const ROXY_UI_VERSION = "0.10.0";
2
2
  //# sourceMappingURL=version.d.ts.map
package/dist/version.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"version.d.ts","sourceRoot":"","sources":["../src/version.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,eAAe,UAAU,CAAC"}
1
+ {"version":3,"file":"version.d.ts","sourceRoot":"","sources":["../src/version.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,eAAe,WAAW,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@roxyapi/ui",
3
- "version": "0.8.1",
3
+ "version": "0.10.0",
4
4
  "description": "Web components for the RoxyAPI catalog. Drop-in charts, tables, cards, forms for astrology, tarot, numerology, biorhythm, I Ching, crystals, dreams, angel numbers, and more. One key, beautiful in 30 minutes.",
5
5
  "type": "module",
6
6
  "main": "./dist/index.cjs",
package/src/cdn.ts ADDED
@@ -0,0 +1,15 @@
1
+ /**
2
+ * CDN bundle entry. Registers every custom element (via ./index.js) and injects the design-token stylesheet so a single script tag from the CDN yields full theming and dark mode with no separate stylesheet link.
3
+ *
4
+ * Kept separate from ./index.ts on purpose: ./index.ts stays free of document side effects so npm, bundler, and Lit-SSR consumers import elements without a global stylesheet being forced into their page. Only the CDN IIFE, where a host page opted into a drop-in script tag, runs the injection. The injector is SSR-safe, idempotent, and prepends (lowest cascade priority) so consumer overrides still win.
5
+ */
6
+ export * from './index.js';
7
+
8
+ import { injectRoxyTokens } from './utils/inject-tokens.js';
9
+
10
+ injectRoxyTokens();
11
+
12
+ export {
13
+ injectRoxyTokens,
14
+ ROXY_UI_TOKENS_STYLE_ID,
15
+ } from './utils/inject-tokens.js';
package/src/components/angel-number-card.ts ADDED
@@ -0,0 +1,234 @@
1
+ import { css, html, LitElement, nothing } from 'lit';
2
+ import { customElement, property } from 'lit/decorators.js';
3
+ import type { GetAngelNumberResponse } from '../types/index.js';
4
+ import { baseStyles } from '../utils/base-styles.js';
5
+ import { MarkupDataController } from '../utils/markup-data.js';
6
+
7
+ /**
8
+ * Life-area sections of an angel-number meaning, in display order. Keyed to the response `meaning` object so an absent area is simply skipped.
9
+ */
10
+ const MEANING_SECTIONS: ReadonlyArray<{
11
+ key: 'spiritual' | 'love' | 'career' | 'twinFlame';
12
+ label: string;
13
+ }> = [
14
+ { key: 'spiritual', label: 'Spiritual' },
15
+ { key: 'love', label: 'Love' },
16
+ { key: 'career', label: 'Career' },
17
+ { key: 'twinFlame', label: 'Twin flame' },
18
+ ];
19
+
20
+ /**
21
+ * Angel number card. Renders /angel-numbers/numbers/{number}: the number as a hero numeral, its title and core message, the pattern type / digit root / energy badges, keyword chips, the four life-area interpretations as an exclusive accordion, the affirmation, and the action steps.
22
+ */
23
+ @customElement('roxy-angel-number-card')
24
+ export class RoxyAngelNumberCard extends LitElement {
25
+ static styles = [
26
+ baseStyles,
27
+ css`
28
+ .card {
29
+ background: var(--roxy-bg, #fff);
30
+ border: 1px solid var(--roxy-border, #e4e4e7);
31
+ border-radius: var(--roxy-radius-md, 8px);
32
+ padding: var(--roxy-space-lg, 1.5rem);
33
+ box-shadow: var(--roxy-shadow-sm);
34
+ display: grid;
35
+ gap: var(--roxy-space-md, 1rem);
36
+ }
37
+ .hero {
38
+ display: flex;
39
+ align-items: center;
40
+ gap: var(--roxy-space-md, 1rem);
41
+ }
42
+ .numeral {
43
+ font-size: 3rem;
44
+ line-height: 1;
45
+ font-weight: var(--roxy-weight-bold, 600);
46
+ color: var(--roxy-accent-ink, #b45309);
47
+ font-variant-numeric: tabular-nums;
48
+ }
49
+ .label {
50
+ margin: 0;
51
+ font-size: var(--roxy-text-xs, 0.75rem);
52
+ color: var(--roxy-muted, #71717a);
53
+ text-transform: uppercase;
54
+ letter-spacing: 0.06em;
55
+ }
56
+ .title {
57
+ margin: 0;
58
+ font-size: var(--roxy-text-lg, 1.125rem);
59
+ font-weight: var(--roxy-weight-bold, 600);
60
+ }
61
+ .core {
62
+ margin: 0;
63
+ color: var(--roxy-fg, #0a0a0a);
64
+ line-height: 1.6;
65
+ }
66
+ .badges {
67
+ display: flex;
68
+ flex-wrap: wrap;
69
+ gap: var(--roxy-space-xs, 0.25rem);
70
+ }
71
+ .badge {
72
+ display: inline-flex;
73
+ align-items: center;
74
+ gap: var(--roxy-space-xs, 0.25rem);
75
+ padding: 3px 10px;
76
+ border-radius: var(--roxy-radius-full, 9999px);
77
+ font-size: var(--roxy-text-xs, 0.75rem);
78
+ font-weight: var(--roxy-weight-bold, 600);
79
+ background: color-mix(in srgb, var(--roxy-border, #e4e4e7) 35%, transparent);
80
+ color: var(--roxy-fg, #0a0a0a);
81
+ text-transform: capitalize;
82
+ }
83
+ .badge.positive {
84
+ background: color-mix(in srgb, var(--roxy-success, #16a34a) 16%, transparent);
85
+ color: var(--roxy-success-fg, #166534);
86
+ }
87
+ .badge.cautionary {
88
+ background: color-mix(in srgb, var(--roxy-danger, #dc2626) 16%, transparent);
89
+ color: var(--roxy-danger-fg, #991b1b);
90
+ }
91
+ .badge.neutral {
92
+ background: color-mix(in srgb, var(--roxy-info, #0284c7) 16%, transparent);
93
+ color: var(--roxy-info-fg, #075985);
94
+ }
95
+ .chips {
96
+ display: flex;
97
+ flex-wrap: wrap;
98
+ gap: var(--roxy-space-xs, 0.25rem);
99
+ }
100
+ .chips span {
101
+ background: color-mix(in srgb, var(--roxy-accent, #f59e0b) 14%, transparent);
102
+ padding: 2px 8px;
103
+ border-radius: var(--roxy-radius-full, 9999px);
104
+ font-size: var(--roxy-text-xs, 0.75rem);
105
+ }
106
+ .sections {
107
+ display: grid;
108
+ gap: var(--roxy-space-xs, 0.25rem);
109
+ border-top: 1px solid var(--roxy-border, #e4e4e7);
110
+ padding-top: var(--roxy-space-md, 1rem);
111
+ }
112
+ details {
113
+ border: 1px solid var(--roxy-border, #e4e4e7);
114
+ border-radius: var(--roxy-radius-sm, 4px);
115
+ overflow: hidden;
116
+ }
117
+ summary {
118
+ cursor: pointer;
119
+ padding: var(--roxy-space-sm, 0.5rem) var(--roxy-space-md, 1rem);
120
+ font-weight: var(--roxy-weight-bold, 600);
121
+ font-size: var(--roxy-text-sm, 0.875rem);
122
+ list-style-position: inside;
123
+ }
124
+ details p {
125
+ margin: 0;
126
+ padding: 0 var(--roxy-space-md, 1rem) var(--roxy-space-md, 1rem);
127
+ font-size: var(--roxy-text-sm, 0.875rem);
128
+ color: var(--roxy-fg, #0a0a0a);
129
+ line-height: 1.6;
130
+ }
131
+ .affirmation {
132
+ margin: 0;
133
+ background: color-mix(in srgb, var(--roxy-accent, #f59e0b) 12%, transparent);
134
+ border-left: 3px solid var(--roxy-accent, #f59e0b);
135
+ padding: var(--roxy-space-sm, 0.5rem) var(--roxy-space-md, 1rem);
136
+ border-radius: var(--roxy-radius-sm, 4px);
137
+ font-style: italic;
138
+ color: var(--roxy-fg, #0a0a0a);
139
+ }
140
+ .steps h3 {
141
+ margin: 0 0 var(--roxy-space-xs, 0.25rem);
142
+ font-size: var(--roxy-text-xs, 0.75rem);
143
+ color: var(--roxy-muted, #71717a);
144
+ text-transform: uppercase;
145
+ letter-spacing: 0.06em;
146
+ }
147
+ .steps ul {
148
+ margin: 0;
149
+ padding-left: var(--roxy-space-md, 1rem);
150
+ font-size: var(--roxy-text-sm, 0.875rem);
151
+ color: var(--roxy-fg, #0a0a0a);
152
+ display: grid;
153
+ gap: 2px;
154
+ }
155
+ `,
156
+ ];
157
+
158
+ constructor() {
159
+ super();
160
+ // Enables hydrating `data` from a direct-child
161
+ // <script type="application/json" class="roxy-data"> for server-rendered
162
+ // and cached consumers. The JavaScript `data` property still wins.
163
+ new MarkupDataController(this);
164
+ }
165
+
166
+ @property({ attribute: false })
167
+ data: GetAngelNumberResponse | null = null;
168
+
169
+ render() {
170
+ const d = this.data;
171
+ if (!d)
172
+ return html`<div class="roxy-empty" role="status">No angel number</div>`;
173
+
174
+ const energy = (d.energy ?? '').toLowerCase();
175
+ const energyClass =
176
+ energy === 'positive' || energy === 'cautionary' || energy === 'neutral'
177
+ ? energy
178
+ : '';
179
+ const keywords = d.keywords ?? [];
180
+ const steps = d.actionSteps ?? [];
181
+
182
+ return html`<article class="card" aria-label=${`Angel number ${d.number ?? ''}`}>
183
+ <div class="hero">
184
+ ${d.number ? html`<div class="numeral">${d.number}</div>` : nothing}
185
+ <div>
186
+ <p class="label">Angel number</p>
187
+ ${d.title ? html`<h2 class="title">${d.title}</h2>` : nothing}
188
+ </div>
189
+ </div>
190
+ ${d.coreMessage ? html`<p class="core">${d.coreMessage}</p>` : nothing}
191
+ <div class="badges">
192
+ ${d.type ? html`<span class="badge">${d.type}</span>` : nothing}
193
+ ${typeof d.digitRoot === 'number' ? html`<span class="badge">Digit root ${d.digitRoot}</span>` : nothing}
194
+ ${d.energy ? html`<span class=${`badge ${energyClass}`}>${d.energy}</span>` : nothing}
195
+ </div>
196
+ ${
197
+ keywords.length > 0
198
+ ? html`<div class="chips">${keywords.map((k) => html`<span>${k}</span>`)}</div>`
199
+ : nothing
200
+ }
201
+ ${this.renderSections(d)}
202
+ ${d.affirmation ? html`<p class="affirmation">${d.affirmation}</p>` : nothing}
203
+ ${
204
+ steps.length > 0
205
+ ? html`<div class="steps">
206
+ <h3>Action steps</h3>
207
+ <ul>${steps.map((s) => html`<li>${s}</li>`)}</ul>
208
+ </div>`
209
+ : nothing
210
+ }
211
+ </article>`;
212
+ }
213
+
214
+ private renderSections(d: NonNullable<GetAngelNumberResponse>) {
215
+ const meaning = d.meaning;
216
+ if (!meaning) return nothing;
217
+ const present = MEANING_SECTIONS.filter((s) => meaning[s.key]);
218
+ if (present.length === 0) return nothing;
219
+ return html`<div class="sections">
220
+ ${present.map(
221
+ (s, i) => html`<details name="angel-meaning" ?open=${i === 0}>
222
+ <summary>${s.label}</summary>
223
+ <p>${meaning[s.key]}</p>
224
+ </details>`,
225
+ )}
226
+ </div>`;
227
+ }
228
+ }
229
+
230
+ declare global {
231
+ interface HTMLElementTagNameMap {
232
+ 'roxy-angel-number-card': RoxyAngelNumberCard;
233
+ }
234
+ }
package/src/components/angel-number-lookup.ts ADDED
@@ -0,0 +1,208 @@
1
+ import { css, html, LitElement, nothing } from 'lit';
2
+ import { customElement, property } from 'lit/decorators.js';
3
+ import type { AnalyzeNumberSequenceResponse } from '../types/index.js';
4
+ import { baseStyles } from '../utils/base-styles.js';
5
+ import { MarkupDataController } from '../utils/markup-data.js';
6
+
7
+ const MEANING_SECTIONS: ReadonlyArray<{
8
+ key: 'spiritual' | 'love' | 'career' | 'twinFlame';
9
+ label: string;
10
+ }> = [
11
+ { key: 'spiritual', label: 'Spiritual' },
12
+ { key: 'love', label: 'Love' },
13
+ { key: 'career', label: 'Career' },
14
+ { key: 'twinFlame', label: 'Twin flame' },
15
+ ];
16
+
17
+ /**
18
+ * Angel number lookup card. Renders /angel-numbers/lookup: the analysed sequence with its pattern classification (type, digit count, unique digits, palindrome, repeating), the known angel-number meaning when the sequence is in the database, and the foundational digit-root meaning that interprets any sequence. Built for synchronicity trackers where users enter arbitrary numbers.
19
+ */
20
+ @customElement('roxy-angel-number-lookup')
21
+ export class RoxyAngelNumberLookup extends LitElement {
22
+ static styles = [
23
+ baseStyles,
24
+ css`
25
+ .card {
26
+ background: var(--roxy-bg, #fff);
27
+ border: 1px solid var(--roxy-border, #e4e4e7);
28
+ border-radius: var(--roxy-radius-md, 8px);
29
+ padding: var(--roxy-space-lg, 1.5rem);
30
+ box-shadow: var(--roxy-shadow-sm);
31
+ display: grid;
32
+ gap: var(--roxy-space-md, 1rem);
33
+ }
34
+ .hero {
35
+ display: flex;
36
+ align-items: center;
37
+ gap: var(--roxy-space-md, 1rem);
38
+ }
39
+ .numeral {
40
+ font-size: 3rem;
41
+ line-height: 1;
42
+ font-weight: var(--roxy-weight-bold, 600);
43
+ color: var(--roxy-accent-ink, #b45309);
44
+ font-variant-numeric: tabular-nums;
45
+ }
46
+ .label {
47
+ margin: 0;
48
+ font-size: var(--roxy-text-xs, 0.75rem);
49
+ color: var(--roxy-muted, #71717a);
50
+ text-transform: uppercase;
51
+ letter-spacing: 0.06em;
52
+ }
53
+ .title {
54
+ margin: 0;
55
+ font-size: var(--roxy-text-lg, 1.125rem);
56
+ font-weight: var(--roxy-weight-bold, 600);
57
+ }
58
+ .badges {
59
+ display: flex;
60
+ flex-wrap: wrap;
61
+ gap: var(--roxy-space-xs, 0.25rem);
62
+ }
63
+ .badge {
64
+ display: inline-flex;
65
+ align-items: center;
66
+ padding: 3px 10px;
67
+ border-radius: var(--roxy-radius-full, 9999px);
68
+ font-size: var(--roxy-text-xs, 0.75rem);
69
+ font-weight: var(--roxy-weight-bold, 600);
70
+ background: color-mix(in srgb, var(--roxy-border, #e4e4e7) 35%, transparent);
71
+ color: var(--roxy-fg, #0a0a0a);
72
+ text-transform: capitalize;
73
+ }
74
+ .badge.flag {
75
+ background: color-mix(in srgb, var(--roxy-info, #0284c7) 16%, transparent);
76
+ color: var(--roxy-info-fg, #075985);
77
+ }
78
+ .section {
79
+ border-top: 1px solid var(--roxy-border, #e4e4e7);
80
+ padding-top: var(--roxy-space-md, 1rem);
81
+ display: grid;
82
+ gap: var(--roxy-space-sm, 0.5rem);
83
+ }
84
+ .section > .label {
85
+ margin: 0;
86
+ }
87
+ .section h3 {
88
+ margin: 0;
89
+ font-size: var(--roxy-text-base, 1rem);
90
+ font-weight: var(--roxy-weight-bold, 600);
91
+ color: var(--roxy-fg, #0a0a0a);
92
+ }
93
+ .section p {
94
+ margin: 0;
95
+ color: var(--roxy-fg, #0a0a0a);
96
+ line-height: 1.6;
97
+ font-size: var(--roxy-text-sm, 0.875rem);
98
+ }
99
+ .chips {
100
+ display: flex;
101
+ flex-wrap: wrap;
102
+ gap: var(--roxy-space-xs, 0.25rem);
103
+ }
104
+ .chips span {
105
+ background: color-mix(in srgb, var(--roxy-accent, #f59e0b) 14%, transparent);
106
+ padding: 2px 8px;
107
+ border-radius: var(--roxy-radius-full, 9999px);
108
+ font-size: var(--roxy-text-xs, 0.75rem);
109
+ }
110
+ details {
111
+ border: 1px solid var(--roxy-border, #e4e4e7);
112
+ border-radius: var(--roxy-radius-sm, 4px);
113
+ overflow: hidden;
114
+ }
115
+ summary {
116
+ cursor: pointer;
117
+ padding: var(--roxy-space-sm, 0.5rem) var(--roxy-space-md, 1rem);
118
+ font-weight: var(--roxy-weight-bold, 600);
119
+ font-size: var(--roxy-text-sm, 0.875rem);
120
+ list-style-position: inside;
121
+ }
122
+ details p {
123
+ padding: 0 var(--roxy-space-md, 1rem) var(--roxy-space-md, 1rem);
124
+ }
125
+ `,
126
+ ];
127
+
128
+ constructor() {
129
+ super();
130
+ // Enables hydrating `data` from a direct-child
131
+ // <script type="application/json" class="roxy-data"> for server-rendered
132
+ // and cached consumers. The JavaScript `data` property still wins.
133
+ new MarkupDataController(this);
134
+ }
135
+
136
+ @property({ attribute: false })
137
+ data: AnalyzeNumberSequenceResponse | null = null;
138
+
139
+ render() {
140
+ const d = this.data;
141
+ if (!d)
142
+ return html`<div class="roxy-empty" role="status">No number analysis</div>`;
143
+
144
+ const known = d.knownMeaning;
145
+ const root = d.digitRootMeaning;
146
+ const heading = known?.title ?? 'Number analysis';
147
+
148
+ return html`<article class="card" aria-label=${`Number ${d.number ?? ''}`}>
149
+ <div class="hero">
150
+ ${d.number ? html`<div class="numeral">${d.number}</div>` : nothing}
151
+ <div>
152
+ <p class="label">Number analysis</p>
153
+ <h2 class="title">${heading}</h2>
154
+ </div>
155
+ </div>
156
+ <div class="badges">
157
+ ${d.type ? html`<span class="badge">${d.type}</span>` : nothing}
158
+ ${typeof d.digits === 'number' ? html`<span class="badge">${d.digits} digits</span>` : nothing}
159
+ ${typeof d.uniqueDigits === 'number' ? html`<span class="badge">${d.uniqueDigits} unique</span>` : nothing}
160
+ ${typeof d.digitRoot === 'number' ? html`<span class="badge">Digit root ${d.digitRoot}</span>` : nothing}
161
+ ${d.isPalindrome ? html`<span class="badge flag">Palindrome</span>` : nothing}
162
+ ${d.isRepeating ? html`<span class="badge flag">Repeating</span>` : nothing}
163
+ </div>
164
+ ${
165
+ known
166
+ ? html`<div class="section">
167
+ <p class="label">Known angel number</p>
168
+ ${known.coreMessage ? html`<p>${known.coreMessage}</p>` : nothing}
169
+ ${
170
+ known.keywords && known.keywords.length > 0
171
+ ? html`<div class="chips">${known.keywords.map((k) => html`<span>${k}</span>`)}</div>`
172
+ : nothing
173
+ }
174
+ ${this.renderMeaning(known.meaning)}
175
+ ${known.affirmation ? html`<p><em>${known.affirmation}</em></p>` : nothing}
176
+ </div>`
177
+ : nothing
178
+ }
179
+ ${
180
+ root
181
+ ? html`<div class="section">
182
+ <p class="label">Foundational digit root${root.number ? ` (${root.number})` : ''}</p>
183
+ ${root.title ? html`<h3>${root.title}</h3>` : nothing}
184
+ ${root.coreMessage ? html`<p>${root.coreMessage}</p>` : nothing}
185
+ </div>`
186
+ : nothing
187
+ }
188
+ </article>`;
189
+ }
190
+
191
+ private renderMeaning(meaning: Record<string, string> | undefined) {
192
+ if (!meaning) return nothing;
193
+ const present = MEANING_SECTIONS.filter((s) => meaning[s.key]);
194
+ if (present.length === 0) return nothing;
195
+ return html`${present.map(
196
+ (s, i) => html`<details name="lookup-meaning" ?open=${i === 0}>
197
+ <summary>${s.label}</summary>
198
+ <p>${meaning[s.key]}</p>
199
+ </details>`,
200
+ )}`;
201
+ }
202
+ }
203
+
204
+ declare global {
205
+ interface HTMLElementTagNameMap {
206
+ 'roxy-angel-number-lookup': RoxyAngelNumberLookup;
207
+ }
208
+ }