codeapp-js 0.3.0 → 1.0.1

package/AI/skills/sharepoint/SKILL.md

@@ -0,0 +1,77 @@
+---
+name: sharepoint
+description: "Use when: building or debugging SharePoint list, library, file, or HTTP-request flows in a Power Apps Code App, including list-id or environment-variable-based setup."
+---
+
+# SharePoint Connector Guide
+
+> Agent limitation: do not use CLI commands directly from chat for SharePoint setup. Use the built-in Sync Connections and Deploy buttons instead.
+
+## Workflow
+
+Before writing code, prefer these connection approaches:
+
+- A: site URL + list ID
+- B: environment variables that resolve the site URL and list ID
+
+Do not ask the user for a list name as the primary CRUD identifier. If they only know the list name, use `listTables(...)` once to discover the connector table ID and then continue with list-ID operations.
+
+## power.config.json
+
+Expose `sharepointonline` in `connectionReferences`.
+
+```json
+{
+  "connectionReferences": {
+    "sharepointonline": {
+      "id": "/providers/Microsoft.PowerApps/apis/shared_sharepointonline",
+      "displayName": "SharePoint",
+      "dataSources": ["sharepointonline"],
+      "dataSets": {}
+    }
+  }
+}
+```
+
+No Dataverse tables are needed unless the app also uses environment variables.
+
+## Helper Surface
+
+The wrapper in `dev files/sharepoint.js` exports:
+
+- List ID pattern: `getItems`, `getSpItem`, `createSpItem`, `updateSpItem`, `deleteSpItem`
+- Generic helpers: `callSharePointOperation`, `sendHttpRequest`, `listTables`, `listLibrary`
+- File helpers: `createFile`, `updateFile`, `deleteFile`, `moveFile`, `getFileMetadata`
+
+The list-ID helpers use the SharePoint connector table API. `sendHttpRequest(...)` remains available only as an advanced escape hatch when there is no dedicated helper for the operation you need.
+
+## Important Corrections
+
+- The single-item and CRUD helpers for the list-ID path are `getSpItem`, `createSpItem`, `updateSpItem`, and `deleteSpItem` in this repo.
+- `sharepoint.js` encodes `siteUrl` internally with `encodeURIComponent(...)`. Do not pre-encode the URL before passing it in.
+- For environment-variable based setup, import `getEnvironmentVariable(...)` from `./codeapp.js`, not from a separate `environmentVar.js` helper.
+
+## Example Imports
+
+Approach A:
+
+```js
+import { getItems, getSpItem, createSpItem, updateSpItem, deleteSpItem, listTables } from './sharepoint.js';
+```
+
+Approach B:
+
+```js
+import { getItems, getSpItem, createSpItem, updateSpItem, deleteSpItem } from './sharepoint.js';
+```
+
+Approach C:
+
+```js
+import { getEnvironmentVariable } from './codeapp.js';
+import { getItems, createSpItem, updateSpItem, deleteSpItem } from './sharepoint.js';
+```
+
+## Additional Build Nudge
+
+When a SharePoint build introduces or depends on specific lists and columns, create an `agent/listSchema.json` artifact so the user can recreate the list structure correctly.

package/AI/skills/sql/SKILL.md

@@ -0,0 +1,85 @@
+---
+name: sql
+description: "Use when: building or debugging SQL Server connector flows in a Power Apps Code App, including table discovery, row CRUD, native queries, or stored procedure execution."
+---
+
+# SQL Server Connector Guide
+
+> Agent limitation: do not use CLI commands directly from chat for SQL connector setup. Use the built-in Sync Connections and Deploy buttons instead.
+
+## Core Rule
+
+The wrapper in `codeApp/dist/connectors/sql.js` is the repo-local source of truth.
+
+- It retries the data-source names `sql`, `Sql`, and `SQL`.
+- It includes inline metadata for the SQL actions it exposes.
+- The Power Apps runtime special-cases `shared_sql`, so do not guess or hand-roll SQL connector paths.
+
+## power.config.json
+
+Prefer a connection reference whose `dataSources` array contains `sql`.
+
+```json
+{
+  "connectionReferences": {
+    "sqlConnection": {
+      "id": "/providers/Microsoft.PowerApps/apis/shared_sql",
+      "displayName": "SQL Server",
+      "dataSources": ["sql"],
+      "dataSets": {}
+    }
+  }
+}
+```
+
+The connection-reference object key can still vary by environment, but the exposed data-source name should stay aligned with the wrapper.
+
+## Public Helper Surface
+
+The wrapper exports:
+
+- `callSqlOperation(operationName, parameters)`
+- `getSqlTables({ server, database })`
+- `getSqlRows({ server, database, table, apply, filter, orderBy, skip, top, select })`
+- `getSqlRow({ server, database, table, id })`
+- `insertSqlRow({ server, database, table, item })`
+- `updateSqlRow({ server, database, table, id, item })`
+- `deleteSqlRow({ server, database, table, id })`
+- `executeSqlQuery({ server, database, query })`
+- `executeSqlStoredProcedure({ server, database, procedure, parameters })`
+
+## Supported Connector Actions
+
+The wrapper currently maps to these SQL connector actions:
+
+- `GetTables_V2`
+- `GetItems_V2`
+- `GetItem_V2`
+- `PostItem_V2`
+- `PatchItem_V2`
+- `DeleteItem_V2`
+- `ExecutePassThroughNativeQuery_V2`
+- `ExecuteProcedure_V2`
+
+## Important Wrapper Behavior
+
+- `server` and `database` default to `default` when not supplied.
+- `getSqlRows(...)` maps the query options to OData-style connector fields such as `$apply`, `$filter`, `$orderby`, `$skip`, `$top`, and `$select`.
+- Row CRUD helpers expect the SQL connector `table` value plus either `id` or `item`, depending on the operation.
+- `executeSqlStoredProcedure(...)` normalizes `parameters` to `{}` when none are supplied.
+
+## Raw Calls
+
+Use `callSqlOperation(operationName, parameters)` only when a dedicated helper does not already exist.
+
+Do not invent:
+
+- SQL action names
+- parameter field names
+- runtime URL shapes for `shared_sql`
+
+## Debugging
+
+- If the failure mentions a missing connection reference, confirm the app exposes `sql` in `power.config.json`.
+- If the request reaches the connector but returns a path or dataset error, double-check that the code is using the wrapper helpers instead of handwritten SQL action paths.
+- If table reads work but stored procedures do not, verify the wrapper is being passed `procedure` and `parameters` rather than a raw request body shape.

package/AI/skills/start/SKILL.md

@@ -0,0 +1,46 @@
+---
+name: frontend-design
+description: Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
+---
+
+# Frontend Design Skill
+
+This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.
+
+The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints.
+
+## Design Thinking
+
+Before coding, understand the context and commit to a BOLD aesthetic direction:
+
+- **Purpose:** What problem does this interface solve? Who uses it?
+- **Tone:** Pick an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, etc. There are so many flavors to choose from. Use these for inspiration but design one that is true to the aesthetic direction.
+- **Constraints:** Technical requirements (framework, performance, accessibility).
+- For CAP code apps, treat workspace configuration and loaded skills as the source of truth for technical constraints. If `power.config.json` or the agent prompt already fixes the stack, connector, or app name, do not ask the user to restate them.
+- **Differentiation:** What makes this UNFORGETTABLE? What's the one thing someone will remember?
+
+**CRITICAL:** Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity.
+
+Then implement working code in the project's required stack. Default to plain HTML/CSS/JS when the workspace instructions or agent prompt do not explicitly require a framework. Do not ask the user to choose React, Vue, or another framework unless the project requirements are genuinely ambiguous.
+
+- Production-grade and functional
+- Visually striking and memorable
+- Cohesive with a clear aesthetic point-of-view
+- Meticulously refined in every detail
+
+## Frontend Aesthetics Guidelines
+
+Focus on:
+
+- **Typography:** Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt instead for distinctive choices that elevate the frontend's aesthetics; unexpected, characterful font choices. Pair a distinctive display font with a refined body font.
+- **Color & Theme:** Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.
+- **Motion:** Use animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. Only use framework-specific animation libraries when the project already uses that framework. Focus on high-impact moments: one well-orchestrated page load with staggered reveals (animation-delay) creates more delight than scattered micro-interactions. Use scroll-triggering and hover states that surprise.
+- **Spatial Composition:** Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density.
+- **Backgrounds & Visual Details:** Create atmosphere and depth rather than defaulting to solid colors. Add contextual effects and textures that match the overall aesthetic. Apply creative forms like gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, custom cursors, and grain overlays.
+NEVER use generic AI-generated aesthetics like overused font families (Inter, Roboto, Arial, system fonts), cliched color schemes (particularly purple gradients on white backgrounds), predictable layouts and component patterns, and cookie-cutter design that lacks context-specific character.
+
+Interpret creatively and make unexpected choices that feel genuinely designed for the context. No design should be the same. Vary between light and dark themes, different fonts, different aesthetics. NEVER converge on common choices (Space Grotesk, for example) across generations.
+
+IMPORTANT: Match implementation complexity to the aesthetic vision. Maximalist designs need elaborate code with extensive animations and effects. Minimalist or refined designs need restraint, precision, and careful attention to spacing, typography, and subtle details. Elegance comes from executing the vision well.
+
+Remember: Claude is capable of extraordinary creative work. Don't hold back, show what can truly be created when thinking outside the box and committing fully to a distinctive vision.

package/AI/skills/teams/SKILL.md

@@ -0,0 +1,55 @@
+---
+name: teams
+description: "Use when: building or debugging Microsoft Teams connector flows in a Power Apps Code App, including teams, channels, chats, mentions, notifications, message posting, or the Teams HttpRequest helper."
+---
+
+# Microsoft Teams Connector Guide
+
+> Agent limitation: do not use CLI commands directly from chat for Teams setup. Use the built-in Sync Connections and Deploy buttons instead.
+
+## Core Rule
+
+The wrapper in `dev files/teams.js` is the repo-local source of truth.
+
+- It retries `teams`, `Teams`, `microsoftteams`, and `MicrosoftTeams`.
+- It includes inline metadata for the operations it exposes.
+- There is no need to guess connector paths when the helper already defines them.
+
+## power.config.json
+
+Prefer a connection reference whose `dataSources` array includes `teams`.
+
+The connection-reference object key can still be an environment-specific id, but the data-source name exposed to the connector should stay aligned with the wrapper.
+
+## Public Helper Surface
+
+The wrapper exports:
+
+- `listTeams()`
+- `listChannels(teamId)`
+- `getTeam(teamId)`
+- `getChannelDetails(teamId, channelId)`
+- `addMemberToTeam(teamId, body)`
+- `addMemberToChannel(teamId, channelId, body)`
+- `getUserMentionToken(userId)`
+- `getTeamTagMentionToken(teamId, tagId)`
+- `listChats({ top, skip })`
+- `listMembers(teamId, channelId)`
+- `postFeedNotification({ groupId, body })`
+- `postCardInChatOrChannel({ poster, location, body })`
+- `postMessageInChatOrChannel({ poster, location, body })`
+- `sendTeamsGraphHttpRequest({ method, uri, headers, body })`
+- `callTeamsOperation(operationName, parameters)`
+
+## Important Wrapper Behavior
+
+- `postFeedNotification(...)` chooses `PostChannelNotification` when `groupId` is present and `PostUserNotification` otherwise.
+- Chat pagination uses `$top` and `$skip`.
+- Mention helpers return the connector-formatted mention token payload; do not hand-roll those shapes.
+- `sendTeamsGraphHttpRequest(...)` still uses the Teams connector `HttpRequest` action, not direct Graph auth.
+
+## Debugging
+
+- If the failure mentions missing `path`, the operation name does not match the inline Teams metadata.
+- If the failure mentions connection reference lookup, confirm the app exposes `teams` in `power.config.json`.
+- Keep the wrapper candidate names intact when supporting older apps.